@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');


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

}

html,
body {
    
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    overflow-x: hidden;
}

/*hero section starts*/
#hero {

    width: 100%;
    
    position: relative;
    overflow: hidden;
    background-image: url("assets/bg1.jpg");
    background-size: cover;
    background-position: center;
height: 100vh;

}
#hero .inner_hero{
    height: 100%;
    width: 100%;
    padding: 8rem 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#hero .inner_hero h1{
    color: white;
    z-index: 1111;
    font-weight: bold;
    font-size: 5vw;
    
    margin-bottom: 2rem;
    stroke-width: 100px;
}
#hero .inner_hero p{
    color: white;
    z-index: 1111;
    font-weight: bold;
    margin-bottom: 2rem;
    stroke-width: 100px;
    font-size: 1.2rem;
}
#hero .navbar-dark .navbar-toggler{
    background-color: white;
}
#hero .navbar-dark .navbar-toggler i{
    color: black;
}
.swiper {
    padding-bottom: 60px !important;
    height: 300px;
    width: 80%;
    .swiper-wrapper {
      align-items: center;
    }
    .swiper-pagination{
        color: red;
    }
    .swiper-slide {
      border-radius: 5px;
      height: 200px !important;
      background-color: #000;
      
      transition: 0.2s;
      &.active {
        height: 230px !important;
      }
    }
    .prev,
    .next {
      cursor: pointer;
      z-index: 100;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.65;
      transition: 0.2s;
      &:hover {
        opacity: 1;
      }
      svg {
        width: 20px;
        height: 20px;
      }
      svg path {
        fill: #fff;
      }
    }
    .prev {
      left: 25px;
    }
    .next {
      right: 25px;
    }
    
  }
  #hero .swiper-pagination-clickable .swiper-pagination-bullet{
    background-color: transparent;
    border: 5px solid white;
    height: 10px;
    width: 10px;
  }
  .swiper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
  }
#hero .navbar {
padding: 0 2rem;
}
#hero .navbar .navbar-brand{
font-weight: 500;
font-size: 1.5rem;
text-transform: capitalize;
}
#hero .navbar .nav-item .nav-link {
    font-size:1.2rem;
    transition: all .2s ease-in-out;
}
#hero .navbar .nav-item .nav-link:hover {
    letter-spacing: 2px;
    color: orange;
}
#hero .navbar .navbar-brand:hover{
    color: orange;
}
#hero .navbar .con {
    display: flex;
    gap: 20px;

}

#hero .navbar .con i {
    font-size: 1.5rem;
    color: white;

}
#hero .navbar .con i:hover{
    color: orange;
}
#hero .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;

}

/*hero section ends*/
/* products section starts*/
/*#products {
    position: relative;

    overflow: hidden;
    width: 100%;
    text-align: center;
    padding: 3rem 2rem;
    background-color: rgb(248, 248, 248);
}

#products h2 {
    font-weight: 600;
    color: #222;

}

#products hr {

    margin: auto;

    margin-top: 1rem;

    border-radius: 20%;
}

#products .card {
    margin-top: 1rem;
    height: 100%;
    width: 100%;
    border: 0;
    overflow: hidden;
    background-color: transparent;

}

#products .card .img_box {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#products .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

#products .card img:hover {
    transform: scale(1.5);
}

#products h4 {
    padding: 1rem 0;
    margin-bottom: 2rem;

}

#products .btn {
    padding: 1rem 3rem;
    margin-top: 2rem;
    background-color: orange;
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
}

#products .btn:hover {
    background-color: white;
    border: 1px solid orange;
    color: orange;
}
*/
/* products section ends*/
/*about section starts*/
/*#about {
    width: 100%;
    padding: 5rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;

}

#about img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    transition: all .4s ease-in-out;
}

#about img:hover {
    transform: scale(1.1);
}

#about img:hover .left h2 {
    color: orange;
}

#about .img_box {
    height: 50%;
    width: 100%;
    overflow: hidden;
    border-radius: 50px;
}

#about .left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

#about .left h2 {
    padding-bottom: 2rem;
    font-weight: 500;
}

#about .left p {
    font-size: 1.1rem;
}
*/
/*about section ends*/

/* feature section start*/

#feature{
    
    width: 100%;
    position: relative;
    
    background-color: #a3fffc;
    padding: 0;
    
    
    border-radius: 5px;
    

}
#feature .about_inner{
    overflow-x: hidden;
    
}
#feature1{
    
    width: 100%;
    
    text-align: center;
    padding: 1rem 0px;
}
#feature1 .inner-box{
    text-align: center;
display: flex;
flex-direction: column;
    margin: auto;
}
#feature1 .inner-box h4{
font-size: 2.5rem;
    
}
#feature1 .inner-box p{
    font-size: 0.9rem;
    width: 55%;
    text-align: center;
margin: auto;
padding-bottom: 1rem;

}
#feature1 .container {
    position: relative;
  
  padding: 0;
  }
  
  #feature1 .image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain ;
  }
  
  #feature1 .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #008CBA;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
  }
  
  #feature1 .container:hover  .overlay {
    height: 100%;
  }
  
  #feature1 .text {
    color: white;
    font-weight: 500;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    text-transform: uppercase;

  }
/* feature section ends*/
/*contact us section starts*/

#contact {
    padding: 5rem 2rem;
    width: 100%;
    position: relative;
    overflow: hidden;

}

#contact hr {
    margin-bottom: 3rem;
}

#contact h2 {
    text-align: center;
    font-weight: 500;

}

#contact .btn {
    padding: 0.8rem 2rem;
    margin-top: 2rem;
    background-color: orange;
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
    border: 0;

}

#contact .btn:hover {
    background-color: white;
    border: 2px solid orange;
    color: orange;
}

#contact .add_box i {
    font-size: 2rem;
    color: orange;
}

#contact .add_box {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 1.5rem;

}

#contact .email_box i {
    font-size: 2rem;
    color: orange;
}

#contact .email_box {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 1.5rem;


}

#contact .phone_box {
    display: inline-flex;
    gap: 1.5rem;
    justify-content: start;
    align-items: end;

}

#contact a {
    text-decoration: none;
    color: black;

}

#contact .phone_box i {
    font-size: 2rem;
    color: orange;
}

/*contact us section ends*/

/*media query starts*/

/* Feature secion starts*/
/* Feature secion ends*/


@media only screen and (max-width: 600px) {
    
}

@media only screen and (max-width: 768px) {
    
}

@media only screen and (max-width: 992px) {
  
}
@media only screen and (max-width: 1024px) {
    
}
/*media query ends*/