@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");



:root {

  --s-space: 10px;

  --n-space: 30px;

  --l-space: 50px;

  --xl-space: 70px;

  --xxl-space: 100px;

  --xxxl-space: 150px;

  --s-radius: 5px;

  --n-radius: 10px;

  --l-radius: 20px;

  --xl-radius: 50px;

  --btn-space: 10px 20px;

  --m-color: #00776f;

  --m1-color: #125650;

  --m3-color: #cc8f37;

  --s1-color: #edc56b;

  --s2-color: #3a4961;

  --s3-color: #5e9da1;

  --s4-color: #e7fbf7;

  --white-color: #eeeeee;

  --black-color: #111111;

}



:focus {

  outline: 0 !important;

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;

}



a,

a:link {

  color: inherit;

  text-decoration: none;

}



a:visited {

  color: inherit;

  text-decoration: none;

}



a:hover {

  color: inherit;

  text-decoration: none;

}



a:active {

  color: inherit;

  text-decoration: none;

}



::placeholder {

  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: silver;

  opacity: 1;

  /* Firefox */

}



:-ms-input-placeholder {

  /* Internet Explorer 10-11 */

  color: silver;

}



::-ms-input-placeholder {

  /* Microsoft Edge */

  color: silver;

}



.dropdown-item.active,

.dropdown-item:active {

  background-color: var(--m-color);

}



.center-box {

  display: flex;

  justify-content: center;

  align-content: center;

}



.h-center-box {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.v-center-box {

  display: flex;

  justify-content: center;

  /* align-items: center; */

  flex-direction: column;

}



.balanced {

  text-wrap: balance;

}



.oneline {

  display: block;

}



html {

  background: #ffffff;

  /* background: linear-gradient(51deg,rgba(255, 255, 255, 1) 30%, rgba(202, 247, 247, 1) 71%); */

  background: linear-gradient(75deg,rgba(255, 255, 255, 1) 39%, rgba(202, 247, 247, 1) 63%);

  background-size: cover;

  background-repeat: no-repeat;

  /* overflow-x: hidden !important; */

}



body {

  font-family: "Poppins", sans-serif;

  font-weight: 200;

  font-style: normal;

  background-color: unset;

  color: var(--m-color);

  cursor: none;

  overflow-x: hidden !important;

}



.navbar {

  padding: 2rem 1rem;

    transition: all 0.3s ease-in-out;

  /* background-color: var(--s4-color); */

  background-color: rgba(255, 255, 255, 0);

}



.scrolled-navbar {

  padding: 1rem 0.5rem;

  background-color: rgba(255, 255, 255, 1);

  box-shadow: rgba(50, 50, 93, 0.1) 0px 30px 60px -12px, rgba(0, 0, 0, 0.15) 0px 18px 36px -18px;

}



.nav-center {

  flex-grow: 1;

  justify-content: center;

}



.dropdown-menu[data-bs-popper]{

  margin-top: 0px;

  padding: 0px;

  background-color: white;

  border: none;

  border-radius: var(--l-radius);

  overflow: hidden;

}



.dropdown-item{

  /* background-color: white; */

    padding: var(--btn-space);

}



.dropdown-item:hover{

  background-color: var(--s4-color);

}



.dropdown-divider{

  /* margin: 0px; */

  opacity: 0.3;

}



.social-icons a {

  margin-left: 10px;

  color: inherit;

  text-decoration: none;

  font-size:x-large ;

  padding: 10px;

  transition: all 0.3s ease-in-out;

  display: flex;

  border-radius: var(--l-radius);

}



.social-icons a:hover {

  background-color: white;

}



.nav-logo {

  transition: all 0.3s ease-in-out;

  height: 60px;

  padding-right: 50px;

}



.scrolled-nav-logo {

  height: 40px;

}



.navbar-nav .nav-link{

  padding: 10px 20px !important;

}



.navbar-nav .nav-item,

.navbar-nav .nav-link{

  transition: all 0.3s ease-in-out;

  border-radius: var(--l-radius);

}



.navbar-nav .nav-item:hover{

  background-color: var(--s1-color);

}



.navbar-nav .active{

  font-weight: 600;

  color: var(--m-color) !important;

  background-color: var(--s1-color);

}



.section {

  padding-top: var(--l-space);

}



.section-ttl {

  font-size: 72px;

  padding-bottom: 20px;

}



.section-sub-ttl {

  font-size: 36px;

  /* padding-bottom: 20px; */

}



.why-boxes{

  height: 50vh;

}



.why-box {

  /* padding: 30px; */

  height: 100%;

  position: relative;

}



.why-line{

  background-image: url("../media/why/line.svg");

  background-size: 100% 100%;;

  background-repeat: no-repeat;

  background-position: center;

}



.why-box-cont {

  background-color: var(--s4-color);

  padding: 30px;

  border-radius: var(--l-radius);

  font-size: x-large;

  position: absolute;

}



.why-box-cont img {

  border-radius: var(--l-radius);

}



.why-box-1 .why-box-cont {

  /* top:50px; */

  /* transform: translateY(10%); */

  top: 0%;

  transition: all 3s ease-in-out;

}



.why-box-2 .why-box-cont {

  /* transform: translateY(70%); */

  bottom: 0%;

  transition: all 3s ease-in-out;

}





.why-box-3 .why-box-cont {

  /* transform: translateY(15%); */

  top: 0%;

  transition: all 3s ease-in-out;

}



.why-box-4 .why-box-cont {

  /* transform: translateY(80%); */

  bottom: 0%;

  transition: all 3s ease-in-out;

}





/* .why-box-1:hover .why-box-cont{

  transform: translateY(50%);

}



.why-box-2:hover .why-box-cont{

  transform: translateY(50%);

}



.why-box-3:hover .why-box-cont{

  transform: translateY(50%);

}



.why-box-4:hover .why-box-cont{

  transform: translateY(50%);

} */



.why-section:hover .why-box-1 .why-box-cont,

.why-section:hover .why-box-3 .why-box-cont{

  margin-top: 20%;

  /* margin-bottom: 20%; */

}



.why-section:hover .why-box-2 .why-box-cont,

.why-section:hover .why-box-4 .why-box-cont{

  margin-bottom: 20%;

  /* margin-bottom: 20%; */

}



.why-box-text{

  display: grid  ;

  grid-template-columns: 1fr auto;

  align-items: end;

  padding-top: 20px;

  font-size: 32px;

  line-height: 32px;

}



.why-box-arrow{

  width: 40px;

  border-radius: 0px !important;

  padding-right: 5px;

  padding-bottom: 5px;

}



.swiper {

  width: 100%;

  height: 100%;

}



.testimonials-btns{

  position: relative;

  /* height: 80px; */

  display: flex;

  justify-content: center;

  gap: 20px;

  padding-top: 50px;

}



.testimonials-button-prev,

.testimonials-button-next{

  padding: 10px;

  background-color: rgba(255, 255, 255, 0);

  border-radius: 50%;

  transition: all 0.3s ease-in-out;

}



.testimonials-button-prev:hover,

.testimonials-button-next:hover{

  padding: 10px;

  background-color: var(--s4-color);

  border-radius: 50%;

  /* scale: 1.05; */

}



.testimonials-btns img{

  width: 80px;

}



.testimonial-box{

  display: grid;

  grid-template-columns: 2fr 3fr;

  align-items: center;

  background-color: #5e9da1;

  color: white;

  border-radius: var(--l-radius);

  overflow: hidden;

  height: 100%;

  min-height: 400px;

  -webkit-touch-callout: none;

    -webkit-user-select: none;

     -khtml-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;

}



.testimonial-box-s {

  background-color: #3a4961; /* use a different color */

}



.testimonial-box img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  user-drag: none;

	-webkit-user-drag: none;

	-moz-user-select: none;

}



.testimonial-box-text{

  text-align: left;

  padding: var(--l-space);

  font-size: x-large;

  position: relative;

}



.testimonial-box-text::before{

  content: "❝";

  font-size: 100px;

  color: black;

  position: absolute;

  top: -20px;

  left: 30px;

  opacity: 0.1;

  /* line-height: 50px; */

}

.testimonial-box-text::after{

  content: "❞";

  font-size: 100px;

  color: black;

  position: absolute;

  bottom: -50px;

  right: 50px;

  opacity: 0.1;

  /* line-height: 50px; */

}



.testimonial-box-name{

  padding-top: 10px;

  font-weight: 600;

}



.testimonial-box-desc{

  text-wrap: balance;

}



.footer{

  margin-top: 100px;

  padding: 100px 0px;

  background-color: var(--m-color);

  -webkit-border-top-left-radius: var(--xl-radius);

  -webkit-border-top-right-radius: var(--xl-radius);

  -moz-border-radius-topleft: var(--xl-radius);

  -moz-border-radius-topright: var(--xl-radius);

  border-top-left-radius: var(--xl-radius);

  border-top-right-radius: var(--xl-radius);

  color: white;

}



.footer-logo{

  height: 70px;

  margin-bottom: 50px;

  display: block;

}



.footer-links{

  display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

}



.footer-links .navbar-nav{

  display: flex;

    flex-direction: row;

    justify-content: flex-end;

    /* justify-content: flex-end; */

    /* gap: 20px; */

}



.footer-social-icons{

  display: flex;

}



.footer-links .navbar-nav .nav-link{

  padding: 10px 20px !important;

}



.footer-links .navbar-nav .nav-item{

  transition: all 0.3s ease-in-out;

  border-radius: var(--l-radius);

}



.footer-links .navbar-nav .nav-item:hover{

  /* color: var(--s1-color); */

  background-color: var(--m1-color);

}



.footer-social-icons a {

  margin-left: 10px;

  color: inherit;

  text-decoration: none;

  font-size:x-large ;

  padding: 10px;

  transition: all 0.3s ease-in-out;

  display: flex;

  border-radius: var(--l-radius);

}



.footer-social-icons a:hover {

  background-color: var(--m3-color);

}



.sub-jumbo{

  padding: 50px;

  background-color: var(--s3-color);

  color: white;

  border-radius: var(--l-radius);

  /* border: 1px solid var(--m1-color); */

}



.sub-jumbo-ttl {

  font-size: 72px;

  margin-top: -20px;

  /* padding-bottom: 50px; */

}



.c-t-detail{

  background-color: var(--s4-color);

  padding: var(--l-space);

  border-radius: var(--l-radius);

  height: 100%;

  display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.c-t-detail-ttl{

  font-size: 32px;

  padding-bottom: var(--s-space);

}



.c-t-img{

  background-color: var(--m-color);

  border-radius: var(--l-radius);

  min-height: 500px;

}



.p-y-e-form{

  /* margin-top: var(--n-space); */

  background-color: var(--s4-color);

  padding: var(--l-space);

  border-radius: var(--l-radius);

}



.p-y-e-form input,

.p-y-e-form select,

.p-y-e-form textarea{

  background-color: unset;

  border: 1px solid var(--s3-color);

  border-radius: var(--n-radius);

  color: var(--m1-color);

  /* padding: 10px 20px !important; */

}



.p-y-e-img{

  display: flex;

    align-items: flex-end;

}



.p-y-e-btn{

  border: none;

  display: flex;

    background-color: unset;

    border-radius: 50px;

    padding: 15px 30px;

    color: var(--m-color) !important;

    font-size: 20px;

    margin-top: 10px;

    gap: 20px;

    transition: transform 1s ease-in-out, background-color 0.3s ease-in-out;

  }

  

  .p-y-e-btn:hover{

    background-color: var(--s1-color);

    transform: translateX(10px);

  }

  

  .p-y-e-btn-icon {

    width: 20px;

  }



  .how-it-works {

    aspect-ratio: 1 / 1;

    border: 1px solid var(--m-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    text-align: center;

    padding: 50px;

}



.how-it-works-arrow{

  display: flex;

}

.blog-top-box{

  display: flex;

    align-items: center;

    justify-content: space-between;

}

  .about-detail{

    display: flex;

    flex-direction: column;

        /* justify-content: center; */

  }



  .about-img img{

    border-radius: var(--l-radius);

    width: 100%;

    height: 100%;

    object-fit: cover;

    aspect-ratio: 1 / 1;

  }



  .about-box {

    padding: var(--l-space);

    /* border: 2px dotted var(--m3-color); */

    background-color: var(--s4-color);

    height: 100%;

    border-radius: var(--l-radius);

}



  .blog-card{

    border: none;

    border-radius: var(--l-radius);

    overflow: hidden;

    background-color: var(--s4-color);

    /* background-color: rgba(240, 240, 240, 0.541); */

    height: 100%;

  }



  .blog-card .card-body{

    padding: var(--l-space);

    display: flex;

    flex-direction: column;

    color: var(--m1-color);

  }



  .card-title{

    text-wrap: balance;

  }

  .card-date{

    margin: 0px;

  }



  .card-by{

    margin: 0px;

    color: var(--m3-color);

  }



  .card-hr{

    border-color: var(--m1-color);

    width: 100%;

  }



  .blog-card-btn{

    border: none;

    display: flex;

      background-color: unset;

      border-radius: 50px;

      padding: 15px 30px;

      color: var(--m-color) !important;

      font-size: 15px;

      margin-top: 10px;

      gap: 20px;

      transition: transform 1s ease-in-out, background-color 0.3s ease-in-out;

      /* border: 1px solid var(--s1-color); */

      align-items: center;

    }

    

    .blog-card-btn:hover{

      background-color: var(--s1-color);

      transform: translateX(10px);

    }

    

    .blog-card-btn-icon {

      width: 15px;

      height: max-content;

    }



    .t-b-form{

      /* margin-top: var(--n-space); */

      background-color: var(--s4-color);

      padding: var(--l-space);

      border-radius: var(--l-radius);

    }

    

    .t-b-form input,

    .t-b-form select,

    .t-b-form textarea{

      background-color: unset;

      border: 1px solid var(--s3-color);

      border-radius: var(--n-radius);

      color: var(--m1-color);

      /* padding: 10px 20px !important; */

    }



    .contact-map{

      width: 100%;

      height: 100%;

      border-radius: var(--l-radius);

      min-height: 350px;

    }



/* @media (min-width: 1200px) {

  .container {

    max-width: 1400px;

  }

} */



.lity-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container{

  height: 80vh;

}



.lity-content,

.lity-iframe-container{

  height: 100%;

}



.navbar-toggler{

  border: none;

  padding-right: 0px;

}



.why-boxes-desk{

  display: grid;

}

.why-boxes-mob{

  display: none;

}



.accordion{

  --bs-accordion-bg: unset !important;

}



.accordion-button,

.accordion-button:not(.collapsed){

  background-color: var(--s1-color);

  color: var(--m1-color);

  border-radius: 10px !important;

}



.accordion-body{

  background-color: white;

  border-radius: 10px;

}



  /* ===== Scrollbar CSS ===== */

  /* Firefox */

  * {

    scrollbar-width: auto;

    scrollbar-color: var(--m3-color) #ffffff;

  }



  /* Chrome, Edge, and Safari */

  *::-webkit-scrollbar {

    width: 16px;

  }



  *::-webkit-scrollbar-track {

    background: #ffffff;

  }



  *::-webkit-scrollbar-thumb {

    background-color: var(--m3-color);

    border-radius: 10px;

    border: 3px solid #ffffff;

  }





#cursor-dot {

            position: fixed;

            width: 8px;

            height: 8px;

            background-color: var(--m3-color);

            border-radius: 50%;

            transform: translate(-50%, -50%);

            pointer-events: none;

            z-index: 10000;

        }



        /* The airplane that follows the cursor */

        #airplane {

            position: fixed;

            width: 30px;

            height: 30px;

            transform-origin: center;

            pointer-events: none;

            z-index: 9999;

            transform: translate(-50%, -50%);

        }



        .trail-dot {

            position: absolute;

            width: 5px;

            height: 5px;

            border-radius: 50%;

            background-color: rgba(0, 100, 100, 0.4);

            pointer-events: none;

            transition: opacity 0.5s ease;

        }



@media (max-width: 1400px) {

  #side-menu{

    width: 350px;

  }

  

  #side-menu .close{

    display: none;

  }

  

  .dropdown-menu{

    position: relative !important;

    margin: 0px !important;

    transform: unset !important;

    padding: 0px !important;

  }



  #side-menu .contents{

    /* height: 100%; */

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    margin-top: 0px;

  }



  .social-icons{

    /* justify-content: center; */

  }



  .contents .me-auto{

    margin-right: unset !important;

    gap: 10px;

  }



  .navbar-nav .nav-item:hover{

    background-color: unset;

  }

}



@media (max-width: 1200px) {

  .jumbo-slider-nav,

  .j-s-arrows{

    display: none !important;

  }

}



@media (max-width: 992px) {

  .sub-jumbo-ttl {

    font-size: 60px;

    margin-top: -20px;

    /* padding-bottom: 50px; */

  }

  .section-ttl {

    font-size: 58px;

    padding-bottom: 15px;

  }

  .j-s-cover-details{

    width: 60% !important;

    justify-content: flex-end !important;

    padding-bottom: 20px;

  }

  .why-boxes-desk{

    display: none;

  }

  .why-boxes-mob{

    display: grid;

  }

  .why-box{

    height: auto;

  }



  .why-box-cont{

    position: relative;

  }



  .why-box-text {

    font-size: 26px;

    line-height: 28px;

}

.footer-logo-text{

  display: flex;

  flex-direction: column;

  align-items: center;

  padding-bottom: 30px;

        border-bottom: 1px solid var(--s4-color);

        text-align: center;

}

.footer-links {

  align-items: center;

  padding-top: 30px;

}



.footer-links-nav{

  display: flex;

      flex-direction: column;

      align-items: center;

}

}



@media (max-width: 768px) {

  :root {

    --s-space: 8px;

    --n-space: 25px;

    --l-space: 35px;

    --xl-space: 50px;

    --xxl-space: 80px;

    --xxxl-space: 120px;

    --btn-space: 10px 20px;

    --n-radius: 10px;

    --l-radius: 15px;

    --xl-radius: 30px;

  }

  .subjumbo-section,.section {

    padding: var(--xl-space);

  }

  .section-ttl {

    font-size: 46px;

    padding-bottom: 15px;

  }

  .section-sub-ttl {

    font-size: 28px;

    /* padding-bottom: 20px; */

  }

  .j-s-cover{

    padding: 20px 40px !important;

  }

  .j-s-cover-details{

    width: 80% !important;

  }

  .big-anim{

  overflow-x: scroll;

  padding-bottom: 50px;

  scrollbar-gutter: stable both-edges;

  white-space: nowrap;

  margin-bottom: 50px;

  }



  .tp-anim{

    height: 70vh;

  }

  .testimonial-box{

    grid-template-columns: 1fr;

    max-height: unset;

    /* height: auto; */

    height: 100%;



  }

  .testimonial-box-text{

    font-size: large;

  }

  .about-detail{

    padding-top: 30px;

  }

  .blog-top-box{

    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 30px;

  }

  .contact-form{

    margin-top: 30px;

  }

}



@media (max-width: 576px) {

  :root {

    --s-space: 6px;

    --n-space: 20px;

    --l-space: 25px;

    --xl-space: 30px;

    --xxl-space: 50px;

    --xxxl-space: 80px;

    --btn-space: 10px 20px;

    --n-radius: 5px;

    --l-radius: 10px;

    --xl-radius: 20px;

  }

  .sub-jumbo-ttl {

    font-size: 48px;

    margin-top: -20px;

    /* padding-bottom: 50px; */

  }

  .section-ttl {

    font-size: 38px;

    padding-bottom: 10px;

  }

  .section-sub-ttl {

    font-size: 24px;

    /* padding-bottom: 20px; */

  }

  .jumbo{

    border-radius: 0px !important;

  }

  .why-box-cont {

    padding: 15px;

}

  .why-box-text {

    font-size: 20px;

    line-height: 22px;

}



.footer{

  margin-top: 50px;

  padding: 30px 0px;

}

.footer-links .navbar-nav .nav-link {

  padding: 10px 10px !important;

  font-size: 80%;

}

#airplane,

#cursor-dot,

.trail-dot{

  display: none;

}

}