/* --- Global Styles & Variables --- */
:root {
    --primary-color: #A30B1C; /* A rich, deep red */
    --accent-color: #FFC107; /* A vibrant, engaging amber/gold */
    --text-dark: #2C3E50; /* Darker charcoal for main text */
    --text-light: #ECF0F1; /* Light gray for contrasting text (e.g. for header items when active or hovering) */
    --bg-light: #F8F9FA; /* Off-white background */
    --bg-dark: #34495E; /* Dark blue-gray for sections */
    --card-bg: #FFFFFF;
    --border-color: #E0E0E0;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 25px; /* Increased padding */
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Bolder headings */
    color: var(--text-dark);
}

/* Responsive Font Sizes */
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.6rem, 4vw, 2.5rem); }

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

/* --- Buttons --- */
.btn {
    position: relative;
    display: inline-block;
    padding: 14px 30px; /* More generous padding */
    border-radius: 8px; /* Slightly more rounded */
    font-weight: 700; /* Bolder text */
    text-transform: uppercase;
    overflow: hidden; /* For hover animation */
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    cursor: pointer;
    letter-spacing: 0.05em;
    z-index: 1;
    transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, transform 0.3s ease;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen to the left */
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white overlay */
    transform: skewX(-20deg);
    transition: left 0.4s ease-in-out;
    z-index: -1;
}

.btn:hover {
    background-color: var(--primary-color); /* Maintain base color */
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.btn:hover::before {
    left: 0; /* Slide in */
}

.btn.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.btn.btn-outline::before {
    background-color: var(--primary-color); /* Fill with primary color */
}
.btn.btn-outline:hover::before {
    background-color: var(--primary-color); /* Fill with primary color */
}


/* --- Header & Navigation --- */
#main-header {
    background-color: #fff;
    box-shadow: var(--shadow-sm);
    padding: 1.2rem 0; /* Slightly more padding */
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    height: 90px; /* Fixed height for consistent transition */
    display: flex;
    align-items: center;
}

#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    padding: 0.8rem 0; /* Shrink on scroll */
    box-shadow: var(--shadow-md);
    height: 70px;
}

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

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
}

.logo {
    height: 55px; /* Larger logo */
    margin-right: 15px;
    transition: height 0.3s ease-in-out;
}

#main-header.scrolled .logo {
    height: 40px; /* Smaller logo on scroll */
}

.logo-container h1 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    transition: font-size 0.3s ease-in-out;
}
#main-header.scrolled .logo-container h1 {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
}

#navbar {
    margin-left: auto; /* Push nav to the right */
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 40px; /* More space between links */
}

.nav-links a {
    color: var(--text-dark);
    font-weight: 500;
    position: relative;
    padding: 8px 0;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a.active-page {
    color: var(--primary-color);
    font-weight: 700;
}

/* --- FIX STARTS HERE --- */

/* 1. Define the base style for the underline on all nav links.
      It's always there but invisible (scaled to 0). */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. Make the underline visible on hover OR if it's the active page. */
.nav-links a:hover::after,
.nav-links a.active-page::after {
    transform: scaleX(1);
}

/* --- FIX ENDS HERE --- */


.hamburger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 7px; /* Increased gap */
    width: 30px; /* Make the hamburger clickable area larger */
    height: 25px;
    justify-content: center;
    align-items: center;
    position: relative; /* For active state transforms */
    z-index: 1001; /* Ensure it's above other elements */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-dark);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* --- Page Header (for subpages) --- */
.page-header {
    background: url('assets/ap-overlay.jpg') center/cover no-repeat;
    position: relative;
    padding: 80px 0;
    text-align: center;
    color: var(--text-light);
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(44, 12, 12, 0.85), rgba(163, 11, 28, 0.8)); /* New reddish gradient */
    z-index: 1;
}

.page-header h1 {
    position: relative;
    z-index: 2;
    color: var(--text-light); /* Ensure heading is white */
}

/* --- Hero Section (Home Page) --- */
#hero {
    height: 85vh; /* Taller hero */
    min-height: 500px;
    background-image: url('assets/hero-bg.webp'); /* Use a more evocative background */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    position: relative;
    overflow: hidden; /* Hide any overflow from animations */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(44, 12, 12, 0.85), rgba(163, 11, 28, 0.8)); /* New reddish gradient */
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 0 20px;
    opacity: 0; /* Start hidden for animation */
    transform: translateY(50px);
}

.hero-content.fade-in-slide-up {
    animation: fadeInSlideUp 1s ease-out forwards;
}

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


.hero-content h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px; /* More prominent */
    color: var(--text-light);
    animation: textFadeIn 1s ease-out 0.2s forwards;
    opacity: 0;
}

.hero-content h3 {
    font-size: clamp(3rem, 7vw, 5rem);
    margin-bottom: 2rem;
    line-height: 1.1;
    color: var(--text-light);
    animation: textFadeIn 1s ease-out 0.4s forwards;
    opacity: 0;
}
.hero-content p {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.9);
    animation: textFadeIn 1.4s ease-out 0.6s forwards; /* Increased duration to allow animation on scroll elements some breathing room*/
    opacity: 0;
}

.hero-content .btn {
    animation: fadeIn 1s ease-out 0.8s forwards;
    opacity: 0;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* --- Sections & Cards --- */
.product-section, .about-section, .contact-page-section, .testimonials-section {
    padding: 80px 0; /* Increased vertical padding */
    position: relative; /* For section title animation */
}

.product-section h2, .about-section h2, .contact-page-section h2, .testimonials-section h2 {
    text-align: center;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin-bottom: 50px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px; /* Space for pseudo-element */
}

/* Animated Underline for Section Titles */
.product-section h2::after, .about-section h2::after, .contact-page-section h2::after, .testimonials-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0); /* Start scaled to 0 */
    width: 100px; /* Default width */
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Elastic ease */
}

/* Wider for visibility on small screens */
@media (max-width: 768px) {
    .product-section h2::after, .about-section h2::after, .contact-page-section h2::after, .testimonials-section h2::after {
        width: 80px; /* Slightly narrower on mobile if preferred, or could be same */
    }
}

/* Trigger animation with JS (adding is-visible class) */
.product-section.is-visible h2::after, .about-section.is-visible h2::after, .contact-page-section.is-visible h2::after, .testimonials-section.is-visible h2::after {
    transform: translateX(-50%) scaleX(1);
}


.alternate-bg {
    background-color: var(--bg-dark); /* Darker alternate background */
    color: white; 
}
.alternate-bg h2 {
    color: var(--text-light); /* Ensure h2 on dark background is light */
}
.alternate-bg h4 {
    color: var(--accent-color); /* Use accent color for h4 on dark background */
}
/* Explicitly make paragraphs white - MOST IMPORTANT CHANGE FOR THIS ISSUE */
#home-about.alternate-bg .about-content p, /* Specificity for homepage about section */
#about-full.alternate-bg .about-content p { /* Specificity for full about page section */
    color: white !important; /* Force to white! */
}
.alternate-bg a {
    color: var(--accent-color); /* Keep links accented */
}

/* FIX: Override link color for buttons inside alternate-bg sections */
.alternate-bg .btn {
    color: var(--text-light);
}

/* Ensure hover state for the button text color is also correct */
.alternate-bg .btn:hover {
    color: var(--text-light);
}


.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px; /* Increased gap */
}

.card {
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    border-radius: 12px; /* More rounded */
    overflow: hidden;
    text-align: center;
    padding: 30px; /* More padding */
    display: flex;
    flex-direction: column;
    /* Transition for hover effects */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; 

    /* Initial state for animate-on-scroll elements (e.g., on homepage categories) */
    /* .product-item classes on products.html DO NOT have 'animate-on-scroll' in HTML, handled by filter function */
    &.animate-on-scroll { /* This selector specifically targets cards that *also* have .animate-on-scroll */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Animation properties for .is-visible */
    }
    
}
/* Re-enable visibility and reset position for cards on scroll detection (only if animate-on-scroll is present)*/
.card.is-visible { /* Combined with previous .card styles */
    opacity: 1;
    transform: translateY(0);
}


.card:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: var(--shadow-lg); /* Stronger shadow */
}

.card img {
    width: 100%;
    height: 250px; /* Taller images */
    object-fit: cover;
    margin-bottom: 25px;
    border-radius: 8px; /* Rounded corners for images */
}

.card h3 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    margin-bottom: 12px;
    color: var(--primary-color);
}

.card p {
    margin-bottom: 25px;
    flex-grow: 1;
    color: #666; /* Default paragraph color inside .card */
}

/* --- About Page/Section --- */
.about-container, .home-about-container {
    display: flex;
    align-items: center;
    gap: 50px; /* Larger gap */
}
.home-about-container {
    padding: 50px 0; /* Consistent with other sections */
}


.about-image { flex: 1; }
.about-image img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* More rounded */
    box-shadow: var(--shadow-md);
}
.about-content { flex: 1.2; }
.about-content h4 {
    color: var(--primary-color); /* This will be overridden by .alternate-bg h4 if applicable */
    text-transform: uppercase;
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 0.8rem;
    font-weight: 700;
}
.about-content h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
    text-align: left;
}
.about-content p {
    margin-bottom: 1.2rem;
    color: #555; /* Default for this context; overridden by .alternate-bg p if present */
}

/* Animations for about content */
#home-about.is-visible .about-image img {
    animation: fadeInScale 0.8s ease-out forwards;
}

#home-about.is-visible .about-content h4,
#home-about.is-visible .about-content h2,
#home-about.is-visible .about-content p,
#home-about.is-visible .about-content .btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 0.7s ease-out forwards;
}

#home-about.is-visible .about-content h4 { animation-delay: 0.2s; }
#home-about.is-visible .about-content h2 { animation-delay: 0.4s; }
#home-about.is-visible .about-content p:nth-of-type(1) { animation-delay: 0.6s; }
#home-about.is-visible .about-content p:nth-of-type(2) { animation-delay: 0.7s; }
#home-about.is-visible .about-content .btn { animation-delay: 0.8s; }


@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/* --- Products Page Filter Buttons --- */
#filter-buttons {
    text-align: center;
    margin-bottom: 50px; /* More space */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 15px; /* Gap between buttons */
}
.filter-btn {
    background: none;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 22px; /* Slightly larger buttons */
    margin: 0 5px; /* Adjust margin if using flex gap */
    border-radius: 25px; /* More rounded pill shape */
    cursor: pointer;
    font-weight: 600; /* Bolder text */
    transition: all 0.3s ease-in-out;
}
.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: var(--text-light);
    box-shadow: var(--shadow-sm);
}


/* --- Contact Page --- */
.contact-page-section {
    padding: 80px 0;
}

.contact-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 50px; /* Larger gap */
    align-items: start;
}

.contact-details-wrapper {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.contact-form-wrapper {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* Span two rows */
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fafafa' d='M0 0h100v100H0z'/%3E%3Ccircle cx='0' cy='0' r='50' fill='%23f0f0f0' opacity='0.08'/%3E%3Ccircle cx='100' cy='100' r='50' fill='%23f0f0f0' opacity='0.08'/%3E%3Ccircle cx='0' cy='100' r='50' fill='%23f0f0f0' opacity='0.08'/%3E%3Ccircle cx='100' cy='0' r='50' fill='%23f0f0f0' opacity='0.08'/%3E%3C/svg%3E") ;
    background-size: cover;
    padding: 40px; /* More padding */
    border-radius: 12px; /* More rounded */
    box-shadow: var(--shadow-md);
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out; /* Add animation properties */
    opacity: 0;
    transform: translateY(30px);
}
.contact-form-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.map-wrapper {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    width: 100%;
    height: 450px; /* Taller map */
    border-radius: 12px; /* More rounded */
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out; /* Add animation properties */
    opacity: 0;
    transform: translateY(30px);
}
.map-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* Delay map animation */
}


.contact-details-wrapper h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    margin-bottom: 20px;
    text-align: left;
}

.contact-details-wrapper p {
    margin-bottom: 40px; /* More space */
    color: #555; /* Default for this context; if this p tag were in an .alternate-bg section, it'd be white */
    font-size: 1.05rem;
}

.contact-info-list {
    list-style: none;
    padding: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Larger gap */
    margin-bottom: 30px; /* More space between items */
    font-size: 1.15rem; /* Larger font */
    line-height: 1.4;
    opacity: 0; /* For animation */
    transform: translateX(-20px); /* For animation */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.contact-details-wrapper.is-visible .contact-info-list li:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateX(0); }
.contact-details-wrapper.is-visible .contact-info-list li:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateX(0); }
.contact-details-wrapper.is-visible .contact-info-list li:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateX(0); }


.contact-info-list a {
    font-weight: 500;
}

.contact-icon {
    min-width: 28px; /* Larger icon */
    height: 28px;
    fill: var(--primary-color);
    margin-top: 2px;
}

/* Form Styles */
.contact-form-wrapper .contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Larger gap */
}

.contact-form-wrapper h3 {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 10px;
    color: var(--primary-color);
}
.contact-form-wrapper .contact-form > p {
    text-align: center;
    color: #777;
    margin-bottom: 20px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    width: 100%;
    padding: 16px; /* More padding */
    border: 1px solid var(--border-color);
    background-color: var(--bg-light); /* Slightly off-white input background */
    color: var(--text-dark);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.contact-form-wrapper input::placeholder,
.contact-form-wrapper textarea::placeholder {
    color: #999;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-color); /* Accent color border on focus */
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2); /* Soft accent shadow */
    background-color: #fff;
}

.contact-form-wrapper .btn {
    width: 100%;
    font-size: 1.2rem;
    padding: 16px;
    margin-top: 10px; /* Adjust spacing above button */
}

/* --- Testimonials Section Styles --- */
.testimonials-section {
    padding: 80px 0;
    background-color: var(--primary-color); /* This is alternate-bg, so rules from there apply */
    color: white; /* Changed directly to white for strong contrast */
    position: relative;
    z-index: 0;
}
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='0' cy='0' r='50' fill='%23A30B1C' opacity='0.1'/%3E%3Ccircle cx='100' cy='100' r='50' fill='%23A30B1C' opacity='0.1'/%3E%3Ccircle cx='0' cy='100' r='50' fill='%23A30B1C' opacity='0.1'/%3E%3Ccircle cx='100' cy='0' r='50' fill='%23A30B1C' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 50px 50px; /* Small pattern */
    opacity: 0.2;
    z-index: -1;
}

/* Make section H2 light on primary-color background */
.testimonials-section h2 {
    color: var(--text-light);
}

.testimonials-section h2::after {
    background-color: var(--accent-color); /* Accent underline for testimonials */
}

/* New layout for testimonials summary and grid */
.testimonials-content-wrapper {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr; /* Ratio for summary and grid */
    gap: 40px;
    align-items: start; /* Align content to the top */
}

/* Testimonials Summary Block (left column) */
.testimonials-summary-block {
    background-color: var(--card-bg); /* White background */
    color: var(--text-dark); /* Dark text */
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    text-align: center;
    position: relative;
}

.company-logo-circle {
    width: 90px;
    height: 90px;
    background-color: var(--bg-light); /* Light background for the circle */
    border-radius: 50%;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures logo inside is clipped */
    border: 1px solid var(--border-color);
}
.company-logo-circle .summary-logo {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}


.testimonials-summary-block h3 {
    font-size: 1.7rem;
    margin-bottom: 15px;
    color: var(--text-dark); /* Ensure dark text */
}

.rating-overall {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rating-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-dark);
}

.testimonials-summary-block .stars {
    color: var(--accent-color); /* Yellow stars */
    font-size: 1.6rem; /* Larger stars */
}

.reviews-base-count {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}

/* Google Review Button Specifics */
.google-review-btn {
    background-color: #4285F4; /* Google blue */
    color: white; /* Text remains white */
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.google-review-btn:hover {
    background-color: #357ae8; /* Darker blue on hover */
    transform: none; /* No vertical lift, typical for Google buttons */
    box-shadow: var(--shadow-sm); /* Simple shadow */
}

.google-review-btn::before {
    display: none; /* Hide default btn animation overlay */
}

.google-g-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* Updated SVG data URI with standard colored G */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill="%23fbbb00" d="M113.881 309.43L63.535 344.08C42.85 301.637 32 254.912 32 208C32 108.062 108.062 32 208 32C278.435 32 340.093 57.067 375.097 97.234L337.893 133.013C316.591 108.971 278.077 93.303 208 93.303C132.895 93.303 72 154.088 72 208C72 238.167 82.525 267.069 100.99 289.47L113.881 309.43z"%3E%3C/path%3E%3Cpath fill="%235183f0" d="M208 480C140.231 480 81.657 460.598 32 426.697L63.535 344.08C99.28 368.106 148.601 384 208 384C270.825 384 322.062 363.359 344 329.5L309.464 266.07C278.537 301.996 237.11 329.13 208 329.13C161.43 329.13 121.282 309.704 110.158 289.43L110 289.5L383.998 256.035L447.887 274.654C422.317 400.966 322.186 480 208 480z"%3E%3C/path%3E%3Cpath fill="%23ea4335" d="M208 93.303C268.077 93.303 316.591 108.971 337.893 133.013L375.097 97.234C340.093 57.067 278.435 32 208 32C108.062 32 32 108.062 32 208C32 254.912 42.85 301.637 63.535 344.08L113.881 309.43C82.525 267.069 72 238.167 72 208C72 154.088 132.895 93.303 208 93.303z"%3E%3C/path%3E%3Cpath fill="%2334a853" d="M447.887 274.654L383.998 256.035L309.464 266.07C322.062 363.359 270.825 384 208 384C148.601 384 99.28 368.106 63.535 344.08L32 426.697C81.657 460.598 140.231 480 208 480C322.186 480 422.317 400.966 447.887 274.654z"%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent; /* Hide the actual 'G' text from span */
    vertical-align: middle; /* Align with text */
    margin-left: 8px; /* FIX: Space between "Review us on" and the G icon */
    /* Removed the filter: invert() property to allow the natural colors of the SVG to show */
}


/* Testimonial Cards within the new grid */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 30px; /* Gap between cards */
    flex-grow: 1; /* Allow it to take available space */
}

.testimonial-card {
    background: var(--card-bg);
    padding: 35px; /* More padding */
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border-left: 8px solid var(--accent-color); /* Thicker, accent-colored border */
    position: relative;
    overflow: hidden;
    transform: translateY(20px); /* For is-visible animation */
    opacity: 0; /* For is-visible animation */
    transition: all 0.6s ease-out; /* Initial animation on scroll */
    display: flex; /* FIX: Make card a flex container */
    flex-direction: column; /* FIX: Align content vertically */
}

.testimonial-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Staggering for cards if in animate-on-scroll */
.testimonial-card:nth-child(1).is-visible { transition-delay: 0.1s; } /* This should also pick up the data-delay in JS */
.testimonial-card:nth-child(2).is-visible { transition-delay: 0.2s; }
.testimonial-card:nth-child(3).is-visible { transition-delay: 0.3s; }
.testimonial-card:nth-child(4).is-visible { transition-delay: 0.4s; }


.testimonial-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px); /* Lift slightly on hover */
}

.testimonial-card .stars {
    color: var(--accent-color);
    font-size: 1.4rem; /* Larger stars */
    margin-bottom: 18px;
    display: block; /* Ensure it takes full width for centering on hover */
    text-align: left; /* Align stars left inside card */
}

.testimonial-card .review-text {
    font-style: italic;
    color: #444; /* Darker text for readability on card bg */
    margin-bottom: 25px;
    line-height: 1.7;
    font-size: 1.05rem;
    flex-grow: 1; /* FIX: Allow text to expand, pushing reviewer to the bottom */
}

.testimonial-card .reviewer {
    font-weight: 700;
    color: var(--primary-color); /* Highlight reviewer name */
    text-align: right;
    font-size: 1.1rem;
    display: block; /* Make sure it's block for alignment */
}

.testimonial-card .reviewer .review-date {
    font-weight: 400; /* Regular weight for date */
    color: #888;
    font-size: 0.9em; /* Slightly smaller */
    margin-left: 5px;
}


/* Leave a Review Button Container */
.leave-review-container {
    text-align: center;
    margin-top: 50px; /* Space above button */
    /* for animate-on-scroll */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.leave-review-container.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* FIX: Changed selector from .leave-review-btn to a.leave-review-btn to increase specificity */
a.leave-review-btn {
    background-color: var(--accent-color); /* Match inspiration's green/yellow */
    color: var(--text-dark); /* Dark text on bright button */
    padding: 15px 35px;
    font-size: 1.2rem;
    font-weight: 800; /* Extra bold */
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Deeper shadow */
}
a.leave-review-btn:hover {
    background-color: #FFD54F; /* Lighter shade on hover */
    color: var(--text-dark); /* Keep text dark on hover */
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
a.leave-review-btn::before {
    content: ''; /* Ensure hover effect works for this button */
    background-color: rgba(255, 255, 255, 0.2); /* Lighter overlay for effect */
}


/* --- Footer --- */
footer {
    text-align: center;
    padding: 30px 0; /* More padding */
    background-color: var(--text-dark); /* Darker footer background */
    color: rgba(255, 255, 255, 0.7); /* Lighter text */
    font-size: 0.95rem;
}
footer a {
    color: var(--accent-color);
    font-weight: 500;
    transition: text-decoration 0.3s ease;
}
footer a:hover {
    text-decoration: underline;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .about-container, .home-about-container {
        flex-direction: column;
        gap: 40px; /* Reduced gap for columns */
    }
    .home-about-container .about-image {
        order: -1; /* Image first on mobile */
    }
    .about-content {
        text-align: center;
    }
    .about-content h2 {
        text-align: center;
    }
    
    .contact-page-grid {
        grid-template-columns: 1fr; /* Stack columns */
        grid-template-rows: auto;
        gap: 40px; /* Reduced gap */
    }
    .contact-details-wrapper,
    .contact-form-wrapper,
    .map-wrapper {
        grid-column: 1 / 2; /* All items take full width */
    }
    .contact-form-wrapper {
        grid-row: 2 / 3; /* Adjust row for stacking order */
    }
     .map-wrapper {
        grid-row: 3 / 4;
        height: 350px; /* Adjust height on smaller screens */
    }
    .contact-details-wrapper h2, .contact-details-wrapper p {
        text-align: center; /* Center align content */
    }
    .contact-info-list {
        text-align: left; /* Keep list items left aligned even if parent is centered */
        display: inline-block; /* Helps in centering the block itself */
        width: 100%;
        max-width: 400px; /* Constrain width of list for better readability */
    }

    /* Testimonials Section Responsiveness */
    .testimonials-content-wrapper {
        grid-template-columns: 1fr; /* Stack summary block and grid vertically */
    }
    .testimonials-summary-block {
        margin-bottom: 30px; /* Add space when stacked */
    }
}

@media (max-width: 768px) {
    /* Header & Nav */
    .logo-container h1 { font-size: 1.3rem; } /* FIX: Made font smaller to prevent ugly wrapping */
    #main-header.scrolled .logo-container h1 { font-size: 1.2rem; }
    .hamburger-menu { gap: 6px; } /* Slightly tighter gap for the icon */

    /* FIX: This is the core fix. The .nav-links is now the overlay, not the #navbar container. */
    .nav-links {
        position: fixed; /* Use fixed for full screen overlay */
        top: 0;
        left: 0;
        width: 100vw; /* Full width viewport */
        height: 100vh; /* Full height viewport */
        background-color: var(--text-dark); /* Dark background for mobile nav */
        
        display: flex; /* This is needed for alignment */
        flex-direction: column;
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
        
        z-index: 999; /* Below hamburger, above content */
        
        /* Hide by default */
        opacity: 0;
        visibility: hidden;
        
        transition: opacity 0.3s ease, visibility 0s 0.3s;
        padding: 60px 20px; /* Padding for content */
    }
    
    /* This rule now correctly shows the overlay when the menu is active */
    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0s 0s;
    }

    .nav-links li {
        margin: 20px 0; /* Increased vertical space for touch */
    }
    .nav-links a {
        color: var(--text-light); /* Light text on dark mobile nav */
        font-size: 1.8rem; /* Larger font for readability */
        padding: 10px 0;
    }
    .nav-links a.active-page::after, .nav-links a:hover::after {
        background-color: var(--accent-color); /* Accent for mobile nav underlines */
        height: 4px; /* Thicker mobile nav underline */
    }

    .hamburger-menu {
        display: flex;
        z-index: 1001; /* Make sure it's on top of the overlay */
    }

    /* FIX: Corrected hamburger 'X' transformation and removed incorrect color change */
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg); /* Adjusted for 6px gap + 3px height */
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg); /* Adjusted for 6px gap + 3px height */
    }

    /* Hero */
    #hero { height: 75vh; } /* More appropriate height for mobile */
    .hero-content h3 { font-size: 2.8rem; }
    .hero-content p { font-size: 1rem; }

    /* General Sections */
    .product-section, .about-section, .contact-page-section, .testimonials-section {
        padding: 60px 0;
    }
    h2 { margin-bottom: 40px; }
    .about-content h2 { text-align: center; }

    #filter-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 30px;
    }

    /* Cards */
    .card { padding: 25px; }
    .card img { height: 200px; }
}

@media (max-width: 480px) {
    .hero-content h3 { font-size: 2.2rem; }
    .hero-content h2 { font-size: 1.3rem; letter-spacing: 2px;}
    .hero-content p { font-size: 0.95rem; }
    .hero-content .btn { padding: 12px 24px; font-size: 1rem;}
    .page-header h1 { font-size: 2rem; }

    /* Contact page list alignment */
    .contact-info-list li {
        flex-direction: column; /* Stack icon and text */
        align-items: center; /* Center align */
        text-align: center;
        gap: 5px; /* Reduced gap */
        font-size: 1.05rem;
    }
        .contact-icon { margin-top: 0; }
    }