@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Poppins&family=Spline+Sans&display=swap');
*{
  margin: 0;
  box-sizing: border-box;
  font-family: 'Inter';
}
nav{
  position: relative;
  z-index: 99;
  width: 100%;
  background-color: #D9D9D9;

}
html {
  scroll-behavior: smooth;
}
@media screen and (max-width: 970px) {
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }
}
nav .wrapper{
  position: relative;
  justify-content: space-between;
  max-width: 1300px;
  padding: 15px 75px;
  height: 70px;
  margin: auto;
  display: flex;

  
}
/* @media sceeen and (max-width:600px) {
  .logo__img{
    height: 30% !important ;
    width: 20% !important;
    padding-top: 10px;
    
  }
  .logo{
    margin-right: 20px !important; /* Add space to the right of the logo */
  /* }
  
  .menu-btn{
    margin-left: auto !important; /* Push the menu button to the far right */
  /* }
}  */


.logo__img{
  height: 130% ;
  width: 110%;
  
}
@media screen and (min-width: 200px) and (max-width: 970px) {
  .logo__img {
    width: 23rem !important;
    aspect-ratio: 16 / 9;
    object-fit: contain; /* Ensures the image scales without cropping */
  }
}


.wrapper .logo a{
  color: #222831;
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none;
}
.wrapper .nav-links{
  display: inline-flex;
  padding-top: 1.25rem;
}
.nav-links li{
  list-style: none;
}
.nav-links li a{
  color: #222831;
  text-decoration: none;
  font-size: 1.5rem;
  white-space:nowrap;
  font-weight: 400;
  font-family: 'Spline Sans', sans-serif;
  letter-spacing: 0.5px;
  padding: 20px 16px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.nav-links li a:hover{
  text-decoration: underline black;
}
.nav-links .mobile-item{
  display: none;
}


.drop-menu li a{
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-weight: 400;
  border-radius: 0px;
}

.wrapper .btn{
  color: black;
  font-size: 20px;
  cursor: pointer;
  display: none;
  
}
.wrapper .btn.close-btn{
  position: absolute ;
  right: 30px;
  top: 10px;
  
}

@media screen and (max-width: 970px) {
  .wrapper .btn{
    display: block;
    
    
  }
  .wrapper .nav-links{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 350px;
    top: 0;
    left: -100%;
    background: #D9D9D9;
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    overflow-y: auto;
    box-shadow: 0px 15px 15px rgba(88, 199, 119, 0.18);
    transition: all 0.3s ease;
  }
  /* custom scroll bar */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #242526;
  }
  ::-webkit-scrollbar-thumb {
    background: #3A3B3C;
  }
  #menu-btn:checked ~ .nav-links{
    left: 0%;
    
  }
  #menu-btn:checked ~ .btn.menu-btn{
    display: none;
    
  }
  #close-btn:checked ~ .btn.menu-btn{
    display: block;
    
    
  }
  .nav-links li{
    margin: 15px 10px;
  }
  .nav-links li a{
    padding: 0 20px;
    display: block;
    font-size: 20px;
  }
  
  .nav-links .desktop-item{
    display: none;
  }
  .nav-links .mobile-item{
    display: block;
    color: #f2f2f2;
    font-size: 20px;
    font-weight: 500;
    padding-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
  }
  .nav-links .mobile-item:hover{
    background: #3A3B3C;
  }
  
}
nav input{
  display: none;
}


.home{
    position: absolute;
    font-family: 'Spline Sans', sans-serif;
    top:150px;
    left: 21vw;
    text-align: center;
    font-size: calc(1.5rem + 1.6vw);
    color: gray;
    margin-bottom:2rem ;
    text-align: center;
    
}
.title{
    font-weight: 600;
    color: #595959;
}



.typewrite{
    color: #4595fc;
    font-size: calc(1.5rem + 1.6vw);
    font-weight: 700;
    margin-bottom: 2rem;
}

.secondry{
    font-family: 'Spline Sans', sans-serif;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    color: #8b97a6;
    margin-bottom: 1rem;
}

@media (min-width: 768px){
    .secondry {
        padding-right: 4.5rem !important;
        padding-left: 4.5rem !important;
    }
}
.login{
    color: white;
    background-color: #3f3eed;
    height: 40px;
    width: 200px;
    border-radius: 50px;
    border: none;
}

.under-button-text{
    color: #8b97a6;
    font-size: 12px;
    font-family: 'Spline Sans', sans-serif;
    margin-top: 1rem;
    font-weight: 100;
}

/* <----carousel-----> */

@mixin aspect-ratio($width, $height) {
  position: relative;
    
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
    
  > img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
  }
}



section {
    background: #F4F4F4;
    
}

.container {
    max-width: 1044px;
    margin: 0 auto;
    padding: 0 20px;
}

.carousel {
    display: block;
    text-align: left;
    position: relative;
    padding-bottom: 22px;
    padding-top: 22px;
    
    > input {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        
        &:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -500%; }
        &:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -400%; }
        &:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -300%; }
        &:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -200%; }
        &:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -100%; }
        &:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: 0%; }
        
        &:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
        &:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) { box-shadow: 0px 0px 0px 5px rgba(0,0,255,0.5); }
    }
}

.carousel__slides {
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    display: flex;
}
.over {
  width: 800px; 
  height: 450px; 
  object-fit: cover; 
  display: block;    
}

@media screen and (min-width: 200px) and (max-width: 600px) {
  .over {
    width: 350px; 
    height: 350px; 
    object-fit: cover; 
    display: block; 
  }
  
}
.carousel__slide {
    position: relative;
    display: block;
    flex: 1 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 300ms ease-out;
    box-sizing: border-box;
    white-space: normal;
    
    figure {
        display: flex;
        margin: 0;
    }
    
    div {
        @include aspect-ratio(3, 2);
        width: 100%;
    }
    
    img {
        display: block;
        flex: 1 1 auto;
        object-fit: cover;
    }
    
    figcaption {
        align-self: flex-end;
        padding: 20px 20px 0 20px;
        flex: 0 0 auto;
        width: 25%;
        min-width: 150px;
    }
    
    .credit {
        margin-top: 1rem;
        color: rgba(0, 0, 0, 0.5);
        display: block;        
    }
    
    &.scrollable {
        overflow-y: scroll;
    }
}

.carousel__thumbnails {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    
    margin: 0 -10px;
    
    .carousel__slides + & {
        margin-top: 20px;
    }
    
    li {        
        flex: 1 1 auto;
        max-width: calc((100% / 6) - 20px);  
        margin: 0 10px;
        transition: all 300ms ease-in-out;
    }
    
    label {
        display: block;
        @include aspect-ratio(1,1);
        
                  
        &:hover,
        &:focus {
            cursor: pointer;
            
            img {
                box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
                transition: all 300ms ease-in-out;
            }
        }
    }
    
    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* Create two equal columns that floats next to each other */
.img-pri{
  background-color: #f4f4f4;
}
.column {
  float: left;
  width: 50% ;
  

}
.column-11 {
  float: left;
  width: 50% ;
  padding: 10px;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
 
}

.img__sir{
    height: 28.5rem;
    width: 30rem;
    border-radius: 5px 50px 5px 50px;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    padding-bottom: 5rem !important;
    
  }
}
@media screen and (max-width: 600px) {
  .column-11 {
    width: 100%;
    padding-bottom: 5rem !important;
    padding-left: 15% !important;
  }
}


.heading_1{
  font-size: 2.125rem;
  font-weight: 100;
  line-height: 30px;
  color: #303638;
  letter-spacing: 0.7px;
  margin-bottom: 24px;
}
.heading_2{
  font-size: 1rem;
  font-weight: 300;
  line-height: 36px;
  color: #303638;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
  text-align: justify;
}
.heading_3{
  font-size: 1rem;
  font-weight: 200;
  color: #303638;
  letter-spacing: 0.7px;
  margin-bottom: 24px;
  text-align: justify;
}

/* footer */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  background-color: #fff;
}
i {
  font-size: 2.4rem;
}
.footer {
  padding-block: 1rem;
  font-size: 1.6rem;

  background-color: #D9D9D9;
  color: #000;
}
.footer__container {
  max-width: 116rem;
  margin: auto;
  padding: 0 1.5rem;
}

@media screen and (min-width: 40em) {
  .footer__top {
    display: grid;
    grid-template-columns: 
    repeat(auto-fit, minmax(20rem, 1fr));
  }
}
.footer__top {

  row-gap: 2rem;
}
.footer__title {
  font-size: 1.25rem;
  color: #000;
  font-weight: 500;
  margin-bottom: 2rem;
  margin-top: 3rem;
}
.footer__list-0 {
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
  font-size: 0.875rem;
}
.footer__list-1 {
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
  font-size: 0.875rem;
}
.footer__list-item {
  list-style: none;
}
.footer__list-link {
  text-decoration: none;
  color: inherit;
  transition: color .25s;
}
.footer__list-link:hover {
  color: #000;
}

.company__info {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-right: 5rem;
}
.company__logo {
  color: #fff;
}
.company__info ul {
  flex-direction: row;
}
.copyright {
  margin-top: auto;
  font-size: 1rem;
}
@media screen and (min-width: 40em) {
  .company__info {
      grid-column: span 1/3;
      position: relative;
      left: 5rem;
  }
}
@media screen and (max-width: 40em) {
  .company__info {
      padding-left: 50px;
  }
}
@media screen and (min-width: 40em) {
  .footer__section-2 {
    padding-top: 5rem;
  }
}

@media screen and (max-width: 40em) {
  .footer__section-2 {
    padding-left: 2rem;
    padding-bottom: 2rem;
  }
}


.google_map{
  width: 30rem;
  height: 25rem;
}
/* FAQ */


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 10px;
  border: none;
  outline: none;
  background-color: #242526;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50px;
  height: 25px;
  width: 25px;
  text-align: center;
  
}
.myarrow{
  position: relative;
  right: 4.5px;
  bottom: 7px;
}
@media screen and (max-width: 40em) {
  .myarrow{
    
    right:4.5px !important;
    bottom: 6px !important;
  }
}
#myBtn:hover {
  background-color: #555;
}


/* galley */
.column-1 {
  float: left;
  
  padding: 10px;
  height: auto; /* Should be removed. Only for demonstration */
}

.gallery {
  --s: 115px; /* control the size of the images*/
  
  display: grid;
  grid-template-columns: repeat(3,auto);
  gap: 4px;
  position: relative;
}
.gallery input {
  position: absolute;
  border: 2px solid #000;
  border-radius: 50%;
  inset: calc(50% - var(--s)/3);
  cursor: pointer;
  --g: linear-gradient(#000 0 0) no-repeat;
  background: var(--g) 50%/var(--b,0%) 3px,var(--g) 50%/3px var(--b,0%);
  transition: 1.5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(.1);
  filter: brightness(0);
  pointer-events: none;
  transform-origin: var(--x) var(--y);
  transition: 1s calc((var(--i) - 1)*.1s);
}
.gallery > img:nth-of-type(1) {--i:1;--x: 150%;--y:150%;}
.gallery > img:nth-of-type(2) {--i:2;--x:  50%;--y:150%;}
.gallery > img:nth-of-type(3) {--i:3;--x: -50%;--y:150%;}
.gallery > img:nth-of-type(4) {--i:4;--x: 150%;--y:50%; }
.gallery > img:nth-of-type(5) {--i:5 }
.gallery > img:nth-of-type(6) {--i:6;--x: -50%;--y:50%; }
.gallery > img:nth-of-type(7) {--i:7;--x: 150%;--y:-50%;}
.gallery > img:nth-of-type(8) {--i:8;--x:  50%;--y:-50%;}
.gallery > img:nth-of-type(9) {--i:9;--x: -50%;--y:-50%;}

.gallery > input:checked ~ img {
  transform: scale(1);
  filter: brightness(1);
  pointer-events: initial;
}
.gallery > input:checked {
  transform: translateY(calc(1.75*var(--s))) scale(.5) rotate(45deg);
  --b: 70%;
}



.img-prime{
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #83AF9B;
}


/* FAQ */

@import url('https://fonts.googleapis.com/css?family=Montserrat');

#my-unique-accordion * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#my-unique-accordion {
  font-family: 'Montserrat', sans-serif;
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
  color: #fff;
}

#my-unique-accordion .accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}

#my-unique-accordion .accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

#my-unique-accordion .accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}

#my-unique-accordion .accordion-item-header.active::after {
  content: "\2212";
}

#my-unique-accordion .accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

#my-unique-accordion .accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media (max-width: 767px) {
  #my-unique-accordion {
    font-size: 14px;
  }
}