/* 
   Sreemayil Lifestyle Centre - Global Botanical Green Theme
   Colors: Nature Green (#2d5a27), Sage Green, Earthy Cream
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

.font-serif-premium {
    font-family: 'Playfair Display', serif;
}

/* Custom Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-delayed {
    animation: fadeIn 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(45, 90, 39, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* WA Button Pulse Shadow */
.wa-float-btn {
    box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.3);
}
.wa-float-btn:hover {
    box-shadow: 0 20px 35px -5px rgba(37, 211, 102, 0.5);
}

/* Hero Slider Transitions */
.hero-slide {
    transition: opacity 1s ease-in-out;
}

/* Line Clamp for Product Descriptions */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Precise Responsive Fix for About Section (Target: 393px Width) */
@media (max-width: 480px) {
    /* Force grids in major sections to stack vertically */
    .grid:not(.product-grid):not(.product-grid-mobile):not(.grid-cols-2),
    #about .grid,
    section[id*="about"] .grid,
    #contact .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Restore and Fix About Section Composition */
    #about .relative.rounded-3xl.overflow-hidden,
    section[id*="about"] .relative.rounded-3xl.overflow-hidden {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #about img,
    section[id*="about"] img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* Ensure all faces are fully visible */
        border-radius: 12px !important;
        position: relative !important;
    }

    #about .glass-dark,
    section[id*="about"] .glass-dark {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 15px !important;
        background: #1e3d1a !important; /* Solid background for legibility */
        backdrop-filter: none !important;
        padding: 20px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        text-align: left !important;
    }

    #about .glass-dark p,
    section[id*="about"] .glass-dark p {
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Product Card Responsiveness Fix - 2 Column Layout */
    .product-grid-mobile,
    .product-grid,
    .grid.grid-cols-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .product-card,
    .product-card-mobile {
        width: 100% !important;
        max-width: none !important; 
        padding: 8px !important;
        margin-bottom: 5px !important;
    }

    /* Premium Image Scaling - Full Cover */
    .product-image-container,
    .product-image-container-mobile {
        height: 180px !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .product-card img,
    .product-card-mobile img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .product-title,
    .product-title-mobile {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3 !important;
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .product-tagline,
    .product-tagline-mobile {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .product-btn,
    .product-btn-mobile {
        font-size: 12px !important;
        padding: 6px 0 !important;
    }

    /* About Section Spacing Fix */
    #about .grid > div:first-child,
    section[id*="about"] .grid > div:first-child {
        margin-bottom: 20px !important;
    }

    /* Contact Section Fixes */
    #contact .p-10,
    #contact .lg\:p-16 {
        padding: 24px 16px !important;
    }

    #contact h2 {
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }

    #contact p,
    #contact a {
        word-break: break-word !important;
        line-height: 1.6 !important;
    }

    #contact .space-y-8 > div {
        gap: 12px !important;
    }

    /* Floating WhatsApp Button */
    .wa-float-btn {
        bottom: 20px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
    }

    .wa-float-btn i {
        width: 24px !important;
        height: 24px !important;
    }

    /* Key Offerings / Services Section Fix - 2 Column Layout */
    #services .grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    #services .grid > div {
        padding: 15px !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #services .grid div[class*="w-16"] {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    #services .grid i {
        width: 24px !important;
        height: 24px !important;
    }

    #services h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    #services p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Course Overview Image Optimization - Circular & Larger */
    .overview-img-container {
        width: 200px !important;
        height: 200px !important;
        border-radius: 50% !important;
        margin: 0 auto 25px auto !important;
        border: 5px solid #ffffff !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important; /* Remove any padding */
    }

    .overview-img-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important; /* Remove any margins */
        display: block !important;
    }

    /* Adjust Course Overview Heading */
    #training-overview-h2,
    .py-24 h2.text-natureGreen {
        font-size: 22px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* Benefits Section Fixes */
    #benefits .p-10,
    #benefits .lg\:p-20 {
        padding: 25px 15px !important;
        border-radius: 2rem !important;
    }

    #benefits h2 {
        font-size: 22px !important;
        margin-bottom: 32px !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }

    #benefits .grid {
        gap: 25px !important;
    }

    #benefits .flex.gap-6 {
        gap: 15px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    #benefits div[class*="w-16"] {
        width: 45px !important;
        height: 45px !important;
        border-radius: 12px !important;
    }

    #benefits i {
        width: 22px !important;
        height: 22px !important;
    }

    #benefits h4 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    #benefits p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Training Syllabus Section Fixes - 2 Column Layout */
    #syllabus .grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    #syllabus .grid > div {
        padding: 15px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 140px !important;
        background: #ffffff !important;
    }

    #syllabus h4 {
        font-size: 13px !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #syllabus p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #4b5563 !important;
    }

    #syllabus span.block {
        font-size: 9px !important;
        margin-bottom: 8px !important;
        letter-spacing: 0.05em !important;
    }

    /* Varieties Section Optimization */
    .grid-cols-2.md\:grid-cols-5 {
        gap: 8px !important;
        margin-top: 20px !important;
    }

    .grid-cols-2.md\:grid-cols-5 > div {
        padding: 12px 5px !important;
        font-size: 11px !important;
        border-radius: 12px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ensure images in any grid card are proportional */
    .grid > div img {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }

    #services p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Navbar Logo & Brand Text Fix */
    nav#navbar span.hidden.sm\:block {
        display: inline-block !important;
        font-size: 18px !important;
        letter-spacing: -0.01em !important;
    }

    nav#navbar img {
        height: 32px !important; /* Slightly smaller to fit with text */
        width: auto !important;
    }

    nav#navbar .flex.items-center.gap-3 {
        gap: 8px !important;
    }

    /* Ensure high z-index and fixed position if needed */
    nav#navbar {
        z-index: 1000 !important;
        position: sticky !important;
        top: 0 !important;
    }

    /* Training Page Specific: Adjust back button size to save space */
    nav#navbar .md\:hidden.flex.items-center.justify-center.w-10.h-10 {
        width: 32px !important;
        height: 32px !important;
    }

    /* Footer Optimization Fixes */
    footer {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
        text-align: center !important;
    }

    footer .grid {
        gap: 25px !important; /* Reduced gap */
        margin-bottom: 25px !important;
    }

    footer .flex-col {
        align-items: center !important;
    }

    /* Footer Logo & Brand Block */
    footer .flex.items-center.gap-3 {
        justify-content: center !important;
        margin-bottom: 15px !important;
    }

    footer img {
        height: 50px !important; /* Scaled down logo */
        width: auto !important;
        margin-bottom: 0 !important;
    }

    footer span.text-2xl {
        font-size: 20px !important;
    }

    footer p.text-gray-300 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
    }

    footer h4 {
        margin-bottom: 20px !important;
        font-size: 16px !important;
    }

    footer ul li {
        margin-bottom: 8px !important;
    }

    /* Centered WhatsApp Button in Footer */
    footer a[href*="wa.me"] {
        width: auto !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    footer .flex.gap-4 {
        justify-content: center !important;
        margin-top: 5px !important;
    }

    footer a.w-10.h-10 {
        width: 36px !important;
        height: 36px !important;
    }

    footer i {
        width: 18px !important;
        height: 18px !important;
    }

    /* Bottom Bar Fixes */
    footer div.pt-10.border-t {
        padding-top: 20px !important;
    }

    footer p.text-xs {
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
    }

    /* Training/Header Banner Fixes */
    header.pt-32.pb-20,
    header.bg-natureGreen {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
        height: auto !important;
        min-height: 320px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    header h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

    header p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    header span.inline-block {
        font-size: 10px !important;
        padding: 4px 12px !important;
        margin-bottom: 15px !important;
    }

    /* Prevent horizontal scroll and ensure margin */
    body, html {
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
    }

    .max-w-7xl {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* FINAL FORCE OVERRIDE FOR MOBILE FOOTER (Infinix Zero 5G - 393px) */
@media (max-width: 480px) {
    footer {
        padding: 15px 5px !important;
        text-align: center !important;
    }

    footer .max-w-7xl {
        padding: 0 !important;
    }

    footer .grid.mb-16 {
        margin-bottom: 20px !important;
        gap: 20px !important;
    }

    /* Force Logo & Brand Center Stack */
    footer .flex.items-center.gap-3 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 auto 10px auto !important;
        width: 100% !important;
    }

    footer .flex.items-center.gap-3 img {
        max-height: 35px !important;
        height: 35px !important;
        width: auto !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    footer .flex.items-center.gap-3 span {
        font-size: 18px !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    /* Force Description Text */
    footer p.text-gray-300 {
        font-size: 13px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    /* Force Headings and Lists Center */
    footer h4, footer .font-heading {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        margin-bottom: 15px !important;
    }

    footer ul {
        display: block !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    footer ul li {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    footer ul li i {
        flex-shrink: 0 !important;
    }

    /* WhatsApp Button Centering */
    footer a[href*="wa.me"] {
        display: flex !important;
        margin: 10px auto !important;
        width: fit-content !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* Copyright Text */
    footer p.text-gray-500, footer .text-xs {
        font-size: 9px !important;
        margin-top: 10px !important;
        display: block !important;
        text-align: center !important;
        padding: 0 !important;
    }
}