
.about-page{
  padding-bottom:70px;
  background:#f6f8fb;
}

.about-hero{
  position:relative;
  overflow:hidden;
  padding:82px 0 76px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 0,rgba(35,116,208,.42),transparent 32%),
    radial-gradient(circle at 90% 100%,rgba(237,115,19,.16),transparent 28%),
    linear-gradient(135deg,#061b45,#082b67 58%,#0d3f83);
}

.about-hero:after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:-130px;
  bottom:-260px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
}

.about-hero__inner{
  position:relative;
  z-index:1;
}

.about-eyebrow{
  display:inline-flex;
  margin-bottom:14px;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#9bc9ff;
  background:rgba(255,255,255,.07);
  font-size:12px;
  font-weight:900;
}

.about-hero h1{
  margin:0;
  color:#fff;
  font-size:clamp(31px,4vw,52px);
  line-height:1.55;
}

.about-hero h2{
  margin:12px 0 18px;
  color:#f3a45f;
  font-size:clamp(18px,2vw,26px);
  line-height:1.8;
}

.about-hero p{
  max-width:900px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:2.15;
}

.about-hero p strong{
  color:#fff;
}

.about-section{
  margin-top:-30px;
  position:relative;
  z-index:2;
}

.about-content{
  padding:44px 48px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
  box-shadow:0 20px 55px rgba(6,27,69,.09);
}

.about-content>p{
  max-width:1050px;
  margin:0 0 18px;
  color:#45556d;
  font-size:14px;
  line-height:2.2;
}

.about-content>p strong{
  color:var(--navy-900);
}

.about-content>h2{
  position:relative;
  margin:48px 0 22px;
  padding-right:18px;
  color:var(--navy-950);
  font-size:25px;
  line-height:1.7;
}

.about-content>h2:before{
  content:"";
  position:absolute;
  top:10px;
  right:0;
  width:5px;
  height:26px;
  border-radius:5px;
  background:linear-gradient(var(--blue-600),var(--orange-600));
}

.about-reasons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
}

.about-reasons article{
  position:relative;
  min-height:190px;
  padding:25px 22px;
  border:1px solid #e2e9f2;
  border-radius:20px;
  background:
    linear-gradient(180deg,#fff,#f9fbfe);
  transition:transform 180ms ease,box-shadow 180ms ease;
}

.about-reasons article:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(6,27,69,.08);
}

.about-reasons article:before{
  content:"";
  display:block;
  width:42px;
  height:5px;
  margin-bottom:18px;
  border-radius:5px;
  background:var(--blue-600);
}

.about-reasons article:nth-child(2):before{
  background:var(--orange-600);
}

.about-reasons article:nth-child(3):before{
  background:#6e63b7;
}

.about-reasons h3{
  margin:0 0 9px;
  color:var(--navy-950);
  font-size:16px;
}

.about-reasons p{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:2;
}

.about-goals{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 15px;
  list-style:none;
}

.about-goals li{
  position:relative;
  min-height:54px;
  padding:15px 48px 15px 16px;
  border:1px solid #e4eaf2;
  border-radius:14px;
  display:flex;
  align-items:center;
  color:#314462;
  background:#fbfdff;
  font-size:12.5px;
  font-weight:700;
  line-height:1.8;
}

.about-goals li:before{
  content:"✓";
  position:absolute;
  right:14px;
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue-600);
  background:var(--blue-100);
  font-size:13px;
  font-weight:900;
}

.about-closing{
  margin-top:46px;
  padding:34px 36px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 10% 0,rgba(35,116,208,.42),transparent 34%),
    linear-gradient(125deg,#061b45,#0b3676);
}

.about-closing h2{
  margin:0 0 10px;
  color:#fff;
  font-size:23px;
  line-height:1.7;
}

.about-closing p{
  max-width:900px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13.5px;
  line-height:2.1;
}

.about-actions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.about-button{
  min-height:44px;
  padding:0 18px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

.about-button--primary{
  color:#fff;
  background:var(--orange-600);
}

.about-button--secondary{
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  background:rgba(255,255,255,.08);
}

.about-footer{
  padding:25px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  background:#fff;
}

.about-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.about-footer p{
  margin:4px 0 0;
  font-size:11px;
}

.about-footer a{
  color:var(--blue-600);
  font-size:12px;
  font-weight:900;
}

@media(max-width:920px){
  .about-hero{
    padding:62px 0 60px;
  }

  .about-content{
    padding:34px 28px;
  }

  .about-reasons{
    grid-template-columns:1fr;
  }

  .about-goals{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .about-hero{
    padding:44px 0 52px;
  }

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

  .about-hero h2{
    font-size:18px;
  }

  .about-hero p{
    font-size:13px;
  }

  .about-content{
    padding:27px 17px;
    border-radius:19px;
  }

  .about-content>h2{
    margin-top:36px;
    font-size:21px;
  }

  .about-content>p{
    font-size:13px;
  }

  .about-reasons article{
    min-height:0;
  }

  .about-closing{
    padding:26px 19px;
  }

  .about-actions{
    display:grid;
  }

  .about-footer__inner{
    flex-direction:column;
    text-align:center;
  }
}



/* Contact form */
.about-contact{
  margin-top:48px;
  padding:34px 36px;
  border:1px solid #e1e8f1;
  border-radius:22px;
  background:#f9fbfe;
}

.about-contact__heading{
  max-width:760px;
  margin-bottom:24px;
}

.about-contact__heading h2{
  margin:8px 0 7px;
  color:var(--navy-950);
  font-size:23px;
  line-height:1.7;
}

.about-contact__heading p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:2;
}

.about-contact__success{
  margin-bottom:20px;
  padding:14px 17px;
  border:1px solid #b7ecd3;
  border-radius:12px;
  color:#08754c;
  background:#edfdf5;
  font-size:12px;
  font-weight:800;
}

.about-contact__form{
  margin-top:20px;
}

.about-contact__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
}

.about-contact__field{
  display:grid;
  gap:7px;
}

.about-contact__field--full{
  grid-column:1/-1;
}

.about-contact__field label{
  color:var(--navy-900);
  font-size:12px;
  font-weight:900;
}

.about-contact__field label span{
  color:#8a96a8;
  font-size:10px;
  font-weight:700;
}

.about-contact__field input,
.about-contact__field textarea{
  width:100%;
  border:1px solid #d8e0eb;
  border-radius:12px;
  outline:0;
  color:var(--navy-950);
  background:#fff;
  font:inherit;
  font-size:13px;
  transition:border-color 150ms ease,box-shadow 150ms ease;
}

.about-contact__field input{
  min-height:46px;
  padding:0 13px;
}

.about-contact__field textarea{
  min-height:150px;
  padding:13px;
  resize:vertical;
  line-height:1.9;
}

.about-contact__field input:focus,
.about-contact__field textarea:focus{
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(23,104,186,.09);
}

.about-contact__field small{
  color:#c0392b;
  font-size:10px;
  font-weight:700;
}

.about-contact__actions{
  margin-top:20px;
  display:flex;
  justify-content:flex-start;
}

.about-contact__actions button{
  min-height:45px;
  padding:0 24px;
  border:0;
  border-radius:11px;
  cursor:pointer;
  color:#fff;
  background:var(--blue-600);
  box-shadow:0 10px 22px rgba(23,104,186,.18);
  font-size:12px;
  font-weight:900;
  transition:transform 150ms ease,box-shadow 150ms ease;
}

.about-contact__actions button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 27px rgba(23,104,186,.24);
}

@media(max-width:620px){
  .about-contact{
    padding:25px 16px;
  }

  .about-contact__grid{
    grid-template-columns:1fr;
  }

  .about-contact__field--full{
    grid-column:auto;
  }

  .about-contact__actions button{
    width:100%;
  }
}
