@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

* h1{
  font-size: 64px;
  color: #202020;
  line-height: 74px;
}

* h2{
  font-size: 64px;
  color: #202020;
}

* p{
  font-size: 16px;
  color: #525252;
  line-height: 27px;
}

.navigation-section{
  width: 100%;
  height: auto; padding-left: 250px; padding-right: 250px; padding-top: 50px; padding-bottom: 50px;

  .navigation-container{
    width: 100%; padding: 16px;
     align-items: center; justify-content: space-between; display: flex; flex-direction: row; gap: 50px; background-color: #f4eaf4; border-radius: 1000px;
  }

  .nav-links{
    display: flex; flex-direction: row; align-items: start; justify-content: center;
  }

  .links{
    display: flex; flex-direction: row; gap: 32px;
  }

  .nav-button button{
     border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #8f2a8d;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 16px; padding-bottom: 16px;
  }

  .nav-button a{
    color: white; text-decoration: none;
  }

  .mobile-sidebar{
    display: none;
  }

  .links a{
    font-size: 16px; text-decoration: none; font-weight: 500; color: black;
  }

  .links ol :hover{
    color: #8f2a8d;
  }

  .links ol-2{
    color: #8f2a8d;
  }
}

.hero-section{
  width: 100%;
  height: auto;
  padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px;

  .hero-container{
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 100px;
  }

  .caption-container{
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  }

  .caption-title{
    display: flex; flex-direction: column; gap: 16px;
    align-items: center; justify-content: center;
  }

  .caption-title h1{
    text-align: center;
    max-width: 900px;
    font-weight: 600;
  }

  .caption-title p{
    text-align: center;
    max-width: 850px;
    color: #525252;
    font-weight: 400;
  }

  .span-highlight{
    font-weight: 700;
    color: #8f2a8d;
    font-style: italic;
  }

  .button-container{
    display: flex; flex-direction: row; gap: 16px;
  }

  .first-button button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #8f2a8d; color: white;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px;
  }
  .second-button button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #f4eaf4;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px; color: #202020;
  }

  .image-container{
    width: 100%; align-items: center;
  }

  .image-container img{
    width: 100%;
    border-radius: 32px;
  }
}

.about-us-section{
  width: 100%; height: fit-content; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px;

  .about-us-container{
    width: 100%; display: flex; flex-direction: column;
    gap: 100px;
  }

  .about-us-caption{
    display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center;
  }

  .about-us-caption p{
    text-align: center;
    max-width: 850px;
    color: #525252;
    font-weight: 400;
  }

  .about-us-content{
    width: 100%; display: flex; flex-direction: row; gap: 24px;
  }

  .description h4{
    font-size: 24px; font-weight: 500;
  }

  .about-us-card{
    width: 100%; padding-left: 20px; display: flex; flex-direction: column; gap: 24px; background-color: #ffeeda; border-radius: 24px;
    padding-right: 20px; padding-top: 48px; padding-bottom: 48px;
  }

  .card-3{
    background-color: #d0ebf6;
  }

  .card-2{
    background-color: #f4eaf4;
  }

  .description{
    display: flex; flex-direction: column; gap: 16px;
  }


  .button-content-container button{
    border-radius: 100px; font-size: 16px; font-weight: 500; border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px; color: #202020; border: 2px solid; border-color: #8f2a8d; background-color: #f4eaf4;
  }

  .button-content-container a{
    text-decoration: none;
  }

  .button-content button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #ffeeda; color: white;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px;
     border: 2px solid; border-color: #f4951f;
  }

  .button-content a{
    text-decoration: none;
  }

  .button-content-continue button{
    border-radius: 100px; font-size: 16px; font-weight: 500; border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px; color: #202020; border: 2px solid; border-color: #24ace3; background-color: #d0ebf6;
  }

  .button-content-continue a{
    text-decoration: none;
  }

  .icon-container{
    width: fit-content; font-size: 24px;
     padding: 20px; border-radius: 100px;
  }

  .about-us-movement{
    width: 100%;
  }

  .about-us-movement img{
    width: 100%; border-radius: 24px;
  }


}

.what-we-do-section{
  width: 100%; height: fit-content; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px;

  .what-we-do-container{
    width: 100%; display: flex; flex-direction: column;
    gap: 100px;
  }

  .container-1{
    width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: center; align-items: center;
  }

  .container-1 p{
    max-width: 900px; text-align: center;
  }

  .container-2{
    display: flex; flex-direction: column; gap: 32px;
  }

  .card{
    display: flex; flex-direction: row; gap: 24px;
  }

  .caption{
    display: flex; flex-direction: column; gap: 32px; background-color: #201e4b; padding: 48px; width: 40%; border-radius: 24px;
  }

  .icon-container{
    width: fit-content; font-size: 24px;
    padding: 20px; border-radius: 100px; background-color: #f4eaf4; color: #8f2a8d;
  }

  .content-caption{
    display: flex; flex-direction: column;gap: 32px;
  }

  .content-caption p{
    color: #cccccc; font-weight: 400;
  }

  .content-caption h4{
    font-size: 32px; color: white;
  }

  .image-content{
    width: 60%;height: auto;
  }

  .image-content img{
    width: 100%; border-radius: 24px; height: 100%;
  }

  
}

.call-to-action-section{
  width: 100%; height: fit-content; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px;

  .call-to-action-container{
    width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start;
    background-color: #f4eaf4; padding-left: 50px; border-radius: 24px; padding-right: 50px; padding-top: 100px; column-gap: 100px;
  }

  .call-to-action-caption{
    display: flex; flex-direction: column; gap: 40px;
  }

  .caption-content{
    display: flex; flex-direction: column; gap: 16px;
  }

  .caption-content h2{
    font-size: 48px; line-height: 48px;
  }

  .caption-button button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #8f2a8d; color: white;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px;
  }

  .call-to-action-image{
    width: fit-content; align-items: start; display: flex; flex-direction: column;
  }
  .call-to-action-image img{
  width: fi; height: 100%;
  }
}

.our-services-section{
  width: 100%; height: fit-content; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px;

  .our-service-container{
    width: 100%; display: flex; flex-direction: column; gap: 100px;
  }

  .service-caption{
    display: flex; flex-direction: column; gap: 24px;
  }

  .service-caption p{
    max-width: 800px;
  }

  .card-container{ 
    width: 100%; height: auto; display: flex; flex-direction: row; column-gap: 24px; justify-content: start; align-items: start;
  }


  .services-card{
    width: fit-content; align-items: center;
    padding: 24px; display: flex; flex-direction: column; gap: 32px; background-color: #f7f7f773; border-radius: 24px; border: 1px solid; border-color: rgba(169, 169, 169, 0.567);
  }

  .description{ 
    display: flex; flex-direction: column; gap: 16px; align-items: center;
  }

  .description p{
    text-align: center;
  }

  .service-button button{
    width: 100%;
     font-size: 16px; font-weight: 500; background-color: #f4eaf4;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px; color: #202020; display: flex; flex-direction: row;align-items: center;
    gap: 16px; justify-content: center; border-radius: 16px;

  }

  .icon-container{
    width: fit-content; font-size: 24px;
    padding: 16px; border-radius: 100px; background-color: #f4eaf4; color: #8f2a8d; align-items: center; justify-content: center;

  }


}

.testimonials-video{
  width: 100%; height: auto; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px;

  .testimonial-video-container{
    align-items: center; display: flex; flex-direction: row; justify-content: center;
  }

  .testimonial-video-container video{
    border-radius: 24px; height: 500px;
  }
}


.faqs-section{
  width: 100%; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px; background-color: #f5f5f5;

  .faqs-container{
    width: 100%; display: flex; flex-direction: column; row-gap: 100px; align-items: start; justify-content: start;
  }

  .faqs-question-container{
    display: flex; flex-direction: column; row-gap: 16px; width: 100%;
  }

  .faqs-question-card{
    background-color: #8f2a8d; display: flex; flex-direction: row; width: 100%; padding: 32px;
    align-items: center; justify-content: space-between;
    border-radius: 16px;
  }

  .card-title h4{
    font-size: 24px; color: white; font-weight: 400;
  }

  .card-faq-icon{
    color: white;
  }
}

.footer-section{
  width: 100%; height: auto; padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px; background-color: white;

  .footer-container{
    width: 100%; display: flex; flex-direction: row;justify-content: start; align-items: start; column-gap: 160px;
  }

  .first-container{
    display: flex; flex-direction: column; gap: 24px;
  }

  .media-links{
    display: flex; flex-direction: row; gap: 12px;
  }

  .media-icons{
    font-size: 20px; color: white; background-color: #201e4b; border-radius: 1000px; padding-left: 12px; padding-right: 12px; padding-top: 9px; padding-bottom: 9px;
  }

  .contact-links{
    display: flex; flex-direction: column;gap: 4px;
  }

  .contact-links p{
    font-weight: 500; color: #201e4b; font-size: 16px;
  }

  .highlights{
    color: #8f2a8d;
  }

  .nav-links{
    display: flex; flex-direction: column; gap: 16px;
  }

  .nav-links h4{
    font-size: 16px; font-weight: 500; color: #111111;
  }

  .links{
    display: flex; flex-direction: column; gap: 16px;
  }

  .links ol{
    font-size: 16px; font-weight: 350; color: #525252;

  }
}





@media (max-width:768px) {
  * h1{
    font-size: 40px;
    color: #202020;
    line-height: 54px;
  }
  
  * p{
    font-size: 16px;
    color: #525252;
    line-height: 28px;
  }
  
.navigation-section{
  width: 100%;
  height: auto; padding: 24px;

  .navigation-container{
    width: 100%; padding-left: 20px; padding-right: 20px; padding-top: 16px; padding-bottom: 16px;
     align-items: center; justify-content: space-between; display: flex; flex-direction: row; gap: 50px; background-color: #f4eaf4; border-radius: 1000px;
  }

  .nav-links{
    display: none; 
  }

  .links{
    display: none; 
  }

  .nav-button button{
     display: none;
  }

  .mobile-sidebar{
    display: flex; color: #201e4b; font-size: 24px;
  }

  .brand-logo img{
    width: 100px;
  }

}

.hero-section{
  width: 100%;
  height: auto;
  padding-left: 24px; padding-right: 24px; padding-top: 32px; padding-bottom: 32px;

  .hero-container{
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px;
  }

  .caption-container{
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  }

  .caption-title{
    display: flex; flex-direction: column; gap: 16px;
    align-items: center; justify-content: center;
  }

  .caption-title h1{
    text-align: center;
    font-weight: 600;
  }

  .caption-title p{
    text-align: center;
    color: #525252;
    font-weight: 400;
  }

  .span-highlight{
    font-weight: 700;
    color: #8f2a8d;
    font-style: italic;
  }

  .button-container{
    display: flex; flex-direction: row; column-gap: 16px;
  }

  .first-button button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #8f2a8d; color: white;
    border: none; padding-left: 24px; padding-right: 24px; padding-top: 12px; padding-bottom: 12px;
  }
  .second-button button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #f4eaf4;
    border: none; padding-left: 24px; padding-right: 24px; padding-top: 12px; padding-bottom: 12px; color: #202020;
  }

  .image-container{
    width: 100%; align-items: center;
  }

  .image-container img{
    width: 100%; height: 100%;
    border-radius: 32px;
  }
}

.about-us-section{
  width: 100%; height: fit-content; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px;

  .about-us-container{
    width: 100%; display: flex; flex-direction: column;
    gap: 50px;
  }

  .about-us-caption{
    display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center;
  }

  .about-us-caption p{
    text-align: center;
    color: #525252;
    font-weight: 400;
  }

  .about-us-content{
    width: 100%; display: flex; flex-direction: column; gap: 24px;
  }

  .description h4{
    font-size: 24px; font-weight: 500;
  }

  .about-us-card{
    width: 100%; padding-left: 16px; display: flex; flex-direction: column; gap: 24px; background-color: #ffeeda; border-radius: 24px;
    padding-right: 16px; padding-top: 32px; padding-bottom: 32px;
  }

  .card-3{
    background-color: #d0ebf6;
  }

  .card-2{
    background-color: #f4eaf4;
  }

  .description{
    display: flex; flex-direction: column; gap: 16px;
  }


  .button-content-container button{
    border-radius: 100px; font-size: 16px; font-weight: 500; border: none; padding-left: 24px; padding-right: 24px; padding-top: 12px; padding-bottom: 12px; color: #202020; border: 2px solid; border-color: #8f2a8d; background-color: #f4eaf4;
  }

  .button-content-container a{
    text-decoration: none;
  }

  .button-content button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #ffeeda; color: white;
    border: none; padding-left: 24px; padding-right: 24px; padding-top: 12px; padding-bottom: 12px;
     border: 2px solid; border-color: #f4951f;
  }

  .button-content a{
    text-decoration: none;
  }

  .button-content-continue button{
    border-radius: 100px; font-size: 16px; font-weight: 500; border: none; padding-left: 24px; padding-right: 24px; padding-top: 12px; padding-bottom: 12px; color: #202020; border: 2px solid; border-color: #24ace3; background-color: #d0ebf6;
  }

  .button-content-continue a{
    text-decoration: none;
  }

  .icon-container{
    width: fit-content; font-size: 20px;
     padding: 20px; border-radius: 100px;
  }

  .about-us-movement{
    width: 100%;
  }

  .about-us-movement img{
    width: 100%; border-radius: 24px; height: 100%;
  }
}

.what-we-do-section{
  width: 100%; height: fit-content; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px;

  .what-we-do-container{
    width: 100%; display: flex; flex-direction: column;
    gap: 50px;
  }

  .container-1{
    width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: center; align-items: center;
  }

  .container-1 p{
     text-align: center;
  }

  .container-2{
    display: flex; flex-direction: column; gap: 32px;
  }

  .card{
    width: 100%;
    display: flex; flex-direction: column; gap: 24px;
  }

  .container-card-2{
    display: flex; flex-direction: column-reverse;

  }

  .caption{ width: 100%;
    display: flex; flex-direction: column; gap: 24px; background-color: #201e4b; border-radius: 24px; padding-left: 20px; padding-right: 20px; padding-top: 32px; padding-bottom: 32px;
  }

  .icon-container{
    width: fit-content; font-size: 24px;
    padding: 20px; border-radius: 100px; background-color: #f4eaf4; color: #8f2a8d;
  }

  .content-caption{
    display: flex; flex-direction: column;gap: 32px;
  }

  .content-caption p{
    color: #cccccc; font-weight: 400;
  }

  .content-caption h4{
    font-size: 32px; color: white;
  }

  .image-content{
    width: 100%;height: auto;
  }

  .image-content img{
    width: 100%; border-radius: 24px; height: 100%;
  }
}

.call-to-action-section{
  width: 100%; height: fit-content; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px;

  .call-to-action-container{
    width: 100%; display: flex; flex-direction: column; justify-content: start; align-items: start;
    background-color: #f4eaf4; padding-left: 24px; border-radius: 24px; padding-right: 24px; padding-top: 50px; row-gap: 100px;
  }

  .call-to-action-caption{
    display: flex; flex-direction: column; gap: 40px;
  }

  .caption-content{
    display: flex; flex-direction: column; gap: 16px;
  }

  .caption-content h2{
    font-size: 48px; line-height: 48px;
  }

  .caption-button button{
    border-radius: 100px; font-size: 16px; font-weight: 500; background-color: #8f2a8d; color: white;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px;
  }

  .call-to-action-image{
    width: fit-content; align-items: start; display: flex; flex-direction: column;
  }
  .call-to-action-image img{
  width: 100%; height: 100%;
  }
}

.our-services-section{
  width: 100%; height: fit-content; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px;

  .our-service-container{
    width: 100%; display: flex; flex-direction: column; gap: 50px;
  }

  .service-caption{
    display: flex; flex-direction: column; gap: 24px;
  }

  .card-container{ 
    width: 100%; height: auto; display: flex; flex-direction: column; row-gap: 24px; justify-content: start; align-items: start;
  }


  .services-card{
    width: fit-content; align-items: center;
   display: flex; flex-direction: column; gap: 32px; background-color: #f7f7f773; border-radius: 24px; border: 1px solid; border-color: rgba(169, 169, 169, 0.567);
   padding-left: 20px; padding-right: 20px; padding-top: 32px; padding-bottom: 32px;
  }

  .description{ 
    display: flex; flex-direction: column; gap: 16px; align-items: center;
  }

  .description p{
    text-align: center;
  }

  .service-button button{
    width: 100%;
     font-size: 16px; font-weight: 500; background-color: #f4eaf4;
    border: none; padding-left: 32px; padding-right: 32px; padding-top: 14px; padding-bottom: 14px; color: #202020; display: flex; flex-direction: row;align-items: center;
    gap: 16px; justify-content: center; border-radius: 16px;

  }

  .icon-container{
    width: fit-content; font-size: 24px;
    padding: 16px; border-radius: 100px; background-color: #f4eaf4; color: #8f2a8d; align-items: center; justify-content: center;

  }
}

.testimonials-video{
  width: 100%; height: auto; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px;

  .testimonial-video-container{
    align-items: center; display: flex; flex-direction: row; justify-content: center; width: 100%; height: auto;
  }

  .testimonial-video-container video{
    border-radius: 24px; height: 100%; width: 100%;
  }
}

.faqs-section{
  width: 100%; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px;

  .faqs-container{
    width: 100%; display: flex; flex-direction: column; row-gap: 50px; align-items: start; justify-content: start;
  }

  .faqs-question-container{
    display: flex; flex-direction: column; row-gap: 16px; width: 100%;
  }

  .faqs-question-card{
    background-color: #8f2a8d; display: flex; flex-direction: row; width: 100%; padding-left: 16px; padding-right: 16px; padding-top: 24px; padding-bottom: 24px;
    align-items: center; justify-content: space-between;
    border-radius: 12px; column-gap: 32px;
  }

  .card-title h4{
    font-size: 16px; color: white; font-weight: 400;line-height: 27px;
  }

  .card-faq-icon{
    color: white;
  }
 
}

.footer-section{
  width: 100%; height: auto; padding-left: 24px; padding-right: 24px; padding-top: 50px; padding-bottom: 50px; background-color: white;

  .footer-container{
    width: 100%; display: flex; flex-direction: column;justify-content: start; align-items: start; row-gap: 32px;
  }

  .first-container{
    display: flex; flex-direction: column; gap: 24px;
  }

  .media-links{
    display: flex; flex-direction: row; gap: 12px;
  }

  .media-icons{
    font-size: 20px; color: white; background-color: #201e4b; border-radius: 1000px; padding-left: 12px; padding-right: 12px; padding-top: 9px; padding-bottom: 9px;
  }

  .contact-links{
    display: flex; flex-direction: column;gap: 4px;
  }

  .contact-links p{
    font-weight: 500; color: #201e4b; font-size: 16px;
  }

  .highlights{
    color: #8f2a8d;
  }

  .nav-links{
    display: flex; flex-direction: column; gap: 16px;
  }

  .nav-links h4{
    font-size: 16px; font-weight: 500; color: #111111;
  }

  .links{
    display: flex; flex-direction: column; gap: 16px;
  }

  .links ol{
    font-size: 16px; font-weight: 350; color: #525252;

  }
}





}