/* ==========================================================================
   HOMEPAGE STYLES - Modern Car Rental Aesthetic
   ========================================================================== */

/* Color Variables */
:root {
    --primary-deep-blue: #1e3a5f;
    --primary-teal: #2d7a8c;
    --accent-orange: #ff6b35;
    --accent-coral: #ff8c69;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --text-dark: #2c3e50;
    --text-gray: #6c757d;
    --border-light: #e9ecef;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.home-hero {
    position: relative;
    z-index: 20;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--primary-teal) 100%);
    color: white;
    padding: 90px 20px 50px;
    /* No overflow:hidden here — it would clip the search dropdown menus.
       Background clipping is handled on .hero-slider instead. */
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

/* When slider is active — gradient hidden, dark fallback until images load */
.home-hero.has-slider {
    background: #1a1a2e;
}

/* Grid pattern not needed when banner images are showing */
.home-hero.has-slider::before {
    display: none;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    will-change: opacity;
}

.hero-slide.active {
    opacity: 1;
}

/* Dark overlay — ensures text readability over any image */
/* Was a flat rgba(0,0,0,.45) across the whole photo. Combined with the brand
   wash in home-redesign.css that darkened the banner by ~90%, so uploaded
   images barely showed. Now it only shades the bands that carry text (top
   headline, bottom trust row) and lets the middle of the photo breathe. */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* Fades left→right rather than top→bottom: the hero copy is capped at 44rem
       on the left, so the right half carries no text and can show the photo
       almost unshaded, while the headline side keeps its contrast. A vertical
       fade would have thinned out exactly where the sub-headline sits. */
    background: linear-gradient(
        100deg,
        /* Plateau holds to 45% because the copy column reaches ~53% of the
           hero width; the fade starts after it, not under it. */
        rgba(6, 10, 20, 0.58) 0%,
        rgba(6, 10, 20, 0.52) 45%,
        rgba(6, 10, 20, 0.14) 78%,
        rgba(6, 10, 20, 0.06) 100%
    );
    z-index: 1;
}

/* On phones the copy spans the full width, so a left-side fade would leave the
   ends of each line unprotected — go back to a vertical fade there, still much
   lighter than the flat 45% + brand wash this replaced. */
@media (max-width: 768px) {
    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(6, 10, 20, 0.62) 0%,
            rgba(6, 10, 20, 0.42) 48%,
            rgba(6, 10, 20, 0.58) 100%
        );
    }
}

/* Slider dots */
.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.hero-dot.active,
.hero-dot:hover {
    background: #ffffff;
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .hero-dots {
        bottom: 12px;
        gap: 6px;
    }

    .hero-dot {
        width: 8px;
        height: 8px;
    }
}

.home-hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.home-hero p {
    font-size: clamp(18px, 2.5vw, 24px);
    margin-bottom: 50px;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Hero Search Form — modern floating search bar
   ========================================================================== */
.home-hero-search {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(15, 30, 55, 0.28);
    backdrop-filter: blur(6px);
}

.home-hero-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.home-hero-search-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-hero-search-group label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8b93a7;
    margin-bottom: 8px;
    text-align: left;
}

/* --- Shared control shell (input + select trigger) --- */
.hhs-input,
.hhs-select {
    position: relative;
    display: flex;
    align-items: center;
}

.hhs-input-icon,
.hhs-select::before {
    position: absolute;
    left: 15px;
    color: #9aa1b4;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s;
}

/* Icon for select shells comes from data-icon via Font Awesome unicode */
.hhs-select::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0b1"; /* briefcase fallback */
}
.hhs-select[data-icon="fa-briefcase"]::before { content: "\f0b1"; }
.hhs-select[data-icon="fa-layer-group"]::before { content: "\f5fd"; }

.hhs-input:focus-within .hhs-input-icon,
.hhs-select:focus-within::before {
    color: var(--primary-teal);
}

/* Native input */
.home-hero-search-group input[type="text"] {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 42px;
    border: 1.5px solid #e6e8ef;
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    background: #f7f8fb;
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* Native selects — visually replaced by custom dropdown when JS runs,
   but styled here so no-JS fallback still looks modern */
.home-hero-search-group select {
    width: 100%;
    height: 52px;
    padding: 0 40px 0 42px;
    border: 1.5px solid #e6e8ef;
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    background-color: #f7f8fb;
    color: var(--text-dark);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.home-hero-search-group input[type="text"]:hover,
.home-hero-search-group select:hover {
    border-color: #d5d9e6;
    background-color: #fff;
}

.home-hero-search-group input[type="text"]:focus,
.home-hero-search-group select:focus {
    outline: none;
    border-color: var(--primary-teal);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(45, 122, 140, 0.12);
}

.home-hero-search-group select:disabled {
    background-color: #f0f1f5;
    color: #aeb4c2;
    cursor: not-allowed;
    opacity: 1;
}

/* --- Custom dropdown (JS-enhanced) --- */
.hhs-select.hhs-enhanced select { display: none; }

.hhs-trigger {
    width: 100%;
    height: 52px;
    padding: 0 40px 0 42px;
    border: 1.5px solid #e6e8ef;
    border-radius: 14px;
    background: #f7f8fb;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.hhs-trigger:hover { border-color: #d5d9e6; background: #fff; }
.hhs-select.hhs-open .hhs-trigger {
    border-color: var(--primary-teal);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(45, 122, 140, 0.12);
}
.hhs-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hhs-trigger.is-placeholder .hhs-trigger-label { color: #9aa1b4; }
.hhs-trigger-chevron {
    position: absolute;
    right: 15px;
    color: #9aa1b4;
    font-size: 13px;
    transition: transform 0.25s;
    pointer-events: none;
}
.hhs-select.hhs-open .hhs-trigger-chevron { transform: rotate(180deg); color: var(--primary-teal); }

.hhs-select.hhs-disabled { opacity: 0.65; }
.hhs-select.hhs-disabled .hhs-trigger { cursor: not-allowed; background: #f0f1f5; }
.hhs-select.hhs-disabled::before { color: #b8bdca; }

/* Error state — shown when a required field (e.g. Business Type) is
   submitted empty. The native <select> is display:none once enhanced,
   so the browser can't focus it to show its own validation bubble;
   this gives the user a visible cue instead. */
.hhs-select.hhs-error .hhs-trigger {
    border-color: #e04f5f;
    box-shadow: 0 0 0 4px rgba(224, 79, 95, 0.15);
    animation: hhs-shake 0.35s ease;
}
.hhs-select.hhs-error .hhs-trigger-label.is-placeholder,
.hhs-select.hhs-error .hhs-trigger.is-placeholder .hhs-trigger-label { color: #e04f5f; }
.hhs-select.hhs-error::before { color: #e04f5f; }

@keyframes hhs-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.hhs-select.hhs-open {
    z-index: 30;
}

.hhs-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 30, 55, 0.18);
    padding: 6px;
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.hhs-select.hhs-open .hhs-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hhs-option {
    width: 100%;
    padding: 11px 14px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background-color 0.15s, color 0.15s;
}
.hhs-option:hover { background: #f4f6fb; }
.hhs-option.is-selected { color: var(--primary-teal); font-weight: 600; background: rgba(45, 122, 140, 0.08); }
.hhs-option .hhs-check { font-size: 12px; opacity: 0; }
.hhs-option.is-selected .hhs-check { opacity: 1; }

/* --- Submit button --- */
.home-hero-search-submit {
    height: 52px;
    padding: 0 34px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
}
.home-hero-search-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(102, 126, 234, 0.45);
    filter: brightness(1.03);
}
.home-hero-search-submit:active { transform: translateY(0); }
.home-hero-search-submit i { font-size: 14px; }


/* ==========================================================================
   FEATURED CARS / SERVICES SECTION
   ========================================================================== */
.home-section {
    padding: 48px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.home-section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: var(--text-dark);
    position: relative;
}

.home-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-teal), var(--accent-orange));
    border-radius: 2px;
}

/* Featured Cars Grid */
.home-featured-cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.home-car-card {
    background: var(--bg-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.home-car-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.home-car-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--bg-light);
}

.home-car-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-car-card:hover .home-car-card-image {
    transform: scale(1.1);
}

.home-car-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--accent-orange);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.home-car-card-content {
    padding: 24px;
}

.home-car-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.home-car-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
}

.home-car-card-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fbbf24;
    font-size: 14px;
    font-weight: 600;
}

.home-car-card-specs {
    display: flex;
    gap: 15px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-gray);
    flex-wrap: wrap;
}

.home-car-card-spec {
    display: flex;
    align-items: center;
    gap: 5px;
}

.home-car-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.home-car-card-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-teal);
}

.home-car-card-price-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
}

.home-car-card-button {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-deep-blue) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.home-car-card-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 122, 140, 0.3);
}

/* ==========================================================================
   WHY CHOOSE US SECTION
   ========================================================================== */
.home-why-choose {
    background: var(--bg-light);
}

.home-why-choose .home-section-title {
    margin-bottom: 32px;
}

.home-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.home-benefit-card {
    background: var(--bg-white);
    padding: 20px;
    border-radius: 14px;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-benefit-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.home-benefit-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(45, 122, 140, 0.1) 0%, rgba(30, 58, 95, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-teal);
}

.home-benefit-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.home-benefit-description {
    font-size: 13.5px;
    color: var(--text-gray);
    line-height: 1.45;
}

/* ==========================================================================
   JOIN / PARTNER SECTION
   ========================================================================== */
.home-join {
    background: var(--bg-light);
}

.home-join-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
}

.home-join-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 36px 34px;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(30, 58, 95, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.home-join-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(30, 58, 95, 0.30);
}

.home-join-card-vendor {
    background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--primary-teal) 100%);
}

.home-join-card-guide {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-coral) 100%);
}

.home-join-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.home-join-title {
    font-size: 24px;
    font-weight: 700;
    margin: 4px 0 8px;
    color: #fff;
}

.home-join-text {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.92);
}

.home-join-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.home-join-cta i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.home-join-card:hover .home-join-cta i {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .home-join-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-join-card {
        padding: 28px 24px;
        gap: 18px;
    }
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.home-testimonials-wrapper {
    position: relative;
    overflow: hidden;
}

.home-testimonials-slider {
    display: flex;
    gap: 30px;
    padding-bottom: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-teal) var(--bg-light);
}

.home-testimonials-slider::-webkit-scrollbar {
    height: 8px;
}

.home-testimonials-slider::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 4px;
}

.home-testimonials-slider::-webkit-scrollbar-thumb {
    background: var(--primary-teal);
    border-radius: 4px;
}

.home-testimonial-card {
    min-width: 350px;
    background: var(--bg-white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    scroll-snap-align: start;
}

.home-testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    color: #fbbf24;
    font-size: 20px;
}

.home-testimonial-text {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-style: italic;
}

.home-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-teal), var(--primary-deep-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
}

.home-testimonial-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px 0;
}

.home-testimonial-info p {
    font-size: 14px;
    color: var(--text-gray);
    margin: 0;
}

/* ==========================================================================
   BRAND PARTNERS SECTION
   ========================================================================== */
.home-brands {
    background: var(--bg-light);
}

.home-brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 40px;
    align-items: center;
    justify-items: center;
}

.home-brand-logo {
    width: 100%;
    max-width: 180px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
}

.home-brand-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.home-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.home-brand-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

/* ==========================================================================
   FOOTER CTA SECTION
   ========================================================================== */
.home-footer-cta {
    background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--primary-teal) 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.home-footer-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.home-footer-cta h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    margin-bottom: 20px;
}

.home-footer-cta p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.95;
}

.home-footer-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.home-footer-cta-button {
    padding: 18px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-footer-cta-button i {
    font-size: 16px;
    margin-right: 8px;
}

.home-footer-cta-button-primary {
    background: var(--accent-orange);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.home-footer-cta-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.home-footer-cta-button-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.home-footer-cta-button-secondary:hover {
    background: white;
    color: var(--primary-teal);
}

.home-footer-cta-contact {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.home-footer-cta-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: white;
}

.home-footer-cta-contact-item i {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    width: 24px;
    text-align: center;
}

.home-footer-cta-social {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.home-footer-cta-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

.home-footer-cta-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.home-footer-cta-social-link i {
    font-size: 20px;
}

/* Category Icon Placeholder */
.category-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 8px;
}

.category-icon-text {
    color: #999;
    font-size: 14px;
}

/* ==========================================================================
   BUSINESS TYPES GRID (Browse by Category)
   ========================================================================== */
.browse-categories {
    background: var(--bg-light);
}

.home-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.home-section-subtitle {
    font-size: 16px;
    color: var(--text-gray);
    margin-top: 8px;
}

/* Business Types Grid — centered flex so any count (incl. 5) distributes evenly */
.business-types-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 32px;
}

/* Business Type Card — full-bleed image tile with overlay content */
.business-type-card {
    position: relative;
    flex: 1 1 200px;
    max-width: 250px;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    isolation: isolate;
}

.business-type-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(30, 58, 95, 0.28);
}

/* Media (image fills the whole card) */
.business-type-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--primary-teal) 100%);
}

.business-type-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.business-type-card:hover .business-type-media img {
    transform: scale(1.08);
}

.business-type-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(20, 34, 54, 0.92) 0%,
        rgba(20, 34, 54, 0.55) 34%,
        rgba(20, 34, 54, 0.05) 62%,
        transparent 100%
    );
    transition: background 0.35s ease;
}

.business-type-card:hover .business-type-scrim {
    background: linear-gradient(
        to top,
        rgba(15, 27, 44, 0.95) 0%,
        rgba(15, 27, 44, 0.62) 42%,
        rgba(15, 27, 44, 0.15) 72%,
        transparent 100%
    );
}

/* Content (overlaid at the bottom) */
.business-type-body {
    position: relative;
    z-index: 1;
    margin-top: auto;
    width: 100%;
    padding: 22px 20px;
    color: #fff;
}

.business-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    font-size: 20px;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.business-type-icon i {
    font-size: 20px;
}

.business-type-icon-emoji {
    font-size: 22px;
    line-height: 1;
}

.business-type-name {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.25;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Description hidden by default, revealed on hover */
.business-type-description {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease, margin 0.35s ease;
}

.business-type-card:hover .business-type-description {
    max-height: 80px;
    opacity: 1;
    margin: 0 0 12px;
    transform: translateY(0);
}

.business-type-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.business-type-cta i {
    font-size: 11px;
    color: var(--accent-orange);
    transition: transform 0.25s ease;
}

.business-type-card:hover .business-type-cta i {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 992px) {
    .business-type-card {
        flex-basis: 180px;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    .business-types-grid {
        gap: 16px;
    }

    .business-type-card {
        flex-basis: calc(50% - 8px);
        max-width: 340px;
    }

    /* Touch devices: keep description visible since there's no hover */
    .business-type-description {
        max-height: 80px;
        opacity: 1;
        margin: 0 0 12px;
        transform: none;
    }
}

@media (max-width: 480px) {
    .business-type-card {
        flex-basis: 100%;
        aspect-ratio: 16 / 10;
    }
}

/* Car Card Image Placeholder */
.home-car-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d7a8c 100%);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 768px) {
    .home-hero {
        min-height: 420px;
        padding: 80px 20px 45px;
    }

    .home-hero-search-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-hero-search-submit {
        grid-column: 1;
        margin-top: 4px;
    }

    .home-section {
        padding: 60px 20px;
    }

    .home-featured-cars-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-benefits-grid {
        grid-template-columns: 1fr;
    }

    .home-testimonial-card {
        min-width: 300px;
    }

    .home-brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .home-footer-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .home-footer-cta-button {
        text-align: center;
    }

    .home-footer-cta-contact {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .home-hero {
        min-height: 360px;
        padding: 64px 15px 32px;
    }

    .home-hero-search {
        padding: 20px;
    }

    .home-section {
        padding: 40px 15px;
    }

    .home-car-card-content {
        padding: 20px;
    }

    .home-testimonial-card {
        min-width: 280px;
        padding: 30px 20px;
    }

    .home-brands-grid {
        grid-template-columns: 1fr;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
.home-hero-search-submit:focus-visible,
.hhs-trigger:focus-visible,
.home-car-card:focus,
.home-car-card-button:focus,
.home-footer-cta-button:focus {
    outline: 3px solid var(--primary-teal);
    outline-offset: 2px;
}

/* ==========================================================================
   CATEGORY SECTIONS - Three Separate Sections by Business Type
   ========================================================================== */

/* Category Section Container */
.home-category-section {
    padding: 48px 0;
    background: white;
}

.home-category-section:nth-child(even) {
    background: #F9FAFB;
    /* Alternate background */
}

/* Section Header */
.home-category-header {
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-category-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-category-title-wrapper i {
    font-size: 32px;
    color: #5B6EF5;
}

.home-category-title {
    font-size: 32px;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}

/* View All Link */
.home-category-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: #5B6EF5;
    border: 2px solid #5B6EF5;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.home-category-view-all:hover {
    background: #5B6EF5;
    color: white;
    transform: translateX(4px);
}

.home-category-view-all i {
    font-size: 14px;
    transition: transform 0.2s;
}

.home-category-view-all:hover i {
    transform: translateX(4px);
}

/* Services Grid (reuse existing) */
.home-category-section .services-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Category-specific accent colors */
.home-category-car-rental .home-category-title-wrapper i {
    color: #2563EB;
    /* Blue for cars */
}

.home-category-wine .home-category-title-wrapper i {
    color: #7C3AED;
    /* Purple for wine */
}

.home-category-tours .home-category-title-wrapper i {
    color: #10B981;
    /* Green for tours */
}

/* Responsive */
@media (max-width: 1199px) {
    .home-category-section .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    /* ========================================
       MOBILE GRID LAYOUT - REMOVE GAP
       Cards use their own margins for spacing
       ======================================== */
    .home-category-section .services-grid,
    .wine-experiences-section .services-grid,
    .tours-section .services-grid {
        grid-template-columns: 1fr !important;
        /* Single column */
        gap: 0 !important;
        /* Remove gap, cards have their own margins */
        row-gap: 0 !important;
        column-gap: 0 !important;
        padding: 0 !important;
    }

    /* ========================================
       COMPACT CATEGORY HEADERS - MOBILE
       ======================================== */

    /* Header Container - Horizontal Layout */
    .home-category-header {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 16px;
        margin-bottom: 20px;
    }

    /* Title Wrapper - Icon + Title inline */
    .home-category-title-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        /* Allow shrinking */
    }

    /* Icon Styling - Category-specific colors */
    .home-category-title-wrapper i {
        font-size: 24px;
        flex-shrink: 0;
        margin: 0;
    }

    /* Car Rental - Blue */
    .home-category-car-rental .home-category-title-wrapper i {
        color: #2563eb !important;
    }

    /* Wine Experiences - Wine Red */
    .home-category-wine .home-category-title-wrapper i {
        color: #7c2d12 !important;
    }

    /* Tours & Experiences - Green */
    .home-category-tours .home-category-title-wrapper i {
        color: #10b981 !important;
    }

    /* Title - Compact size */
    .home-category-title {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* View All Button - Compact */
    .home-category-view-all {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: white;
        border: 2px solid #2563eb;
        color: #2563eb;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .home-category-view-all:hover {
        background: #2563eb;
        color: white;
        transform: translateX(2px);
    }

    .home-category-view-all i {
        font-size: 12px;
        color: inherit !important;
        margin: 0 !important;
        transition: transform 0.2s;
    }

    .home-category-view-all:hover i {
        transform: translateX(2px);
    }

    /* Category-specific button colors */
    .home-category-car-rental .home-category-view-all {
        border-color: #2563eb;
        color: #2563eb;
    }

    .home-category-car-rental .home-category-view-all:hover {
        background: #2563eb;
        color: white;
    }

    .home-category-wine .home-category-view-all {
        border-color: #7c2d12;
        color: #7c2d12;
    }

    .home-category-wine .home-category-view-all:hover {
        background: #7c2d12;
        color: white;
    }

    .home-category-tours .home-category-view-all {
        border-color: #10b981;
        color: #10b981;
    }

    .home-category-tours .home-category-view-all:hover {
        background: #10b981;
        color: white;
    }

    /* Services Grid */
    .home-category-section .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {

    /* Even more compact for small screens */
    .home-category-header {
        padding: 0 12px;
        margin-bottom: 16px;
    }

    .home-category-title-wrapper {
        gap: 8px;
    }

    .home-category-title-wrapper i {
        font-size: 20px;
    }

    .home-category-title {
        font-size: 18px;
    }

    .home-category-view-all {
        font-size: 13px;
        padding: 6px 12px;
        gap: 4px;
    }

    .home-category-view-all i {
        font-size: 11px;
    }

    .home-category-section .services-grid {
        grid-template-columns: 1fr;
        gap: 0 !important;
        /* Remove gap, cards have their own margins */
        padding: 0 !important;
    }
}

/* Extra small screens */
@media (max-width: 375px) {
    .home-category-title {
        font-size: 17px;
    }

    .home-category-view-all {
        font-size: 12px;
        padding: 6px 10px;
    }

    .home-category-view-all i {
        font-size: 11px;
    }
}