:root{
  --sd-blue:#2d304f;
  --sd-orange:#ff8900;
  --sd-bg:#f4f4f6;
  --sd-text:#161616;
  --sd-muted:#666;
  --sd-line:#d9d9df;
  --sd-white:#fff;
}

.about-page{
  background:var(--sd-bg);
  color:var(--sd-text);
  overflow:hidden;
}

.container{
  width:1200px;
  max-width:90%;
  margin:0 auto;
}

/* HERO */
.about-hero{
  background:var(--sd-bg);
  padding:95px 0;
}

.about-hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.about-hero-text span,
.about-kicker{
  display:block;
  color:var(--sd-orange);
  text-transform:uppercase;
  font-weight:800;
  font-size:14px;
  letter-spacing:1.8px;
  margin-bottom:14px;
}

.about-hero-text h1{
  font-size:48px;
  line-height:1.08;
  font-weight:900;
  margin:0 0 22px;
  color:#000;
}

.about-hero-text p{
  font-size:19px;
  line-height:1.7;
  color:#303030;
  max-width:620px;
}

.about-hero-visual{
  position:relative;
}

.about-hero-visual:before{
  content:"";
  position:absolute;
  right:-24px;
  top:-24px;
  width:160px;
  height:160px;
  border-top:5px solid var(--sd-blue);
  border-right:5px solid var(--sd-blue);
}

.about-hero-visual img{
  width:100%;
  height:390px;
  object-fit:cover;
  display:block;
  border-radius:0;
  box-shadow:0 24px 60px rgba(45,48,79,.18);
}

/* SECTIONS */
.about-section{
  padding:90px 0;
  background:var(--sd-bg);
}

.about-light{
  background:#fff;
}

.about-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.about-two-col.reverse{
  direction:rtl;
}

.about-two-col.reverse > *{
  direction:ltr;
}

.about-text h2,
.about-section-head h2,
.timeline-head h2{
  font-size:38px;
  line-height:1.15;
  font-weight:900;
  margin:0 0 20px;
  color:#000;
}

.about-text p{
  color:#444;
  font-size:17px;
  line-height:1.85;
}

.about-image img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  box-shadow:0 18px 45px rgba(45,48,79,.14);
}

/* SOLUTIONS */
.about-solutions{
  padding:95px 0;
}

.about-section-head{
  max-width:760px;
  margin:0 auto 45px;
  text-align:center;
}

.solutions-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.solutions-grid div{
  background:#fff;
  border-left:6px solid var(--sd-orange);
  padding:22px 24px;
  font-size:17px;
  font-weight:700;
  color:var(--sd-blue);
  box-shadow:0 12px 30px rgba(45,48,79,.08);
  transition:.3s ease;
}

.solutions-grid div:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(45,48,79,.14);
}

/* TIMELINE */
.about-timeline-section{
  position:relative;
  padding:115px 0 130px;
  background:linear-gradient(90deg,#fff 0%,#fff 50%,#eeeeF1 50%,#eeeeF1 100%);
}

.timeline-head{
  text-align:center;
  margin-bottom:85px;
}

.timeline-wrap{
  position:relative;
  width:1120px;
  max-width:92%;
  margin:0 auto;
  padding:20px 0;
}

.timeline-line{
  position:absolute;
  left:50%;
  top:0;
  width:4px;
  height:100%;
  background:var(--sd-blue);
  transform:translateX(-50%);
  z-index:1;
}

.timeline-static-dot{
  position:fixed;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  background:var(--sd-orange);
  border-radius:999px;
  transform:translate(-50%,-50%) scale(.45);
  opacity:0;
  z-index:30;
  pointer-events:none;
  box-shadow:0 0 0 10px rgba(255,137,0,.16);
  transition:opacity .3s ease, transform .3s ease;
}

.timeline-static-dot.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.timeline-item{
  position:relative;
  min-height:520px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
}

.timeline-item.left .timeline-content{
  grid-column:1;
  justify-self:end;
  text-align:right;
  padding-right:78px;
}

.timeline-item.right .timeline-content{
  grid-column:2;
  justify-self:start;
  text-align:left;
  padding-left:78px;
}

.timeline-content{
  width:min(470px,100%);
}

.timeline-image{
  height:230px;
  overflow:hidden;
  margin-bottom:22px;
  box-shadow:0 18px 45px rgba(45,48,79,.16);
}

.timeline-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.9);
  transition:transform .7s ease;
}

.timeline-content:hover .timeline-image img{
  transform:scale(1.06);
}

.timeline-content h3{
  color:#000;
  font-size:25px;
  line-height:1.2;
  font-weight:900;
  margin:0 0 12px;
}

.timeline-content p{
  color:#666;
  font-size:17px;
  line-height:1.75;
  margin:0;
}

.timeline-year{
  display:none;
}

/* NODE / KRUG */
.timeline-node{
  position:absolute;
  left:50%;
  top:50%;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#fff;
  border:7px solid var(--sd-blue);
  transform:translate(-50%,-50%) scale(1);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.timeline-node > div{
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:var(--sd-blue);
  transform:scale(1);
  transition:
    background .35s ease,
    transform .35s ease;
}

.timeline-node-number{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:21px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.5px;
}

.timeline-item.is-active .timeline-node{
  transform:translate(-50%,-50%) scale(1.28);
  border-color:var(--sd-orange);
  background:var(--sd-orange);
  box-shadow:0 0 0 12px rgba(255,137,0,.18);
}

.timeline-item.is-active .timeline-node > div{
  background:var(--sd-orange);
  transform:scale(1);
}

.timeline-item.is-active .timeline-node-number{
  color:#fff;
}

/* RESPONSIVE */
@media(max-width:900px){
  .about-hero{
    padding:70px 0;
  }

  .about-hero-inner,
  .about-two-col{
    grid-template-columns:1fr;
    gap:36px;
  }

  .about-two-col.reverse{
    direction:ltr;
  }

  .about-hero-text h1{
    font-size:38px;
  }

  .about-hero-visual img,
  .about-image img{
    height:300px;
  }

  .solutions-grid{
    grid-template-columns:1fr;
  }

  .about-timeline-section{
    background:#f4f4f6;
    padding:80px 0;
  }

  .timeline-head{
    margin-bottom:55px;
  }

  .timeline-line{
    left:34px;
  }

  .timeline-static-dot{
    display:none;
  }

  .timeline-item{
    display:block;
    min-height:auto;
    padding:0 0 70px 86px;
  }

  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content{
    padding:0;
    text-align:left;
    width:100%;
  }

  .timeline-node{
    left:34px;
    top:30px;
    width:58px;
    height:58px;
    border-width:6px;
  }

  .timeline-node > div{
    inset:8px;
  }

  .timeline-node-number{
    font-size:17px;
  }

  .timeline-content{
    width:100%;
  }

  .timeline-image{
    height:210px;
  }
}