/* ========================================================================= */
/* 1. GLOBAL STYLES & RESETS */
/* ========================================================================= */
:root {
    /* Primary Colors: Persian Green */
    --color-primary-green: #00A693; 
    --color-dark-green: #008778;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-off-white: #f4f7f6;
    /* FIX: Changed dark text color to pure black */
    --color-text-dark: #000000; 
    --color-text-light: #333333; /* Darker grey for body text contrast */
    
    /* Layout Variables */
    --top-bar-height: 35px; /* NEW */
    --header-height: 70px;
    --total-header-height: calc(var(--top-bar-height) + var(--header-height)); /* NEW */
    --bottom-nav-height: 60px;
}

* {
    margin: 0;
    padding: 0;
    /* FIX: Crucial for preventing content overflow on mobile */
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--color-text-dark); /* Ensures ALL body text is pure black */
    background-color: var(--color-off-white);
    /* ADJUSTED: Added top-bar-height to total padding */
    padding-top: var(--total-header-height); 
    /* FIX: Prevents horizontal scrollbar */
    overflow-x: hidden; 
}

/* FIX: Ensures all media are responsive */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--color-primary-green);
    /* Animation */
    transition: color 0.3s;
}

a:hover {
    color: var(--color-dark-green);
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* FIX: Reinforce black color on main headings/elements */
h1, h2, h3 {
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

/* Call-to-Action Button Style */
.cta-button {
    display: inline-block;
    background-color: var(--color-primary-green);
    color: var(--color-white);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px;
    /* Animation: Subtle scale on hover */
    transition: background-color 0.3s, transform 0.3s;
    border: 2px solid var(--color-primary-green);
}

.cta-button:hover {
    background-color: var(--color-dark-green);
    border-color: var(--color-dark-green);
    color: var(--color-white);
    transform: scale(1.03); /* Subtle Zoom */
}

.cta-button.white-text {
    background-color: var(--color-white);
    color: var(--color-primary-green);
    border: 2px solid var(--color-primary-green);
}

.cta-button.white-text:hover {
    background-color: var(--color-off-white);
    color: var(--color-dark-green);
}


/* ========================================================================= */
/* 2. HEADER & NAVIGATION (FIXED/STICKY) */
/* ========================================================================= */

/* NEW: Top Bar Header */
.top-bar-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--top-bar-height);
    background-color: var(--color-primary-green); /* Solid Green Background */
    color: var(--color-white);
    z-index: 1001; /* Higher than sticky-header */
    font-size: 0.85rem;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.top-bar-header a {
    color: var(--color-white);
    transition: color 0.3s;
}
/* FIX: Ensure long text in top bar doesn't overflow (especially for email/phone) */
.top-bar-header .contact-details-top a {
    word-break: break-word; 
    overflow-wrap: break-word;
}


.top-bar-header a:hover {
    color: var(--color-off-white);
}

.top-bar-header i {
    margin-right: 5px;
}

.contact-details-top a {
    margin-right: 15px;
}

.top-bar-header .divider {
    margin-right: 15px;
}

.social-links-top a {
    font-size: 1rem;
    margin-left: 15px;
}


/* Sticky Header */
.sticky-header {
    position: fixed;
    /* ADJUSTED: Pushed down by the top bar height */
    top: var(--top-bar-height); 
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    /* Liquid Glass Effect */
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-text-dark);
}

.brand-logo {
    height: 40px; 
    margin-right: 10px;
}

.company-name {
    font-size: 0.9rem;
    color: var(--color-text-dark);
}

/* Desktop Navigation */
.desktop-nav ul {
    display: flex;
}

.desktop-nav li a {
    padding: 10px 15px;
    display: block;
    font-weight: 500;
    color: var(--color-text-light);
    transition: color 0.3s, background-color 0.3s;
    border-radius: 5px;
}

.desktop-nav li a:hover,
.desktop-nav li a.active {
    color: var(--color-primary-green);
    background-color: rgba(0, 166, 147, 0.1); 
}

/* Hamburger Icon (Mobile only) */
.hamburger {
    font-size: 1.5rem;
    cursor: pointer;
    display: none; 
    color: var(--color-primary-green);
}

/* Side Drawer (Mobile Navigation) */
.side-drawer {
    position: fixed;
    top: 0;
    width: 80%;
    max-width: 300px; 
    right: -300px; 
    height: 100%;
    background: var(--color-white);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transition: right 0.4s ease-in-out;
    padding-top: 20px;
}

.side-drawer.open {
    right: 0; 
}

.side-drawer ul {
    padding: 20px 0;
}

.side-drawer li a {
    display: block;
    padding: 15px 25px;
    font-size: 1.1rem;
    color: var(--color-text-dark);
}

.side-drawer li a:hover,
.side-drawer li a.active {
    background-color: rgba(0, 166, 147, 0.1); 
    color: var(--color-primary-green);
}

.close-btn {
    text-align: right;
    padding: 0 25px 20px 0;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-light);
}

.separator {
    height: 1px;
    background-color: #ddd;
    margin: 10px 25px;
}

/* ========================================================================= */
/* 3. MAIN SECTIONS & COMPONENTS */
/* ========================================================================= */

main {
    padding-bottom: 50px; 
}

section {
    padding: 60px 0;
}

/* Hero Section (Parallax/Fixed background effect) */
.hero-section {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position: center center;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
}

.hero-content {
    color: var(--color-white);
    padding: 20px;
    /* Liquid Glass on Content */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    /* Animation */
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* NEW: Short About Section */
.about-short-section {
    background-color: var(--color-white);
    padding: 80px 0; /* Extra padding to make it stand out */
}

.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Text wider than image for readability */
    gap: 50px;
    align-items: center;
}

.about-text {
    padding-right: 20px;
}

.about-text h2 {
    color: var(--color-primary-green);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-text .intro-paragraph {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 15px;
}

.about-text p {
    color: var(--color-text-light);
    margin-bottom: 15px;
}

.about-image {
    position: relative;
    padding: 10px;
    background-color: var(--color-off-white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 3px solid var(--color-primary-green);
    /* For dummy purposes, ensure it fills the space */
    min-height: 250px; 
    object-fit: cover; 
}

.highlight-box {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    
    /* Liquid Glass Style */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-primary-green);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
    width: 90%;
}

.highlight-box i {
    color: var(--color-dark-green);
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.highlight-box p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-dark);
}
/* End Short About Section */


/* Services Overview Section (Improved Mobile Layout) */
.services-overview {
    text-align: center;
    background-color: var(--color-off-white); /* Changed to off-white to contrast with the new white about section */
    padding-top: 100px; /* Adjusted padding to account for highlight-box overlap */
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
    margin-top: 40px;
}

/* Base style for all cards (Service cards are overridden by Section 8) */
.service-card {
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

/* --- Old Glowing Card Styles (Removed) --- */

/* NEW SECTION: KEY PERSON PROFILE (UPDATED STYLE) */
.keyperson-section {
    background-color: var(--color-white);
    text-align: center;
}

.keyperson-profile {
    /* Mapped Variables from Service Card template for consistency */
    --white: var(--color-white);
    --primary: var(--color-primary-green);
    --secondary: #00c3a9;

    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 30px auto 0;
    padding: 30px; /* Increased padding */
    
    /* Apply New Card Styling */
    background: linear-gradient(145deg, var(--white) 30%, #ccfff4 100%); /* White + Light Green Gradient */
    border-radius: 1rem;
    border: 2px solid var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover lift and shadow enhancement (Matching service cards) */
.keyperson-profile:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 166, 147, 0.25);
}

.keyperson-profile img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 4px solid var(--color-primary-green);
    transition: transform 0.5s ease-in-out; 
}
.keyperson-profile:hover img {
    transform: scale(1.05);
}

.keyperson-profile h3 {
    color: var(--color-black); /* Ensure H3 is black */
    margin-bottom: 5px;
}

.keyperson-profile .title {
    color: var(--color-dark-green);
    font-weight: bold;
    margin-bottom: 10px;
}

.keyperson-profile p {
    font-size: 1rem;
    color: var(--color-black); /* Ensure paragraph text is pure black for contrast */
    margin-bottom: 15px; /* Add space above link */
}

/* Ensure the 'Full Profile' link is visually appealing */
.keyperson-profile .learn-more {
    font-weight: 600;
    color: var(--color-primary-green);
    text-decoration: none;
    transition: color 0.3s;
}

.keyperson-profile .learn-more:hover {
    color: var(--color-dark-green);
}

/* NEW SECTION: TESTIMONIALS (UPDATED STYLE FOR CAROUSEL) */
.testimonials-section {
    background-color: var(--color-black); /* Fallback color */
    background-size: cover;
    background-position: center center;
    position: relative;
    /* Dark overlay effect */
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.6); 
    padding: 80px 0;
    text-align: center;
}

.testimonials-section .container {
    position: relative;
    z-index: 2;
}

.testimonials-section h2.client-love-heading {
    color: var(--color-white);
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.testimonials-section h2.client-love-heading:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary-green);
    margin: 10px auto 0;
}

/* Swiper container setup */
.swiper-container {
    width: 100%;
    padding-bottom: 50px; /* Space for pagination dots */
    overflow: hidden; /* Important for the carousel structure */
}

.swiper-wrapper {
    display: flex;
}

/* FIX: Reduce the space around the slide when using coverflow to minimize overlapping visual artifacts */
.swiper-slide {
    padding: 0 5x; 
}

/* Individual Testimonial Card Styling (Similar to Image, but with Green Glass) */
.testimonial-card {
    /* Mapped Variables */
    --primary: var(--color-primary-green);
    --secondary: #00c3a9;

    background-color: rgba(255, 255, 255, 0.1); /* Light glass background */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 30px;
    text-align: center;
    color: var(--color-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto; /* Allow height to adjust */
    min-height: 300px;
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.testimonial-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(0, 166, 147, 0.5); /* Green Glow on hover */
}

.testimonial-card .quote-icon {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 15px;
    opacity: 0.8
}

.testimonial-card p {
    font-style: italic;
    color: var(--color-off-white);
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 1rem;
}

.testimonial-card .rating {
    color: gold; /* Classic star color */
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.testimonial-card .client-name {
    font-weight: bold;
    display: block;
    font-size: 1.1rem;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Swiper Pagination (Dots) Styling */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1
}

.swiper-pagination-bullet-active {
    background: var(--color-primary-green);
}

/* NEW SECTION: CONSULTATION CTA */
.consultation-cta {
    background-color: var(--color-primary-green); 
    color: var(--color-white);
    text-align: center;
    padding: 50px 0;
}

.consultation-cta h2 {
    color: var(--color-white);
    margin-bottom: 15px;
}


/* ========================================================================= */
/* 4. FOOTER (UPDATED STYLE) */
/* ========================================================================= */

footer {
    /* Main footer section background: Light grey/off-white for contrast with the dark green/black copyright bar */
    background-color: var(--color-off-white); 
    color: var(--color-text-dark); /* Dark text for readability on light background */
    padding: 50px 0 0 0; /* Adjusted padding, removing bottom padding which moves to copyright bar */
    font-size: 0.9rem;
}

.footer-content {
    display: grid;
    /* Define 4 columns for the new layout: Logo | Links | Products | Contact */
    grid-template-columns: 1.5fr 1fr 1.5fr 1.5fr; 
    gap: 30px;
    margin-bottom: 40px; /* Space above the copyright bar */
}

/* New block for the Logo/Branding */
.footer-logo-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo-block img {
    height: 60px; /* Larger logo */
    margin-bottom: 15px;
}

.footer-logo-block p {
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.footer-block {
    /* Reset flex/min-width for grid layout */
    flex: none;
    min-width: unset;
    margin-bottom: 0;
}

.footer-block h4 {
    /* Heading style matching the example image (underlined/separated) */
    color: var(--color-text-dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 3px solid var(--color-primary-green); /* Short underscore */
    width: 60px; /* Control underscore length */
    text-transform: uppercase;
}

.footer-block ul {
    list-style: none;
}

.footer-block li {
    margin-bottom: 10px;
}

.footer-block p i,
.footer-block li i {
    margin-right: 10px;
    color: var(--color-primary-green);
    font-size: 1rem;
}

.footer-block a {
    color: var(--color-text-light); /* Darker link color */
    display: inline-flex; /* Use inline-flex to align icon and text */
    align-items: center;
    padding: 0; /* Remove padding */
}
/* Ensure text in contact block is dark */
.footer-block .contact-info-text {
    color: var(--color-text-dark);
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    line-height: 1.4;
    word-break: break-word; /* FIX: Prevents overflow from long email/numbers */
}

.footer-block .contact-info-text i {
    margin-top: 5px; /* Adjust icon position */
    flex-shrink: 0;
}

.footer-block a:hover {
    color: var(--color-dark-green);
}

/* Social links in logo block (Updated to match example) */
.social-links {
    display: flex;
    gap: 10px; /* Space between icons */
}

.social-links a {
    /* Standard style: Primary green BG, White icon */
    background-color: var(--color-primary-green);
    color: var(--color-white);
    
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;
    line-height: 35px; /* Use height/width for centering instead of line-height */

    border: 1px solid var(--color-primary-green); 
    border-radius: 50%;
    margin-right: 0;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
}

.social-links a:hover {
    /* Hover: Darker green BG */
    background-color: var(--color-dark-green);
    border-color: var(--color-dark-green);
    color: var(--color-white);
    transform: scale(1.1);
}

.copyright {
    /* Darker bar at the bottom, matching the top bar */
    background-color: var(--color-dark-green); 
    color: var(--color-white);
    text-align: center;
    border-top: none; /* Remove border */
    padding: 15px 0;
    margin-top: 0;
}

.copyright a {
    color: var(--color-white);
    opacity: 0.8;
}

.copyright a:hover {
    color: var(--color-white);
    opacity: 1;
}

/* ========================================================================= */
/* 5. MOBILE BOTTOM NAVIGATION (FIXED, LIQUID GLASS, & FLOATING) */
/* ========================================================================= */

.bottom-nav {
    position: fixed; 
    bottom: 10px; /* Lifts it off the bottom edge */
    left: 50%;
    transform: translateX(-50%); /* Centers the bar horizontally */
    
    width: 95%; /* Creates space on left/right edges */
    max-width: 500px;
    
    height: var(--bottom-nav-height);
    z-index: 1000;
    
    /* --- LIQUID GLASS EFFECT --- */
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(12px);         
    border-top: 1px solid rgba(0, 0, 0, 0.08); 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); 
    /* -------------------------- */
    
    display: none; 
    padding: 0 10px; /* Small padding inside the nav container */
}

.bottom-nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center; 
    height: 100%;
    padding: 0;
}

.bottom-nav li {
    flex-grow: 1; 
    text-align: center;
    /* FIX: Ensure equal spacing for the four functional links */
    flex-basis: 25%;
}

.bottom-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* FIX: Set default color to pure black */
    color: var(--color-black); 
    font-size: 0.8rem; 
    padding: 5px 0; /* Adjusted padding */
    transition: color 0.3s;
}

.bottom-nav li a i {
    font-size: 1.2rem;
    margin-bottom: 3px;
    /* FIX: Ensure icon color is pure black by default, it inherits from <a> */
    color: inherit; 
}

.bottom-nav li a span {
    /* FIX: Ensure text is also pure black by default, it inherits from <a> */
    color: inherit; 
    /* The span element needs to be visible to inherit color properly */
    display: block;
}

/* FIX: Active/Hover state remains primary green */
.bottom-nav li a.active,
.bottom-nav li a:hover {
    color: var(--color-primary-green);
}

/* Anchor point for the floating logo */
.bottom-nav .nav-logo-anchor {
    width: 0; 
    min-width: 0;
    height: 100%;
    position: relative; 
    flex-grow: 0; 
    padding: 0; 
    margin: 0 10px;
}

/* The actual logo image - Centering Fixed */
.floating-nav-logo {
    position: absolute;
    top: -30px; 
    left: 50%;
    transform: translateX(-50%); 
    
    height: 60px; 
    width: 60px;
    object-fit: contain;
    
    /* Styling */
    border-radius: 50%; 
    background-color: var(--color-white); 
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); 
}
/* ========================================================================= */
/* 6. MEDIA QUERIES (Responsiveness) */
/* ========================================================================= */

/* Mobile Devices (Max width 768px) */
@media (max-width: 768px) {
    
    /* HIDE Top Bar on Mobile for cleaner header area */
    .top-bar-header {
        display: none;
    }

    /* Reset Header positioning for mobile since top-bar is hidden */
    .sticky-header {
        top: 0; 
    }
    
    /* Reset body padding for mobile */
    body {
        /* Only padding for the sticky header + bottom nav space */
        padding-top: var(--header-height);
        padding-bottom: calc(var(--bottom-nav-height) + 20px); 
    }
    
    /* Header/Nav adjustments */
    .desktop-nav {
        display: none; 
    }
    
    .hamburger {
        display: block; 
    }

    .company-name {
        display: none; 
    }

    /* Show Bottom Navigation */
    .bottom-nav {
        display: block;
    }
    
    /* NEW ABOUT SECTION MOBILE STYLES */
    .about-short-section {
        padding: 50px 0;
    }
    
    .about-content-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 40px;
    }
    
    .about-text {
        padding-right: 0;
        text-align: center;
    }
    
    .about-text h2 {
        font-size: 2rem;
    }
    
    .about-image {
        padding: 0; /* Remove padding when stacked */
        box-shadow: none; /* Remove box shadow when stacked */
        background-color: transparent;
    }
    
    .about-image img {
        border-width: 1px;
    }
    
    .highlight-box {
        position: static;
        transform: none;
        margin-top: 30px;
        width: 100%;
    }
    
    .services-overview {
        padding-top: 60px; /* Reset padding to standard since highlight box is no longer overlapping */
    }


    /* Text size adjustments for mobile */
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content .tagline {
        font-size: 1.1rem;
    }
    
    /* Service Grid stacks vertically, maintaining consistent mobile design */
    .service-grid {
        grid-template-columns: 1fr; 
        gap: 20px; 
    }

    /* Remove Parallax effect on mobile */
    .hero-section {
        background-attachment: scroll; 
    }
    
    /* Footer layout stacked */
    .footer-content {
        /* FIX: Change grid to single column */
        grid-template-columns: 1fr; 
        gap: 30px;
        /* Temporarily center overall until individual overrides below */
        text-align: center; 
    }
    
    /* FIX: Align all text/content to the LEFT for Quick Links, Products, and Contact Details on Mobile */
    .footer-block.footer-logo-block,
    .footer-block.quick-links-block,
    .footer-block.products-block,
    .footer-block.contact-details-block {
        align-items: flex-start; /* Aligns contents (like p/divs) to the start of the block */
        text-align: left; /* Aligns text within the block to the left */
    }

    .footer-logo-block img {
        /* Reset logo centering for this block */
        margin-left: 0; 
        margin-right: auto;
    }
    
    .footer-logo-block p {
        text-align: left;
    }

    .footer-block h4 {
        /* FIX: Align the heading line to the LEFT on mobile */
        margin: 0 auto 15px 0;
    }
    
    .social-links {
        justify-content: flex-start; /* Align social links to the left */
    }
    
    .footer-block .contact-info-text {
        /* FIX: Align contact info text blocks to the LEFT on mobile */
        justify-content: flex-start; 
        align-items: flex-start;
        text-align: left;
    }
    
    .footer-block ul {
        /* Remove max-width and center margin to allow left alignment */
        max-width: none;
        margin: 0;
        padding-left: 0; /* Ensure list items start at the edge */
    }
    /* End Mobile Footer Overrides */


    /* Mobile adjustments for card structure */
    .service-card {
        padding: 1.2rem;
        min-height: 280px; 
        gap: 0.75rem;
    }
    
    .service-card .card_title__container .card_icon {
        font-size: 2.5rem;
    }

    .service-card .card_title__container .card_title {
        font-size: 1.2rem;
    }

    .service-card .card_title__container .card_paragraph {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .service-card .button {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* Tablet/Small Desktop (Max width 992px) */
@media (max-width: 992px) {
    .desktop-nav li a {
        padding: 10px 10px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* Top Bar adjustments for tablet */
    .contact-details-top {
        font-size: 0.8rem;
    }
    .social-links-top a {
        margin-left: 10px;
    }
    
    /* About section tablet adjustments */
    .about-content-grid {
        grid-template-columns: 1fr; /* Single column layout for better flow on smaller screens */
        gap: 40px;
    }
    
    .about-text {
        padding-right: 0;
        text-align: center;
    }
    
    .about-image {
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Footer adjustments for tablet (2 columns) */
    .footer-content {
        /* FIX: Switch to 2 columns */
        grid-template-columns: 1fr 1fr; 
        text-align: left;
    }
    
    .footer-logo-block {
        /* FIX: Make logo block span full width */
        grid-column: 1 / -1; 
        align-items: left;
        text-align: left;
    }
    
    .footer-logo-block img {
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-block h4 {
        /* FIX: Center headings */
        margin-left: auto;
        margin-right: auto;
    }
    
    .social-links {
        justify-content: left;
    }
    
    .footer-block .contact-info-text {
        justify-content: left;
    }
}


/* ========================================================================= */
/* 7. NEW ANIMATION KEYFRAMES & CLASSES */
/* ========================================================================= */

/* Animation Definition: Fade Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0); 
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Base class for elements that will be animated on scroll */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Class added by JavaScript when the element enters the viewport */
.is-visible {
    animation-name: fadeInUp;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); 
    opacity: 1; 
}


/* ========================================================================= */
/* 8. MODERN SERVICE CARDS (Template Reimagined) */
/* ========================================================================= */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px;
    margin-top: 40px;
}

/* Base Card from Template */
.service-card {
    /* Mapped Variables */
    --white: var(--color-white);
    --black: var(--color-black);
    --primary: var(--color-primary-green);
    --secondary: #00c3a9; /* Slightly lighter green for gradient */
    --paragraph: var(--color-text-light); /* Kept mapping as original for other potential uses */
    --line: #e0e0e0;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align content */
    gap: 1rem;

    padding: 1.5rem;
    background: linear-gradient(145deg, var(--white) 30%, #ccfff4 100%); /* White + Light Green Gradient */
    border-radius: 1rem;
    border: 2px solid var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Ensures minimum height for a good visual base */
    min-height: 320px; 
}

/* Hover lift and shadow enhancement */
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 166, 147, 0.25);
}

.service-card .card__border {
    display: none; /* Not needed for this style */
}

/* Icon, Title, Paragraph Container */
.service-card .card_title__container {
    /* FIX: Ensure container and its contents are visible */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1; /* Pushes the line and button to the bottom */
}

/* Icons */
.service-card .card_title__container .card_icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
    transition: transform 0.3s;
    /* FIX: Ensure icon is visible (it was accidentally hidden by a previous rule) */
    display: block !important;
}

.service-card:hover .card_title__container .card_icon {
    transform: scale(1.1) rotate(-2deg);
}

/* Title/Heading (H3 equivalent) */
.service-card .card_title__container .card_title {
    /* FIX: Ensure the new title span is visible */
    display: block; 
    font-size: 1.3rem;
    color: var(--black);
    font-weight: 700;
    margin-bottom: 0.5rem; 
}

/* Description Text (P equivalent) */
.service-card .card_title__container .card_paragraph {
    /* FIX: Ensure the new paragraph is visible and uses high-contrast color */
    display: block; 
    margin-top: 0.3rem;
    font-size: 0.95rem;
    color: var(--black); /* FIX: Set to pure black for maximum contrast */
    max-width: 90%; 
    flex-grow: 1; /* Allows paragraph space to expand */
}

/* Horizontal Separator */
.service-card .line {
    width: 100%;
    height: 1px;
    background-color: var(--line);
    border: none;
    margin-top: 10px;
}

/* CTA Button (Replacing learn-more link) */
.service-card .button {
    cursor: pointer;
    padding: 0.6rem 1.5rem;
    width: 100%;
    max-width: 200px; /* Constrain button width */
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: var(--white);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    margin-top: 0.5rem;
    /* FIX: Ensure button link is styled as a block element */
    display: inline-block; 
}

.service-card .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 166, 147, 0.4);
}

/* HIDE the original H3, P, and A tags used in the old structure to prevent duplication/conflicts */
.service-card i.icon-export,
.service-card i.icon-sourcing,
.service-card i.icon-import,
.service-card i.icon-training {
    /* Hide the original icons as we now use .card_icon */
    display: none;
}

.service-card h3, 
.service-card p,
.service-card a.learn-more {
    /* Ensure the original H3, P, and learn-more link are hidden */
    display: none;
}

/* Re-enable original H3/P display for other sections (e.g., testimonials, keyperson) */
.testimonial-card h3,
.testimonial-card p,
.keyperson-profile h3,
.keyperson-profile p {
    display: block; 
}

/* ============================
   FOOTER — UNIVERSAL LEFT ALIGN
   ============================ */
footer * {
    text-align: left !important;
}

/* Force proper flex alignment */
.footer-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Footer headings underline */
.footer-block h4 {
    border-bottom: 2px solid #00A693;
    padding-bottom: 6px;
    width: 100%;
    margin-bottom: 10px;
}

/* Lists left aligned */
.footer-block ul {
    list-style: none;
    padding-left: 0 !important;
    width: 100%;
}

.footer-block ul li {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 6px 0;
}

/* Contact info rows */
.footer-contact p {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 6px 0 !important;
    width: 100% !important;
}

/* Contact icons */
.footer-contact p i {
    min-width: 18px;
}

/* Ensure icons in Quick Links also align */
.footer-block ul li i {
    min-width: 14px;
}

/* ============================
   RESPONSIVE FOOTER
   ============================ */
@media (max-width: 1024px) {
    .footer-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    .footer-logo-block {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer-content {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 22px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .social-links {
        justify-content: flex-start !important;
    }
}

/* Center both heading and paragraph */
.page-hero .hero-content {
    text-align: center;
    width: 100%;
}

.page-hero .hero-content h1,
.page-hero .hero-content p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.page-hero .hero-content p {
    max-width: 600px;
}