@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');
body {
  overflow-x: hidden; 
  font-family: "Poppins", sans-serif;
}
::-webkit-scrollbar{
  display: none;
}


.itisactive{
  color: #e42908 !important;

}
.background-icon1::before {
  content: "\f085"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 65%;
  left: 60%;
  transform: translate(-50%, -50%);
  rotate: 20deg;
  font-size: 45rem; 
  color: rgba(255, 255, 255, 0.466); 
  z-index: -100;
  pointer-events: none;
}
.background-icon2::before {
  content: "\f013"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 800;
  position: absolute;
  top: 70%;
  left: 0%; /* Center the element horizontally */
  transform: translate(-50%, -50%); /* Keep it centered vertically */
  font-size: 35rem; 
  color: rgba(95, 5, 5, 0.096); 
  z-index: -100;
  pointer-events: none;
  animation: spin 5s linear infinite; /* Animation: spin 5s duration, linear timing, infinite loop */
}
.background-icon3::before {
  content: "\f013"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 800;
  position: absolute;
  top: 30%;
  left: 100%; /* Center the element horizontally */
  transform: translate(-50%, -50%); /* Keep it centered vertically */
  font-size: 40rem; 
  color: rgba(95, 5, 5, 0.096); 
  z-index: -100;
  pointer-events: none;
  animation: spin 5s linear infinite; /* Animation: spin 5s duration, linear timing, infinite loop */
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(360deg); /* Starting position */
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg); /* Final rotation */
  }
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* Starting position */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* Final rotation */
  }
}
      .scroll-to-top-btn {
        position: fixed;
        bottom: 20px; 
        left: 20px; 
        background-color: #ffffff00; 
        color: #d30704;
        border: none;
        font-size: 40px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        opacity: 0;
        visibility: hidden; 
        z-index: 1000; 
      }
      
      /* Hover effect */
      .scroll-to-top-btn:hover {
        color: #A90101; 
      }
      
      .scroll-to-top-btn.show {
        opacity: 1;
        visibility: visible;
      }



/*--------------------------------------------------------------
# Whatsapp Button
--------------------------------------------------------------*/
/* WhatsApp Button CSS */
.whatsapp-button{
  position: fixed;
  bottom: 100px; 
  right: 30px;
  width: 50px; 
  height: 50px; 
  background-color: #25D366; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  z-index: 1000; 
  transition: background-color 0.3s ease;
}

.whatsapp-button img {
  width: 40px; 
}

.whatsapp-button:hover {
  background-color: #118509; 
}
      .custom-border-radius {
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    }  
    
    @media (max-width: 1024px) {
    
    #head{
    padding: 0px 1rem 0px 1rem !important;
    }
    
    }
    .ulmobile{
    margin: 2rem .1rem;
    }
    .ulmobile li{
     margin-top: 1rem;
     margin-left: 1rem;
    
    }
    
    .elemhoverclass{
     display: none;
     position: absolute;
     top: 0;
     right: -240px;
     
    }
    .elemhoverclassjack{
      display: none;
      position: absolute;
      top: 0;
      right: -260px;
      
     }
    .elemhoverclass1{
     display: none;
     position: absolute;
     top: 0;
     right: -170px;
    }
    
    .elemhoverclass2{
     display: none;
     position: absolute;
     top: 0;
     right: -255px;
    }
    
    .elemparenthoverclass:hover .elemhoverclass,
    .elemhoverclass:hover {
     display: block;
    }
  
    
    @keyframes dropdown {
     from {
         transform: translateY(-20px);
         opacity: 0;
     }
     to {
         transform: translateY(0);
         opacity: 1;
     }
    }
    
    .animate-dropdown {
     animation: dropdown 0.3s forwards;
    }
    
    
/* Hover effect for expanding background image */
.hover-zoom:hover .bg-img {
  transform: scale(1.1);
}
.bg-img {
  transition: transform 0.3s ease-in-out;
}

/* Custom font size for responsive text */
.responsive-text {
  font-size: 1.25rem;
}
@media (min-width: 640px) {
  .responsive-text {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
  .responsive-text {
    font-size: 1.75rem;
  }
}

/* Keyframes for fade-in animations from different directions */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-left, .fade-in-right, .fade-in-up {
  opacity: 0;
  transform: translateY(50px); 
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Animation classes to apply on viewport entry */
.fade-in-left.show {
  animation: fadeInLeft 0.7s ease-out forwards;
}

.fade-in-right.show {
  animation: fadeInRight 0.7s ease-out forwards;
}

.fade-in-up.show {
  animation: fadeInUp 0.7s ease-out forwards;
}

.filter-button.active {
  background-color: #ff0000;
  color: white;
}
.hide-in-all {
  display: none;
}

/* Modal styling */
.modal {
  display: none; 
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); 
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 80%;
  max-width: 800px;
}

/* Image inside the modal */
.modal-image {
  display: block;
  width: 100%;
  max-height: 90vh;
  margin: auto;
  padding-top: 10vh;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  color: #bbbbbb;
}

#head{
   background-image: url('assets/img/DOT W.png');
      background-position: left center; 
      background-size: contain; 
      background-repeat: no-repeat; 
}
@media (max-width: 768px) {
  #head {
     background-image: none; /* header */
  }
}

.swiper-button-next,
  .swiper-button-prev{
    color: #e42908 !important;  
 
  }
  
  .swiper-pagination-bullet {
    background-color: #e42908 !important;  
   
  }
img {
  max-width: 100%;
  height: auto;
}

#slider-track {
  padding-left: 0; 
  padding-right: 0; 
}
#imageModal {
  display: none;
}
#imageModal.show {
  display: flex;
}