@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&display=swap');

 body {
     font-family: 'Readex Pro', sans-serif;
     background-color: #ffffff;
 }

 html {
     scroll-behavior: smooth;
 }


 .slider-fade {
     transition: opacity 1s ease-in-out;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-6px);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 .animate-float {
     animation: float 4s ease-in-out infinite;
 }

 .animate-float-slow {
     animation: float 6s ease-in-out infinite;
 }

 .animate-fadeInUp {
     animation: fadeInUp 1s ease-out forwards;
 }

 .delay-200 {
     animation-delay: 0.2s;
 }

 .delay-300 {
     animation-delay: 0.3s;
 }

 .outline-text {
     font-family: 'Arial Black', sans-serif;
     color: transparent;
     -webkit-text-stroke: 2px #d4d4d4;
 }

 .visible-down {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 .outline-text {
     font-family: 'Arial Black', sans-serif;
     color: transparent;
     -webkit-text-stroke: 2px #d4d4d4;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-6px);
     }
 }

 .animate-float {
     animation: float 4s ease-in-out infinite;
 }

 .animate-float-slow {
     animation: float 6s ease-in-out infinite;
 }


 .visible-down {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 .circle-container .icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     transition: transform 0.3s ease, opacity 0.3s ease;
     opacity: 0.6;
     border-radius: 9999px;
     background: #fff;
     padding: 4px;
 }

 .circle-container .icon.active {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.2);
     border: 3px solid #f43f5e;
 }

 .circle-container .icon.animate-in {
     opacity: 1;
 }

 /* Animation for hamburger menu */
 #menuBtn.open span:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
 }

 #menuBtn.open span:nth-child(2) {
     opacity: 0;
 }

 #menuBtn.open span:nth-child(3) {
     transform: translateY(-6px) rotate(-45deg);
 }

 /* Dropdown arrow animation */
 .group:hover svg {
     transform: rotate(180deg);
 }

 svg {
     transition: transform 0.3s ease;
 }

 .rotate-180 {
     transform: rotate(180deg);
 }

 @layer utilities {
     .menu-line {
         @apply block h-0.5 w-6 bg-black transition-all duration-300 origin-center;
     }

     .btn-open .top {
         @apply translate-y-2 rotate-45;
     }

     .btn-open .middle {
         @apply opacity-0;
     }

     .btn-open .bottom {
         @apply -translate-y-2 -rotate-45;
     }
 }


 .text-custom-gold {
     color: #BD8B50;
 }

 .border-custom-gold {
     border-color: #BD8B50;
 }

 .product-card {
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .section-title {
     position: relative;
     display: inline-block;
 }

.section-title:after {
    content: '';
    position: absolute;
    width: 50%;
    height: 2px;
    background: #BD8B50;
    bottom: -8px;
    left: 25%;
}

/* ============================================
   HERO SECTION STYLES
   ============================================ */

/* Hero Section Container */
#hero-section {
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden;
}

/* Loading Overlay */
#loadingOverlay {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#loadingOverlay.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Innotex Text Animation */
#innotexText {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-in-out 0.5s;
}

#innotexText.visible {
    opacity: 1 !important;
}

#innotexText h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    #innotexText {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    #innotexText h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* Hero Panels Container */
#heroPanelsContainer {
    position: relative !important;
    display: flex !important;
    align-items: center; /* Center align for zig-zag pattern */
    justify-content: center;
    width: 100% !important;
    opacity: 1;
    visibility: visible;
    margin-top: -32px;
}

#heroPanelsContainer.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 640px) {
    #heroPanelsContainer {
        margin-top: -16px;
    }
}

@media (min-width: 768px) {
    #heroPanelsContainer {
        margin-top: -56px;
    }
}

@media (min-width: 1024px) {
    #heroPanelsContainer {
        margin-top: -72px;
    }
}

/* Individual Hero Panel */
.hero-panel {
    position: relative !important;
    display: block !important;
    width: 100%;
    flex: 1 1 auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}

/* Zig-zag alternating pattern using margin offsets */
.hero-panel {
    margin-top: 0;
}

.hero-panel:nth-child(1),
.hero-panel:nth-child(3),
.hero-panel:nth-child(5) {
    margin-top: 40px; /* down */
}

.hero-panel:nth-child(2),
.hero-panel:nth-child(4) {
    margin-top: 0; /* up (baseline) */
}

@media (min-width: 768px) {
    .hero-panel:nth-child(1),
    .hero-panel:nth-child(3),
    .hero-panel:nth-child(5) {
        margin-top: 60px;
    }

    .hero-panel:nth-child(2),
    .hero-panel:nth-child(4) {
        margin-top: 10px;
    }
}

@media (min-width: 1024px) {
    .hero-panel:nth-child(1),
    .hero-panel:nth-child(3),
    .hero-panel:nth-child(5) {
        margin-top: 80px;
    }

    .hero-panel:nth-child(2),
    .hero-panel:nth-child(4) {
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .hero-panel {
        margin-top: 0;
    }
}

.hero-panel.animate-in {
    animation: fadeInUp 0.8s ease-out both;
}

.hero-panel.animate-in-down {
    animation: fadeInDown 0.8s ease-out both;
}

/* Panel Image Container - Critical for visibility */
.hero-panel .panel-image {
    position: relative !important;
    width: 100% !important;
    min-height: 300px !important;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden !important;
    border-radius: 0.5rem 0.5rem 0 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease;
    display: block !important;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 3 / 4) {
    .hero-panel .panel-image {
        height: 0;
        padding-bottom: 133.33%; /* 4/3 ratio */
    }
}

/* Panel Hover Effects */
.hero-panel:hover .panel-image {
    transform: scale(1.05) translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.hero-panel:hover {
    z-index: 20 !important;
}

/* Maintain hover scale without breaking offsets */
.hero-panel:hover {
    transform: scale(1.01);
}

/* Panel Gradient Overlay - ensure it's visible */
.hero-panel .panel-image > div {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Staggered Animation for Panels */
.hero-panel:nth-child(1) {
    animation-delay: 0.1s;
}

.hero-panel:nth-child(2) {
    animation-delay: 0.2s;
}

.hero-panel:nth-child(3) {
    animation-delay: 0.3s;
}

.hero-panel:nth-child(4) {
    animation-delay: 0.4s;
}

.hero-panel:nth-child(5) {
    animation-delay: 0.5s;
}

/* Home Page Background */
.home-page-background {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10 !important;
    background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    #heroPanelsContainer {
        flex-direction: column !important;
        align-items: center;
        gap: 1rem !important;
    }

    .hero-panel {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }

    .hero-panel .panel-image {
        min-height: 250px !important;
        aspect-ratio: 16 / 9;
        border-radius: 0.75rem !important;
    }

    @supports not (aspect-ratio: 16 / 9) {
        .hero-panel .panel-image {
            padding-bottom: 56.25%; /* 16:9 ratio */
        }
    }

    #innotexText h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .hero-panel .panel-image {
        min-height: 350px !important;
        aspect-ratio: 3 / 4;
    }

    @supports not (aspect-ratio: 3 / 4) {
        .hero-panel .panel-image {
            padding-bottom: 133.33%;
        }
    }
}

@media (min-width: 769px) {
    .hero-panel .panel-image {
        min-height: 400px !important;
    }
}

@media (min-width: 1024px) {
    .hero-panel .panel-image {
        min-height: 450px !important;
    }
}

/* Additional Panel Enhancements */
.hero-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #BD8B50, transparent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 10;
}

.hero-panel:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Panel Image Loading State */
.hero-panel .panel-image.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite;
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Blob Animation for Background (if used) */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* ============================================
   HAMBURGER MENU FIXES
   ============================================ */

/* Ensure hamburger button is visible and clickable on mobile */
#menuBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 50 !important;
    cursor: pointer !important;
    position: relative !important;
}

@media (min-width: 769px) {
    #menuBtn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #menuBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Ensure overlay is properly positioned */
#overlay {
    z-index: 40 !important;
}

#overlay.flex {
    display: flex !important;
}

#overlay.hidden {
    display: none !important;
}