/* Header & Footer CSS */

/* 1. Header base */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-bg-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
}

/* Dark-mode header override if needed */
@media (prefers-color-scheme: dark) {
    .site-header {
        background-color: var(--color-bg-dark);
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
}

/* Container inside header */
.navbar {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Logo image */
.navbar-logo img {
    height: 40px;
    /* Optional hover animation */
    transition: transform var(--transition-time) ease;
}

.navbar-logo img:hover,
.navbar-logo img:focus {
    transform: scale(1.05);
}

/* Burger icon lines */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.burger-icon {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

/* Change burger icon color in dark mode */
@media (prefers-color-scheme: dark) {
    .burger-icon {
        background-color: var(--color-bg-light);
    }
}

/* Hover effect on burger lines */
.menu-toggle:hover .burger-icon,
.menu-toggle:focus .burger-icon {
    background-color: var(--color-accent);
}

/* Navigation links container: hidden on mobile by default */
.nav-links {
    display: none;
    list-style: none;
    flex-direction: column;
    gap: var(--space-md);
}

/* Individual nav link */
.nav-link {
    position: relative;
    color: var(--color-text);
    font-weight: 500;
    padding: var(--space-sm) 0;
    transition: color var(--transition-time) ease;
}

/* Underline animation */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-time) ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-accent);
}

.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

/* Mobile: when menu is open, show nav-links as overlay or dropdown */
.nav-links.nav-open {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--color-bg-light);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: slideDown 0.3s ease forwards;
    z-index: 999;
}

/* Dark-mode mobile menu */
@media (prefers-color-scheme: dark) {
    .nav-links.nav-open {
        background-color: var(--color-bg-dark);
    }
}

/* Slide-down animation for mobile menu */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Desktop and tablet: show nav-links horizontally */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        gap: var(--space-lg);
    }
}

/* 2. Footer base */
.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-bg-light);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    margin-top: var(--space-xl);
}

/* Dark-mode footer (same as base, but ensure readability) */
@media (prefers-color-scheme: dark) {
    .site-footer {
        background-color: var(--color-bg-dark);
        color: var(--color-bg-light);
    }
}

/* Container inside footer */
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Footer logo */
.footer-logo img {
    height: 40px;
    transition: transform var(--transition-time) ease;
}

.footer-logo img:hover,
.footer-logo img:focus {
    transform: scale(1.05);
}

/* Footer navigation links */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
}

.footer-link {
    position: relative;
    color: var(--color-bg-light);
    font-weight: 500;
    transition: color var(--transition-time) ease;
}

.footer-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-time) ease;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--color-accent);
}

.footer-link:hover::after,
.footer-link:focus::after {
    width: 100%;
}

/* Footer contact info */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.footer-contact-link {
    color: var(--color-bg-light);
    transition: color var(--transition-time) ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Footer copyright */
.footer-copy,
.footer-policy {
    flex: 1 0 100%;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
}

/* Responsive footer layout for larger screens */
@media (min-width: 769px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer-nav {
        flex-direction: row;
        gap: var(--space-lg);
    }

    .footer-contact {
        align-items: flex-start;
    }
}

/* Optional animation on footer appearance */
@keyframes fadeInUpFooter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.site-footer {
    animation: fadeInUpFooter 0.6s ease forwards;
}

/* End of Header & Footer CSS */

/* Hero section CSS */

/* 1. Hero section container */
.hero-section {
    position: relative;
    width: 100%;
    /* Height: full viewport minus header height */
    height: calc(100vh - var(--header-height));
    max-height: 1400px;
    overflow: hidden;
}

/* 2. Swiper container sizing */
.hero-slider {
    width: 100%;
    height: 100%;
}

/* 3. Each slide */
.hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 4. Slide image */
.hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slight zoom on hover for desktop */
    transition: transform var(--transition-time) ease;
}

.hero-slide:hover .hero-slide-img,
.hero-slide:focus-within .hero-slide-img {
    transform: scale(1.05);
}

/* 5. Overlay for better text contrast */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* 6. Content positioning */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    max-width: 600px;
    text-align: center;
    color: var(--color-bg-light);
    opacity: 1;
    /* Will be animated in via JS adding animation class */
}

/* 7. Title and subtitle */
.hero-title {
    color: var(--color-bg-light);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--space-md);
    color: var(--color-bg-light);
}

/* Responsive typography */
@media (min-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }
}

@media (min-width: 769px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }
}

/* 8. Button */
.hero-btn {
    /* Uses .btn and .btn-primary from common.css */
    /* Additional styling for hero button if needed: */
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    transition: transform var(--transition-time) ease;
}

.hero-btn:hover,
.hero-btn:focus {
    transform: translateY(-2px);
}

/* 9. Swiper navigation and pagination overrides */
/* Arrows */
.swiper-button-prev.hero-prev,
.swiper-button-next.hero-next {
    color: var(--color-bg-light);
    /* Slight background circle for better visibility */
    background-color: rgba(0, 0, 0, 0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.swiper-button-prev.hero-prev:hover,
.swiper-button-next.hero-next:hover,
.swiper-button-prev.hero-prev:focus,
.swiper-button-next.hero-next:focus {
    background-color: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

/* Position arrows vertically centered */
.swiper-button-prev.hero-prev {
    left: 16px;
}

.swiper-button-next.hero-next {
    right: 16px;
}

/* Pagination bullets */
.swiper-pagination.hero-pagination {
    bottom: 20px !important;
}

.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 0.8;
    transition: opacity var(--transition-time) ease, transform var(--transition-time) ease;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-accent);
    opacity: 1;
    transform: scale(1.2);
}

/* 10. Animations (keyframes already defined in common.css) */
/* Here ensure that .animate-fadeInDown / .animate-fadeInUp produce opacity:1 */
/* common.css defines:
   .animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; }
   .animate-fadeInUp   { animation: fadeInUp 0.6s ease forwards; }
*/
/* No additional keyframes needed here. */

/* 11. Responsive adjustments for hero section */
@media (max-width: 480px) {
    .hero-content {
        width: 100%;
        padding: 0 var(--space-sm);
    }

    .swiper-button-prev.hero-prev,
    .swiper-button-next.hero-next {
        display: none;
        /* Hide arrows on very small screens; rely on swipe */
    }

    .swiper-pagination.hero-pagination {
        bottom: 10px !important;
    }
}

/* End of hero.css */

/* Services section CSS */

/* 1. Section base */
.services-section {
    background-color: var(--color-bg-light);
    position: relative;
}

/* Dark-mode background if desired */
@media (prefers-color-scheme: dark) {
    .services-section {
        background-color: var(--color-bg-dark);
    }
}

/* 2. Section heading */
.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* animate in */
}

.section-subtitle {
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    opacity: 0;
    /* animate in */
}

/* Responsive typography */
@media (min-width: 480px) {
    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.125rem;
    }
}

@media (min-width: 769px) {
    .section-title {
        font-size: 2.25rem;
    }

    .section-subtitle {
        font-size: 1.25rem;
    }
}

/* 3. Swiper container adjustments */
.services-slider {
    width: 100%;
    padding-bottom: var(--space-lg);
    /* space for pagination */
    opacity: 0;
    /* animate in */
}

/* 4. Service card styling */
.service-slide {
    display: flex;
    justify-content: center;
}

.service-card {
    background-color: var(--color-bg-light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    max-width: 300px;
    width: 100%;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Dark-mode card background */
@media (prefers-color-scheme: dark) {
    .service-card {
        background-color: #2A2A2A;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
    }
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 5. Service image */
.service-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* 6. Content within card */
.service-content {
    padding: var(--space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.service-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-heading);
}

.service-desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    flex-grow: 1;
}

/* 7. Swiper navigation arrows */
.swiper-button-prev.services-prev,
.swiper-button-next.services-next {
    color: var(--color-accent);
    transition: color var(--transition-time) ease, transform var(--transition-time) ease;
}

.swiper-button-prev.services-prev:hover,
.swiper-button-next.services-next:hover,
.swiper-button-prev.services-prev:focus,
.swiper-button-next.services-next:focus {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Position arrows at edges of slider */
.swiper-button-prev.services-prev {
    left: 8px;
}

.swiper-button-next.services-next {
    right: 8px;
}

/* 8. Pagination bullets */
.swiper-pagination.services-pagination {
    bottom: 8px !important;
}

.swiper-pagination-bullet {
    background-color: var(--color-accent);
    opacity: 0.6;
    transition: opacity var(--transition-time) ease, transform var(--transition-time) ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

/* 9. Responsive settings */
/* On small screens, slidesPerView: 1; tablet: 2; desktop: 3 */
@media (max-width: 479px) {
    .service-img {
        height: 160px;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .service-img {
        height: 170px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .service-img {
        height: 180px;
    }
}

@media (min-width: 1024px) {
    .service-img {
        height: 200px;
    }
}

/* 10. Animations: fadeIn on scroll */
/* common.css defines .animate-fadeInDown and .animate-fadeInUp */
/* After IntersectionObserver adds these classes, opacity becomes visible */

/* 11. Spacing around section */
.services-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Testimonials section CSS */

/* 1. Section base */
.testimonials-section {
    background-color: var(--color-bg-light);
    position: relative;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Dark-mode background */
@media (prefers-color-scheme: dark) {
    .testimonials-section {
        background-color: var(--color-bg-dark);
    }
}

/* 2. Section heading */
.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* animate in */
}

.section-subtitle {
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    text-align: center;
    opacity: 0;
    /* animate in */
}

/* Responsive typography */
@media (min-width: 480px) {
    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.125rem;
    }
}

@media (min-width: 769px) {
    .section-title {
        font-size: 2.25rem;
    }

    .section-subtitle {
        font-size: 1.25rem;
    }
}

/* 3. Swiper container */
.testimonials-slider {
    width: 100%;
    padding-bottom: var(--space-lg);
    opacity: 0;
    /* animate in */
}

/* 4. Testimonial card */
.testimonial-slide {
    display: flex;
    justify-content: center;
}

.testimonial-card {
    background-color: var(--color-bg-light);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    max-width: 400px;
    width: 100%;
    padding: var(--space-md);
    text-align: center;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Dark-mode card background */
@media (prefers-color-scheme: dark) {
    .testimonial-card {
        background-color: #2A2A2A;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
    }
}

.testimonial-card:hover,
.testimonial-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 5. Avatar image */
.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--space-sm);
    /* Hover scale via img-hover-scale class */
}

/* 6. Content text */
.testimonial-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.testimonial-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-xs);
}

.testimonial-role {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* 7. Swiper navigation arrows */
.swiper-button-prev.testimonials-prev,
.swiper-button-next.testimonials-next {
    color: var(--color-accent);
    transition: color var(--transition-time) ease, transform var(--transition-time) ease;
}

.swiper-button-prev.testimonials-prev:hover,
.swiper-button-next.testimonials-next:hover,
.swiper-button-prev.testimonials-prev:focus,
.swiper-button-next.testimonials-next:focus {
    color: var(--color-primary);
    transform: scale(1.1);
}

.swiper-button-prev.testimonials-prev {
    left: 8px;
}

.swiper-button-next.testimonials-next {
    right: 8px;
}

/* 8. Pagination bullets */
.swiper-pagination.testimonials-pagination {
    bottom: 8px !important;
}

.swiper-pagination-bullet {
    background-color: var(--color-accent);
    opacity: 0.6;
    transition: opacity var(--transition-time) ease, transform var(--transition-time) ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

/* 9. Responsive adjustments */
/* On narrow screens, reduce avatar size and padding */
@media (max-width: 479px) {
    .testimonial-card {
        padding: var(--space-sm);
        max-width: 300px;
    }

    .testimonial-avatar {
        width: 60px;
        height: 60px;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }

    .testimonial-name {
        font-size: 1rem;
    }

    .testimonial-role {
        font-size: 0.85rem;
    }
}

/* Larger screens */
@media (min-width: 480px) and (max-width: 767px) {
    .testimonial-card {
        max-width: 350px;
    }

    .testimonial-avatar {
        width: 70px;
        height: 70px;
    }
}

/* Desktop */
@media (min-width: 769px) {
    .testimonial-card {
        max-width: 400px;
    }

    .testimonial-avatar {
        width: 80px;
        height: 80px;
    }
}

/* 10. Animations on scroll */
/* common.css provides .animate-fadeInDown and .animate-fadeInUp */

/* 11. Spacing */
.testimonials-section {
    /* Already has .section padding */
}

/* How It Works (Process) Section CSS */

/* 1. Section base */
.process-section {
    background-color: var(--color-bg-light);
}

@media (prefers-color-scheme: dark) {
    .process-section {
        background-color: var(--color-bg-dark);
    }
}

/* 2. Heading and subtitle */
.process-section .section-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* for scroll animation */
}

.process-section .section-subtitle {
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    text-align: center;
    opacity: 0;
    /* for scroll animation */
}

@media (min-width: 480px) {
    .process-section .section-title {
        font-size: 2rem;
    }

    .process-section .section-subtitle {
        font-size: 1.125rem;
    }
}

@media (min-width: 769px) {
    .process-section .section-title {
        font-size: 2.25rem;
    }

    .process-section .section-subtitle {
        font-size: 1.25rem;
    }
}

/* 3. Process steps container */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}

/* 4. Each step */
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    opacity: 0;
    /* for scroll animation */
}

/* Reverse layout on larger screens */
.process-step.reverse {
    /* order will be handled in media queries */
}

/* 5. Image container */
.process-image {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.process-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.process-image img:hover,
.process-image img:focus {
    transform: scale(1.05);
}

/* 6. Text container */
.process-text {
    width: 100%;
    text-align: center;
}

.process-text .step-badge {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 auto var(--space-sm);
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.process-text .step-badge:hover,
.process-text .step-badge:focus {
    background-color: var(--color-primary);
    transform: scale(1.1);
}

.process-text .step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
}

.process-text .step-desc {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* 7. Responsive layout for steps */
/* On medium and larger screens, alternate image/text side by side */
@media (min-width: 769px) {
    .process-steps {
        gap: var(--space- xlarge);
    }

    .process-step {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
    }

    /* Default: image left, text right */
    .process-step .process-image,
    .process-step .process-text {
        width: 50%;
    }

    .process-step.reverse {
        flex-direction: row-reverse;
    }

    .process-text {
        text-align: left;
    }
}

/* 8. Spacing adjustments */
.process-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* 9. Scroll-triggered animations */
/* common.css provides:
   .animate-fadeInLeft { animation: fadeInLeft 0.6s ease forwards; }
   .animate-fadeInRight { animation: fadeInRight 0.6s ease forwards; }
   .animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; }
   .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; }
*/
/* No extra keyframes needed here. */

/* 10. Optional background shapes or overlays */
/* For visual interest, you can add decorative background elements via pseudo-elements */
.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    transform: translateX(-50%);
    /* Add decorative SVG or shape if desired */
}

/* Gallery Section CSS (Masonry-style) */

/* 1. Section base */
.gallery-section {
    background-color: var(--bg-light);
}

@media (prefers-color-scheme: dark) {
    .gallery-section {
        background-color: var(--bg-dark);
    }
}

/* 2. Heading and subtitle */
.gallery-section .section-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--txt-primary);
    margin-bottom: var(--gap-small);
    opacity: 0;
    /* animate on scroll */
}

.gallery-section .section-subtitle {
    font-size: 1rem;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
    color: var(--txt-secondary);
    text-align: center;
    opacity: 0;
    /* animate on scroll */
}

@media (min-width: 480px) {
    .gallery-section .section-title {
        font-size: 2rem;
    }

    .gallery-section .section-subtitle {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .gallery-section .section-title {
        font-size: 2.25rem;
    }

    .gallery-section .section-subtitle {
        font-size: 1.25rem;
    }
}

/* 3. Gallery grid (masonry-like via columns) */
.gallery-grid {
    column-count: 1;
    column-gap: var(--gap-medium);
}

@media (min-width: 600px) {
    .gallery-grid {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        column-count: 3;
    }
}

@media (min-width: 1440px) {
    .gallery-grid {
        column-count: 4;
    }
}

/* 4. Gallery item */
.gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--gap-medium);
    position: relative;
    overflow: hidden;
    break-inside: avoid;
    border-radius: 8px;
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(20px);
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
}

/* 5. Image styling */
.gallery-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.gallery-img:hover,
.gallery-img:focus {
    transform: scale(1.05);
}

/* 6. Overlay on hover */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-time) ease;
    text-align: center;
    padding: var(--gap-medium);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay {
    opacity: 1;
}

/* Caption text */
.gallery-caption {
    font-size: 1rem;
    color: var(--color-bg-light);
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .gallery-caption {
        font-size: 1.125rem;
    }
}

/* 7. Section padding */
.gallery-section {
    padding-top: var(--gap-xlarge);
    padding-bottom: var(--gap-xlarge);
}

/* 8. Scroll-triggered animation classes */
/* We will add these classes via JS when items come into view */
/* Alternatively, use data-animate="animate-fadeInUp" on each .gallery-item. */
/* common.css has:
   .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; }
*/
/* To integrate with CSS transitions above, we can also handle via JS: 
   On intersection, remove inline transform/opacity and let transition apply.
*/

/* 9. Responsive spacing adjustments */
@media (max-width: 479px) {
    .gallery-grid {
        column-gap: var(--gap-small);
    }

    .gallery-section .section-subtitle {
        margin-bottom: var(--gap-medium);
    }
}

/* Contact CTA Section Without Form CSS (Updated for provided :root variables) */

/* 1. Section base */
.contact-cta-section {
    background-color: var(--color-bg-light);
    position: relative;
    text-align: center;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    .contact-cta-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* 2. Heading and subtitle */
.contact-cta-section .section-title {
    font-size: calc(var(--font-size-base) * 1.75);
    /* ~1.75rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* animate on scroll */
    line-height: var(--line-height-base);
}

.contact-cta-section .section-subtitle {
    font-size: var(--font-size-base);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    opacity: 0;
    /* animate on scroll */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .contact-cta-section .section-title {
        font-size: calc(var(--font-size-base) * 2);
        /* ~2rem */
    }

    .contact-cta-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
        /* ~1.125rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .contact-cta-section .section-title {
        font-size: calc(var(--font-size-base) * 2.25);
        /* ~2.25rem */
    }

    .contact-cta-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }
}

/* 3. Button wrapper */
.cta-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    opacity: 0;
    /* animate on scroll */
    transform: translateY(var(--space-md));
    /* initial offset for animation */
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
    margin-top: var(--space-md);
}

@media (min-width: var(--breakpoint-mobile)) {
    .cta-button-wrapper {
        flex-direction: row;
        justify-content: center;
    }
}

/* 4. Primary button */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 2px solid var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
    text-decoration: none;
}

.contact-cta-section .btn-primary.cta-button:hover,
.contact-cta-section .btn-primary.cta-button:focus {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
    transform: translateY(-2px);
    outline: none;
}

/* 5. Secondary button */
.cta-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 2px solid var(--color-accent);
    background-color: transparent;
    color: var(--color-accent);
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
    text-decoration: none;
}

.contact-cta-section .btn-secondary.cta-button-secondary:hover,
.contact-cta-section .btn-secondary.cta-button-secondary:focus {
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    transform: translateY(-2px);
    outline: none;
}

/* 6. Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .cta-button-wrapper {
        gap: var(--space-sm);
    }

    .cta-button,
    .cta-button-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* 7. Focus states (accessibility) */
.contact-cta-section .btn-primary.cta-button:focus,
.contact-cta-section .btn-secondary.cta-button-secondary:focus {
    box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.3);
    /* using accent color with opacity */
}

/* 8. Utility: ensure smooth animations when classes added */

/* About Hero Section CSS (Using provided :root variables) */

/* 1. Section base */
.about-hero-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: 100px;
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .about-hero-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* 2. Container */
.about-hero-section .container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    text-align: center;
}

/* 3. Heading */
.about-hero-section .section-title {
    font-size: calc(var(--font-size-base) * 2);
    /* ~2rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .about-hero-section .section-title {
        font-size: calc(var(--font-size-base) * 2.5);
        /* ~2.5rem */
    }
}

/* 4. Subtitle */
.about-hero-section .section-subtitle {
    font-size: var(--font-size-base);
    max-width: 800px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .about-hero-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
        /* ~1.125rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .about-hero-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }
}

/* 5. Image wrapper */
.about-hero-img-wrapper {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-md));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
}

.about-hero-img-wrapper img.about-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.about-hero-img-wrapper img.about-hero-img:hover,
.about-hero-img-wrapper img.about-hero-img:focus {
    transform: scale(1.03);
}

/* 6. Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .about-hero-section .section-title {
        font-size: calc(var(--font-size-base) * 1.75);
        /* ~1.75rem */
    }

    .about-hero-section .section-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-md);
    }

    .about-hero-img-wrapper {
        margin-top: var(--space-md);
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .about-hero-img-wrapper {
        margin-top: var(--space-lg);
    }
}

/* 7. Scroll animation helper */
/* Elements initially have opacity:0 and translateY; JS will add animate-fadeInDown / animate-fadeInUp classes from common.css */
/* E.g., common.css: 
   .animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; }
   .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; }
*/

.our-story-section {
    background-color: var(--light);
    padding: 60px 20px;
}

.our-story-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.our-story-text {
    flex: 1 1 50%;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text);
}

.our-story-image {
    flex: 1 1 40%;
    max-width: 500px;
}

.our-story-image img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Our Values Section CSS (Using provided :root variables) */

.our-values-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .our-values-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

.our-values-section .container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    text-align: center;
}

/* Section heading */
.our-values-section .section-title {
    font-size: calc(var(--font-size-base) * 2);
    /* ~2rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .our-values-section .section-title {
        font-size: calc(var(--font-size-base) * 2.5);
        /* ~2.5rem */
    }
}

/* Section subtitle */
.our-values-section .section-subtitle {
    font-size: var(--font-size-base);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .our-values-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
        /* ~1.125rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .our-values-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }
}

/* Values list: responsive grid-like flex */
.values-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
    margin-top: var(--space-md);
}

/* Each value item */
.value-item {
    background-color: var(--color-bg-light);
    /* on dark mode, wrapper inherits dark background */
    flex: 1 1 250px;
    /* base width ~250px, grows/shrinks */
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-sm));
}

@media (prefers-color-scheme: dark) {
    .value-item {
        background-color: #2A2A2A;
        border-color: #444444;
    }
}

/* Hover effect lifts the item slightly */
.value-item:hover,
.value-item:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Icon wrapper */
.value-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 80px;
    height: 80px;
    margin-bottom: var(--space-sm);
    overflow: hidden;
    border-radius: 50%;
}

.value-icon-wrapper img.value-icon {
    width: 60%;
    height: 60%;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.value-icon-wrapper img.value-icon:hover,
.value-icon-wrapper img.value-icon:focus {
    transform: scale(1.1);
}

/* Title of each value */
.value-title {
    font-size: calc(var(--font-size-base) * 1.25);
    /* ~1.25rem */
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    text-align: center;
}

/* Description */
.value-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .values-list {
        gap: var(--space-md);
    }

    .value-item {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Scroll animation helper */
/* Elements have initial opacity:0 and translateY(var(--space-sm)); JS adds animate-fadeInUp (common.css) to fade and translate to original position */

/* Our Expertise & Services Section CSS (Using provided :root variables) */

/* Section base */
.expertise-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .expertise-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

.expertise-section .container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Section heading */
.expertise-section .section-title {
    font-size: calc(var(--font-size-base) * 2);
    /* ~2rem */
    font-weight: 700;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: var(--space-sm);
    opacity: 0;
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .expertise-section .section-title {
        font-size: calc(var(--font-size-base) * 2.5);
    }
}

/* Subtitle */
.expertise-section .section-subtitle {
    font-size: var(--font-size-base);
    max-width: 800px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    text-align: center;
    opacity: 0;
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .expertise-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .expertise-section .section-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
    }
}

/* Tabs container */
.tabs {
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(var(--space-sm));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
}

/* Tabs navigation */
.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-md);
}

.tab-btn {
    background: none;
    border: none;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    color: var(--color-text);
    border-bottom: 3px solid transparent;
    transition: color var(--transition-time) ease, border-color var(--transition-time) ease;
}

.tab-btn[aria-selected="true"] {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.tab-btn:hover,
.tab-btn:focus {
    color: var(--color-accent);
    outline: none;
}

/* Tabs content panels */
.tabs-content {
    position: relative;
}

.tab-panel {
    display: none;
    animation: none;
}

.tab-panel[hidden] {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Responsive: accordion fallback on mobile */
@media (max-width: var(--breakpoint-mobile)) {
    .tabs-nav {
        display: none;
    }

    .tab-panel {
        border-top: 1px solid var(--color-border);
    }

    .tab-panel:not(.active) {
        display: none;
    }
}

/* Design tab: expertise-item */
.expertise-item {
    margin-bottom: var(--space-lg);
}

.expertise-title {
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
}

.expertise-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-base);
}

.expertise-list {
    list-style: disc inside;
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.expertise-image-wrapper {
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.expertise-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.expertise-image-wrapper img:hover,
.expertise-image-wrapper img:focus {
    transform: scale(1.03);
}

/* Production tab: timeline */
.production-timeline {
    position: relative;
    margin: var(--space-lg) 0;
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-border);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--space-lg);
    padding-left: var(--space-lg);
}

.timeline-item.reverse {
    padding-left: var(--space-lg);
}

.timeline-marker {
    position: absolute;
    left: -9px;
    /* half of marker size */
    top: 0;
    width: 18px;
    height: 18px;
    background-color: var(--color-accent);
    border-radius: 50%;
    border: 2px solid var(--color-bg-light);
}

@media (prefers-color-scheme: dark) {
    .timeline-marker {
        border-color: var(--color-bg-dark);
    }
}

.timeline-title {
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
}

.timeline-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

/* Installation tab: stages grid */
.installation-stages {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: var(--space-md);
}

.stage-item {
    text-align: center;
    overflow: hidden;
}

.stage-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform var(--transition-time) ease;
}

.stage-img:hover,
.stage-img:focus {
    transform: scale(1.03);
}

.stage-title {
    font-size: calc(var(--font-size-base) * 1.125);
    font-weight: 600;
    color: var(--color-heading);
    margin: var(--space-sm) 0;
}

.stage-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

/* Support tab: accordion */
.support-accordion {
    margin-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: var(--space-md) 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-heading);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color var(--transition-time) ease;
}

.accordion-header:hover,
.accordion-header:focus {
    color: var(--color-accent);
    outline: none;
}

.accordion-icon {
    font-size: calc(var(--font-size-base) * 1.25);
    transition: transform var(--transition-time) ease;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-time) ease;
    padding-bottom: 0;
}

.accordion-content.open {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-md);
}

@media (prefers-color-scheme: dark) {

    .accordion-header,
    .accordion-content p {
        color: var(--color-text-secondary);
    }
}

/* Scroll-trigger helper: initial opacity and transform */
.tabs,
.expertise-section .section-title,
.expertise-section .section-subtitle {
    /* Already have opacity:0 and translateY in HTML data-animate usage */
}

/* Ensure hidden panels have display none */
.tab-panel {
    /* managed via JS by adding/removing .active and hidden attribute */
}

/* About Page CTA Section CSS (Using provided :root variables) */

.about-cta-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .about-cta-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* Container uses existing .container class assumed defined:
   .container { max-width: var(--container-max-width); margin: 0 auto; padding-left/right: var(--space-md); }
*/

/* CTA Title */
.about-cta-section .cta-title {
    font-size: calc(var(--font-size-base) * 2);
    /* ~2rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .about-cta-section .cta-title {
        font-size: calc(var(--font-size-base) * 2.5);
        /* ~2.5rem */
    }
}

/* CTA Subtitle */
.about-cta-section .cta-subtitle {
    font-size: var(--font-size-base);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .about-cta-section .cta-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
        /* ~1.125rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .about-cta-section .cta-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }
}

/* Buttons wrapper */
.about-cta-section .cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-md));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
    margin-top: var(--space-md);
}

@media (min-width: var(--breakpoint-mobile)) {
    .about-cta-section .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Primary button */
.about-cta-section .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 2px solid var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
    text-decoration: none;
}

.about-cta-section .cta-button:hover,
.about-cta-section .cta-button:focus {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
    transform: translateY(-2px);
    outline: none;
}

/* Secondary button */
.about-cta-section .cta-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 2px solid var(--color-accent);
    background-color: transparent;
    color: var(--color-accent);
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
    text-decoration: none;
}

.about-cta-section .cta-button-secondary:hover,
.about-cta-section .cta-button-secondary:focus {
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    transform: translateY(-2px);
    outline: none;
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .about-cta-section .cta-buttons {
        gap: var(--space-sm);
    }

    .about-cta-section .cta-button,
    .about-cta-section .cta-button-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Focus states */
.about-cta-section .cta-button:focus,
.about-cta-section .cta-button-secondary:focus {
    box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.3);
    /* accent color with opacity */
}

/* Shop Hero Section with Collections Slider CSS (Using provided :root variables) */

/* 1. Section base */
.shop-hero-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: 100px;
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .shop-hero-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* 2. Container */
.shop-hero-section .container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* 3. Title and subtitle */
.shop-hero-title {
    font-size: calc(var(--font-size-base) * 2);
    /* ~2rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .shop-hero-title {
        font-size: calc(var(--font-size-base) * 2.5);
        /* ~2.5rem */
    }
}

.shop-hero-subtitle {
    font-size: var(--font-size-base);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .shop-hero-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
        /* ~1.125rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .shop-hero-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }
}

/* 4. Collections slider wrapper */
.collections-slider-wrapper {
    position: relative;
    margin-top: var(--space-lg);
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-sm));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
}

/* 5. Swiper overrides */
.collections-swiper {
    width: 100%;
    padding-bottom: var(--space-lg);
}

.collections-swiper .swiper-button-prev,
.collections-swiper .swiper-button-next {
    color: var(--color-accent);
}

.collections-swiper .swiper-button-prev:hover,
.collections-swiper .swiper-button-next:hover {
    color: var(--color-primary);
}

/* 6. Collection card */
.collection-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
}

.collection-card:hover,
.collection-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.collection-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.collection-card:hover .collection-img,
.collection-card:focus-within .collection-img {
    transform: scale(1.05);
}

/* Overlay */
.collection-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-bg-light);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    transform: translateY(100%);
    transition: transform var(--transition-time) ease;
}

.collection-card:hover .collection-overlay,
.collection-card:focus-within .collection-overlay {
    transform: translateY(0);
}

.collection-title {
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: 600;
    color: var(--bg-light);
    margin: 0;
}

.collection-btn {
    font-size: var(--font-size-base);
    padding: var(--space-xs) var(--space-md);
    border: 2px solid var(--color-bg-light);
    background-color: transparent;
    color: var(--color-bg-light);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease;
}

.collection-btn:hover,
.collection-btn:focus {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
    outline: none;
}

/* 7. Responsive slides per view via Swiper initialization */

/* 8. Responsive adjustments for static content */
@media (max-width: var(--breakpoint-mobile)) {
    .collections-slider-wrapper {
        margin-top: var(--space-md);
    }
}

/* 9. Scroll animation helpers */
/* Elements initially have opacity:0 and transform; JS adds animate-fadeInDown / animate-fadeInUp classes from common.css */

/* Shop Catalog Section: 4 Products per Category (Using provided :root variables) */

/* 1. Catalog section base */
.catalog-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .catalog-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* 2. Container */
.catalog-section .container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* 3. Category section */
.category-section {
    margin-bottom: var(--space-XL);
    /* extra space between categories */
}

.category-title {
    font-size: calc(var(--font-size-base) * 1.75);
    /* ~1.75rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    text-transform: capitalize;
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .category-title {
        font-size: calc(var(--font-size-base) * 2);
        /* ~2rem */
    }
}

/* 4. Products grid */
.products-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-sm));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
    margin-bottom: var(--space-lg);
}

/* 5. Product card */
.product-card {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-sm));
}

@media (prefers-color-scheme: dark) {
    .product-card {
        background-color: #2A2A2A;
        border-color: #444444;
    }
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 6. Product image */
.product-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-time) ease;
}

.product-card:hover .product-img,
.product-card:focus-within .product-img {
    transform: scale(1.05);
}

/* 7. Product info */
.product-info {
    padding: var(--space-md);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-size: calc(var(--font-size-base) * 1.125);
    /* ~1.125rem */
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-xs);
    line-height: var(--line-height-base);
}

.product-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
    line-height: var(--line-height-base);
    flex-grow: 1;
}

.product-price {
    font-size: calc(var(--font-size-base) * 1.125);
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

/* 8. Product button */
.product-btn {
    align-self: start;
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 2px solid var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    text-decoration: none;
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
}

.product-btn:hover,
.product-btn:focus {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
    transform: translateY(-2px);
    outline: none;
}

/* 9. Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .products-grid {
        gap: var(--space-md);
    }

    .category-section {
        margin-bottom: var(--space-xl);
    }
}

/* 10. Scroll animation helper */
/* Initial opacity:0 and translateY applied via data-animate attributes and common.css animations */

/* Contact Form Section CSS (Using provided :root variables) */

.contact-form-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: 100px;
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .contact-form-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* Container uses existing .container:
   .container { width:100%; max-width:var(--container-max-width); margin:0 auto; padding-left/right:var(--space-md); }
*/

/* Section Title and Subtitle */
.contact-form-title {
    font-size: calc(var(--font-size-base) * 2);
    /* ~2rem */
    font-weight: 700;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: var(--space-sm);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .contact-form-title {
        font-size: calc(var(--font-size-base) * 2.5);
        /* ~2.5rem */
    }
}

.contact-form-subtitle {
    font-size: var(--font-size-base);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-secondary);
    text-align: center;
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .contact-form-subtitle {
        font-size: calc(var(--font-size-base) * 1.125);
        /* ~1.125rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .contact-form-subtitle {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }
}

/* Wrapper: two-column on desktop, stacked on mobile */
.contact-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-sm));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
}

@media (min-width: 769px) {
    .contact-form-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Contact Info Column */
.contact-info {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-info .info-title {
    font-size: calc(var(--font-size-base) * 1.5);
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.info-list li {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.info-list a {
    color: var(--color-accent);
    text-decoration: none;
}

.info-list a:hover,
.info-list a:focus {
    text-decoration: underline;
    outline: none;
}

/* Map embed */
.map-embed {
    margin-top: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .map-embed {
        border-color: #444444;
    }
}

/* Contact Form Column */
.contact-form {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.checkbox-group {
    flex-direction: row !important;
}

.contact-form label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-heading);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg-light);
    transition: border-color var(--transition-time) ease, box-shadow var(--transition-time) ease;
}

@media (prefers-color-scheme: dark) {

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        background-color: #2A2A2A;
        border-color: #444444;
        color: var(--color-text-secondary);
    }
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.2);
}

/* Checkbox group */
.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.checkbox-group label {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.checkbox-group a {
    color: var(--color-accent);
    text-decoration: none;
}

.checkbox-group a:hover,
.checkbox-group a:focus {
    text-decoration: underline;
    outline: none;
}

/* Submit Button */
.submit-btn {
    align-self: start;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 2px solid var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease, transform var(--transition-time) ease;
}

.submit-btn:hover,
.submit-btn:focus {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
    transform: translateY(-2px);
    outline: none;
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-tablet)) {
    .contact-form-wrapper {
        flex-direction: column;
    }

    .contact-info,
    .contact-form {
        width: 100%;
    }
}

/* Scroll animation helper */
/* Elements have initial opacity:0 and translateY; JS adds animate-fadeInDown / animate-fadeInUp via data-animate */

/* FAQ Section CSS for Contacts Page (Using provided :root variables) */

.faq-section {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .faq-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* Container uses existing .container */

/* Section Title */
.faq-title {
    font-size: calc(var(--font-size-base) * 1.75);
    /* ~1.75rem */
    font-weight: 700;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: var(--space-lg);
    opacity: 0;
    /* for scroll animation */
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-tablet)) {
    .faq-title {
        font-size: calc(var(--font-size-base) * 2);
        /* ~2rem */
    }
}

/* FAQ List */
.faq-list {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    opacity: 0;
    /* for scroll animation */
    transform: translateY(var(--space-sm));
    transition: transform var(--transition-time) ease, opacity var(--transition-time) ease;
}

/* Individual FAQ Item */
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-bg-light);
    transition: box-shadow var(--transition-time) ease;
}

@media (prefers-color-scheme: dark) {
    .faq-item {
        background-color: #2A2A2A;
        border-color: #444444;
    }
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Question Button */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: var(--space-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-heading);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color var(--transition-time) ease;
}

.faq-question:hover,
.faq-question:focus {
    background-color: rgba(0, 0, 0, 0.03);
    outline: none;
}

@media (prefers-color-scheme: dark) {

    .faq-question:hover,
    .faq-question:focus {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

/* Icon */
.faq-icon {
    font-size: calc(var(--font-size-base) * 1.25);
    transition: transform var(--transition-time) ease;
}

/* Answer Panel */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--space-md);
    transition: max-height var(--transition-time) ease, padding var(--transition-time) ease;
    background-color: var(--color-bg-light);
}

@media (prefers-color-scheme: dark) {
    .faq-answer {
        background-color: #2A2A2A;
    }
}

.faq-answer.open {
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Answer Text */
.faq-answer p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

/* When expanded: rotate icon */
.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
    /* “+” becomes “×”-like when rotated */
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .faq-question {
        padding: var(--space-sm);
    }

    .faq-answer {
        padding: 0 var(--space-sm);
    }
}

/* Scroll animation helpers */
/* .faq-title and .faq-list have initial opacity:0 and translateY; JS adds animate classes */

/* Thank You Page Styles for LuxeDrapeStudio */

/* 1. Full-height centering */
.thanks-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Use full viewport height minus any header if present; since no header, full viewport */
    min-height: 100vh;
    padding: var(--space-lg) var(--space-md);
    background-color: var(--color-bg-light);
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-family-base);
}

@media (prefers-color-scheme: dark) {
    .thanks-section {
        background-color: var(--color-bg-dark);
        color: var(--color-text-secondary);
    }
}

/* 2. Title styling */
.thanks-title {
    font-size: calc(var(--font-size-base) * 1.5);
    /* ~1.5rem */
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    line-height: var(--line-height-base);
}

@media (min-width: var(--breakpoint-mobile)) {
    .thanks-title {
        font-size: calc(var(--font-size-base) * 1.75);
        /* ~1.75rem */
    }
}

@media (min-width: var(--breakpoint-tablet)) {
    .thanks-title {
        font-size: calc(var(--font-size-base) * 2);
        /* ~2rem */
    }
}

/* 3. Return button styling */
/* Reuses .btn and .btn-primary from common.css */
/* If you want additional spacing: */
.return-button {
    margin-top: var(--space-lg);
}

/* If you wish to override or add custom hover effect: */
.return-button:hover,
.return-button:focus {
    /* The common .btn-primary hover already inverts background/text; keep or adjust */
    outline: none;
}

/* 4. Responsive adjustments */
@media (max-width: var(--breakpoint-mobile)) {
    .thanks-section {
        padding: var(--space-md) var(--space-sm);
    }

    .thanks-title {
        font-size: calc(var(--font-size-base) * 1.25);
        /* ~1.25rem */
    }

    .return-button {
        width: 100%;
        justify-content: center;
    }
}

/* 5. Optional fade-in animation on load */
.thanks-section {
    opacity: 1;
    transform: translateY(20px);
    transition: opacity var(--transition-time) ease, transform var(--transition-time) ease;
}

body.loaded .thanks-section {
    opacity: 1;
    transform: translateY(0);
}