/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */
:root {
    --brand-blue: #004b87; 
    --brand-green: #5cb85c;
    --text-dark: #333333;
    --white: #ffffff;
    --bg-light: #f4f7f6;
}

* { 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body { 
    margin: 0; 
    padding: 0; 
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    line-height: 1.6;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* =========================================
   2. HEADER
   ========================================= */
/* --- 1. Update your existing main-header --- */
.main-header {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed; /* Changed from sticky to fixed for better animation */
    width: 100%;     /* Added so it stretches across the screen */
    top: 0;
    z-index: 1000;
    padding: 10px 0;
    transition: transform 0.3s ease-in-out; /* Adds the smooth slide animation */
}

/* --- 2. Add this NEW class right below it --- */
.main-header.header-hidden {
    transform: translateY(-100%); /* Pushes the header exactly 100% of its height upwards off the screen */
}

.nav-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.brand-logo { 
    height: 60px; 
    width: auto; 
}

.desktop-nav ul { 
    display: flex; 
    list-style: none; 
    gap: 20px; 
}

.desktop-nav a { 
    text-decoration: none; 
    color: var(--brand-blue); 
    font-weight: 600; 
}

.header-buttons {
    display: flex;
    gap: 15px; 
    align-items: center;
}

.secondary-btn {
    background: transparent;
    color: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    padding: 8px 18px; 
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.secondary-btn:hover {
    background: var(--brand-blue);
    color: var(--white);
}

.cta-button {
    background: var(--brand-blue);
    color: var(--white);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}

.cta-button:hover { 
    background: #003366; 
}

/* =========================================
   3. HERO SECTION
   ========================================= */
/* --- Add extra top padding to clear the fixed header --- */
.hero-section {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); 
    color: #333333; 
    /* Changed padding: Top (120px) Right (0) Bottom (60px) Left (0) */
    padding: 120px 0 60px 0; 
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
    gap: 40px;
    align-items: center;
}

.hero-large-logo {
    max-width: 320px; 
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0px 8px 12px rgba(0,0,0,0.15)); 
}

/* --- 1. Make the Logo Proportionate & Centered --- */
/* --- 1. Force the entire left column to center its contents --- */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;  /* This forces the image, tagline, and badges to center horizontally */
    text-align: center;   /* Centers the paragraph text */
    width: 100%;
}

/* --- 2. The Logo Styling --- */
.hero-tm-logo {
    max-width: 280px; 
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* Space between logo and tagline */
    filter: drop-shadow(0px 8px 12px rgba(0,0,0,0.15));
}

/* --- 3. The Tagline Container --- */
.premium-tagline-container {
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 100%;
    gap: 15px; 
    margin-bottom: 20px;
}

/* --- 4. Center the Badges --- */
.trust-badges-mini { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 20px; 
    font-weight: bold; 
}

.deco-line {
    height: 2px;
    width: 60px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent); 
}

.premium-tagline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(to right, #E65C00, #F9D423);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-content h2 { 
    font-size: 3rem; 
    margin-bottom: 10px; 
    color: var(--brand-green); 
}


/* =========================================
   4. ENQUIRY FORM
   ========================================= */
.form-box {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    color: var(--text-dark);
}

.form-box h3 { color: var(--brand-blue); margin-top: 0; }
.form-group, .form-group-row { margin-bottom: 15px; }
.form-group-row { display: flex; gap: 15px; }
.form-group-row input, .form-group-row select { width: 50%; } /* Split 50/50 on desktop */

input, select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

.submit-btn {
    width: 100%;
    background: var(--brand-green);
    color: var(--white);
    padding: 14px;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.submit-btn:hover { background: #4cae4c; }

/* --- Country Code & 10-Digit Mobile Styling --- */
.phone-input-wrapper {
    display: flex;
    width: 50%; /* Keeps the 50/50 split on desktop */
}

.country-code {
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-right: none;
    padding: 0 15px;
    border-radius: 4px 0 0 4px;
    color: var(--brand-blue);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-input-wrapper input {
    border-radius: 0 4px 4px 0;
    width: 100%; /* Stretches input to fill the rest of the box */
}

/* =========================================
   5. PRODUCT GRID
   ========================================= */
.products-section { padding: 80px 0; text-align: center; }
.section-title { color: var(--brand-blue); font-size: 2.2rem; margin-bottom: 40px; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Automatically responsive grid */
    gap: 30px;
}

.product-card {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.product-card:hover { transform: translateY(-5px); }

.product-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.product-card h4 { color: var(--brand-blue); margin: 0 0 5px 0; font-size: 1.3rem; }
.product-card p { color: #666; margin: 0; }

/* =========================================
   6. CONTACT US "HERO" SECTION (FOOTER)
   ========================================= */
.contact-hero {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    padding: 80px 0;
    color: var(--text-dark);
    border-top: 4px solid var(--brand-green); 
}

.contact-hero-content h2 {
    font-size: 2.8rem;
    color: var(--brand-blue);
    margin: 10px 0;
    line-height: 1.2;
}

.contact-hero-content p {
    font-size: 1.3rem;
    color: #555;
    font-style: italic;
    margin: 0;
}

.contact-hero-details {
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

.contact-card {
    background: var(--white);
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 25px;
    transition: transform 0.3s ease;
}

.contact-card:hover { transform: translateY(-3px); }

.contact-card i {
    font-size: 2rem;
    color: var(--brand-green);
    background: rgba(92, 184, 92, 0.1); 
    padding: 18px;
    border-radius: 50%;
}

.contact-card div { display: flex; flex-direction: column; }
.contact-card strong { font-size: 1.1rem; color: var(--brand-blue); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.contact-card a { color: var(--text-dark); text-decoration: none; font-size: 1.1rem; font-weight: 500; line-height: 1.5; transition: color 0.3s ease; }
.contact-card a:hover { color: var(--brand-green); }

.simple-footer {
    background-color: var(--brand-blue);
    color: var(--white);
    text-align: center;
    padding: 15px 0;
    font-size: 0.9rem;
    margin: 0;
}

/* =========================================
   7. STICKY BUTTON
   ========================================= */
.sticky-enquiry-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--brand-green);
    color: var(--white);
    padding: 15px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 2000;
    transition: transform 0.3s;
}

.sticky-enquiry-btn:hover { transform: scale(1.05); }


/* =========================================
   NEW: HERO PRODUCT SHOWCASE (SLIDESHOW)
   ========================================= */
/* =========================================
   NEW: HERO PRODUCT SHOWCASE (SLIDESHOW)
   ========================================= */
.hero-product-showcase {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stacks the dots under the image */
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between the image and the dots */
}

/* ... Keep your existing .showcase-inner and .showcase-img rules here ... */

/* --- NEW: Navigation Dots Styling --- */


/* --- Interactive Slider Images --- */
.showcase-img {
    position: absolute;
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 1;
    cursor: pointer; /* <-- ADD THIS LINE */
}

/* The active class makes the current image visible */
.showcase-img.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* --- Interactive Navigation Dots --- */
.showcase-dots {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: transparent; 
    border: 2px solid var(--brand-green);
    transition: all 0.3s ease;
    cursor: pointer; /* Turns the mouse into a pointing hand */
}

/* Hover effect so users know they are clickable */
.dot:hover {
    background-color: rgba(92, 184, 92, 0.5);
}

/* The active class highlights the current dot */
.dot.active {
    background-color: var(--brand-green); 
    transform: scale(1.3);
}

/* Syncing the dots exactly with the image fade delays */
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 4s; }
.dot-3 { animation-delay: 8s; }
.dot-4 { animation-delay: 12s; }


.showcase-inner {
    position: relative;
    width: 100%;
    max-width: 380px; /* Constrains the image size so it's not too huge */
    aspect-ratio: 4 / 5; /* Creates a nice portrait frame for your packets */
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); /* Soft spotlight effect behind products */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Staggering the animation so they appear one after another */
.img-1 { animation-delay: 0s; }
.img-2 { animation-delay: 4s; }
.img-3 { animation-delay: 8s; }
.img-4 { animation-delay: 12s; }


/* --- Temporary highlight glow when a product is clicked from the hero section --- */
.highlight-card {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 20px rgba(92, 184, 92, 0.4) !important;
    transform: scale(1.03) !important;
    transition: all 0.4s ease;
}

/* The Keyframes that control the fade in and fade out */
/*@keyframes fadeSlider {
    0%, 20%   { opacity: 1; transform: scale(1); }
    25%, 95%  { opacity: 0; transform: scale(0.95); } /* Slightly shrinks as it fades out */
    /*100%      { opacity: 1; transform: scale(1); }
}*/

/* =========================================
   8. MOBILE RESPONSIVENESS (All combined here)
   ========================================= */
@media (max-width: 768px) {
    
    /* Header layout */
    .brand-logo { height: 45px; }
    .desktop-nav, .header-buttons { display: none; }
    
    /* Stack Hero grid and center text */
    .hero-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 30px;
    }
    
    /* ... your other mobile rules ... */

    /* Adjust the top padding for smaller mobile headers */
    .hero-section { 
        padding: 100px 0 40px 0; 
    }
    
    /* Adjust Premium Tagline sizing */
    .premium-tagline { font-size: 1.2rem; letter-spacing: 2px; }
    .deco-line { width: 30px; background: linear-gradient(90deg, transparent, #E65C00, transparent); }
    .premium-tagline-container { justify-content: center; }
    .hero-large-logo { margin: 0 auto 15px auto; display: block; max-width: 260px; }
    .trust-badges-mini { justify-content: center; flex-wrap: wrap; }
    
    /* Fix Form layout on phones */
    .form-group-row { flex-direction: column; gap: 15px; }
    .form-group-row input, .form-group-row select { width: 100%; }
	/* Ensure the wrapper stacks perfectly on mobile screens */
    .phone-input-wrapper {
        width: 100%;
    }
    
    /* Fix Contact Hero layout */
    .contact-hero { padding: 50px 0; text-align: center; }
    .contact-hero-content h2 { font-size: 2.2rem; }
    .contact-card { flex-direction: column; text-align: center; padding: 20px; }
    
    /* Move Sticky button so it's not too big */
    .sticky-enquiry-btn { bottom: 15px; right: 15px; padding: 12px 20px; font-size: 0.9rem; }
}