/* Smooth scrolling for the entire site */
html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ========== HEADER ENTRANCE ANIMATION ========== */
.navbar {
  animation: slideDown 1.2s ease forwards;
  opacity: 0; /* start hidden */
  transform: translateY(-30px); /* start above */
}

@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Nav links – smooth hover effect */
.navbar .nav-link {
  position: relative;
  transition: color 0.6s ease;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #000e6d; /* match your brand color */
  transition: width 0.6s ease;
}

.navbar .nav-link:hover::after {
  width: 100%;
}

.navbar .nav-link:hover {
  color: #000e6d !important;
}

/* Active link underline */
.navbar .nav-link.active::after {
  width: 100%;
}

.navbar .submenu {
  max-height: 500px;
  opacity: 0;
  transition:
    max-height 0.8s ease,
    opacity 0.7s ease,
    padding 0.6s ease;
  padding: 0 0;
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  list-style: none;
}

/* On hover (desktop) or .mobile-open (mobile) – show */
.nav-item:hover > .submenu,
.nav-item.mobile-open > .submenu {
  max-height: 500px;
  opacity: 1;
  padding: 10px 0;
}

/* Sub-submenus – same effect */
.submenu .submenu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.8s ease,
    opacity 0.7s ease;
}

.submenu li:hover > .submenu,
.submenu li.mobile-open > .submenu {
  max-height: 500px;
  opacity: 1;
}

/* ========== BASE ANIMATION CLASSES ========== */

/* Elements with this class start hidden and animate when they become visible */
.animate-on-scroll {
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
  will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) !important;
}
.reveal-right {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s ease;
  will-change: clip-path;
}
.reveal-right.is-visible {
  clip-path: inset(0 0 0 0);
}

.products-box,
.img-wrapper,
.footer_address,
.footer_link,
.footer_link2 {
  overflow: hidden; /* prevents shifted content from breaking layout */
}

.animate-section {
  overflow: hidden;
}

/* ========== INDIVIDUAL ANIMATIONS ========== */

/* Fade Up – moves up from below */
.fade-up {
  transform: translateY(50px);
}

/* Fade Down – moves down from above */
.fade-down {
  transform: translateY(-50px);
}

/* Fade Left – moves in from the right */
.fade-left {
  transform: translateX(50px);
}

/* Fade Right – moves in from the left */
.fade-right {
  transform: translateX(-50px);
}

/* Zoom In – starts small and scales up */
.zoom-in {
  transform: scale(0.8);
}

/* Flip Up – rotates from bottom (similar to AOS flip-up) */
.flip-up {
  transform: perspective(400px) rotateX(90deg);
  transform-origin: bottom;
}

/* Slide Up – similar to fade-up but without opacity change? 
   But we already have opacity in base, so it's fine */
.slide-up {
  transform: translateY(60px);
}

/* Stagger delays – add these to child elements for sequential reveal */
.delay-1 {
  transition-delay: 0.1s;
}
.delay-2 {
  transition-delay: 0.2s;
}
.delay-3 {
  transition-delay: 0.3s;
}
.delay-4 {
  transition-delay: 0.4s;
}
.delay-5 {
  transition-delay: 0.5s;
}
.delay-6 {
  transition-delay: 0.6s;
}
.delay-7 {
  transition-delay: 0.7s;
}
.delay-8 {
  transition-delay: 0.8s;
}
.delay-9 {
  transition-delay: 0.9s;
}
.delay-10 {
  transition-delay: 1s;
}
.delay-11 {
  transition-delay: 1.1s;
}
.delay-12 {
  transition-delay: 1.2s;
}
.delay-13 {
  transition-delay: 1.3s;
}

/* ========== ADDITIONAL ANIMATIONS ========== */

/* Slide in from the right (for images) */
.slide-right {
  transform: translateX(80px);
}

/* Mobile: reduce slide-right offset */
@media (max-width: 767px) {
  .slide-right {
    transform: translateX(30px) !important;
  }
  /* Also reduce fade-up for better feel */
  .fade-up {
    transform: translateY(30px);
  }
}

/* If you want a subtle rotation or scale, you can combine:
   .slide-right-rotate { transform: translateX(80px) rotate(3deg); }
*/

/* Style started here, for the media gallery page */
.gallery__sec {
  padding: 5px;
}
.gallery_box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* margin-bottom: 10px; */
}
.gallery_img_box {
  border-top: 1px solid #13a2fe;
  border-left: 1px solid #13a2fe;
  border-right: 1px solid #13a2fe;
}
.gallery_title_box {
  background-color: #41aaee;
  border: 1px solid #13a2fe;
  padding: 5px;
  color: #000f6e;
  flex: 1 1 auto;
}
.gallery_img_box {
  overflow: hidden;
  border: 1px solid #13a2fe;
  border-bottom: none;
}
.gallery_img_box img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.gallery_box:hover .gallery_img_box img {
  transform: scale(1.02);
}
.gall__img_wraper {
  padding: 7px;
}
.gall__img_wraper img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: 0.3s;
  border-radius: 8px;
}
.gall__img_wraper:hover img {
  transform: scale(1.02);
}
/* Style ended here, for the media gallery page */

.height__all {
  height: 100% !important;
}

.whatsapp-btn {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 62px;
  height: 62px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 34px;
  text-decoration: none;
  z-index: 9999;
  transition: 0.3s;
  animation: whatsappPulse 2s infinite;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.whatsapp-btn:active {
  cursor: grabbing;
}

.whatsapp-btn:hover {
  transform: scale(1.12);
}

.whatsapp-tooltip {
  position: absolute;
  right: 75px;
  white-space: nowrap;
  background: #222;
  color: #fff;
  padding: 8px 14px;
  border-radius: 25px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: 0.3s;
}

.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid #222;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.whatsapp-btn:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}