body {
  font-family: 'Poppins', sans-serif !important;
  background-color: rgb(255, 255, 255);
}





::selection {
  background: #F04837 !important;
  color: #ffffff !important;
}

::-moz-selection {
  background: #2a2a2a;
  color: #fff;
}

.meracraft-logo{
  width: 190px;
  height: auto;
  padding-top: 16px;
}

@media (max-width: 767px) {
  .meracraft-logo {
   float: left;
  }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1440px !important;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1340px;
    }
}



@media (min-width: 1900px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1680px !important;
    }
}

.my-nav{
    
    background-color: #ffffffd3;
    box-shadow: 0px;
}



h1{
    font-size: 84px;
    font-weight: 200;
    align-items: center;
    padding: 30px;
    color: #000000;
}

.banner{
    
    
    height: 420px;
    margin-bottom: 80px;
   

}



.animated-gradient-text {
 
  background: linear-gradient(
    to right,
    #000000 20%,
    #006692 30%,
    #8600ce 70%,
    #F04837 80%
  );
  background-size: 500% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: textShine 5s ease-in-out infinite alternate;
  font-size: 4rem;
  font-weight: 200;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.button-container-mid {
  display: flex;
  justify-content: center;
  align-items: center; /* Optional: centers vertically if container has height */
  margin-top: 20px;
  
}

.button-container-mid button{
  background-color: #000000;
  color: #ffffff;
  border: 0px;
  border-radius: 0px;
  padding: 10px 20px;

}

.button-container-mid button:hover{
  background-color: #F04837;
}

.btn-primary{
  background-color: #000000;
  color: #ffffff;
  border: 0px;
  border-radius: 0px;
  padding: 10px 20px !important;

}

.btn-primary:hover{
  background-color: #F04837 !important;
}

.btn-secondary{
  background-color: #000000;
  color: #ffffff;
  border: 0px;
  border-radius: 0px;
  padding: 10px 20px !important;

}

.btn-secondary:hover{
  background-color: #ffffff !important;
  color: #F04837 !important;
  border-color: #F04837 !important;
}

.detail-img-items{
   width: 100%;
   height: 600px;
   object-fit: cover;
}

.owl-carousel .item img {
      width: 100%;
      height: 460px;
      object-fit: cover;
    }
    .owl-dots {
      text-align: center;
      margin-top: 15px;
    }
    .owl-dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 5px;
      background: #ccc;
      border-radius: 50%;
    }
    .owl-dot.active {
      background: #000;
    }

    .slider-title{
      margin-top: 36px;
    }
    .card-contect{
    padding: 15px 0px;
    line-height: 20px;
    }
    .card-contect h4{
     font-size: 22px;
     font-weight: 500;
     line-height: 40px;
     padding-top: 28px;
     margin: 0px !important;
     
    
    }

    .card-contect h6{
     font-size: 16px;
     font-weight: 400;
     color: #292929;
     line-height: 24px;
     margin: 0px!important;
    }
    
    .card-contect span{
     font-size: 16px;
     font-weight: 600;
    }
    .card-contect span{
     font-size: 20px;
     font-weight: 400;
    }
    .card-contect p{
     font-size: 16px;
     font-weight: 500;
     color: #292929;
     margin: 10px 0px 0px 0px;
    }
    .card-contect h4 a{
    color:#000000;
     
    }
    .card-contect a:hover{
     color: #F04837;
    
    }

    .strikethrough{
      text-decoration: line-through;
      color: #a1a1a1 !important;
      font-weight: 300 !important; 
      
    }

    .footer-ul{
    padding-left: 0px;
    }

    /* WhatsApp Chat Button Styles */

@media (max-width: 767px) {
    .whatsapp-chat {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    border-radius: 60%;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease; 
    }
    .whatsapp-chat img {
    width: 35px;
    height: 35px;
  }
    
  }
  
@media (min-width: 768px) {
.whatsapp-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 60%;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  }
  

.whatsapp-chat:hover {
  transform: scale(1.1);
  }

.whatsapp-chat img {
  width: 35px;
  height: 35px;
  }
}

.buynow-button{
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000;
  border-radius: 0px;
  padding: 8px 20px;
  
}
.btn-secondary{
  background-color: #ffffff !important;
  border-radius: 0px !important;
  border: #000 1px solid !important;
  color: #000000 !important;
}

p{
  color: #292929 !important;
  font-weight: 400 !important;
  
}

.price-span{
     font-size: 20px !important;
     font-weight: 400;
     color: #000 !important; 
    }

.header-area{
  border-bottom: none !important;
} 


.my-bullets ul {
    padding: 0px;
    margin: 0px;   
}
.my-bullets li {
    list-style-type: disc; 
    padding: 0px 0px 10px 0px;
    margin: 0px;
    color: #292929;
    font-size: 14px;
}

.detail-section {
  padding-left: 40px !important;

}

@media (max-width: 576px) {
  .detail-section {
   padding-left: 1rem !important;
  }
}

.product-quantity {
  list-style: none;        
  padding: 0px;             

}
.product-quantity li {
 
 color: #292929;
 font-size: 14px;
 line-height: 40px;
 }

.disable-input{
  background-color: #f7f3f3;
  color: #000;
  padding: 2px 12px;
  box-shadow: none;
  border: #e8e8e8 1px solid;
  
}

.nav-link{
    color:#000000  !important;
}

.nav-link:hover {
    color:#F04837  !important;
}

.about-img img{
        width:100%;
        border-radius:10px;
        object-fit:cover;
}

.bold-highlight-font{
  font-size:medium;
  font-weight: 600 !important; 
  color: #000 !important;  
}

.form-UI{
  max-width: 70%;
  background-color: #f6f6f6;
  padding: 32px;
}

@media (max-width: 576px) {
  .form-UI {
   max-width: 90%;
  }
}

.form-control{
 border-radius: 0px !important;
 border-color: #000000 !important;
 font-style: normal !important;
}

@media (max-width: 576px) {
.contact-form-bottom-mobile{
  padding-bottom: 26px;
}
}
 
.terms{
 background-color: #f4f4f4;
 padding: 32px 52px !important;
}

.terms h4{
font-size: 18px ;
}

.terms ul{
  margin: 0px;
  padding: 0px 0px 16px 20px;
  
}

.terms li{
 color: #292929;
 font-size: 14px;
 list-style-type: disc;
 margin: 0px;
 line-height: 25px;
}


@media (max-width: 767px) {
    .bottom-overlay-buy {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 16px;
      font-weight: 500;
      font-size: large;
      text-align: center;
      background: #000000;
      color: #ffffff;
      box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
      z-index: 1000;
    }
    .bottom-overlay-buy:hover {
      color:#FFFFFF;
      background-color: #F04837;
    }
  }

    /* Hide on desktop */
  @media (min-width: 768px) {
    .bottom-overlay-buy {
      background-color: #000000;
      color: #ffffff;
      padding: 11px 20px !important;
    }
    
    .bottom-overlay-buy:hover {
      background-color: #F04837;
      color: #ffffff;
      
    }
  }