@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root{
--primary-blue:#2D99AD;
--grey:#3F3E3E;
--text-grey:#3F3E3E;
--bg-white:#f5f5f5;
--white:#ffffff;
--black:#000000;
--section-white:#F0F0F0;

}
html , body{
    height: 100%;
    width: 100%;
}
html{
    scroll-behavior: smooth;
}
body{
     font-family: "Roboto", sans-serif;
    font-size: 12px;
    overflow-x: hidden;
    background: var(--white);
}
a{
    text-decoration: none;
}
button{
    border: none;
    background: none;
     font-family: "Roboto", sans-serif;
}
img{
    width: 100%;
    height: 100%;
}
h1,h2,h3,h4,h5,h6{
     font-family: "Roboto", sans-serif;
}
p,button,a{
     font-family: "Roboto", sans-serif;
}
ul{
    list-style: none;
}
p{
    line-height: 1.5;
}
.section{
        max-width: 1180px;
    margin: 0 auto;
}

/* NAV */
nav{
    background: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 4px 4px 0px #2D99AD1A;
    z-index: 1000;
}
.nav-content{

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    position: relative;
}

.nav-logo{
    max-width: 219px;
}
.nav-items{
     display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.nav-search-input,.menu-search-input{
      display: none;
     background: var(--primary-blue);
     border-radius: 3px;
}

.nav-search-input input,.menu-search-input input{
    padding: 5px 20px;
    outline: none;
    border: none;
    max-width: 147px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background: var(--bg-white);

}
.nav-search-input input:focus,.menu-search-input input:focus{
    outline: none;

}
.nav-search-input #search::placeholder,.menu-search-input input::placeholder{
font-weight: 500;
font-size: 10px;
line-height: 1;
letter-spacing: 0;
color: var(--grey);

}
.nav-search-icon,.menu-search-icon{
    padding: 2px 10px;
    align-content: center;
    cursor: pointer;
}
.nav-search-icon img,.menu-search-icon img{
    min-width: 16px;
}
.menu-toggler{
    height: 25px;
    width: 25px;
    padding: 3px;
    background: var(--primary-blue);
    border-radius: 3px;
     display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.nav-menu{
    position: absolute;
    width: 100%;
    max-width: 237px;
    right: 50px;
    top: 30px;
    border-radius: 10px;
    border-top-right-radius: 0px;
    background: var(--white);
    box-shadow: 0px 0px 5px 0px #2D99AD;
    overflow: hidden;
    min-height: 360px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-menu-active{
    opacity: 1;
   visibility: visible;
   pointer-events: auto;
}
.nav-menu-img{
    height: 96px;
}
.nav-menu-img img{
    object-fit: cover;
}
.nav-menu-content{
    padding: 20px 50px;
    display: grid;
    justify-content: center;
}
.nav-menu-li{
    padding-block: 20px;
}
.nav-menu-li img{
max-height: 15px;
max-width: 24px;
}
.nav-menu-li a{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
}
.nav-menu-li li{
    border-bottom: 1px solid var(--primary-blue);
}
.nav-menu-li p{
font-weight: 500;
font-size: 17px;
line-height: 1;
color: var(--primary-blue);
}
.menu-search-input{
    display: flex;
}

body > p{
font-size: 40px;
}

/* HERO */
.hero{
    margin-top: 84.45px;
     position: relative;
  overflow: hidden;
}
.hero-art{
    position: relative;
    z-index: 1;
    
}
.hero-art-img1{
background:url('./assets/slideImg1.webp') center/cover no-repeat;
}
.hero-art-img2{
background:url('./assets/slideImg2.webp') center/cover no-repeat;
}
.hero-art-img3{
background:url('./assets/slideImg3.webp') center/cover no-repeat;
}
.swiper {
      width: 100%;
      height: 100%;
    }
.swiper-pagination{
    position: absolute;
  bottom: 15% !important; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; 
}
.swiper-pagination-bullet {
  background-color: var(--white) !important; 
  opacity: 1 !important; 
  width: 12.22px !important;
  height: 10.99px !important;
}
.swiper-pagination-bullet-active {
  background-color: var(--primary-blue) !important;
}


.hero-art-bg{
    background: rgba(0, 0, 0, 0.751);
    padding: 40px 20px;
    cursor: pointer;
    position: relative;
    min-height: 360px;
}

.hero-art-content{
    text-align: center;
    display: grid;
    align-items: center;
    
    gap: 10px;
    max-width: 1140px;
    margin: 0 auto;
}

.hero-art-content h2{
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 1.2;
letter-spacing: 2%;
 color: var(--primary-blue);
}

.hero-art-content > p{
font-weight: 600;
font-size: 16px;
line-height: 1.2;
color: var(--white);

}


/* FEATURES */
.feat-container{
    padding: 20px;
}
.feature-sect{
    max-width: 1180px;
    margin: 0 auto;
   
    background: var(--section-white);
    border-radius: 10px;
    overflow: hidden;
}
.feature-content{

    display: grid;
    gap: 20px;
}
.feature-content > div:first-child{
    padding: 40px 20px;
    display: grid;
    gap: 39px;
    
}
.feature-content h2{
font-weight: 700;
font-size: 28px;
line-height: 1.1;
color: var(--primary-blue);

}
.feature-content h2 span{
    color: var(--grey);
}
.feature-content p{
    color: var(--black);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0%;

}
.feature-img img{ 
    object-fit: cover;
}
.feature-cards{
    display: flex;
    gap:10px;
    
    justify-content: center;
    flex-wrap: wrap;
}
.feature-content h6{
    color: var(--primary-blue);
font-weight: 700;
font-size: 16px;
line-height: 1.1;
letter-spacing: 0%;

}
.feat-card{
    padding: 40px 20px;
    background: var(--white);
    box-shadow: 0px 0px 7px 0px #2D99AD4F;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 180px;
}
.feat-cardImg{
    max-height: 38px;
    width: fit-content;
}
.feat-card p{
color: var(--black);
font-weight: 400;
font-size: 13px;
line-height: 1.3;
text-align: center;

}

/* Result */
.result-cont{
    padding: 10px 20px ;
}
.result-sect{
    background: var(--primary-blue);
    border-radius: 10px;
    padding: 40px 20px;
    color: var(--white);
    text-align: center;
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.result-sect h2,.offer-content h2{
font-weight: 700;
font-size: 28px;
line-height: 1.5;

}
.result-sect p,.offer-content p{
max-width: 835px;
font-weight: 400;
font-size: 16px;
line-height: 1.5;

}
/* OFFERINGS */
.offer-cont{
    padding: 10px 20px;
}
.offer-sect{
    background: url('./assets/offerimg.webp') center/cover no-repeat;
    border-radius: 10px;
    /* overflow: hidden; */
    padding: 15px;
    position: relative;
}
.offer-content{
    background: var(--primary-blue);
    padding: 40px 20px;
    border-radius: 10px;
    color: var(--white);
    text-align: center;
    max-width: 865px;
    margin-inline: auto;
    margin-top: 40px;
    padding-bottom: 140px;
    
}
.offer-content p{
    max-width: none;
}
.offer-cards{
    margin-top: -80px;
    display: grid;
    gap: 15px;
}
.offer-card{
    background: var(--white);
    border-radius: 10px;
    padding: 30px 20px;
}
.offer-card h3{
font-weight: 700;
font-size: 15px;
line-height: 26px;
color: var(--primary-blue);
}
.offer-card p{
    color: var(--black);
font-weight: 400;
font-size: 13px;
line-height: 20px;
}
.offer-btn,.team-btn{
    margin-top: 30px;
    color: var(--black);
font-weight: 400;
font-size: 16px;
line-height: 1.3;
display: flex;
gap: 10px;
cursor: pointer;
transition: all .3s ease-out;

}
.offer-btn-icon,.team-btn-icon{
    display: flex;
    align-items: center;
}

.off-btn-line,.team-btn-line{
    transition: all .3s ease-out;
   width: 37px;
   height: 1px;
   background: var(--primary-blue);
}
.off-btn-circle,.team-btn-circle{
    transition: all .3s ease-out;
    border: 1px solid var(--grey);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -20%;
}
.off-btn-circle span,.team-btn-circle span{
    transition: all .3s ease-out;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-blue);
}
.offer-btn:hover,.team-btn:hover{
    color: var(--primary-blue);
}
.offer-btn:hover .off-btn-circle,.team-btn:hover .team-btn-circle{
    border: 1px solid var(--primary-blue);
}
.offer-btn:hover .off-btn-line,.offer-btn:hover .off-btn-circle span,.team-btn:hover .team-btn-line,.team-btn:hover .team-btn-circle span{
    background: var(--grey);
}
.offer-modal-cont{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.71);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.offer-modal-active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.offer-modal{
    display: grid;
    grid-template-rows: 1fr 200px;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    max-width: 932px;
}
.off-modalImg img{
    object-fit: cover;
}
.off-modal-content{
    padding: 20px;
    padding-bottom: 40px;
    display: grid;
    gap: 10px;


}
.off-modalClose,.team-modalClose{
    font-size: 22px;
    color: var(--grey);
    box-shadow: 0px 0px 10px 0px #2D99AD99;
    max-width: fit-content;
    justify-self: flex-end;
    cursor: pointer;
}
.off-modal-line{
    width: 80px;
    height: 7px;
    background: var(--primary-blue);
    
}
.off-modal-text{
font-weight: 400;
font-size: 14px;
line-height: 34px;
color: var(--black);
display: grid;
gap: 10px;
}
.off-modal-text h4{
    font-weight: 600;
    color: var(--primary-blue);
}
.off-modal-text h3{
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 20px;
}
.off-modal-text ul{
    list-style: disc;
    margin-left: 20px;
}

/* DIFFERENCES SECTION */
.diff-cont{
    margin-block: 20px;
    background: #D9D9D966;
}
.diff-h{
    background: var(--primary-blue);
    padding: 20px;
}

.diff-h h2{
color: var(--white);
font-weight: 700;
font-size: 28px;
line-height: 56px;

}
.diff-content{
    padding: 20px;
    display: grid;
    gap: 20px;
}
.diff-cont-p{
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: var(--grey);

}
.diff-cards-cont{
display: grid;
gap: 20px;
align-items: flex-start;
}
.diff-cards-cont h3{
font-weight: 700;
font-size: 20px;
color: var(--primary-blue);

}
.diff-cards-cont p{
font-weight: 400;
font-size: 15px;
line-height: 1.3;
color: var(--black);

}
.diff-cards-cont > p{
    text-align: center;
}
.diff-card p{
    max-width: 175px;
}
.diff-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;

}
.diff-card{
    flex-shrink: 0;
    padding: 10px;
    max-width: fit-content;
    padding-bottom: 15px;
    border-top: 2px solid var(--primary-blue);
    border-left: 2px solid var(--primary-blue);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
}
.diffCard-cirb,.diffCard-cirt{
    width: 9px;
    height: 9px;
    display: inline-block;
    background: var(--primary-blue);
    position: absolute;
    border-radius: 50%;
}
.diffCard-cirb{
    bottom: 0;
    left: 0;
    transform: translate(-60%,50%);
}
.diffCard-rline{
    display: inline-block;
    height: 40px;
    width: 2px;
    background: var(--primary-blue);
    position: absolute;
    top: 1px;
    right: 0px;
     border-top-right-radius: 10px;
    
}
.diffCard-cirt{
    top: 40px;
    right: 0;
    transform: translateX(40%);
}
.diff-cardContent{
    display: grid;
    gap: 20px;
    max-width:fit-content;
}
.diff-cardImg{
max-width: 175px;
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.diff-cardImg::after{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.511);
}
.diff-cardImg img{
    object-fit: cover;
}

/* who */
.who-cont{
    padding: 20px;
    margin-bottom: 30px;
}
.who-sect{
    display: grid;
    gap: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--section-white);
}

.who-media img{
    object-fit: cover;
}
.who-content{
    padding: 20px;
    display: grid;
    gap: 14px;
}
.who-content h2{
font-weight: 700;
font-size: 28px;
color: var(--black);

}
.who-content h2 span{
    color: var(--primary-blue);
}
.who-content p{
color: var(--black);
font-weight: 400;
font-size: 16px;
line-height: 1.3;

}

/* Partners */
.part-cont{
    background: var(--primary-blue);
    padding: 40px 20px;
}
.part-sect{
    display: grid;
    gap: 20px;
}
.part-sect h2{
    margin-bottom: 20px;
    color: var(--white);
font-weight: 700;
font-size: 28px;
line-height: 1.5;
text-align: center;

}
.part-marq{
    display: flex;
    gap: 20px;
}
.part-card{
    display: grid;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 10px;
    width: 140px;
    height: 85px;
    flex-shrink: 0;
}
.part-cardImg{
    max-width: 110px;
}
.marquee {
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}

.marquee__inner-wrap {
  height: 100%;
  width: 100%;
}

.marquee__inner {
  height: 100%;
  width: fit-content;
  align-items: center;
  display: flex;
  gap: 20px;
  position: relative;
  will-change: transform;
}
.marquee__inner1{
  animation: marquee 50s linear infinite;
}
.marquee__inner2{
  animation: marquee2 50s linear infinite;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}


/* Testimonials */
.test-cont{
    padding: 40px 20px;
    position: relative;

    z-index: 1;
    
}
.test-cont::before {
  content: '';
  background: url('./assets/testimonial.webp') center/cover no-repeat;
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: -1; 
}
.test-sect{
    display: grid;
    gap: 20px;
}
.test-h{
    background: var(--primary-blue);
    border-radius: 20px;
    padding: 40px;
    position: relative;
}
.test-h h2{
    text-align: center;
color: var(--white);
font-weight: 700;
font-size: 32px;
line-height: 1.5;

}
.test-h-quote{
    background: var(--grey);
    border-radius: 50%;
    max-width: fit-content;
    padding: 20px;
    position: absolute;
    top: 0;
    left: 10%;
    transform: translateY(-50%);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.test-h-quote div{
    max-width: 40px;
}
.test-cards{
     display: grid;
    gap: 20px;
    justify-content: center;

}
.test-card{
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0px 0px 9px 0px #2D99AD;
    padding: 40px;
    padding-top: 80px;
    position: relative;
    display: grid;
    gap: 40px;
    max-width: 479px;
}
.test-card-quote{
    background: var(--grey);
    max-width: fit-content;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 10%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.test-card-quote div{
    max-width: 39px;
}
.testimonial{
font-weight: 600;
font-style: Italic;
font-size: 20px;
line-height: 1.5;
text-align: center;
color: var(--black);

}
.test-by{
    color: var(--black);
font-weight: 600;
font-style: Italic;
font-size: 14px;
line-height: 1.5;
text-align: center;

}
.test-marker{
    width: 70px;
    height: 4px;
    background: var(--primary-blue);
    justify-self: center;
}
.test-cards-cont{
    position: relative;
    display: grid;
    gap: 30px;
}
.test-btn{
border-radius: 5px;
border: 2px solid var(--primary-blue);
padding: 15px 20px;
color: var(--primary-blue);
display: inline-block;
justify-self: center;
transition: all .5s ease;
font-weight: 600;
font-size: 15px;


}
.test-btn:hover{
    color: white;
    background: var(--primary-blue)
}

/* CONTACTS */
.contact-cont{
    position: relative;
}
.contact-sect{
    padding: 40px 20px;
    display: grid;
    gap: 30px;
}
.contact-details{
    display: grid;
    gap: 40px;
}
.contact-header{
    color: var(--grey);
}
.contact-header h4{
font-weight: 400;
font-style: Regular;
font-size: 18px;
}
.contact-header h2{
font-weight: 700;
font-size: 40px;
line-height: 1.5;

}
.contact-header h2 span{
    color: var(--primary-blue);
}
.contact-header p{
font-weight: 400;
font-size: 15px;
line-height: 1.2;

}
.contact-links{
    display: grid;
    gap: 20px;
}
.contact-link{
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-link-ico{
    width: 41px;
    height: 41px;
    background: var(--primary-blue);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    flex-shrink: 0;
}
.contact-link-ico img{
   object-fit: contain;
}
.contact-link-info h3{
    color: var(--grey);
font-weight: 600;
font-size: 20px;
line-height: 1.2;


}
.contact-link-info a{
    color: var(--grey);
font-weight: 400;
font-size: 18px;
line-height: 1.2;


}
.contact-link-info .schedule-link{
    color: var(--primary-blue);
    font-weight: 600;
font-size: 20px;
line-height: 1.2;

}
.contact-form{
    background: var(--grey);
    border-radius: 10px;
    padding: 20px;
    display: grid;
    gap: 10px;
}
.contact-form h3{
color: var(--white);
font-weight: 400;
font-size: 20px;
line-height: 1.5;
text-align: center;
margin-bottom: 30px;

}
.contact-form fieldset{
    border: none;
    margin-bottom: 12px;
}
.contact-form .form-group{
    display: grid;
    gap: 12px;
}
.form-control{
    display: grid;
    gap: 5px;
}
.form-control label{
color: var(--white);
font-size: 16px;
font-weight: 300;
}
.form-control label span{
    color: red;
}
.form-control input,.form-control textarea{
border-radius: 10px;
background: var(--white);
padding: 22px 15px;
border: none;
width: 100%;

}
.form-control input:focus,.form-control textarea:focus{
    outline: none;
}
.form-control input::placeholder,.form-control textarea::placeholder{
    color: #d9d9d9;
}
.contact-submit-btn{
border-radius: 5px;
border: 2px solid var(--primary-blue);
padding: 14px 16px;
color: var(--primary-blue);
display: inline-block;
transition: all .5s ease;
font-weight: 700;
font-size: 16px;
max-width: fit-content;
margin-block: 10px;
cursor: pointer;

}
.contact-submit-btn:hover{
    color: white;
    background: var(--primary-blue)
}
.contact-map{
height: 396px;
}
.contact-map img{
    object-fit: cover;
}
.contact-hr{
    width: 100%;
    height: 17px;
    background: var(--primary-blue);
    margin-top: -2px;
}
.contact-modal-container{
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}
.contact-modal-active{
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}
.contact-modal{
    z-index: 200;
    width: 100%;
    max-width: 498px;
    background: #FDFFFD;
    border-radius: 10px;
    padding: 40px 20px;
    display: grid;
    gap: 29px;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 5px 0px #2D99AD;

}
.cont-ModalIco{
    max-width: 86px;
    aspect-ratio: 1;
    justify-self: center;
}
.contact-modal h3{
    color: var(--black);
font-weight: 700;
font-size: 30px;
text-align: center;

}
.contact-modal p{
        color: var(--black);
font-weight: 700;
font-size: 18px;
text-align: center;
}
.contact-ModalClose{
border-radius: 5px;
border: 2px solid var(--primary-blue);
padding: 10px 16px;
color: var(--primary-blue);
display: inline-block;
transition: all .5s ease;
font-weight: 700;
font-size: 16px;
max-width: fit-content;
cursor: pointer;
justify-self: center;

}
.contact-ModalClose:hover{
    color: white;
    background: var(--primary-blue)
}

/* FOOTER */
.footer-cont{
    background: var(--grey);
    padding: 40px 20px;
}
.footer-sect{
    display: grid;
    gap: 20px;
}
.footer-content{
    display: grid;
    gap: 20px;
}
.footer-logo{
    max-width: 281px;
}
.footer-p{
    color: var(--white);
font-weight: 400;
font-size: 16px;
line-height: 1.17;

}

.footer-links a,.footer-links li{
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-links span{
    display: inline-block;
    max-width: 13px;
}
.footer-links a p,.footer-links li p{
color: var(--white);
font-weight: 700;
font-size: 16px;
line-height: 1.43;

}
.footer-cr{
    display: grid;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.footer-cr div{
    max-width: 31px;
    justify-self: center;
}
.footer-cr p{
color: var(--white);
font-weight: 700;
font-size: 15px;
line-height: .91;
text-align: center;

}
/* ABOUT */
.about-cont{
    padding: 40px 20px;
}
.about-sect{
    margin-top: 84.45px;
    display: grid;
    gap: 20px;
}
.about-content{
    display: grid;
    gap: 13px;
}
.about-content h2{
    font-family: "Inter", sans-serif;
color: var(--grey);
font-weight: 700;
font-size: 28px;
line-height: 1;

}
.about-content h2 span{
    color: var(--primary-blue);
}
.about-content p{
    font-family: "Inter", sans-serif;
    color: var(--black);
    font-family: Inter;
font-weight: 400;
font-size: 16px;
line-height: 1.25;

}

.about-display{
    border-radius: 10px;
    overflow: hidden;
}
.about-display img,.about-slideImg img{
object-fit: cover;
}

/* MISSION */
.mission-cont{
    padding: 20px;
}
.mission-sect{
    display: grid;
    gap: 20px;
}
.cust-h h2{
font-weight: 700;
font-size: 28px;
line-height: 1;
color: var(--grey);
}
.cust-h h2 span{
    color: var(--primary-blue);
}
.cust-h p{
color: var(--grey);
font-weight: 400;
font-size: 16px;
line-height: 1.25;

}
.mission-banner{
    height: 241px;
    border-radius: 10px;
    overflow: hidden;
}
.mission-banner img{
    object-fit: cover;
}
.mission-content{
    padding-inline: 20px;
}
.mission-cards-cont{
    background: var(--white);
    box-shadow: 0px 4px 5px 0px #2D99AD59;
    border-radius: 10px;
    padding: 20px;
    display: grid;
    gap: 20px;
    margin-top: -140px;
    max-width: 977px;
    margin-inline: auto;
}
.mission-cards{
     display: grid;
    gap: 20px;
}
.missionCardIcon{
    height: 34px;
    width: fit-content;
}
.missionCardtext{
font-weight: 400;
font-size: 16px;
color: var(--grey);
}
.missionCardtext p{
line-height: 1.25;
}
.missionCardtext h5,.mission-cards-cont > h3{
    font-weight: 700;
font-size: 16px;
line-height: 1.25;
color: var(--primary-blue);
}
.missionCard{
    display: grid;
    gap: 20px;
    grid-template-columns: 40px 1fr;
}
.mission-cards-cont h3{
    text-align: center;
}
/* TEAM */
.team-cont{
    padding: 40px 20px;
    padding-bottom: 0;
}
.team-sect .cust-h{
    text-align: center;
    display: grid;
    gap: 10px;
    margin-bottom: 40px;
}
.team-cards{
    display: grid;
    gap: 20px;
}
.team-card{
    background: #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
}
.team-cards .team-card:nth-child(1){
    background: #eaebeb;
}
.teamCard-content{
    padding: 20px;
}
.teamCard-content h3{
color: var(--black);
font-weight: 700;
font-size: 24px;
line-height: 1.38;

}
.teamCard-content p{
color: var(--black);
font-weight: 400;
font-size: 16px;
line-height: 1.38;

}
.team-btn{
    margin-top: 20px;
}
.teamCard-img{
    aspect-ratio: 4 / 5;
}
.teamCard-img img{
    object-position: top;
    object-fit: cover;
}
.team-btn {
    font-size: 15px;
}
.team-card-modal{
    display: grid;
    gap: 16px;

    background: #EAEBEB;
    padding: 32px;
    border-radius: 10px;
    position: relative;
}
.team-card-modal2{
    background: #d9d9d9;
}
.teamModaltop{
    display: grid;
    gap: 16px;
}

.team-modalClose{
    z-index: 100;
    position: absolute;
    top: 20px;
    right: 20px;
}
.teamModaltop h4{
    color: var(--primary-blue);
font-weight: 700;
font-size: 40px;
line-height: 1.38;

}
.teamModaltop h5{
    color: var(--black);
font-weight: 400;
font-size: 20px;
line-height: 1.38;
margin-bottom: 16px;

}
.team-card-modal p{
    color: var(--black);
font-weight: 400;
font-size: 15px;
line-height: 1.38;

}
.teamModal-img img{
    object-fit: cover;
}
.hidden{
    display: none;
}
@media screen and (min-width:768px) {

    .nav-content{
        padding-inline: 40px;
    }
    .nav-search-input{
        display: flex;
    }
    .nav-menu{
        right: 80px;
    }
    .hero-art-bg{
        padding-block: 80px;
        min-height: 382px;
       
    }

    .hero-art-content{
        gap: 20px;
    }
    .hero-art-content h2{
font-size: 35px;
}

.hero-art-content > p{
font-size: 19px;

}
.hero-btn p{
font-size: 16px;


}
.hero-btn span i{
    font-size: 35px;
}


.feat-container{
    padding-top: 60px;
}

.feature-content h2{
font-size: 40px;

}
.feature-content  div:first-child > p{
font-size: 20px;

}
.feature-content h6{
font-size: 20px;
}
.result-sect h2,.offer-content h2{
font-size: 40px;

}
.result-sect p,.offer-content p{
font-size: 20px;

}
.offer-content{
    margin-top: 80px;
}
.offer-cards{
    margin-top: -100px;
    grid-template-columns: repeat(3,1fr);
}
.off-modal-text{
font-size: 20px;
}

.off-modal-text h3{
    font-size: 25px;
}
.offer-modal{
    grid-template-rows: 1fr;
    grid-template-columns: 257px 1fr;
}
.off-modalImg{
    order: 1;
}
.off-modal-content{
    order: 2;
    gap: 20px;
}
.diff-cont{
    margin-block: 50px;
}
.diff-h{
    padding-top: 60px;
}
.diff-h h2 span{
    display: block;
}
.diff-h h2{
font-size: 45px;

}
.diff-cont-p{
font-size: 20px;

}
.diff-content{
    grid-template-columns: 30% 1fr;
    gap: 40px;
}
.diff-cards{
    justify-content: flex-start;
    gap: 60px;
}
.who-sect{
grid-template-columns: 1fr 1fr;
}
.who-media{
    order: 1;
}
.who-content{
    order: 2;
}
.who-content h2{
font-size: 40px;

}
.who-content p{
font-size: 20px;
}
.part-card{
    width: 280px;
    height: 139px;
}
.part-cardImg{
    max-width: 175px;
}
.part-sect h2{
font-size: 30px;

}
.test-h h2{
font-size: 55px;

}
.test-cards{
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-sect{
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.contact-header{
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 40px;
}
.contact-header h4{
font-size: 23px;
}
.contact-header h2{
font-size: 55px;
line-height: 1;

}
.contact-header p{
font-size: 15px;
max-width: 384px;

}
.contact-form{
    padding: 40px;
    margin-bottom: -70%;
    z-index: 100;
}
.contact-form .form-group{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.contact-form h3{
font-size: 30px;

}
.footer-content{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.footer-p{
    font-size: 20px;
    max-width: 280px;
}
.footer-links a p,.footer-links li p{
font-size: 20px;

}
.about-cont{
    padding-top: 80px;
}
.about-content h2{
font-size: 40px;

}

.about-content p{
font-size: 20px;

}
.about-sect{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}


.cust-h h2{
font-size: 40px;
}

.cust-h p,.missionCardtext,.missionCardtext h5,.mission-cards-cont > h3{
font-size: 20px;

}
.mission-cards-cont{
    padding: 40px 63px;
    gap: 40px;
}
.mission-cards{
    display: flex;
    justify-content: space-between;
}
.miss-hr{
    height: 100%;
    width: 1px;
    background: #d9d9d9;
}
.missionCardtext h5{
    margin-bottom: 10px;
}
.teamCard-content h3{
font-size: 40px;

}
.teamCard-content > p{
font-size: 20px;

}
.team-cards{
    grid-template-columns: 1fr 1fr;
}
.team-card{
    min-height: 490px;
    display: grid;
    grid-template-columns: 60% 1fr;
}
.teamModaltop{
    grid-template-columns: 30% 1fr;
}
.hidden{
    display: none;
}
.teamCard-content{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.teamCard-img{
     aspect-ratio: unset;
}
}
@media screen and (min-width:1200px) {
     .hero-art-bg{
        padding-top: 150px;
         height: 560.13px;
        
    }

    .hero-slider-arrow{
        margin-top: 120px;
    max-width: 130px;
}
.nav-content{
    padding-inline: 0;
}
  .nav-menu{
        right: 40px;
    }
    .nav-logo{
    max-width: 261px;
}
.feature-content{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
     position: relative;
     gap: 0;

}
.feature-content > div:nth-child(1) {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  z-index: 2;
  padding-bottom: 0;
}

.feature-cards {
    flex-wrap: nowrap;
    padding: 20px;
    padding-bottom: 60px;
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  z-index: 3;
  position: relative;
}

.feature-img {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  z-index: 1; 
  position: relative;
}
.diff-content{
    padding: 30px 0 60px 0;
    gap: 80px;
}

.diff-cards-cont{
    margin-top: -25%;
    display: flex;
    flex-direction: column;
}
.diff-cards-cont h3{
    color: var(--white);
}
.diff-card{
    border-top: 2px solid var(--white);
    border-left: 2px solid var(--white);
}
.diffCard-cirt,.diffCard-rline{
    background: var(--white);
}
.diffCard-lLine{
    width: 2px;
    height: 57.5%;
    background: var(--primary-blue);
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: -2px;
}
.test-cont{
    padding-top: 164px;
    padding-bottom: 80px;
}
.test-cards{
    justify-content: flex-end;
    margin-top: -30%;
}
.test-card{
    min-height: 425px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.test-h{
    max-width: 780px;
    min-height: 571px;
    padding-top: 120px;
}
.test-h-quote{
    padding: 45px;
    
}
.test-h-quote > div{
    max-width: 93px;
}
.test-btn{
    position: absolute;
    right: 0;
    top: -450px;
}
.contact-sect{
    padding-inline: 0;
}
.contact-hr{
    height: 37px;
}

}
@media screen and (min-width:1440px) {
    .nav-content{
        padding-block: 30px;
    }
    .hero,.about-sect{
    margin-top: 104.45px;
}
}