/* ==========================================================================
   SUBHADRA STEEL ART - CUSTOM ARCHITECTURAL STYLES & INTERACTIONS
   - Opposite Corner Round Panel Cards
   - Ultra-Stylish Curved & Animated Luxury Buttons (Pill / Capsule Shape)
   - Shimmer Light Sweep & Micro-Lift Hover Animations
   - 2-Column Category / Products Header Mega-Menu
   - Mobile Responsive Menu Drawer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OPPOSITE-CORNER ROUND CARDS (Top-Left & Bottom-Right Rounded)
   -------------------------------------------------------------------------- */
.card-opposite-round {
  border-top-left-radius: 36px !important;
  border-bottom-right-radius: 36px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease, 
              background-color 0.35s ease !important;
}

.card-opposite-round:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 45px -12px rgba(108, 0, 19, 0.22), 0 8px 18px -6px rgba(0, 0, 0, 0.08) !important;
  border-color: #6c0013 !important;
}

/* --------------------------------------------------------------------------
   2. OPPOSITE-CORNER ROUND CARDS ALT (Top-Right & Bottom-Left Rounded)
   -------------------------------------------------------------------------- */
.card-opposite-round-alt {
  border-top-right-radius: 36px !important;
  border-bottom-left-radius: 36px !important;
  border-top-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease, 
              background-color 0.35s ease !important;
}

.card-opposite-round-alt:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 45px -12px rgba(108, 0, 19, 0.22), 0 8px 18px -6px rgba(0, 0, 0, 0.08) !important;
  border-color: #6c0013 !important;
}

/* --------------------------------------------------------------------------
   3. STYLISH, ELEGANT & ANIMATED CURVED BUTTON DESIGN SYSTEM
   - Full curved capsule / pill shape (eliminates typical square look)
   - Shimmer light sweep animation across buttons
   - Micro-lift hover elevation & multi-layer luxury glow
   - Icon sliding micro-transitions
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. ASYMMETRIC OPPOSITE-CORNER BUTTON DESIGN SYSTEM (Card Matching)
   - 2 opposite edges are curved / rounded, 2 opposite edges are sharp / square
   - Shimmer light sweep animation across buttons
   - Micro-lift hover elevation & multi-layer luxury glow
   -------------------------------------------------------------------------- */
.btn-opposite-round,
.btn-luxury,
.btn-hover-lift,
.btn-primary,
.btn-secondary,
.btn-header-quote,
.btn-pill,
a.btn-pill,
button.btn-pill,
header a[href*="contact.html"],
#hero-slider a,
a[class*="rounded-full"]:not(.floating-whatsapp-btn):not(#reviews-prev-btn):not(#reviews-next-btn):not(#lightbox-prev-btn):not(#lightbox-next-btn):not(.process-step *):not(.google-review-card *):not(.phil-dot):not([class*="w-12 h-12"]):not([class*="w-14 h-14"]):not([class*="w-10 h-10"]):not([class*="w-4 h-4"]):not([class*="w-2 h-2"]):not([class*="w-1.5 h-1.5"]),
button[class*="rounded-full"]:not(#mobile-menu-btn):not(#reviews-prev-btn):not(#reviews-next-btn):not(#lightbox-prev-btn):not(#lightbox-next-btn):not(.floating-whatsapp-btn):not(.process-step *):not(.phil-dot):not([class*="w-12 h-12"]):not([class*="w-14 h-14"]):not([class*="w-10 h-10"]):not([class*="w-4 h-4"]):not([class*="w-2 h-2"]):not([class*="w-1.5 h-1.5"]) {
  border-top-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 16px -2px rgba(108, 0, 19, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-opposite-round:hover,
.btn-luxury:hover,
.btn-hover-lift:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-header-quote:hover,
header a[href*="contact.html"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px -2px rgba(108, 0, 19, 0.45) !important;
  border-top-left-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
}

/* --------------------------------------------------------------------------
   4. HEADER NAVIGATION - SPECIAL GLOWING LINE EFFECT ON MOUSE HOVER
   -------------------------------------------------------------------------- */
header nav a,
header nav button {
  position: relative !important;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.3s ease !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

header nav a::after,
header nav button::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, transparent, #ff7b88, #ffffff, #ff7b88, transparent) !important;
  border-radius: 99px !important;
  box-shadow: 0 0 10px rgba(255, 123, 136, 0.9), 0 0 20px rgba(235, 67, 53, 0.7), 0 0 30px rgba(108, 0, 19, 0.5) !important;
  transform: translateX(-50%) !important;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

header nav a:hover::after,
header nav button:hover::after,
header nav a.active::after {
  width: 100% !important;
  opacity: 1 !important;
}

header nav a:hover,
header nav button:hover {
  color: #ffb8b8 !important;
  text-shadow: 0 0 12px rgba(255, 184, 184, 0.8), 0 0 24px rgba(235, 67, 53, 0.4) !important;
}

/* Ensure mobile drawer doesn't inherit overflowing glowing line */
#mobile-menu-drawer a,
#mobile-menu-drawer button {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#mobile-menu-drawer a::after,
#mobile-menu-drawer button::after {
  display: none !important;
}

/* Elegant Shimmer Sweep Animation on Hover */
.btn-luxury::after,
.btn-hover-lift::after,
.btn-primary::after,
.btn-secondary::after,
.btn-header-quote::after,
a[class*="bg-primary"]::after,
button[class*="bg-primary"]::after,
a[class*="bg-primary-container"]::after,
button[class*="bg-primary-container"]::after,
a[class*="bg-emerald"]::after,
button[class*="bg-emerald"]::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 50%;
  height: 220%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
  z-index: 5;
}

.btn-luxury:hover::after,
.btn-hover-lift:hover::after,
.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-header-quote:hover::after,
a[class*="bg-primary"]:hover::after,
button[class*="bg-primary"]:hover::after,
a[class*="bg-primary-container"]:hover::after,
button[class*="bg-primary-container"]:hover::after,
a[class*="bg-emerald"]:hover::after,
button[class*="bg-emerald"]:hover::after {
  left: 140%;
  opacity: 1;
}

/* Hover Lift, Elevation & Brand Glow */
.btn-luxury:hover,
.btn-hover-lift:hover,
.btn-primary:hover,
.btn-header-quote:hover,
a[class*="bg-primary"]:hover,
button[class*="bg-primary"]:hover,
a[class*="bg-primary-container"]:hover,
button[class*="bg-primary-container"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 28px -4px rgba(108, 0, 19, 0.48), 0 0 18px rgba(200, 16, 46, 0.35) !important;
}

.btn-secondary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.2), 0 0 14px rgba(255, 255, 255, 0.2) !important;
}

a[class*="bg-emerald"]:hover,
button[class*="bg-emerald"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 28px -4px rgba(5, 150, 105, 0.48), 0 0 18px rgba(16, 185, 129, 0.35) !important;
}

/* Micro-interaction on click (Active State) */
.btn-luxury:active,
.btn-hover-lift:active,
.btn-primary:active,
.btn-secondary:active,
a[class*="bg-primary"]:active,
button[class*="bg-primary"]:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* Icon slide micro-animation inside buttons */
.btn-luxury:hover .material-symbols-outlined,
.btn-hover-lift:hover .material-symbols-outlined,
.btn-primary:hover .material-symbols-outlined,
a[class*="bg-primary"]:hover .material-symbols-outlined,
button[class*="bg-primary"]:hover .material-symbols-outlined {
  transform: translateX(4px);
}

.material-symbols-outlined {
  transition: transform 0.25s ease;
}

/* Subtle breathing glow effect for primary action button in header */
@keyframes pulse-subtle {
  0%, 100% {
    box-shadow: 0 4px 16px -2px rgba(108, 0, 19, 0.35);
  }
  50% {
    box-shadow: 0 8px 24px 3px rgba(144, 27, 43, 0.6);
  }
}

.btn-pulse-glow {
  animation: pulse-subtle 3.5s infinite ease-in-out;
}

/* Refined Pill Shape for Filter Pills and Category Chips */
.filter-btn,
.category-pill,
.cat-pill {
  border-radius: 9999px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.filter-btn:hover,
.category-pill:hover,
.cat-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(108, 0, 19, 0.25);
}

/* --------------------------------------------------------------------------
   4. MOUSEHOVER EFFECTS ACROSS ALL PLACES
   -------------------------------------------------------------------------- */
.hover-elevate {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.hover-elevate:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.12) !important;
}

.hover-glow-brand {
  transition: all 0.3s ease !important;
}
.hover-glow-brand:hover {
  border-color: #6c0013 !important;
  box-shadow: 0 0 25px rgba(108, 0, 19, 0.22) !important;
}

/* Smooth zoom for card images on card hover */
.group:hover img,
.card-zoom:hover img {
  transform: scale(1.06);
}
.card-zoom img,
.group img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   5. MEGA-DROPDOWN MENU ANIMATION & STYLING
   -------------------------------------------------------------------------- */
.nav-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   GLASSMORPHIC BRUTALISM (Architectural Light) - MEGA DROPDOWN SUB HEADER
   A clean, physical architectural light theme with heavy glass refraction,
   stark grid lines, thick physical shadows, and oversized typography.
   ========================================================================== */
header nav .group > div,
.glass-brutalist-dropdown {
  background: rgba(255, 255, 255, 0.94) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 246, 250, 0.92) 100%) !important;
  backdrop-filter: blur(36px) saturate(210%) contrast(108%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(210%) contrast(108%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 35px 70px -15px rgba(0, 0, 0, 0.55),
    0 15px 30px -10px rgba(0, 0, 0, 0.35),
    inset 0 2px 2px 0 rgba(255, 255, 255, 1),
    inset 0 -1.5px 2px 0 rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  opacity: 1 !important;
}

/* Stark Grid Line between columns (Brutalist Architectural Grid) */
header nav .group > div > div {
  border-color: rgba(15, 23, 42, 0.14) !important;
}
header nav .group > div > div > div:first-child {
  border-right: 1.5px solid rgba(15, 23, 42, 0.14) !important;
}

/* Column Header Links */
header nav .group > div > div > div > a:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.625rem !important;
  border-bottom: 1.5px solid rgba(15, 23, 42, 0.15) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Column Header Title Text */
header nav .group > div > div > div > a:first-child span.font-headline-sm,
header nav .group > div > div > div > a:first-child div span:last-child {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
header nav .group > div > div > div > a:first-child .material-symbols-outlined {
  color: #6c0013 !important;
  font-size: 1.25rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Architectural Badges ("8 Types", "Custom") - Crisp White on Rich Red */
header nav .group > div > div > div > a:first-child > span:last-child,
header nav .group > div a .header-badge,
header nav .group > div .header-badge {
  background: #6c0013 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  box-shadow: 0 2px 6px rgba(108, 0, 19, 0.3) !important;
  line-height: 1.3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  border: none !important;
}

/* Product list items - Clean physical glass hovering chips */
header nav .group > div .grid .grid a,
header nav .group > div .space-y-1 a {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important; /* 13px */
  border-radius: 8px !important;
  padding: 6px 8px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

/* Bullet points (•) - Clean Crimson Dots */
header nav .group > div .grid .grid a > span:first-child,
header nav .group > div .space-y-1 a > span:first-child {
  color: #6c0013 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin-right: 6px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}

/* Hover effect on product item chips */
header nav .group > div .grid .grid a:hover,
header nav .group > div .space-y-1 a:hover {
  background: rgba(108, 0, 19, 0.07) !important;
  color: #6c0013 !important;
  font-weight: 800 !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px rgba(108, 0, 19, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(108, 0, 19, 0.15) !important;
}

/* Bottom Explore Links */
header nav .group > div div[class*="border-t"] {
  border-top: 1.5px solid rgba(15, 23, 42, 0.12) !important;
  margin-top: 1rem !important;
  padding-top: 0.625rem !important;
}

header nav .group > div div[class*="border-t"] a {
  color: #6c0013 !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

header nav .group > div div[class*="border-t"] a span {
  color: #6c0013 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

header nav .group > div div[class*="border-t"] a:hover {
  color: #9e0a20 !important;
  transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   6. MOBILE DRAWER ANIMATION
   -------------------------------------------------------------------------- */
#mobile-menu-drawer {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#mobile-menu-drawer.open {
  max-height: 85vh;
  opacity: 1;
  display: block;
}
#mobile-menu-drawer.closed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. TYPING ANIMATION EFFECT FOR HERO HEADLINE
   -------------------------------------------------------------------------- */
.typing-cursor {
  display: inline-block;
  margin-left: 4px;
  font-weight: 300;
  color: #ffb8b8;
  text-shadow: 0 0 12px rgba(255, 184, 184, 0.9), 0 0 24px rgba(108, 0, 19, 0.8);
  animation: typingCaretBlink 0.95s infinite cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: baseline;
  user-select: none;
}

@keyframes typingCaretBlink {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0; transform: scaleY(0.85); }
}

.typing-shimmer-glow {
  text-shadow: 0 0 20px rgba(255, 184, 184, 0.75), 0 0 45px rgba(108, 0, 19, 0.5);
  transition: text-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   8. GALLERY DISPLAY & PREVIEW ANIMATIONS
   -------------------------------------------------------------------------- */

/* Shimmer placeholder background for gallery cards */
.img-shimmer-placeholder {
  background: linear-gradient(90deg, #121318 0%, #20222e 50%, #121318 100%);
  background-size: 200% 100%;
  animation: steelShimmer 2.2s infinite ease-in-out;
}

@keyframes steelShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Cascading Stagger entrance for gallery grid cards */
@keyframes galleryCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.95);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.gallery-card-animated {
  animation: galleryCardEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Gallery card image smooth scale & specular sheen on hover */
.gallery-item {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease !important;
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(142, 27, 38, 0.7) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 0 0 25px rgba(108, 0, 19, 0.25) !important;
}

.gallery-item img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.5s ease,
              opacity 0.4s ease !important;
}

.gallery-item:hover img {
  transform: scale(1.09);
  filter: brightness(1.06) contrast(1.03);
}

/* Gallery card sheen reflection */
.gallery-item::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 60%;
  height: 300%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 100%
  );
  transform: rotate(35deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
  opacity: 1;
  animation: gallerySheenSweep 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gallerySheenSweep {
  0% { transform: translate(-80%, -80%) rotate(35deg); }
  100% { transform: translate(250%, 250%) rotate(35deg); }
}

/* Lightbox Modal Entrance */
#lightbox-modal {
  animation: lightboxModalFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lightboxModalFadeIn {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(24px);
  }
}

/* Lightbox Image Preview Animation States */
.lightbox-img-pop {
  animation: lightboxImgPopIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lightboxImgPopIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(12px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.lightbox-slide-next {
  animation: lightboxSlideInNext 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lightboxSlideInNext {
  0% {
    opacity: 0;
    transform: translateX(45px) scale(0.96);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

.lightbox-slide-prev {
  animation: lightboxSlideInPrev 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lightboxSlideInPrev {
  0% {
    opacity: 0;
    transform: translateX(-45px) scale(0.96);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* Lightbox Zoom / Precision Inspection Mode */
.lightbox-zoomed {
  cursor: grab !important;
  transform: scale(1.85) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-width: none !important;
  max-height: none !important;
}

.lightbox-zoomed:active {
  cursor: grabbing !important;
}

/* Lightbox Thumbnail Ribbon */
.lightbox-thumb {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  opacity: 0.55;
}

.lightbox-thumb:hover {
  opacity: 0.9;
  transform: translateY(-2px) scale(1.05);
}

.lightbox-thumb.active {
  opacity: 1;
  border-color: #ffb8b8 !important;
  box-shadow: 0 0 15px rgba(255, 184, 184, 0.6), 0 0 30px rgba(108, 0, 19, 0.5);
  transform: translateY(-3px) scale(1.1);
}

/* --------------------------------------------------------------------------
   STAGGERED SCROLL POP-UP ANIMATION FOR 5 FINISH STEPS
   -------------------------------------------------------------------------- */
.finish-step-card {
  opacity: 0;
  transform: translateY(45px) scale(0.88);
  transition: opacity 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  will-change: transform, opacity;
}

.finish-step-card.pop-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.finish-step-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #6c0013 !important;
  box-shadow: 0 20px 35px -10px rgba(108, 0, 19, 0.25) !important;
}

.finish-step-card .step-badge {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.finish-step-card:hover .step-badge {
  transform: scale(1.2) rotate(6deg);
  box-shadow: 0 0 18px rgba(108, 0, 19, 0.45);
}

/* --------------------------------------------------------------------------
   PHILOSOPHY KITCHEN IMAGE SLIDER & DYNAMIC CAPTION
   -------------------------------------------------------------------------- */
.philosophy-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.philosophy-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.04);
  pointer-events: none;
  z-index: 1;
}

.philosophy-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP BUTTON & PULSE EFFECT
   -------------------------------------------------------------------------- */
.floating-whatsapp-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px -4px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.floating-whatsapp-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 16px 32px -4px rgba(37, 211, 102, 0.65), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-whatsapp-btn:active {
  transform: scale(0.95);
}

.floating-whatsapp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.7);
  animation: wa-pulse-ring 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

@keyframes wa-pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background: #1b1a20;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* --------------------------------------------------------------------------
   SOCIAL MEDIA ICONS (Footer & Contact Page)
   -------------------------------------------------------------------------- */
.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #eff1f5;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-icon-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.social-icon-btn.instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.social-icon-btn.facebook:hover {
  background-color: #1877f2 !important;
  color: #ffffff !important;
  border-color: #1877f2 !important;
}

.social-icon-btn.youtube:hover {
  background-color: #ff0000 !important;
  color: #ffffff !important;
  border-color: #ff0000 !important;
}

.social-icon-btn.google-maps:hover {
  background-color: #4285f4 !important;
  color: #ffffff !important;
  border-color: #4285f4 !important;
}

.social-icon-btn.whatsapp:hover {
  background-color: #25d366 !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
}

.social-icon-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background-color: #f2f3f8;
  color: #191c1f;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-icon-btn-light:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.social-icon-btn-light.instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.social-icon-btn-light.facebook:hover {
  background-color: #1877f2 !important;
  color: #ffffff !important;
  border-color: #1877f2 !important;
}

.social-icon-btn-light.youtube:hover {
  background-color: #ff0000 !important;
  color: #ffffff !important;
  border-color: #ff0000 !important;
}

.social-icon-btn-light.google-maps:hover {
  background-color: #4285f4 !important;
  color: #ffffff !important;
  border-color: #4285f4 !important;
}

.social-icon-btn-light.whatsapp:hover {
  background-color: #25d366 !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
}

/* --------------------------------------------------------------------------
   GOOGLE REVIEWS CAROUSEL & CARDS
   -------------------------------------------------------------------------- */
.google-review-card {
  background: #191c1f !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-width: 310px;
  max-width: 360px;
  flex: 0 0 auto;
}

.google-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
}

.reviews-track-container {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.reviews-track-container::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   PREMIUM BRANDS WE TRUST SECTION
   -------------------------------------------------------------------------- */
.brand-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.brand-logo-card svg,
.brand-logo-card img {
  opacity: 0.72;
  filter: grayscale(100%);
  transition: all 0.35s ease;
}

.brand-logo-card:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.brand-logo-card:hover svg,
.brand-logo-card:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

/* ==========================================================================
   FOOTER GALAXY / STARDUST CONSTELLATION EFFECT (Consistent across all pages)
   ========================================================================== */
footer,
.site-footer,
.footer-galaxy-bg {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0d0d12 !important;
  background-image:
    /* Layer 1: Multi-size Stardust Dots */
    radial-gradient(1.2px 1.2px at 25px 35px, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.5px 1.5px at 120px 180px, rgba(255, 218, 216, 0.85), transparent 100%),
    radial-gradient(1px 1px at 220px 70px, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(2px 2px at 340px 230px, rgba(255, 184, 184, 0.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 460px 120px, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.8px 1.8px at 580px 280px, rgba(255, 235, 210, 0.75), transparent 100%),
    radial-gradient(1px 1px at 700px 50px, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(2.2px 2.2px at 820px 190px, rgba(255, 180, 180, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 940px 110px, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.6px 1.6px at 1060px 260px, rgba(255, 220, 200, 0.75), transparent 100%),
    radial-gradient(1px 1px at 1180px 80px, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(2px 2px at 1300px 220px, rgba(255, 184, 184, 0.8), transparent 100%),
    /* Layer 2: Cosmic Nebula Glow Accents */
    radial-gradient(circle 380px at 88% 20%, rgba(108, 0, 19, 0.22), transparent 70%),
    radial-gradient(circle 440px at 10% 80%, rgba(142, 27, 38, 0.16), transparent 70%) !important;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat !important;
  background-size: 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 1350px 360px, 100% 100%, 100% 100% !important;
}

/* ==========================================================================
   DYNAMIC GALAXY EFFECT WITH MOVING MAROON DOTS IN FOOTER
   ========================================================================== */
footer,
.site-footer,
.footer-galaxy-bg {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0b0c10 !important;
}

/* Primary Moving Galaxy Layer: Maroon Stardust & Drifting Cosmic Points */
footer::before,
.site-footer::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: 
    /* Maroon dots (Theme Matching #6c0013 / #8e1b26) */
    radial-gradient(2.2px 2.2px at 45px 65px, rgba(108, 0, 19, 0.95), transparent 100%),
    radial-gradient(3px 3px at 180px 170px, rgba(180, 20, 45, 0.9), transparent 100%),
    radial-gradient(2.5px 2.5px at 340px 90px, rgba(142, 27, 38, 0.95), transparent 100%),
    radial-gradient(3.5px 3.5px at 510px 230px, rgba(108, 0, 19, 0.9), transparent 100%),
    radial-gradient(2px 2px at 680px 115px, rgba(220, 38, 38, 0.85), transparent 100%),
    radial-gradient(3px 3px at 850px 260px, rgba(142, 27, 38, 0.95), transparent 100%),
    radial-gradient(2.5px 2.5px at 1020px 80px, rgba(180, 20, 45, 0.9), transparent 100%),
    radial-gradient(3.5px 3.5px at 1190px 210px, rgba(108, 0, 19, 0.95), transparent 100%),
    /* Rose & Silver Starlight Accents */
    radial-gradient(1.2px 1.2px at 120px 130px, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.8px 1.8px at 410px 250px, rgba(255, 218, 216, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 740px 65px, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.6px 1.6px at 1070px 225px, rgba(255, 184, 184, 0.85), transparent 100%);
  background-size: 650px 320px;
  background-repeat: repeat;
  opacity: 0.9;
  pointer-events: none;
  animation: footerGalaxyDriftSlow 32s linear infinite;
  z-index: 0;
}

/* Secondary Moving Galaxy Layer: Counter-Drifting Deep Wine & Crimson Celestial Motes */
footer::after,
.site-footer::after {
  content: '';
  position: absolute;
  inset: -20px;
  background-image:
    radial-gradient(3px 3px at 80px 140px, rgba(200, 16, 46, 0.9), transparent 100%),
    radial-gradient(2px 2px at 230px 40px, rgba(255, 110, 130, 0.85), transparent 100%),
    radial-gradient(3.5px 3.5px at 390px 260px, rgba(108, 0, 19, 0.95), transparent 100%),
    radial-gradient(2.2px 2.2px at 560px 150px, rgba(255, 184, 184, 0.8), transparent 100%),
    radial-gradient(3px 3px at 720px 45px, rgba(142, 27, 38, 0.9), transparent 100%),
    radial-gradient(2px 2px at 890px 200px, rgba(200, 16, 46, 0.85), transparent 100%),
    radial-gradient(3.5px 3.5px at 1050px 105px, rgba(108, 0, 19, 0.95), transparent 100%);
  background-size: 520px 290px;
  background-repeat: repeat;
  opacity: 0.85;
  pointer-events: none;
  animation: footerMaroonDotsDrift 22s linear infinite;
  z-index: 0;
}

@keyframes footerGalaxyDriftSlow {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 650px 320px;
  }
}

@keyframes footerMaroonDotsDrift {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -520px 290px;
  }
}

footer > *,
.site-footer > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   FOOTER COLUMN HEADING HIGHLIGHTS
   (Quick Links, Categories & Products, Showroom & Studio highlighted)
   ========================================================================== */
.footer-heading-highlight,
footer h4,
.site-footer .footer-title {
  color: #ffdad8 !important; /* Rose-gold luxury starlight highlight */
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.8125rem !important; /* 13px */
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 6px !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 14px rgba(255, 184, 184, 0.45), 0 0 28px rgba(108, 0, 19, 0.5) !important;
}

.footer-heading-highlight::after,
footer h4::after,
.site-footer .footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #ffb3b1, #ffdad8, transparent);
  border-radius: 2px;
}

/* ==========================================================================
   LOGO HOVER ZOOM EFFECT (Header & Footer - Noticeable & Smooth)
   ========================================================================== */
header a[href*="index.html"] img,
header .site-logo img,
header a img,
footer img[src*="Logo.jpeg"],
footer a img,
.logo-zoom-target,
.logo-hover-zoom {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease !important;
  transform-origin: center center;
  will-change: transform;
}

header a:hover img,
header .site-logo:hover img,
header a[href*="index.html"]:hover img,
footer a:hover img,
footer .inline-flex:hover img,
footer img[src*="Logo.jpeg"]:hover,
.logo-zoom-target:hover,
.logo-hover-zoom:hover {
  transform: scale(1.15) !important;
  filter: drop-shadow(0 6px 20px rgba(108, 0, 19, 0.45)) !important;
}

/* ==========================================================================
   SUB-FOOTER ATTRIBUTION (Shifted towards left)
   ========================================================================== */
.sub-footer-attribution {
  display: inline-block;
  transform: translateX(-24px);
  transition: transform 0.3s ease;
}

@media (max-width: 640px) {
  .sub-footer-attribution {
    transform: none;
  }
}

/* ==========================================================================
   PANEL SPACING REFINEMENT
   (Remove extra space after How We Work Design Process panel)
   ========================================================================== */
#process-section {
  padding-bottom: 0.75rem !important;
}

#categories {
  padding-top: 1.5rem !important;
}

/* ==========================================================================
   MOBILE MENU BUTTON & DRAWER RELIABILITY
   ========================================================================== */
#mobile-menu-btn {
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#mobile-menu-btn * {
  pointer-events: none !important;
}

#mobile-menu-drawer {
  transition: max-height 0.35s ease-in-out, opacity 0.3s ease;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   LIGHTBOX NAVIGATION BUTTONS - COMPACT & POSITIONED AT IMAGE EDGE
   ========================================================================== */
#lightbox-prev-btn,
#lightbox-next-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  border-top-left-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
  border-top-right-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(18, 18, 22, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  z-index: 25 !important;
}

#lightbox-prev-btn:hover,
#lightbox-next-btn:hover {
  background: #6c0013 !important;
  border-color: rgba(255, 218, 216, 0.6) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 16px rgba(108, 0, 19, 0.7), 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

#lightbox-prev-btn:active,
#lightbox-next-btn:active {
  transform: scale(0.95) !important;
}

#lightbox-prev-btn .material-symbols-outlined,
#lightbox-next-btn .material-symbols-outlined {
  font-size: 22px !important;
  line-height: 1 !important;
}