*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    overflow-x: hidden;
}


/* Fonts */

  @font-face {
    font-family: Pop-100;
    src: url('fonts/Poppins/Poppins-Thin.ttf');
  }
  @font-face {
    font-family: Pop-200;
    src: url('fonts/Poppins/Poppins-ExtraLight.ttf');
  }
  @font-face {
    font-family: Pop-300;
    src: url('fonts/Poppins/Poppins-Light.ttf');
  }
  @font-face {
    font-family: Pop-400;
    src: url('fonts/Poppins/Poppins-Regular.ttf');
  }
  @font-face {
    font-family: Pop-500;
    src: url('fonts/Poppins/Poppins-Medium.ttf');
  }
  @font-face {
    font-family: Pop-600;
    src: url('fonts/Poppins/Poppins-SemiBold.ttf');
  }
  @font-face {
    font-family: Pop-700;
    src: url('fonts/Poppins/Poppins-Bold.ttf');
  }
  @font-face {
    font-family: Amarante;
    src: url('fonts/Amarante/Amarante-Regular.ttf');
  }


  .pop-200{
    font-family: Pop-200;
  }
  .pop-300{
    font-family: Pop-300;
  }
  .pop-400{
    font-family: Pop-400;
  }
  .pop-500{
    text-align: center;
    font-family: Pop-500;
  }
  .pop-600{
    font-family: Pop-600;
  }
  .pop-700{
    font-family: Pop-700;
  }
  .amr-font{
    font-family: Amarante;
  }
  .pop-aav{
  text-align: left !important;
}






  /* colors */

  :root {
    --first: #0C8CEF;
    --second: #0C8CEF1A;
    --third: #ff7525;
    --fourth:#FF9704;
    --gray1: #666666;
    --gray2:#7E7E7E;
    --gray3:#868686;


    --item-size: 200px;
    --item-margin: 1rem;
    --accent-color: #7DF2EC;
    --dark-bg: #0A2E5C;
    --light-fill: #ffffff;
  }

  

  .bg-1{
    background-color: var(--first);
  }
  .bg-2{
    background-color: var(--second);
  }
  .bg-3{
    background-color: var(--third);
  }
  .bg-4{
    background-color: var(--fourth);
  }

  .text1{
    color: var(--first);
  }
  .text2{
    color: var(--second);
  }
  .text3{
    color: var(--third);
  }
  .text4{
    color: var(--gray1);
  }
  .text5{
    color: var(--gray2);
  }
  .text6{
    color: var(--gray3);
  }
  .text7{
    color: var(--fourth);
  }


/* common css */



.text-justify{
  text-align: justify;
}
.p-relative{
    position: relative;
}
.text-up{
  text-transform: uppercase;
}
.w-fit{
    width: fit-content;
}
.h-fit{
    height: fit-content;
}
.flex-col{
    flex-direction: column;
}
a{
    text-decoration: none;
}
.fs-10{
    font-size: 10px;
}
.fs-9{
    font-size: 9px;
}
.fs-13{
    font-size: 13px;
}
.fs-12{
    font-size: 12px;
}
.fs-14{
    font-size: 14px;
}
.fs-15{
    font-size: 15px;
}
.fs-16{
    font-size: 16px !important;
}
.fs-18{
    font-size: 18px;
}
.fs-20{
    font-size: 20px;
}
.fs-22{
    font-size: 22px;
}
.fs-23{
    font-size: 23px;
}
.fs-24{
    font-size: 24px;
}
.text-green{
    color: #8AA03E;
}
.obj-cover{
    object-fit: cover;
}
.br-10{
    border-radius: 10px;
}
.show-all{
  width: 160px;
  padding-top: 0.8rem ;
  padding-bottom: 0.8rem ;
}
.shad{
  box-shadow: 0px 0px 10px 0px #0000001A;
}
.sec-head{
  font-size: 40px;
}
.sec-head2{
  font-size: 36px;
}
.sec-head3{
  font-size: 32px;
}
.br-20{
  border-radius: 20px;
}

.cmn-btn{
  width: 200px;
  font-size: 14px;
  border-radius: 50px;
  display: block;
  text-align: center;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.cmn-btn2{
  width: 350px;
  font-size: 14px;
  border-radius: 50px;
  display: block;
  text-align: center;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.border1{
  width: 150px;
  height: 5px;
}
.border2{
  width: 320px;
  height: 5px;
}
.border3{
  width: 260px;
  height: 5px;
}
.border4{
  width: 130px;
  height: 5px;
}

.grad{
  background-image: linear-gradient(to bottom, transparent 0, rgba(252, 242, 238, .8) 20%, rgba(0, 0, 0, 0) 100%);
}





/* ================================================================= */

.hero{
  height: 500px;
  background-image: url(images/hero.jpg);
  background-position: center;
  background-size: cover;


  .overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0a2e5c85;
  }

  .text{
    position: relative;
    z-index: 1;
  }

  .btn{
    width: 300px;
    border-radius: 10px;
  }

  .btn:hover{
    background-color: #0a73c4;
    box-shadow: 0px 2px 8px 2px #00000024;
  }

}



.box1{
    box-shadow: 0px 2px 8px 2px #00000024;
    text-wrap-mode: wrap;
    border-radius: 20px;
    width: 100%;
    height: 100%;

    h2{
      font-size: 28px;
    }

}



.contact-form{

  input{
    height: 60px;
  }

  button{
    width: 200px;
  }

  button:hover{
    background-color: #0a73c4;
    box-shadow: 0px 2px 8px 2px #0000005e;
  }

}













/* card carousel */

.item-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.scroll-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  /* background-color: #00000025; */
  cursor: pointer;
  font-size: 1.5rem; /* Size of the arrow */
  font-weight: 800;
  color: #030303; /* Grey color for the arrow */
  transition: color 0.3s ease; /* Smooth transition for hover effect */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.scroll-btn img {
  width: 50px;
  height: 50px;
}

.scroll-btn:hover {
  color: #000000; /* Darker grey when hovering */
}

.card-wrapper {
  display: flex;
  overflow: hidden; /* Hide scrollbar */
  scroll-behavior: smooth;
  white-space: nowrap;
  width: 100%;
  max-width: 85vw; /* Adjust based on your design */
  box-sizing: border-box;
  position: relative; /* For positioning scroll buttons */
  flex-wrap: nowrap !important;
}

.card-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Webkit browsers */
}






/* testimonial */
.test-slider .card-wrapper{
  max-width: 80vw;
}

/* .test-box{
  width: 330px;
  height: 280px;
  border-radius: 20px;
  object-fit: cover;
  background-color: #fff;
  word-wrap: wrap;
  text-wrap-mode: wrap;
} */

.quote{
  height: 30px;
  width: 37px;
  /* object-fit: cover; */
}

.test-box p i{
  font-size: 30px;
}
.test-prev {
    left: 4%;
    top: 40%;
}
.test-next {
    right: 5%;
    top: 40%;
}


.test-slider .card-wrapper{
  max-width: 80vw;
}

.test-box{
  box-shadow: 0px 0px 20px 0px #0000001A;
  width: 330px;
  height: 100%;
  border-radius: 20px;
  background-color: #fff;
  padding: 1.8rem 1rem;
  text-wrap-mode: wrap;

  .client{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
  }

  .star{
    i{
      font-size: 20px;
      color: #DAB858;
    }
  }

  /* .quote{
    width: 40px;
    height: 30px;
  } */

}

/* .test-prev {
    left: -2%;
    top: 40%;
}
.test-next {
    right: -2%;
    top: 40%;
} */




/* contact section */

.con-form .form-control{
  border: 0.5px solid #0C8CEF80;
}
.con-form .form-control::placeholder{
  color: #6F7171;
  font-family: Pop-300;
  font-size: 14px;

}


.footer{
  background: linear-gradient(92deg,rgba(148, 210, 255, 1) 15%, rgba(12, 140, 239, 1) 66%);
}










































/* ====+++++++++++================++++++++++++++===============++++++++++++=========== */
/* ====+++++++++++================++++++++++++++===============++++++++++++=========== */

/* ************Media Query************** */

  /* Max widths */

  @media(max-width:1400px){
    
  }

  @media(max-width:1100px){
    
    .test-box {
      width: 260px;
      height: 100%;
    }
    .test-box {
      & .star {
          i {
              font-size: 16px;
              color: #DAB858;
          }
      }
      .quote {
        width: 35px;
        height: 25px;
      }
      .client {
        width: 90px;
        height: 90px;
      }
    }
    .hero {
      height: fit-content;
    }
  }



  @media(max-width:900px){
    
    .test-box {
      width: 90%;
      height: auto;

      h6{
        font-size: 12px;
      }
    }
    .hero {
      height: fit-content;
    }

  }


  @media(max-width:800px){
    .hero {
      height: fit-content;

      .sec-head {
        font-size: 32px;
      }
    }
  }


  @media(max-width:576px){
    
    .test-box {
      width: 80%;
      height: auto;
    }
    .hero{
      height: fit-content;

      .sec-head {
          font-size: 30px;
      }
      .fs-20 {
          font-size: 16px;
      }
      .fs-24 {
          font-size: 18px;
      }
    }
    nav{
      .fs-24 {
        font-size: 16px;
      }
    }

  }

  @media(max-width:390px){
    
  }








    /* Min widths */

    


    @media (min-width: 992px) {
      
    }

    @media(min-width: 1150px){
      
    }

    @media (min-width: 576px) {
     
    }