.about-wrapper{
    --about-border-color: rgb(233, 77, 26);
    margin-bottom: 100px;
}

.about-wrapper .about-header{
    font-size: 1.75em;
    margin: 20px 0 20px;
}

.about-wrapper .about-top{
    text-align: center;
}

.about-wrapper .about-timeline {
  position: relative;
  width: 100%;
  margin: 50px auto;
  padding: 0 20px;
}

.about-wrapper .timeline-line {
  position: absolute;
  left: 50%;
  top: 50px; 
  width: 1px;
  height: calc(100% - 50px);
  background-color: var(--about-border-color); 
  transform: translateX(-50%);
}

.about-wrapper .timeline-item {
  width: 50%;
  position: relative;
  padding: 20px 30px;
  box-sizing: border-box;
}

.about-wrapper .timeline-item.timeline-item-left {
  text-align: right;
  left: 0;
}

.about-wrapper .timeline-item.timeline-item-right {
  left: 50%;
}

.about-wrapper .timeline-content {
  display: inline-block;
  max-width: 400px;
  text-align: center;
}

.about-wrapper .timeline-content .timeline-item-header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  margin-bottom: 20px;
}

.about-wrapper .timeline-content .timeline-item-text {
    
}

.about-wrapper .about-boxes-wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.about-wrapper .about-boxes-wrapper .about-box{
    padding: 30px 20px;
    border: 1px solid var(--about-border-color);
    text-align: center;
}

.about-wrapper .about-boxes-wrapper .about-box .about-box-header{
    font-size: 1.75em;
    font-weight: 500;
    margin: 10px 0 20px;
}

.about-wrapper .about-boxes-wrapper .about-box .about-box-text{
   margin: 0 0 10px;
}

.about-wrapper .about-block-text{
    text-align: center;
    margin: 60px 0;
}

.about-wrapper .about-specs{
    text-align: center;
    margin: 60px 0 0;
}

.about-wrapper .about-specs .about-specs-wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 30px;
    max-width: 1300px;
    margin: auto;
    margin-top: 50px;
}

.about-wrapper .about-specs .about-specs-wrapper .about-specs-item{
    padding: 40px 40px 30px;
    border: 1px solid var(--about-border-color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.about-wrapper .about-specs .about-specs-wrapper .about-specs-item span{
    position: absolute;
    left: 10px;
    top: 5px;
    color: var(--about-border-color);
    font-size: 24px;
    opacity: 0.8;
}
.about-wrapper .about-specs .about-specs-wrapper .about-specs-item p {
    margin: 0;
}

.about-wrapper .about-prons{
    text-align: center;
    margin: 60px 0 0;
}

.about-wrapper .about-prons .about-prons-wrapper{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.about-wrapper .about-prons .about-prons-wrapper .about-prons-item{
    padding: 0 20px;
}

.about-wrapper .about-prons .about-prons-wrapper .about-prons-item .about-prons-item-header{
    color: var(--about-border-color);
    font-weight: 500;
    font-size: 1.3em;
}

.about-wrapper .about-prons-item::before{ 
    margin: auto;
    margin-bottom: 10px;
}

.about-wrapper .about-prons-item::before{
  background-color: var(--about-border-color);
  border-radius: 50%;
  display: inline-block;
}

@media (max-width: 1300px) {
  .about-wrapper .about-boxes-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .about-wrapper .about-prons .about-prons-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .about-wrapper .about-specs .about-specs-wrapper .about-specs-item {
    padding: 45px 20px 25px;
  }
    
    .about-wrapper .about-specs .about-specs-wrapper .about-specs-item span{
        left: 50%;
        transform: translateX(-50%);
        top: 5px;
    }

}

@media (max-width: 768px) {
    .about-wrapper .about-timeline {
     padding: 0;   
    }
    
 .about-wrapper .timeline-line {
    left: 0px;
     top: 0;
  }

 .about-wrapper .timeline-item,
 .about-wrapper .timeline-item.timeline-item-left,
 .about-wrapper .timeline-item.timeline-item-right {
    width: 100%;
    text-align: left;
    left: 0;
    padding-left: 30px;
  }

  .about-wrapper .timeline-content {
    max-width: 100%;
  }
    
    .about-wrapper .about-boxes-wrapper{
        grid-template-columns: repeat(1, 1fr);
    }
    
    .about-wrapper .about-specs .about-specs-wrapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    
  .about-wrapper .about-prons .about-prons-wrapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }  
}

.about-prons-item::before {
    content: '';
    width: 65px;
    height: 65px;
    padding: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
}

/* Ikona 1: Tarcza z gwiazdką (Doświadczenie i zaufanie) */
.about-prons-item:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8l1.5 3 3.5.5-2.5 2.5.5 3.5-3-1.5-3 1.5.5-3.5L7 11l3.5-.5L12 8z' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ikona 2: Lupa z checkmarkiem (Jakość i kontrola produkcji) */
.about-prons-item:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m21 21-4.35-4.35' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 11l2 2 4-4' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ikona 3: Siatka (Kompleksowa oferta) */
.about-prons-item:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='14' y='3' width='7' height='7' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='14' y='14' width='7' height='7' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='3' y='14' width='7' height='7' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ikona 4: Połączenie/Partnerstwo (Partnerstwo i współpraca) */
.about-prons-item:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v6' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 15v6' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.93 4.93l4.24 4.24' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.83 14.83l4.24 4.24' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12h6' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 12h6' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.93 19.07l4.24-4.24' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.83 9.17l4.24-4.24' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='rgb(255, 255, 255)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}