:root {
    --primary: #42B2B2;
    --light-bg: #F6FDFB;
    --white: #FFFFFF;
    --gold: #937E46;
    --dark-brown: #45422F;
    --text-color: #333;
    --font-main: 'Roboto', sans-serif;
    --transition: all 0.3s ease;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    padding-top: 0;
    /* No static padding, Hero touches top */
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3 {
    margin-bottom: 1rem;
    color: var(--dark-brown);
}

.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Header (Apple-style Glassmorphism) */
/* Header (Floating 3D Pill) */
.header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: absolute;
    /* Not sticky, stays at top */
    top: 20px;
    /* Floating from top */
    left: 50%;
    transform: translateX(-50%);
    /* Centered */
    width: 95%;
    max-width: 1200px;
    height: 80px;
    z-index: 1000;
    border-radius: 50px;
    /* Rounded Pill */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Logo Left, Lang Right */
    padding: 0 30px;
    /* Internal spacing */
    /* 3D Effect */
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.15),
        /* Grey Shadow */
        0 3px 6px rgba(0, 0, 0, 0.1),
        /* Closer shadow */
        0 -1px 0 rgba(255, 255, 255, 0.8) inset;
    /* Top highlight */
    transition: all 0.3s ease;
}

.header .container {
    display: contents;
    /* Remove container wrapper effect to let flex work directly */
}

/* Adjust Logo for Pill */
.logo {
    flex: 0 0 auto;
    /* Don't shrink */
}

.logo img {
    height: 50px;
    /* Slightly smaller to fit pill */
    width: auto;
    transition: transform 0.3s ease;
    border-radius: 10px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    /* Glow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Subtle depth */
}

/* Center Menu */
.nav {
    flex: 1;
    /* Take up center space */
    justify-content: center;
    /* Center items */
    display: flex;
    align-items: center;
}

.nav a {
    margin: 0 5px;
    /* Tighter for buttons */
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    padding: 10px 18px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nav Link 3D Hover */
.nav a:hover {
    background-color: #DCC079;
    /* Much Lighter Gold */
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 #7a683a;
    /* Darker Gold 3D Shadow */
}

.nav a:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #7a683a;
}

.lang-switch button {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    color: var(--dark-brown);
}

.lang-switch button.active {
    color: var(--primary);
    text-decoration: underline;
}

/* Hero */
.hero {
    background: linear-gradient(rgba(66, 178, 178, 0.8), rgba(69, 66, 47, 0.6)), url('https://images.unsplash.com/photo-1588776814546-1ffcf4722e63?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover no-repeat;
    height: 100vh;
    /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: 0 20px;
    padding-top: 80px;
    /* Offset for content visual balance */
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInDown 1s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 1;
        transform: translateY(-20px);
    }

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

.hero p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease-out 0.5s both;
}

@keyframes fadeInUp {
    from {
        opacity: 1;
        transform: translateY(20px);
    }

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

.btn {
    display: inline-block;
    padding: 15px 30px;
    color: var(--white);
    border-radius: 5px;
    font-weight: bold;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.primary-btn {
    background-color: var(--gold);
}

.primary-btn:hover {
    background-color: var(--dark-brown);
}

.whatsapp-btn {
    background-color: #25D366;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

/* Services */
.services {
    background-color: var(--light-bg);
}

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

.service-card {
    background: var(--white);
    padding: 40px 20px;
    border-radius: 15px;
    /* Glowing Border Base */
    border: 1px solid rgba(66, 178, 178, 0.2);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.05),
        /* Soft Drop Shadow */
        0 0 0 1px rgba(66, 178, 178, 0.1);
    /* Subtle Outline */
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary);
    /* 3D Glow Effect */
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        /* Deep Shadow */
        0 0 20px rgba(66, 178, 178, 0.4),
        /* Outer Glow */
        inset 0 0 15px rgba(66, 178, 178, 0.1);
    /* Inner Glow */
    z-index: 2;
}

.service-card i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 0;
    color: var(--dark-brown);
}

/* Why Albania */
.why-albania {
    background-color: var(--white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature {
    text-align: center;
    padding: 20px;
}

.feature i {
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 15px;
}

.feature h3 {
    color: var(--primary);
}

/* About Us */
.about {
    background-color: var(--light-bg);
    text-align: center;
}

.about-content p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
}

/* Process Timeline */
.process {
    background-color: var(--white);
    padding-bottom: 50px;
}

.timeline-detailed {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

.timeline-detailed::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--gold);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.process-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

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

.process-img {
    width: 45%;
    position: relative;
}

.process-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    border: 4px solid var(--white);
}

.process-step:hover .process-img img {
    transform: scale(1.02);
}

.step-badge {
    position: absolute;
    top: -20px;
    background-color: var(--primary);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid var(--white);
}

.process-step.right .step-badge {
    left: -25px;
}

.process-step.left .step-badge {
    right: -25px;
}

.process-text {
    width: 45%;
    background-color: var(--light-bg);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.process-text h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* Guarantee Badge */
.guarantee-badge {
    text-align: center;
    margin-top: 50px;
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.guarantee-badge i {
    font-size: 3rem;
    color: var(--gold);
}

/* Why Choose Us */
.why-choose-us {
    background-color: var(--light-bg);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.why-card {
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

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

.why-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.why-card h3 {
    color: var(--dark-brown);
    margin-bottom: 15px;
}

/* UI Polish updates */
.logo a {
    display: block;
    /* Clickable */
}

/* 3D Button Effect */
/* 3D Button Effect (Global) */
.btn {
    border: none;
    border-radius: 8px;
    /* Slightly rounded */
    padding: 15px 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.1s;
    position: relative;
    /* Default 3D State */
    transform: translateY(0);
}

.primary-btn {
    background-color: var(--primary);
    /* Teal */
    color: var(--white);
    box-shadow: 0 5px 0 #2a7a7a;
    /* Darker Teal for depth */
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #2a7a7a;
}

.primary-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #2a7a7a;
    /* Pressed down */
}

.secondary-btn {
    background-color: var(--gold);
    color: var(--white);
    box-shadow: 0 5px 0 #7a683a;
    /* Darker Gold */
}

.secondary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #7a683a;
}

.secondary-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #7a683a;
}

.whatsapp-btn {
    box-shadow: 0 5px 0 #0f6f64;
    /* WhatsApp Dark */
}

.whatsapp-btn:hover {
    background-color: #25D366;
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #0f6f64;
}

.whatsapp-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0f6f64;
}

/* Fancy Language Switcher (3D Pills) */
.lang-switch {
    flex: 0 0 auto;
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 50px;
    display: flex;
    gap: 8px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-left: 20px;
    /* Separate from links on desktop */
}

.lang-switch button {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    color: #888;
    transition: all 0.2s;
}

.lang-switch button:hover {
    color: var(--primary);
}

.lang-switch button.active {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 3px 0 #2a7a7a;
    /* 3D effect on active pill */
    transform: translateY(-1px);
}

.lang-switch button.active:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #2a7a7a;
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    /* Hidden on Desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1100;
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    /* Green color of palette */
    border-radius: 3px;
    transition: 0.3s;
}

.mobile-nav-close {
    display: none !important;
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    cursor: pointer;
    color: var(--dark-brown);
}

/* Mobile Responsive */
@media (max-width: 900px) {

    /* Trigger earlier */
    .hamburger-menu {
        display: flex;
    }

    .nav {
        display: none;
        /* Hidden by default */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        /* Solid-ish overlay */
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1050;
        animation: slideInRight 0.3s ease;
    }

    .nav.active {
        display: flex !important;
        flex-direction: column;
        /* Force column layout */
        gap: 30px;
        /* spacing for links */
        padding-top: 60px;
        /* space for close button */
    }

    /* Removed .nav ul as it does not exist in HTML */

    .nav a {
        font-size: 1.5rem;
        /* Bigger touch targets */
        margin: 0;
        display: block;
        /* Ensure they take space */
    }

    .mobile-nav-close {
        display: block;
    }

    .lang-switch {
        display: flex !important;
        opacity: 1 !important;
        margin-top: 20px;
        margin-left: 0;
        /* Reset desktop margin */
        transform: scale(1.2);
    }
}

@keyframes slideInRight {
    from {
        opacity: 1;
        transform: translateX(20px);
    }

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

@media (max-width: 768px) {
    .timeline-detailed::after {
        left: 20px;
    }

    .process-step {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
    }

    .process-step.right {
        flex-direction: column;
    }

    .process-img,
    .process-text {
        width: 100%;
        margin-bottom: 20px;
    }

    .step-badge {
        left: -45px !important;
        right: auto !important;
        top: 0;
    }
}

/* Comparison */
.results {
    background-color: var(--light-bg);
}

/* Results Grid (iOS Style) */
.results {
    background-color: var(--white);
    /* Clean white background */
    text-align: center;
    padding: 60px 0;
}

.section-subtitle {
    margin-bottom: 40px;
    color: #666;
    font-size: 1.1rem;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    /* Tighter gap like photos */
    padding: 20px;
}

.result-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    padding-bottom: 100%;
    /* Square aspect ratio tiles */
    background-color: #f0f0f0;
    transition: transform 0.2s ease;
}

.result-card:hover {
    transform: scale(0.98);
    /* Slight press effect */
}

.result-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the square */
    transform: scale(1.15);
    /* Zoom to crop grid borders */
    transition: transform 0.3s ease;
}

/* Lightbox (iOS Fullscreen View) */
.lightbox {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
}

.lightbox-wrapper {
    overflow: hidden;
    /* Crop the zoomed image */
    border-radius: 5px;
    max-width: 90%;
    max-height: 90vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: zoomIn 0.3s ease;
}

.lightbox-content {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    transform: scale(1.25);
    /* Zoom in to hide text/borders */
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 1;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

/* Premium View More Button */
.view-more-btn {
    background: var(--white);
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 35px;
    border-radius: 50px;
    /* Pill shape */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(66, 178, 178, 0.15);
    position: relative;
    overflow: hidden;
    animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 5px 15px rgba(66, 178, 178, 0.15);
    }

    50% {
        box-shadow: 0 5px 25px rgba(66, 178, 178, 0.4);
        transform: translateY(-2px);
    }

    100% {
        box-shadow: 0 5px 15px rgba(66, 178, 178, 0.15);
    }
}

/* Shine Effect */
.view-more-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

.view-more-btn i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.view-more-btn:hover {
    background-color: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(66, 178, 178, 0.3);
    animation: none;
    /* Stop pulse on hover */
}

.view-more-btn:hover::after {
    left: 100%;
    /* sweep shine */
}

.view-more-btn:hover i {
    transform: translateY(3px);
    /* Arrow moves down inside */
}

.view-more-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(66, 178, 178, 0.2);
}

/* Passion Section */
.passion-container {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.passion-content {
    flex: 1;
}

.passion-content h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.passion-content p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #555;
    text-align: justify;
}

.passion-image {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.passion-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.passion-image:hover img {
    transform: scale(1.05);
}

/* Testimonials */
.testimonials {
    background: linear-gradient(135deg, var(--light-bg), #e0f7fa);
    padding: 100px 0;
}

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

.testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 35px rgba(66, 178, 178, 0.1);
    height: 100%;
}

.client-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--white);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.client-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-feedback {
    text-align: center;
}

.client-feedback i {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 15px;
    display: block;
}

.client-feedback p {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--dark-brown);
    margin-bottom: 15px;
}

.client-feedback h4 {
    font-size: 1.2rem;
    color: var(--primary);
}

/* Responsive for new sections */
@media (max-width: 768px) {
    .passion-container {
        flex-direction: column;
        text-align: center;
    }

    .passion-content p {
        text-align: center;
    }

    .client-image {
        width: 150px;
        height: 150px;
    }
}

/* FAQ */
.faq {
    background-color: var(--white);
}

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    transition: var(--transition);
}

.faq-question:hover {
    background-color: var(--light-bg);
}

.faq-question h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--dark-brown);
}

.faq-question i {
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Arbitrary height for expansion */
    padding-bottom: 20px;
}

/* Contact */
.contact-info {
    text-align: center;
    font-size: 1.2rem;
}

.contact-info p {
    margin-bottom: 20px;
}

.contact-info i {
    color: var(--primary);
    margin-right: 10px;
}

/* Quote Form */
.quote {
    background-color: var(--light-bg);
}

.quote-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.quote-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.quote-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--dark-brown);
    font-weight: 500;
}

.quote-form input,
.quote-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.quote-form input:focus,
.quote-form textarea:focus {
    border-color: var(--primary);
    outline: none;
}

.form-note {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    text-align: left;
}

.quote-form button {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
}

/* Footer */
.footer {
    background-color: var(--dark-brown);
    color: var(--white);
    text-align: center;
    padding: 20px 0;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128C7E;
}

/* Quote Floating Button */
.quote-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 100px;
    /* Above WhatsApp */
    right: 30px;
    /* Aligned with WhatsApp usually 40px, let's match */
    background-color: var(--primary);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 24px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.quote-float:hover {
    transform: scale(1.1);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--white);
    margin: 5% auto;
    /* 15% from the top and centered */
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        top: -100px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.small-note {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
    }

    .logo {
        margin-bottom: 10px;
    }

    .nav {
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .timeline::after {
        left: 31px;
    }

    .step {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        text-align: left !important;
        /* Force left align for all */
    }

    .step:nth-child(even) {
        left: 0;
    }

    .step-icon {
        left: 6px !important;
        /* Force icon to left */
        right: auto !important;
    }
}

/* =========================================
HERO CAROUSEL STYLES (New)
========================================= */
/* Hero Carousel */
.hero-carousel {
    background: linear-gradient(to bottom, #88D8D8 0%, #0d5f5f 100%);
    /* Lighter Teal */
    height: 100vh;
    position: relative;
    overflow: hidden;
    color: var(--white);
    padding-top: 100px;
    /* Space for Floating Header */
    display: block !important;
    /* Force display */
}

.hero-slide {
    display: none;
    height: 100%;
    animation: fadeEffect 1s;
}

.hero-slide.active {
    display: block;
}

@keyframes fadeEffect {
    from {
        opacity: 0.4
    }

    to {
        opacity: 1
    }
}

.split-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 100px;
    /* More space */
    padding-bottom: 50px;
}

/* Text Side */
.hero-text {
    flex: 0.8;
    text-align: left;
    padding-left: 20px;
    z-index: 2;
}

.hero-text h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--white);
    font-weight: 800;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Glow + Shadow */
}

.hero-text p {
    font-size: 1.4rem;
    /* Bigger Text */
    margin-bottom: 35px;
    opacity: 0.95;
    max-width: 600px;
    line-height: 1.6;
}

/* ... */
/* Image Side */
.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-image img {
    max-width: 120%;
    /* Allow over-width to fill space */
    max-height: 85vh;
    width: auto;
    /* Base Transition */
    transition: all 0.5s ease;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Slide 1: Top-Left heavy */
.hero-slide:nth-child(1) .hero-image img {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Slide 2: Bottom-Right heavy */
.hero-slide:nth-child(2) .hero-image img {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Slide 3: Organic Blob */
.hero-slide:nth-child(3) .hero-image img {
    border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
}

/* Slide 4: S-Shape / Travel Vibe */
.hero-slide:nth-child(4) .hero-image img {
    border-radius: 73% 27% 59% 41% / 57% 56% 44% 43%;
}

/* Allow image column to grow larger */
.split-layout .hero-image {
    flex: 1.2;
}

.split-layout .hero-text {
    flex: 0.8;
}

/* Ensure overrides persist if used */
.polaroid-style img,
.rounded-frame img {
    border: none;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    transform: none;
}

.hero-image img:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

/* Removed legacy Nano Banana Frames blocks */
/* =========================================
CONTACT SECTION
========================================= */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 20px;
    overflow: hidden;
}

.contact-details {
    flex: 1;
    min-width: 300px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(66, 178, 178, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.info-text h3 {
    font-size: 1.1rem;
    color: var(--dark-text);
    margin-bottom: 5px;
    font-weight: 700;
}

.info-text a,
.info-text p {
    color: var(--light-text);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}

.info-text a:hover {
    color: var(--primary-color);
}

.info-text .small-text {
    font-size: 0.85rem;
    color: #999;
}

.social-links {
    margin: 20px 0 30px 70px;
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-text);
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--primary-color);
    color: white;
}

.wide-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.contact-map {
    flex: 1;
    min-width: 300px;
    min-height: 400px;
    border-radius: 15px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }

    .contact-map {
        min-height: 300px;
    }
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.dot.active,
.dot:hover {
    background-color: var(--white);
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 900px) {
    .split-layout {
        flex-direction: column-reverse;
        /* Text below image on mobile for better flow */
        padding-top: 80px;
        justify-content: center;
    }

    .hero-text {
        text-align: center;
        padding: 0 20px;
    }

    .hero-image img {
        max-height: 40vh;
        transform: none;
    }
}

/* =========================================
MOBILE MENU & HAMBURGER
========================================= */
/* Hide Hamburger on Desktop */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
}

.hamburger-menu .bar {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Mobile Nav Close X */
.mobile-nav-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-color);
}

/* Mobile Media Query */
@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 100%;
        /* Full width */
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        /* Solid/Glassy BG */
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.4s ease;
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .nav.active {
        right: 0;
        /* Slide in */
    }

    .nav a {
        font-size: 1.5rem;
        margin: 20px 0;
        display: block;
    }

    .mobile-nav-close {
        display: block;
    }

    /* Hamburger Animation */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 1;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* =========================================
ANIMATIONS & SHADOWS
========================================= */
.section-shadow {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
    z-index: 1;
    position: relative;
    background: white;
    /* Ensure shadow visible */
}

.reveal {
    /* opacity: 0; DISABLED FOR STABILITY */
    opacity: 1;
    transform: none;
    transition: all 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Menu Staggered Animation */
@media (max-width: 768px) {
    .nav a {
        opacity: 1;
        transform: translateX(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .nav.active a {
        opacity: 1;
        transform: translateX(0);
    }

    .nav.active a:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav.active a:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav.active a:nth-child(3) {
        transition-delay: 0.3s;
    }

    .nav.active a:nth-child(4) {
        transition-delay: 0.4s;
    }

    .nav.active a:nth-child(5) {
        transition-delay: 0.5s;
    }
}

/* =========================================
FAQ SECTION
========================================= */
.faq-section,
.faq.section {
    padding-top: 50px;
    padding-bottom: 80px;
    background-color: #f8fcfc;
}

.faq-container,
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.faq-question {
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary-color);
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    font-size: 1rem;
    color: #555;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Adjust if needed */
    padding-bottom: 20px;
}

/* New Gallery Design */
:root {
    --white: #fff;
    --black: #2e2e2e;
    --gray: #787878;
    --highlight: #ea8478;
    --footer: #f7f7f7;
}

/* Base resets handled by main css */
.results .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 0 4rem 0;
    list-style: none;
    margin: -1rem;
    /* Offset gap */
    justify-content: center;
}

/* Grid columns matching bootstrap-ish size */
.column-xs-12 {
    width: 100%;
    padding: 1rem;
}

@media (min-width: 768px) {
    .column-md-4 {
        width: 33.333%;
    }

    .column-md-6 {
        width: 50%;
    }

    .column-md-12 {
        width: 100%;
    }
}

.img-container {
    width: 100%;
    height: 350px;
    /* Reduced from 500px for better fit */
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    /* Slight rounded */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.img-container:hover .img-content-hover {
    display: block;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.img-container:hover img {
    transform: scale(1.05);
}

.img-content-hover {
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    display: none;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    /* Pill shape */
    text-align: center;
    backdrop-filter: blur(5px);
}

/* Make it centered for real */
.img-content-hover {
    margin: 0;
}

.title {
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.category {
    font-size: 1rem;
    color: var(--gray);
    margin-top: 5px;
    font-weight: 500;
}

.img-content {
    display: none;
    text-align: center;
    margin-top: 0.5rem;
}

/* Mobile Tweaks */
@media screen and (max-width: 1024px) {
    .img-container img:hover {
        transform: none;
    }

    .img-container {
        height: 300px;
    }

    .img-container:hover .img-content-hover {
        display: none;
    }

    .img-content {
        display: block;
        padding: 0.5rem 0;
    }
}

/* =========================================
MASONRY GRID GALLERY (Pinterest Style)
========================================= */
.masonry-grid {
    column-count: 3;
    column-gap: 20px;
    padding-bottom: 40px;
}

.masonry-grid .result-card {
    display: inline-block;
    /* Essential for column layout */
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    /* Prevent slicing */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--white);
}

.masonry-grid .result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.masonry-grid .result-card img {
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Remove bottom gap */
    transition: transform 0.5s ease;
}

.masonry-grid .result-card:hover img {
    transform: scale(1.03);
    /* Subtle zoom */
}

/* Responsive Columns */
@media (max-width: 900px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* =========================================
GOOGLE PHOTOS STYLE GRID
========================================= */
.google-photos-grid {
    display: grid;
    /* Responsive columns: auto-fill with min width */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px;
    /* Tiny gap */
    padding-bottom: 40px;
}

@media (min-width: 600px) {
    .google-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (min-width: 1024px) {
    .google-photos-grid {
        grid-template-columns: repeat(4, 1fr);
        /* Fixed 4 cols on big screens looks cleaner or 5 */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

.photo-item {
    position: relative;
    aspect-ratio: 1 / 1;
    /* Square */
    overflow: hidden;
    cursor: pointer;
    background-color: #f0f0f0;
    /* No border radius or very subtle? Google is sharp or 4px */
    border-radius: 4px;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s, transform 0.2s;
    display: block;
}

.photo-item:hover img {
    /* Slight dim on hover like selecting */
    filter: brightness(0.9);
    transform: scale(1.02);
}

/* Ensure hidden result logic still works with grid */
.hidden-result {
    /* display: none is handled inline */
}

/* =========================================
MOSAIC / BENTO GRID GALLERY
========================================= */
.mosaic-grid {
    display: grid;
    /* 4 columns base */
    grid-template-columns: repeat(4, 1fr);
    /* Auto height rows approx 200px (or aspect ratio) */
    grid-auto-rows: 200px;
    gap: 10px;
    padding-bottom: 40px;
    grid-auto-flow: dense;
    /* Critical for packing */
}

/* Base item */
.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background-color: #eee;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Essential for filling the varied boxes */
    transition: transform 0.4s ease;
    display: block;
}

.mosaic-item:hover img {
    transform: scale(1.05);
}

/* SPANNING LOGIC (The "Magic" Pattern) */
/* Every 1st item: Large square (2x2) */
.mosaic-item:nth-child(10n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Every 5th item: Wide (2x1) */
.mosaic-item:nth-child(10n + 5) {
    grid-column: span 2;
}

/* Every 8th item: Tall (1x2) */
.mosaic-item:nth-child(10n + 8) {
    grid-row: span 2;
}

/* Responsive */
@media (max-width: 900px) {
    .mosaic-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 180px;
    }
}

@media (max-width: 600px) {
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }

    /* Reset spans on mobile to be simpler or keep them?
Keeping them works if cols >= 2. */
}

/* =========================================
MOSAIC / BENTO GRID GALLERY
========================================= */
.mosaic-grid {
    display: grid;
    /* 4 columns base */
    grid-template-columns: repeat(4, 1fr);
    /* Auto height rows approx 200px (or aspect ratio) */
    grid-auto-rows: 200px;
    gap: 10px;
    padding-bottom: 40px;
    grid-auto-flow: dense;
    /* Critical for packing */
}

/* Base item */
.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background-color: #eee;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Essential for filling the varied boxes */
    transition: transform 0.4s ease;
    display: block;
}

.mosaic-item:hover img {
    transform: scale(1.05);
}

/* SPANNING LOGIC (The "Magic" Pattern) */
/* Every 1st item: Large square (2x2) */
.mosaic-item:nth-child(10n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Every 5th item: Wide (2x1) */
.mosaic-item:nth-child(10n + 5) {
    grid-column: span 2;
}

/* Every 8th item: Tall (1x2) */
.mosaic-item:nth-child(10n + 8) {
    grid-row: span 2;
}

/* Responsive */
@media (max-width: 900px) {
    .mosaic-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 180px;
    }
}

@media (max-width: 600px) {
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }

    /* Reset spans on mobile to be simpler or keep them?
Keeping them works if cols >= 2. */
}

/* =========================================
STANDARD GALLERY GRID
========================================= */
.gallery-grid {
    display: grid;
    /* Responsive columns: At least 250px wide, filling space */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding-bottom: 40px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Enforce Aspect Ratio - 4:3 is standard for photos */
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

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

/* Mobile Tweaks */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }
}

/* =========================================
STANDARD GALLERY GRID
========================================= */
.gallery-grid {
    display: grid;
    /* Responsive columns: At least 250px wide, filling space */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding-bottom: 40px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Enforce Aspect Ratio - 4:3 is standard for photos */
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

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

/* Mobile Tweaks */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }
}

/* =========================================
CUSTOM CSS CAROUSEL (MOGO STYLE)
========================================= */
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300');

:root {
    --main-font: 'Montserrat', sans-serif;
    --content-font: 'Roboto', sans-serif;
    --h3-font: 'Kaushan Script', cursive;
    --main-color: #fff;
    --icon-color: #95e1d3;
    --red-highlight: #f38181;
    --banner-overlay-start: rgba(243, 129, 129, 0.9);
    --banner-overlay-end: rgba(252, 227, 138, 0.9);
}

.gallery-carousel-section {
    height: 38em;
    color: var(--main-color);
    background-color: #333;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    border-radius: 12px;
    /* Integration tweak */
}

/* Hide Radio Inputs */
.gallery-carousel-section input {
    display: none;
}

.content-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    transition: all .5s ease;
}

.banner-inner-wrapper {
    height: 100%;
    padding-top: 6em;
    /* Overlay Gradient */
    background-image: linear-gradient(var(--banner-overlay-start), var(--banner-overlay-end));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner h2 {
    padding-bottom: 0.3em;
    font-family: var(--h3-font);
    font-weight: 400;
    font-size: 2.5em;
    text-transform: none;
    margin: 0;
    color: #fff;
}

.banner h1 {
    font-family: var(--main-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 4em;
    /* Adjusted from 6em for better fit */
    line-height: 95%;
    margin: 0;
    color: #fff;
}

.banner .line {
    display: block;
    width: 4em;
    height: 0.1875em;
    margin: 2.5em auto;
    background: var(--main-color);
}

.learn-more-button {
    padding-bottom: 5em;
    z-index: 15 !important;
}

.learn-more-button a {
    padding: 0.5em 2em;
    text-align: center;
    font-family: var(--main-font);
    font-size: 0.875em;
    color: var(--main-color);
    text-transform: uppercase;
    border: 0.1875em solid var(--main-color);
    text-decoration: none;
    transition: 0.3s;
}

.learn-more-button a:hover {
    color: #e88382;
    border-color: #e88382;
    background: #fff;
}

/* Background Images */
#top-banner-1 {
    background-image: url('../assets/gallery_new_1.jpg');
}

#top-banner-2 {
    background-image: url('../assets/gallery_new_2.jpg');
}

#top-banner-3 {
    background-image: url('../assets/gallery_new_3.jpg');
}

#top-banner-4 {
    background-image: url('../assets/gallery_new_4.jpg');
}

/* Navigation */
.content-slider nav {
    position: absolute;
    bottom: 2em;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.content-slider .controls {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    font-family: var(--main-font);
    color: var(--main-color);
}

.content-slider label {
    position: relative;
    display: inline-block;
    width: 20%;
    height: 3.1em;
    overflow: hidden;
    margin: 0 1em;
    padding-top: 1em;
    text-align: left;
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 1em;
    color: #f6eac5;
    font-weight: 400;
    cursor: pointer;
    transition: all .3s;
}

.content-slider label .progressbar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #f6eac5;
    z-index: 100;
}

.content-slider label .progressbar .progressbar-fill {
    position: inherit;
    width: inherit;
    height: inherit;
    margin-left: -100%;
    background: #e88382;
}

.content-slider label:hover {
    color: #e88382;
}

.content-slider label span {
    font-size: 1.4em;
    font-weight: 700;
    margin-right: 5px;
}

/* Logic: Checked State */
#banner1:checked~.slider #top-banner-1,
#banner2:checked~.slider #top-banner-2,
#banner3:checked~.slider #top-banner-3,
#banner4:checked~.slider #top-banner-4 {
    opacity: 1;
    z-index: 1;
}

/* Active Label Styling */
#banner1:checked~nav label:nth-of-type(1),
#banner2:checked~nav label:nth-of-type(2),
#banner3:checked~nav label:nth-of-type(3),
#banner4:checked~nav label:nth-of-type(4) {
    cursor: default;
    color: var(--main-color);
}

#banner1:checked~nav label:nth-of-type(1) .progressbar,
#banner2:checked~nav label:nth-of-type(2) .progressbar,
#banner3:checked~nav label:nth-of-type(3) .progressbar,
#banner4:checked~nav label:nth-of-type(4) .progressbar {
    background: var(--main-color);
}

/* Animations */
/* Note: Since we don't have auto-switching JS, the animation only runs once or on check.
The user CSS had `animation: progressBarFill 5s linear;`
This implies an auto-carousel logic usually driven by JS or complex CSS keyframes.
Without JS, this animation just visually shows "time left" but won't auto-switch.
*/
#banner1:checked~nav label:nth-of-type(1) .progressbar-fill,
#banner2:checked~nav label:nth-of-type(2) .progressbar-fill,
#banner3:checked~nav label:nth-of-type(3) .progressbar-fill,
#banner4:checked~nav label:nth-of-type(4) .progressbar-fill {
    animation: progressBarFill 5s linear;
}

@keyframes progressBarFill {
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0;
    }
}

/* Responsive */
@media only screen and (max-width: 900px) {
    .banner h1 {
        font-size: 3em;
    }

    .content-slider .controls {
        width: 95%;
    }

    .content-slider label {
        width: 22%;
        margin: 0 5px;
        font-size: 0.8em;
    }
}

@media only screen and (max-width: 600px) {
    .gallery-carousel-section {
        height: 30em;
    }

    .banner h1 {
        font-size: 2em;
    }

    .banner h2 {
        font-size: 1.5em;
    }

    .banner-inner-wrapper {
        padding-top: 3em;
    }

    .content-slider label span {
        display: none;
    }

    /* Hide numbers on small mobile */
}

/* =========================================
CUSTOM CSS CAROUSEL (MOGO STYLE)
========================================= */
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300');

:root {
    --main-font: 'Montserrat', sans-serif;
    --content-font: 'Roboto', sans-serif;
    --h3-font: 'Kaushan Script', cursive;
    --main-color: #fff;
    --icon-color: #95e1d3;
    --red-highlight: #f38181;
    --banner-overlay-start: rgba(243, 129, 129, 0.9);
    --banner-overlay-end: rgba(252, 227, 138, 0.9);
}

.gallery-carousel-section {
    height: 38em;
    color: var(--main-color);
    background-color: #333;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    border-radius: 12px;
    /* Integration tweak */
}

/* Hide Radio Inputs */
.gallery-carousel-section input {
    display: none;
}

.content-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    transition: all .5s ease;
}

.banner-inner-wrapper {
    height: 100%;
    padding-top: 6em;
    /* Overlay Gradient */
    background-image: linear-gradient(var(--banner-overlay-start), var(--banner-overlay-end));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner h2 {
    padding-bottom: 0.3em;
    font-family: var(--h3-font);
    font-weight: 400;
    font-size: 2.5em;
    text-transform: none;
    margin: 0;
    color: #fff;
}

.banner h1 {
    font-family: var(--main-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 4em;
    /* Adjusted from 6em for better fit */
    line-height: 95%;
    margin: 0;
    color: #fff;
}

.banner .line {
    display: block;
    width: 4em;
    height: 0.1875em;
    margin: 2.5em auto;
    background: var(--main-color);
}

.learn-more-button {
    padding-bottom: 5em;
    z-index: 15 !important;
}

.learn-more-button a {
    padding: 0.5em 2em;
    text-align: center;
    font-family: var(--main-font);
    font-size: 0.875em;
    color: var(--main-color);
    text-transform: uppercase;
    border: 0.1875em solid var(--main-color);
    text-decoration: none;
    transition: 0.3s;
}

.learn-more-button a:hover {
    color: #e88382;
    border-color: #e88382;
    background: #fff;
}

/* Background Images */
#top-banner-1 {
    background-image: url('../assets/gallery_new_1.jpg');
}

#top-banner-2 {
    background-image: url('../assets/gallery_new_2.jpg');
}

#top-banner-3 {
    background-image: url('../assets/gallery_new_3.jpg');
}

#top-banner-4 {
    background-image: url('../assets/gallery_new_4.jpg');
}

/* Navigation */
.content-slider nav {
    position: absolute;
    bottom: 2em;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.content-slider .controls {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    font-family: var(--main-font);
    color: var(--main-color);
}

.content-slider label {
    position: relative;
    display: inline-block;
    width: 20%;
    height: 3.1em;
    overflow: hidden;
    margin: 0 1em;
    padding-top: 1em;
    text-align: left;
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 1em;
    color: #f6eac5;
    font-weight: 400;
    cursor: pointer;
    transition: all .3s;
}

.content-slider label .progressbar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #f6eac5;
    z-index: 100;
}

.content-slider label .progressbar .progressbar-fill {
    position: inherit;
    width: inherit;
    height: inherit;
    margin-left: -100%;
    background: #e88382;
}

.content-slider label:hover {
    color: #e88382;
}

.content-slider label span {
    font-size: 1.4em;
    font-weight: 700;
    margin-right: 5px;
}

/* Logic: Checked State */
#banner1:checked~.slider #top-banner-1,
#banner2:checked~.slider #top-banner-2,
#banner3:checked~.slider #top-banner-3,
#banner4:checked~.slider #top-banner-4 {
    opacity: 1;
    z-index: 1;
}

/* Active Label Styling */
#banner1:checked~nav label:nth-of-type(1),
#banner2:checked~nav label:nth-of-type(2),
#banner3:checked~nav label:nth-of-type(3),
#banner4:checked~nav label:nth-of-type(4) {
    cursor: default;
    color: var(--main-color);
}

#banner1:checked~nav label:nth-of-type(1) .progressbar,
#banner2:checked~nav label:nth-of-type(2) .progressbar,
#banner3:checked~nav label:nth-of-type(3) .progressbar,
#banner4:checked~nav label:nth-of-type(4) .progressbar {
    background: var(--main-color);
}

/* Animations */
/* Note: Since we don't have auto-switching JS, the animation only runs once or on check.
The user CSS had `animation: progressBarFill 5s linear;`
This implies an auto-carousel logic usually driven by JS or complex CSS keyframes.
Without JS, this animation just visually shows "time left" but won't auto-switch.
*/
#banner1:checked~nav label:nth-of-type(1) .progressbar-fill,
#banner2:checked~nav label:nth-of-type(2) .progressbar-fill,
#banner3:checked~nav label:nth-of-type(3) .progressbar-fill,
#banner4:checked~nav label:nth-of-type(4) .progressbar-fill {
    animation: progressBarFill 5s linear;
}

@keyframes progressBarFill {
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0;
    }
}

/* Responsive */
@media only screen and (max-width: 900px) {
    .banner h1 {
        font-size: 3em;
    }

    .content-slider .controls {
        width: 95%;
    }

    .content-slider label {
        width: 22%;
        margin: 0 5px;
        font-size: 0.8em;
    }
}

@media only screen and (max-width: 600px) {
    .gallery-carousel-section {
        height: 30em;
    }

    .banner h1 {
        font-size: 2em;
    }

    .banner h2 {
        font-size: 1.5em;
    }

    .banner-inner-wrapper {
        padding-top: 3em;
    }

    .content-slider label span {
        display: none;
    }

    /* Hide numbers on small mobile */
}

/* =========================================
REFINED ANIMATIONS (DIVERSE & SLOW)
========================================= */
/* --- Keyframes --- */
@keyframes fadeInUp {
    from {
        opacity: 1;
        transform: translate3d(0, 60px, 0);
        /* Deeper start */
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 1;
        transform: translate3d(-80px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 1;
        transform: translate3d(80px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 1;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 1;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
        opacity: 1;
    }
}

@keyframes gentlePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

/* --- Base Visibility Classes --- */
.animate-on-scroll {
    opacity: 1;
    will-change: opacity, transform;
    /* Basic Transition for non-animation props */
    transition: all 0.6s ease;
}

/* --- Animation Classes (Applied when visible) --- */
/* SLOW: 1.2s to 1.5s for that premium feel */
.animate-fade-up.visible {
    animation: fadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-fade-left.visible {
    animation: fadeInLeft 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-fade-right.visible {
    animation: fadeInRight 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-zoom.visible {
    animation: zoomIn 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-flip.visible {
    animation: flipInX 1.5s ease forwards;
}

.animate-pulse.visible {
    animation: gentlePulse 3s infinite ease-in-out;
    opacity: 1;
    /* Pulse doesn't start from 0 opacity automatically if we want it visible */
}

/* --- Delays (Crucial for staggered diverseness) --- */
.delay-100.visible {
    animation-delay: 0.15s;
}

.delay-200.visible {
    animation-delay: 0.30s;
}

/* Increased gaps */
.delay-300.visible {
    animation-delay: 0.45s;
}

.delay-400.visible {
    animation-delay: 0.60s;
}

.delay-500.visible {
    animation-delay: 0.75s;
}

/* Apply to specific children if generic class is on parent */
/* E.g. .stagger-children > * */
/* =========================================
BOUNCE EFFECT FOR CTA
========================================= */
@keyframes bounceInfinite {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.animate-bounce-infinite {
    animation: bounceInfinite 2s infinite ease-in-out;
}

/* Specific target for floating buttons to ensure they don't break positioning */
.quote-float.animate-bounce-infinite,
.whatsapp-float.animate-bounce-infinite {
    /* They are fixed pos, transform might affect fixed context but usually fine */
    /* Ensure z-index stays high */
}

/* =========================================
   BOUNCE EFFECT FOR CTA
   ========================================= */
@keyframes bounceInfinite {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.animate-bounce-infinite {
    animation: bounceInfinite 2s infinite ease-in-out;
}

/* Specific target for floating buttons to ensure they don't break positioning */
.quote-float.animate-bounce-infinite,
.whatsapp-float.animate-bounce-infinite {
    /* Fixed pos handles transform okay */
}

/* =========================================
   REPAIRED ANIMATIONS
   ========================================= */
.animate-on-scroll {
    opacity: 1;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-fade-up {
    transform: none;
}

.animate-fade-left {
    transform: translateX(30px);
}

.animate-fade-right {
    transform: translateX(-30px);
}

.animate-zoom {
    transform: scale(0.9);
}

.animate-flip {
    transform: perspective(600px) rotateX(15deg);
}

/* Visibility State (Triggered by JS) */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) rotateX(0);
}

/* Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* REVEAL helper (legacy) */
.reveal {
    /* opacity: 0; DISABLED FOR STABILITY */
    opacity: 1;
    transform: none;
    transition: all 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* EMERGENCY VISIBILITY OVERRIDES */
.animate-on-scroll,
.reveal,
.section,
.hero,
.header {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Restore pointer events in case they were disabled */
body {
    pointer-events: auto !important;
}

/* =========================================
   MOBILE MENU RECOVERY PATCH
   ========================================= */
/* Ensure Hamburger is visible and clickable on mobile */
.hamburger-menu {
    display: none;
    /* Hidden on Desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10002 !important;
    /* Extremely high to sit above everything */
    position: relative;
    /* Context for bars */
}

.hamburger-menu .bar {
    width: 30px;
    height: 3px;
    background-color: var(--primary);
    /* Updated to palette green */
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* Mobile View Overrides */
@media screen and (max-width: 900px) {
    .hamburger-menu {
        display: flex !important;
        position: fixed;
        /* Fix to viewport */
        top: 25px;
        right: 25px;
    }

    /* Adjust header elements to not cover hamburger */
    .header {
        z-index: 10001;
    }

    .nav {
        position: fixed;
        top: 0;
        right: 0;
        /* Align to right */
        left: auto;
        transform: translateX(100%);
        /* Slide completely off */
        height: 100vh;
        height: 100dvh;
        width: 80vw;
        /* 80% width */
        max-width: 400px;
        /* Optional cap for tablets */
        margin: 0;
        padding: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        /* Shadow on left edge */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s;
        z-index: 10000;
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        /* Allow scrolling on short screens */
        box-sizing: border-box;
    }

    .nav.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    /* Ensure Nav Links are big enough */
    .nav a {
        font-size: 1.5rem;
        margin: 15px 0;
        display: block;
    }

    /* Move Language Switch inside */
    .lang-switch {
        margin-top: 2rem;
        display: flex;
        gap: 1rem;
    }
}

/* Hamburger Animation State */
.hamburger-menu.active .bar:nth-child(1) {
    transform: rotate(45deg);
    background-color: #e88382;
    /* Active color */
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}


/* =========================================
   MOBILE MENU PORTAL (OVERLAY) STYLES
   ========================================= */
.mobile-menu-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    z-index: 10002;
    /* Top of everything */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.mobile-menu-overlay a {
    font-size: 1.8rem;
    color: var(--dark-brown);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s;
}

.mobile-menu-overlay a:hover {
    color: var(--primary);
    transform: scale(1.1);
}

.mobile-nav-close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 3rem;
    cursor: pointer;
    color: var(--dark-brown);
    display: block;
    /* Always show close button in overlay */
    z-index: 10003;
}

/* Language Switcher in Overlay */
.mobile-lang {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    transform: scale(1.2);
}

/* Ensure Desktop Nav is hidden on mobile */
@media screen and (max-width: 900px) {
    .mobile-menu-overlay {
        display: flex;
        /* Flex layout, but controlled by opacity/visibility */
    }

    /* Conflicting rules removed */
    .nav {
        /* display: none !important; REMOVED */
    }

    /* Hide Language Switcher in Header on Mobile */
    .header .lang-switch {
        /* display: none !important; REMOVED */
    }

    /* Center Logo on Mobile (Content is Logo only now) */
    .header {
        justify-content: center !important;
    }
}