/* your styles go here */

@import url('https://fonts.googleapis.com/css2?family=Faustina:wght@300;400;500;600;700&family=Jost&family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

@media screen and (min-width:992px){
    .nav-item {
    line-height:80px;
    }
    #learn-btn {
      width: 250px;
      margin: auto;
    }
   
  }
  /* @media screen and (max-width:991px) {
    .center-nav{
      margin-left: 0px;
      margin-right: 0px;
    }
  } */
  
header{
  background-image: linear-gradient(180deg, #000, #212529);
  /* transition-duration: 0.6s; */
}
i {
  color: #2272FF;
}
/* .scroll_navbar {
  padding: 10px 0px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
  transition-duration: 0.6s;
} */
#dropdown li a{
  line-height: 2rem;
}
#dropdown li:hover a {
  color: #2272FF;
}

.s1 {
  background: linear-gradient(180deg, #000, #080b0b);
  /* background: #080b0b; */
}
.cta-btn {
  background: #2272FF;
}
.img1 img {
  filter: brightness(1);
}
/* .navbar-flex {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 50px;
} */
.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 180px;
  margin-bottom: 0;
}
.d1 {
  padding-left: 0;
}
.search {
  position: relative;
}
.search .fa-search {
  position: absolute;
  top: 34%;
  right: 20%;
}
.flex-gap li a {
  font-size: 12px;
  /* line-height: 15px; */
  padding: 5px 10px;
}
@media screen and (max-width:1124px){
  .flex-gap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
  }
}
@media screen and (max-width:1272px){
  .flex-gap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
  }
}

.s3-about{
  /* height: 80vh; */
  background: #080b0b;
  /* margin: auto; */

}
.s3, .s5 {
  background: #080b0b;
}
.social i{
  transition: all .5s ease;
  color: #2272FF;

}
.social i:hover {
  cursor: pointer;
  transform: scale(1.5);
  color: #fff;
}
.s6 {
  background: #000;
}
.swiper-div:hover {
  box-shadow: 2rem 1rem 3rem rgba(0,0,0, .075);
}
.product-content{
  position: relative;
  cursor: pointer;
}
.product-btns {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  right: 45%;
  opacity: 1;
  transition: .3s ease;
}
.btn-heart, .btn-shopping-cart {
  padding: 10px 15px;
  border-radius: 50%;
  /* border: none; */
  /* border: 1px solid #2272FF; */
  background-color: transparent;
}
.btn-heart i, .btn-shopping-cart i {
  color: #fff;
  transition: all .3s ease-in-out;
}
.btn-heart i:hover, .btn-shopping-cart i:hover {
  color: #2272FF;
  /* border: 1px solid #2272FF; */

}

@media only screen and (min-width: 200px) and (max-width: 767px)  {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  }
@media only screen and (min-width: 768px) and (max-width: 992px)  {
  
  .product-content{
    position: relative;
    cursor: pointer;
  }
  .product-btns {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 0;
    right: 34.5%;
    opacity: 1;
    transition: .3s ease;
  }
}
@media only screen and (min-width: 992px) {
  /* html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  } */
  
  .product-content{
    position: relative;
    cursor: pointer;
  }
  .product-btns {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 0;
    right: 32%;
    
    opacity: 1;
    transition: .3s ease;
  }
}
.big-image{
  width: 600px;
  height: 600px;
  background: #000;
}
.big-image img {
  width: 100%;
}
.product-form button:hover{
  background: #2272FF;
  transition: .5s;
}
.product-form button:hover i {
  color: #fff;
  transition: .5s;

}
.swiper-slide-thumb-active {
  border-color: rgba(34, 114, 255, 0.5)
}
#contact-map iframe{
 height: 100%;
 width: 100%;
}
@media only screen and (max-width: 992px) {
  #contact-map{
    margin-top: 1rem;
   }
}
#send-btn {
  color: #fff;
}

.back-to-home {
  z-index: 9999;
  position: fixed;
  bottom: 25px;
  left: 25px;
  display: none;
}