:root {

    --primary-color: #d01e1ebe;

    --primary-dark: #d01e1ebe;

    --primary-light: #A52A2A;

    --secondary-color: #2c3e50;

    --accent-color: #d01e1ebe;

    --text-color: #2c3e50;

    --light-bg: #f8f9fa;

    --dark-bg: #1a1a1a;

    --border-radius: 8px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    --box-shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);

}* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-bg);
    width: 100%;
}

#particles-js {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    opacity: 0.6;

}

.header {
    background: linear-gradient(135deg, rgba(128,0,0,0.05) 0%, rgba(128,0,0,0.1) 100%);
    min-height: 95vh;
    padding: 1rem;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0 auto 1rem;
    max-width: 1400px;
    position: sticky;
    top: 1rem;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.logo img {
    height: 60px;
    width: auto;
    transition: var(--transition);
}

.logo span {
    font-size: 1.8rem;
    color: var(--primary-color);
    font-weight: 700;
    transition: var(--transition);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.1rem;
    transition: var(--transition);
    position: relative;
}

/* Ensure buttons in navigation have white text */
.nav-links .btn-primary {
    color: white !important;
}

.nav-links a:not(.btn-primary):not(.btn-outline)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav-links a:not(.btn-primary):not(.btn-outline):hover::after {
    width: 100%;
}

.btn-primary, .btn-secondary, .btn-outline {

    padding: 0.75rem 1.5rem;

    border-radius: var(--border-radius);

    text-decoration: none;

    font-weight: 600;

    transition: var(--transition);

    cursor: pointer;

    border: none;

    position: relative;

    overflow: hidden;

    z-index: 1;

}

.btn-primary::before, .btn-secondary::before, .btn-outline::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    transition: width 0.6s ease, height 0.6s ease;

    z-index: -1;

}

.btn-primary:hover::before, .btn-secondary:hover::before, .btn-outline:hover::before {

    width: 300px;

    height: 300px;

}

.btn-primary {
    padding: 0.75rem 2rem;
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: white;
    font-weight: 600;
    transition: var(--transition);
    border: 2px solid var(--primary-color);
    font-size: 1rem;
}

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

/* Ensure nav buttons maintain white text on hover */
.nav-links .btn-primary:hover {
    color: white !important;
}

.btn-secondary {

    background: var(--secondary-color);

    color: white;

}

.btn-secondary:hover {

    background: #1a252f;

    transform: translateY(-2px);

}

.btn-outline {
    padding: 0.75rem 2rem;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--primary-color);
    font-weight: 600;
    transition: var(--transition);
}

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

/* Hero Section */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 5% 3rem;
    max-width: 1200px;
    margin: 0 auto;
    gap: 4rem;
    width: 100%;
}

.hero-content {
    flex: 1;
    max-width: 500px;
    padding-right: 2rem;
}

.hero-image {
    flex: 1;
    max-width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
    display: none;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0);
    display: block;
    pointer-events: auto;
}

.hero-slide.previous {
    transform: translateX(-100%);
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 2;
}

.slider-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slider-nav.prev {
    left: 15px;
}

.slider-nav.next {
    right: 15px;
}

.upcoming-features {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 2rem 0;
    text-align: center;
}

.upcoming-features .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.upcoming-features__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #d01e1ebe;
    font-weight: 700;
}

.upcoming-features__track {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.upcoming-features__track::-webkit-scrollbar {
    height: 6px;
}

.upcoming-features__track::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 999px;
}

.upcoming-features__card {
    min-width: 120px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
    padding: 1rem 0.75rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.04);
    scroll-snap-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upcoming-features__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

.upcoming-features__image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.08));
}

.upcoming-features__name {
    margin: 0;
    font-weight: 600;
    color: #333333;
    font-size: 0.95rem;
}

.upcoming-features__description {
    display: none;
}

@media (min-width: 768px) {
    .upcoming-features__track {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .upcoming-features__card {
        min-width: 130px;
    }
}

@media (max-width: 575px) {
    .upcoming-features__track {
        justify-content: flex-start;
        padding: 0 1rem 0.75rem;
    }
}

@media (max-width: 1024px) {
    .hero {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 2rem 5%;
    }

    .hero-content {
        max-width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .hero-image {
        max-width: 100%;
        height: 350px;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .header {
        padding-top: 36px !important; /* Slightly more space above hero */
        padding-bottom: 1.5rem !important;
    }
    .hero {
        gap: 0.7rem !important; /* Small gap between hero content and image */
        padding: 0.6rem 4% !important; /* Small vertical padding */
        margin-top: 0.7rem !important;
    }
    .hero-content {
        margin-bottom: 1rem !important; /* Small space below hero content */
    }
    .hero-image {
        margin-bottom: 1rem !important; /* Small space below image */
    }
    .hero-content h1 {
        margin-bottom: 1.1rem !important; /* Small space below heading */
    }
    .hero-content p {
        margin-bottom: 1.3rem !important; /* Small space below paragraph */
    }
    
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.98);
    }
    
    .hero {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem; /* Reduce gap between hero content and hero image */
        padding: 0.5rem 5%; /* Reduce vertical padding */
    }

    .hero-image {
        height: 300px;
        width: 100%;
        overflow: hidden;
    }

    .hero-slider {
        width: 100%;
        height: 100%;
    }

    .hero-slide {
        width: 100%;
        height: 100%;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.hero-content h1 {

    font-size: 3.5rem;

    line-height: 1.2;

    margin-bottom: 1.5rem;

    color: var(--text-color);

}

.hero-content .highlight {

    color: var(--primary-color);

    font-weight: 700;

}

.hero-content p {

    font-size: 1.1rem;

    margin-bottom: 2rem;

    color: var(--secondary-color);

    opacity: 0.9;

}

.cta-buttons {

    display: flex;

    gap: 1rem;

    margin-bottom: 2rem;

}

.hero-stats {

    display: flex;

    gap: 2rem;

    margin-top: 2rem;

}

.stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.stat-number {

    font-size: 2rem;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 0.5rem;

}

.stat-label {

    font-size: 0.9rem;

    color: var(--secondary-color);

    text-transform: uppercase;

    letter-spacing: 1px;

}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    width: 100%;
}

.hero-image img {

    max-width: 100%;

    border-radius: 10px;

    box-shadow: var(--box-shadow);

    transition: var(--transition);

}

.hero-image img:hover {

    transform: translateY(-5px);

    box-shadow: var(--box-shadow-hover);

}

/* Hidden Gems & Popular Destinations Section */

.hidden-gems {

    padding: 5rem 0;

    background-color: var(--light-bg);

}



.section-title {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 3rem;

    color: var(--secondary-color);

    position: relative;

}



.section-subtitle {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 2rem;

    color: var(--text-color);

    font-size: 1.1rem;

}



.destination-tabs {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin-bottom: 2rem;

}



.tab-btn {

    padding: 0.75rem 1.5rem;

    background: white;

    border: 1px solid var(--primary-color);

    border-radius: var(--border-radius);

    color: var(--primary-color);

    font-weight: 500;

    cursor: pointer;

    transition: var(--transition);

}



.tab-btn:hover {

    background: rgba(128, 0, 0, 0.1);

}



.tab-btn.active {

    background: var(--primary-color);

    color: white;

}



.tab-content {

    display: none;

}



.tab-content.active {

    display: block;

}



.carousel-tab-content {

    position: relative;

    width: 100%;

    margin: 0 auto;

}

.carousel-tab-panel {

    position: relative;

    width: 100%;

    transition: opacity 0.4s, transform 0.4s;

    opacity: 1;

    z-index: 1;

    padding: 0 50px;

}

.carousel-tab-panel.fade-in {

    animation: fadeInTab 0.5s;

}

@keyframes fadeInTab {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: none; }

}

.carousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    width: 100%;
    scrollbar-width: none;
    display: flex;
    justify-content: flex-start;
}

.carousel-viewport::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    width: 100%;
}

.destination-card {
    flex: 0 0 auto;
    width: calc(100% - 2rem);
    max-width: 300px;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    scroll-snap-align: center;
}

.carousel-tab-panel {
    margin: 0 !important;
    padding: 0;
}

.carousel-tab-content {
    margin: 0;
    padding: 0;
    width: 100%;
}

#hidden-gems {
    margin: 0 auto;
    padding: 1rem 0;
    width: 100%;
    overflow: hidden;
}

.section-title {
    margin-bottom: 1.5rem;
}

.section-subtitle {
    margin-bottom: 1.5rem;
}

.destination-tabs {
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .carousel-viewport {
        padding: 0;
    }
    
    .carousel-track {
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    
    .destination-card {
        width: 85%;
        min-width: 260px;
    }
    
    #hidden-gems {
        padding: 0.5rem 0;
    }
}

.destination-image {

    height: 140px;

    background: #f8f9fa;

    display: flex;

    align-items: center;

    justify-content: center;

    border-top-left-radius: 18px;

    border-top-right-radius: 18px;

    overflow: hidden;

    position: relative;

}

.destination-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-top-left-radius: 18px;

    border-top-right-radius: 18px;

    transition: transform 0.4s;

}

.destination-card:hover .destination-image img {

    transform: scale(1.06);

}

.destination-badge {

    position: absolute;

    top: 0.7rem;

    right: 0.7rem;

    background: var(--primary-color);

    color: #fff;

    padding: 0.28rem 0.85rem;

    border-radius: 16px;

    font-size: 0.78rem;

    font-weight: 600;

    box-shadow: 0 2px 8px rgba(255,59,63,0.10);

    letter-spacing: 0.5px;

}

.destination-content {

    padding: 1.2rem 1.2rem 1.1rem 1.2rem;

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

}

.destination-content h3 {

    margin-bottom: 0.4rem;

    font-size: 1.18rem;

    color: var(--secondary-color);

    font-weight: 700;

    line-height: 1.2;

}

.destination-content p {

    margin-bottom: 1.1rem;

    font-size: 0.97rem;

    color: #555;

    line-height: 1.5;

    flex: 1 1 auto;

}

.add-to-trip {

    display: inline-block;

    padding: 0.5rem 1.1rem;

    background-color: transparent;

    border: 1.5px solid var(--primary-color);

    color: var(--primary-color);

    border-radius: 8px;

    font-weight: 600;

    transition: background 0.2s, color 0.2s, box-shadow 0.2s;

    text-decoration: none;

    font-size: 0.97rem;

    box-shadow: 0 1px 4px rgba(255,59,63,0.04);

}

.add-to-trip:hover {

    background-color: var(--primary-color);

    color: #fff;

    box-shadow: 0 2px 8px rgba(255,59,63,0.10);

}

.route-planner-cta {

    margin-top: 4rem;

    text-align: center;

    background: white;

    padding: 3rem;

    border-radius: var(--border-radius);

    box-shadow: var(--box-shadow);

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.route-planner-cta h3 {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    color: var(--heading-color);

}



.route-planner-cta p {

    margin-bottom: 1.5rem;

    color: var(--text-color);

}



@media (max-width: 768px) {

    .tab-content.active,

    .carousel-container {

        grid-template-columns: 1fr;

    }

    

    .destination-tabs {

        flex-direction: column;

        align-items: center;

    }

    

    .route-planner-cta {

        padding: 2rem 1rem;

    }

    

    .navbar {

        padding: 0.6rem 1rem;

    }

    

    .logo {

        gap: 0.6rem;

    }

    

    .logo img {

        height: 70px;

    }

    

    .logo span {

        font-size: 1.5rem;

    }

    

    .mobile-menu-btn {

        display: block;

        width: 30px;

        height: 20px;

        position: relative;

        cursor: pointer;

        z-index: 1001;

    }

    

    .mobile-menu-btn span {

        display: block;

        position: absolute;

        height: 3px;

        width: 100%;

        background: var(--text-color);

        border-radius: 3px;

        transition: var(--transition);

    }

    

    .mobile-menu-btn span:nth-child(1) { top: 0; }

    .mobile-menu-btn span:nth-child(2) { top: 8px; }

    .mobile-menu-btn span:nth-child(3) { top: 16px; }

    

    .mobile-menu-btn.active span:nth-child(1) {

        transform: rotate(45deg) translate(5px, 5px);

        background: var(--primary-color);

    }

    

    .mobile-menu-btn.active span:nth-child(2) {

        opacity: 0;

    }

    

    .mobile-menu-btn.active span:nth-child(3) {

        transform: rotate(-45deg) translate(7px, -6px);

        background: var(--primary-color);

    }

    

    .nav-links {

        position: fixed;

        top: 0;

        right: -100%;

        width: 80%;

        max-width: 300px;

        height: 100vh;

        background: white;

        flex-direction: column;

        padding: 5rem 2rem;

        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

        transition: var(--transition);

        z-index: 1000;

    }

    

    .nav-links.active {

        right: 0;

    }

    

    .hero {

        flex-direction: column;

        text-align: center;

    }

    

    .hero-content h1 {

        font-size: 2.5rem;

    }

    

    .hero-stats {

        justify-content: center;

    }

    

    .features-grid, .steps {

        grid-template-columns: 1fr;

    }

    

    .feature-card, .step {

        margin-bottom: 2rem;

    }

    

    .carousel-container {

        gap: 1rem;

    }

    

    .carousel-btn {

        width: 32px;

        height: 32px;

        font-size: 1.1rem;

    }

}@media (max-width: 480px) {

    .hero-content h1 {

        font-size: 2rem;

    }

    

    .hero-content p {

        font-size: 1rem;

    }

    

    .stat-number {

        font-size: 1.5rem;

    }

    

    .section-title {

        font-size: 2rem;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

    }

    

    .cta-buttons {

        flex-direction: column;

    }

    

    .form-row {

        flex-direction: column;

        gap: 0;

    }

}/* Animations */

@keyframes float {

    0% { transform: translateY(0px); }

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

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

}.floating {

    animation: float 3s ease-in-out infinite;

}/* Booking form modal */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 1000;

    justify-content: center;

    align-items: center;

}.modal.active {

    display: flex;

}.modal-content {

    background-color: white;

    padding: 2rem;

    border-radius: var(--border-radius);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    width: 90%;

    max-width: 500px;

    max-height: 90vh;

    overflow-y: auto;

    position: relative;

}.close-modal {

    position: absolute;

    top: 1rem;

    right: 1rem;

    font-size: 1.5rem;

    color: #666;

    cursor: pointer;

    transition: var(--transition);

}.close-modal:hover {

    color: var(--primary-color);

}.booking-form h3 {

    margin-bottom: 1.5rem;

    font-size: 1.5rem;

    color: var(--secondary-color);

}.form-group {

    margin-bottom: 1.5rem;

}.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    color: var(--secondary-color);

}.form-group input,

.form-group select {

    width: 100%;

    padding: 0.8rem;

    border: 1px solid #ddd;

    border-radius: var(--border-radius);

    transition: var(--transition);

}.form-group input:focus,

.form-group select:focus {

    border-color: var(--primary-color);

    outline: none;

    box-shadow: 0 0 0 2px rgba(128, 0, 0, 0.2);

}.form-row {

    display: flex;

    gap: 1rem;

}.form-row .form-group {

    flex: 1;

}@media (max-width: 480px) {

    .form-row {

        flex-direction: column;

        gap: 0;

    }

}



/* Trust section */

.trust-section {

    padding: 5rem 5%;

    background-color: var(--light-bg);

}



.vendor-logos {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 3rem;

    margin-bottom: 4rem;

}



.vendor-logo {

    opacity: 0.7;

    transition: var(--transition);

}



.vendor-logo:hover {

    opacity: 1;

}



.testimonials {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    padding: 1rem 0 3rem;

}



.testimonial-slider {

    display: flex;

    transition: transform 0.5s ease-in-out;

    width: 100%;

}



.testimonial-slide {

    display: flex;

    flex: 0 0 100%;

    justify-content: center;

    gap: 2rem;

    width: 100%;

}



.testimonial-card {

    background-color: white;

    padding: 1.5rem;

    border-radius: var(--border-radius);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

    transition: transform 0.3s, box-shadow 0.3s;

    display: flex;

    flex-direction: column;

    position: relative;

    border: 1px solid rgba(0, 0, 0, 0.05);

    overflow: hidden;

    width: calc(50% - 1rem);

    max-width: 480px;

}



.testimonial-card:hover {

    transform: translateY(-5px) scale(1.02);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

}



.testimonial-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));

}



.testimonial-content {

    margin-bottom: 1rem;

    position: relative;

    flex: 1;

    font-style: italic;

    color: #444;

    line-height: 1.5;

}



.testimonial-content p {

    position: relative;

    z-index: 1;

    font-size: 0.9rem;

}



.testimonial-content::before {

    content: "\201C";

    font-size: 5rem;

    color: rgba(128, 0, 0, 0.07);

    position: absolute;

    top: -2.5rem;

    left: -1.5rem;

    z-index: 0;

    font-family: 'Georgia', serif;

}



.testimonial-author {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    margin-top: auto;

    background: rgba(248, 249, 250, 0.5);

    padding: 0.8rem;

    border-radius: 8px;

    margin: 0 -0.8rem -0.8rem -0.8rem;

}



.testimonial-author img {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid white;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

}



.author-info h4 {

    font-size: 0.95rem;

    margin-bottom: 0.1rem;

    color: var(--secondary-color);

}



.author-info p {

    font-size: 0.75rem;

    color: #666;

    opacity: 0.9;

}



.rating {

    color: #FFD700;

    margin-bottom: 0.8rem;

    letter-spacing: 1px;

    font-size: 0.9rem;

}



/* Slider dots navigation */

.testimonial-dots {

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 2rem;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

}



.testimonial-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #ddd;

    cursor: pointer;

    transition: background-color 0.3s, transform 0.2s;

}



.testimonial-dot.active {

    background-color: var(--primary-color);

    transform: scale(1.2);

}



/* Slider arrows */

.testimonial-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    background-color: white;

    border-radius: 50%;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

    transition: all 0.2s;

    color: var(--primary-color);

    font-size: 1.2rem;

}



.testimonial-arrow:hover {

    background-color: var(--primary-color);

    color: white;

}



.testimonial-arrow.prev {

    left: 10px;

}



.testimonial-arrow.next {

    right: 10px;

}



@media (max-width: 768px) {

    .testimonial-slide {

        flex-direction: column;

        align-items: center;

    }

    

    .testimonial-card {

        width: 100%;

        max-width: 90%;

        margin-bottom: 1rem;

    }

    

    .testimonial-arrow {

        display: none;

    }

}



/* Footer */

.footer {

    background-color: var(--secondary-color);

    color: white;

    padding: 4rem 5% 2rem;

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}



.footer-section h4 {

    font-size: 1.2rem;

    margin-bottom: 1.5rem;

    position: relative;

    display: inline-block;

}



.footer-section h4::after {

    content: '';

    position: absolute;

    width: 40px;

    height: 3px;

    background-color: var(--primary-color);

    bottom: -8px;

    left: 0;

}



.footer-section a {

    display: block;

    color: #ecf0f1;

    text-decoration: none;

    margin-bottom: 0.8rem;

    transition: var(--transition);

}



.footer-section a:hover {

    color: var(--primary-light);

    transform: translateX(5px);

}



.social-links {

    display: flex;

    gap: 1rem;

}



.social-links a {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    transition: var(--transition);

}



.social-links a:hover {

    background-color: var(--primary-color);

    transform: translateY(-5px);

}



.footer-bottom {

    text-align: center;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



/* Responsive design */

@media (max-width: 1024px) {

    .hero {

        flex-direction: column-reverse;

        padding: 3rem 5%;

    }

    

    .hero-content h1 {

        font-size: 2.8rem;

    }

    

    .pricing-cards {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .pricing-card.pro {

        grid-column: span 2;

        max-width: 400px;

        margin: 0 auto;

    }

}



@media (max-width: 600px) {

    .destination-card {

        min-width: 92vw;

        max-width: 97vw;

        margin: 0.7rem 0;

    }

    .destination-content {

        padding: 1rem 0.7rem 1rem 0.7rem;

    }

}



.carousel-nav {

    position: absolute;

    top: 40%;

    transform: translateY(-50%);

    background: var(--primary-color);

    border: none;

    color: white;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    font-size: 1.5rem;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0.9;

}

.carousel-nav:hover {

    background: var(--primary-dark);

    opacity: 1;

    transform: translateY(-50%) scale(1.05);

}

.carousel-nav.left {

    left: 5px;

}

.carousel-nav.right {

    right: 5px;

}

.carousel-viewport {

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    outline: none;

    padding-bottom: 1.5rem;

    position: relative;

    width: 100%;

    scrollbar-width: none;

    padding: 10px 0;

}



/* Booking Form Styles */

.booking-form {

    color: var(--text-color);

}



.booking-form h3 {

    margin-bottom: 1.5rem;

    font-size: 1.6rem;

    color: var(--secondary-color);

    text-align: center;

    position: relative;

}



.booking-form h3:after {

    content: '';

    display: block;

    width: 50px;

    height: 3px;

    background: var(--primary-color);

    margin: 10px auto 0;

}



.form-group {

    margin-bottom: 1.2rem;

    position: relative;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: var(--secondary-color);

    font-size: 0.95rem;

}



.form-group input,

.form-group select {

    width: 100%;

    padding: 0.9rem 1rem;

    border: 1px solid #ddd;

    border-radius: var(--border-radius);

    transition: var(--transition);

    font-family: 'Poppins', sans-serif;

    font-size: 0.95rem;

    color: var(--text-color);

    background-color: #fff;

}



.form-group input:focus,

.form-group select:focus {

    border-color: var(--primary-color);

    outline: none;

    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.15);

}



.form-group.error input,

.form-group.error select {

    border-color: #e74c3c;

    background-color: rgba(231, 76, 60, 0.05);

}



.form-group .error-message {

    color: #e74c3c;

    font-size: 0.8rem;

    margin-top: 5px;

    position: absolute;

    bottom: -18px;

    left: 0;

}



.form-row {

    display: flex;

    gap: 1rem;

}



.form-row .form-group {

    flex: 1;

}



.location-input-wrapper {

    display: flex;

    align-items: center;

    position: relative;

}



.location-input-wrapper input {

    padding-right: 42px; /* Make room for the button */

    width: 100%;

}



.location-btn {

    background-color: var(--primary-color);

    color: white;

    border: none;

    border-radius: 4px;

    width: 36px;

    height: 36px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s;

    position: absolute;

    right: 4px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

}



.location-btn:hover {

    background-color: var(--primary-dark);

    transform: translateY(-50%) scale(1.05);

}



.location-btn:active {

    transform: translateY(-50%) scale(0.95);

}



.location-btn:disabled {

    background-color: #ccc;

    cursor: not-allowed;

}



.geo-notice {

    background-color: #FFF8E1;

    border-left: 3px solid #FFD54F;

    padding: 10px 12px;

    margin: 10px 0 20px;

    border-radius: 4px;

    font-size: 0.85rem;

    color: #5D4037;

}



.geo-notice i {

    margin-right: 5px;

    color: #FF9800;

}



/* Google Places Autocomplete custom styling */

.pac-container {

    border-radius: 8px;

    margin-top: 5px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

    border: 1px solid #eaeaea;

    font-family: 'Poppins', sans-serif;

    z-index: 2000;

}



.pac-item {

    padding: 10px 12px;

    cursor: pointer;

    transition: background 0.2s;

    font-size: 0.9rem;

}



.pac-item:hover {

    background-color: #f7f7f7;

}



.pac-item-selected {

    background-color: #f0f0f0;

}



.pac-icon {

    margin-right: 10px;

}



.pac-item-query {

    font-size: 0.95rem;

    color: var(--text-color);

}



.pac-matched {

    font-weight: bold;

    color: var(--primary-color);

}



.pac-container:after {

    background-image: none !important;

    height: 0px;

}



/* Map container styling */

.map-container {

    margin: 15px 0;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

    position: relative;

    border: 1px solid #eaeaea;

}



#booking-map {

    height: 220px;

    width: 100%;

    background-color: #f5f5f5;

}



.map-loading {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.85);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10;

    font-size: 0.9rem;

    color: var(--secondary-color);

}



.map-loading i {

    margin-right: 8px;

    color: var(--primary-color);

    font-size: 1.1rem;

}



.map-legend {

    display: flex;

    justify-content: space-around;

    padding: 10px;

    background-color: #f9f9f9;

    border-top: 1px solid #eee;

}



.map-marker {

    display: flex;

    align-items: center;

    font-size: 0.85rem;

    font-weight: 500;

}



.map-marker.pickup i {

    color: #4CAF50;

    margin-right: 5px;

}



.map-marker.dropoff i {

    color: #F44336;

    margin-right: 5px;

}



/* Route details styling */

.route-details {

    background-color: #f9f9f9;

    border-radius: 10px;

    padding: 15px;

    margin: 15px 0;

    transition: all 0.3s;

    position: relative;

    border: 1px solid #eee;

}



.route-details.loading {

    opacity: 0.8;

}



.route-info {

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

}



.route-distance, .route-duration {

    display: flex;

    align-items: center;

    color: var(--text-color);

    font-size: 0.95rem;

}



.route-distance i, .route-duration i {

    margin-right: 8px;

    color: var(--primary-color);

}



.estimated-fare {

    text-align: right;

    font-weight: 600;

    color: var(--secondary-color);

    padding-top: 10px;

    border-top: 1px solid #eee;

    font-size: 1.1rem;

}



.estimated-fare span {

    display: block;

    margin-bottom: 5px;

    font-size: 0.85rem;

    font-weight: 500;

    color: #666;

}



.estimated-fare strong {

    color: var(--primary-color);

    font-size: 1.3rem;

}



/* Booking confirmation styling */

.booking-confirmation {

    text-align: center;

    padding: 10px 0;

}



.confirmation-icon {

    color: #4CAF50;

    font-size: 4rem;

    margin-bottom: 15px;

    animation: scaleIn 0.5s ease-out;

}



@keyframes scaleIn {

    0% { transform: scale(0); opacity: 0; }

    70% { transform: scale(1.2); opacity: 1; }

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

}



.booking-confirmation h3 {

    color: var(--secondary-color);

    margin-bottom: 10px;

    font-size: 1.5rem;

}



.booking-details {

    background-color: #f9f9f9;

    border-radius: 10px;

    padding: 15px;

    margin: 20px 0;

    text-align: left;

    border: 1px solid #eee;

}



.booking-detail {

    display: flex;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid #eee;

}



.booking-detail:last-child {

    border-bottom: none;

}



.detail-label {

    font-weight: 600;

    color: #666;

    font-size: 0.9rem;

}



.detail-value {

    color: var(--text-color);

    max-width: 60%;

    text-align: right;

    word-break: break-word;

    font-size: 0.9rem;

}



.confirmation-message {

    color: #666;

    margin: 15px 0;

    font-size: 0.9rem;

}



.close-confirmation-btn {

    margin-top: 10px;

}



/* Form submit button styling */

.booking-form .btn-primary {

    margin-top: 10px;

    width: 100%;

    padding: 12px;

    font-size: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}



.booking-form .btn-primary:before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    transition: width 0.6s ease, height 0.6s ease;

    z-index: 1;

}



.booking-form .btn-primary:hover:before {

    width: 300px;

    height: 300px;

}



.booking-form .btn-primary span {

    position: relative;

    z-index: 2;

}



.booking-form .btn-primary i {

    margin-right: 8px;

}



/* Responsive adjustments */

@media (max-width: 768px) {

    #booking-map {

        height: 180px;

    }

    

    .route-info {

        flex-direction: column;

        gap: 8px;

    }

    

    .form-row {

        flex-direction: column;

        gap: 0;

    }

    

    .booking-detail {

        flex-direction: column;

        gap: 5px;

    }

    

    .detail-value {

        max-width: 100%;

        text-align: left;

    }

}



/* Redesigned Booking Experience */

.booking-experience {

    max-width: 90%;

    width: 1200px;

    height: 80vh;

    max-height: 700px;

    padding: 0;

    border-radius: 12px;

    overflow: hidden;

}



.booking-container {

    display: flex;

    height: 100%;

    width: 100%;

}



/* Map Panel Styles */

.booking-map-panel {

    flex: 1;

    display: flex;

    flex-direction: column;

    background-color: #f5f7fa;

    position: relative;

}



.map-container {

    flex: 1;

    position: relative;

    overflow: hidden;

    border-radius: 0;

    box-shadow: none;

    margin: 0;

}



#booking-map {

    height: 100%;

    width: 100%;

    border-radius: 0;

}



.map-overlay {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 10;

}



.map-controls {

    background: rgba(255, 255, 255, 0.9);

    border-radius: 8px;

    padding: 5px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.map-control-btn {

    display: block;

    width: 36px;

    height: 36px;

    border: none;

    background: white;

    color: #333;

    font-size: 14px;

    margin: 5px 0;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.map-control-btn:hover {

    background-color: #f0f0f0;

    color: #d01e1ebe;

}



.map-status {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.8);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 5;

}



.map-loading {

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}


.loading-spinner {

    width: 40px;

    height: 40px;

    border: 3px solid #f3f3f3;

    border-top: 3px solid #d01e1ebe;

    border-radius: 50%;

    margin-bottom: 15px;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* Journey Preview Styles */

.journey-preview {

    background-color: white;

    padding: 20px;

    border-top: 1px solid #eaeaea;

}



.route-visualization {

    margin-bottom: 20px;

    padding-left: 15px;

    position: relative;

}



.journey-point {

    display: flex;

    align-items: flex-start;

    margin-bottom: 15px;

    position: relative;

}



.point-marker {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    margin-right: 15px;

    flex-shrink: 0;

}



.journey-point.pickup .point-marker {

    background-color: #4CAF50;

    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);

}



.journey-point.dropoff .point-marker {

    background-color: #d01e1ebe;

    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.2);

}



.point-line {

    position: absolute;

    left: 7px;

    top: 14px;

    width: 2px;

    height: calc(100% + 15px);

    background-color: #ddd;

    z-index: 1;

}



.point-details {

    flex: 1;

}



.point-details h4 {

    margin: 0 0 5px;

    font-size: 14px;

    color: #666;

    font-weight: 500;

}



.point-details p {

    margin: 0;

    font-size: 14px;

    color: #333;

    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 250px;

}



.journey-stats {

    display: flex;

    justify-content: space-between;

    padding-top: 15px;

    border-top: 1px solid #f0f0f0;

}



.stat {

    display: flex;

    align-items: center;

}



.stat i {

    font-size: 18px;

    color: #666;

    margin-right: 10px;

}



.stat-data {

    display: flex;

    flex-direction: column;

}



.stat-value {

    font-size: 16px;

    font-weight: 600;

    color: #333;

}



.stat-label {

    font-size: 12px;

    color: #888;

}



/* Booking Form Panel Styles */

.booking-form-panel {

    width: 460px;

    background: white;

    border-left: 1px solid #eaeaea;

    overflow-y: auto;

}



.booking-form-container {

    padding: 30px;

}



.booking-form-container h2 {

    margin: 0 0 5px;

    font-size: 26px;

    color: #333;

}



.booking-subtitle {

    color: #666;

    margin: 0 0 25px;

    font-size: 15px;

}



/* Form Progress Indicator */

.form-progress {

    display: flex;

    margin-bottom: 30px;

    position: relative;

}



.form-progress:after {

    content: '';

    position: absolute;

    top: 17px;

    left: 30px;

    right: 30px;

    height: 2px;

    background-color: #eaeaea;

    z-index: 1;

}



.progress-step {

    flex: 1;

    text-align: center;

    position: relative;

    z-index: 2;

}



.step-number {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #fff;

    border: 2px solid #ddd;

    border-radius: 50%;

    margin: 0 auto 8px;

    font-weight: 600;

    color: #999;

    transition: all 0.3s ease;

}



.step-label {

    font-size: 13px;

    color: #999;

    font-weight: 500;

}



.progress-step.active .step-number {

    background-color: #d01e1ebe;

    border-color: #d01e1ebe;

    color: white;

}



.progress-step.active .step-label {

    color: #d01e1ebe;

    font-weight: 600;

}



.progress-step.completed .step-number {

    background-color: #4CAF50;

    border-color: #4CAF50;

    color: white;

}



/* Form Steps */

.form-step {

    display: none;

}



.form-step.active {

    display: block;

}



/* Trip Type Selector */

.trip-type-selector {

    display: flex;

    gap: 10px;

    margin-top: 5px;

}



.trip-option {

    flex: 1;

    cursor: pointer;

}



.trip-option input {

    display: none;

}



.trip-option-content {

    text-align: center;

    padding: 12px;

    border: 2px solid #eaeaea;

    border-radius: 6px;

    transition: all 0.2s ease;

}



.trip-option-content i {

    display: block;

    font-size: 20px;

    margin-bottom: 5px;

    color: #666;

}



.trip-option-content span {

    font-size: 14px;

    font-weight: 500;

    color: #555;

}



.trip-option input:checked + .trip-option-content {

    border-color: #d01e1ebe;

    background-color: rgba(128, 0, 0, 0.05);

}



.trip-option input:checked + .trip-option-content i,

.trip-option input:checked + .trip-option-content span {

    color: #d01e1ebe;

}



/* Location Input Styling */

.location-group label {

    display: flex;

    align-items: center;

    gap: 8px;

}



.pickup-icon {

    color: #4CAF50;

}



.dropoff-icon {

    color: #d01e1ebe;

}



.location-input-wrapper {

    position: relative;

    display: flex;

    margin-top: 5px;

}



.location-input-wrapper input {

    flex: 1;

    padding-right: 45px;

}



.location-btn {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    width: 45px;

    border: none;

    background: transparent;

    color: #777;

    font-size: 16px;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.location-btn:hover {

    color: #d01e1ebe;

    background: transparent;

}



.location-btn:active {

    transform: scale(0.95);

}



/* Vehicle Selection */

.vehicle-options {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 10px;

}



.vehicle-option input {

    display: none;

}



.vehicle-card {

    border: 2px solid #eaeaea;

    border-radius: 8px;

    padding: 15px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.vehicle-option input:checked + .vehicle-card {

    border-color: #d01e1ebe;

    box-shadow: 0 5px 15px rgba(128, 0, 0, 0.1);

}



.vehicle-image {

    text-align: center;

    margin-bottom: 10px;

}



.vehicle-image img {

    height: 60px;

    object-fit: contain;

}



.vehicle-details h4 {

    margin: 0 0 5px;

    font-size: 16px;

    color: #333;

    font-weight: 600;

}



.vehicle-details p {

    margin: 0 0 10px;

    font-size: 13px;

    color: #666;

}



.vehicle-features {

    display: flex;

    gap: 10px;

}



.vehicle-features span {

    font-size: 12px;

    color: #777;

}



.vehicle-features span i {

    margin-right: 3px;

}



/* Fare Breakdown */

.fare-breakdown {

    background-color: #f9f9f9;

    border-radius: 8px;

    padding: 15px;

    margin: 20px 0;

}



.fare-breakdown h4 {

    margin: 0 0 15px;

    font-size: 16px;

    color: #333;

    font-weight: 600;

}



.fare-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 14px;

    color: #666;

}



.fare-item.extra-info {

    font-size: 13px;

    color: #888;

}



.fare-total {

    display: flex;

    justify-content: space-between;

    padding-top: 10px;

    margin-top: 5px;

    border-top: 1px dashed #ddd;

    font-weight: 600;

    color: #333;

}



/* Phone Input */

.phone-input-wrapper {

    display: flex;

    align-items: center;

}



.country-code {

    background-color: #f5f7fa;

    padding: 10px 12px;

    border: 1px solid #ddd;

    border-right: none;

    border-radius: 4px 0 0 4px;

    color: #666;

    font-size: 14px;

}



.phone-input-wrapper input {

    border-radius: 0 4px 4px 0;

}



/* Payment Options */

.payment-options {

    margin: 20px 0;

}



.payment-options h4 {

    margin: 0 0 10px;

    font-size: 16px;

    color: #333;

    font-weight: 600;

}



.payment-selector {

    display: flex;

    gap: 10px;

}



.payment-option {

    flex: 1;

    cursor: pointer;

}



.payment-option input {

    display: none;

}



.payment-option-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 12px;

    border: 2px solid #eaeaea;

    border-radius: 6px;

    transition: all 0.2s ease;

}



.payment-option-content i {

    font-size: 24px;

    margin-bottom: 5px;

    color: #666;

}



.payment-option-content span {

    font-size: 14px;

    font-weight: 500;

    color: #555;

}



.payment-option input:checked + .payment-option-content {

    border-color: #d01e1ebe;

    background-color: rgba(128, 0, 0, 0.05);

}



.payment-option input:checked + .payment-option-content i,

.payment-option input:checked + .payment-option-content span {

    color: #d01e1ebe;

}



/* Form Actions */

.form-actions {

    display: flex;

    justify-content: space-between;

    margin-top: 25px;

}



.btn-back {

    background-color: #f5f7fa;

    color: #666;

    border: none;

    padding: 12px 20px;

    border-radius: 6px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-back:hover {

    background-color: #e9ecef;

}



.btn-next, .btn-submit {

    background-color: #d01e1ebe;

    color: white;

    border: none;

    padding: 12px 20px;

    border-radius: 6px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-next:hover, .btn-submit:hover {

    background-color: #E0363A;

}



.btn-submit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}



.btn-submit i {

    font-size: 16px;

}



/* Success Modal */

.success-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);

    z-index: 1000;

    overflow: auto;

}



.success-content {

    background-color: white;

    width: 90%;

    max-width: 500px;

    margin: 50px auto;

    border-radius: 12px;

    overflow: hidden;

    animation: modalFadeIn 0.5s ease;

}



@keyframes modalFadeIn {

    from { opacity: 0; transform: translateY(20px); }

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

}



.success-checkmark {

    display: flex;

    justify-content: center;

    padding: 30px 0;

    background-color: #F5FAF5;

}



.check-icon {

    width: 80px;

    height: 80px;

    position: relative;

    border-radius: 50%;

    box-sizing: content-box;

    border: 4px solid #4CAF50;

}



.check-icon::before {

    top: 3px;

    left: -2px;

    width: 30px;

    transform-origin: 100% 50%;

    border-radius: 100px 0 0 100px;

}



.check-icon::after {

    top: 0;

    left: 30px;

    width: 60px;

    transform-origin: 0 50%;

    border-radius: 0 100px 100px 0;

    animation: rotate-circle 4.25s ease-in;

}



.check-icon::before, .check-icon::after {

    content: '';

    height: 100px;

    position: absolute;

    background: #F5FAF5;

    transform: rotate(-45deg);

}



.check-icon .icon-line {

    height: 5px;

    background-color: #4CAF50;

    display: block;

    border-radius: 2px;

    position: absolute;

    z-index: 10;

}



.check-icon .icon-line.line-tip {

    top: 46px;

    left: 14px;

    width: 25px;

    transform: rotate(45deg);

    animation: icon-line-tip 0.75s;

}



.check-icon .icon-line.line-long {

    top: 38px;

    right: 8px;

    width: 47px;

    transform: rotate(-45deg);

    animation: icon-line-long 0.75s;

}



.check-icon .icon-circle {

    top: -4px;

    left: -4px;

    z-index: 10;

    width: 80px;

    height: 80px;

    border-radius: 50%;

    position: absolute;

    box-sizing: content-box;

    border: 4px solid rgba(76, 175, 80, 0.5);

}



.check-icon .icon-fix {

    top: 8px;

    width: 5px;

    left: 26px;

    z-index: 1;

    height: 85px;

    position: absolute;

    transform: rotate(-45deg);

    background-color: #F5FAF5;

}



@keyframes rotate-circle {

    0% { transform: rotate(-45deg); }

    5% { transform: rotate(-45deg); }

    12% { transform: rotate(-405deg); }

    100% { transform: rotate(-405deg); }

}



@keyframes icon-line-tip {

    0% { width: 0; left: 1px; top: 19px; }

    54% { width: 0; left: 1px; top: 19px; }

    70% { width: 50px; left: -8px; top: 37px; }

    84% { width: 17px; left: 21px; top: 48px; }

    100% { width: 25px; left: 14px; top: 45px; }

}



@keyframes icon-line-long {

    0% { width: 0; right: 46px; top: 54px; }

    65% { width: 0; right: 46px; top: 54px; }

    84% { width: 55px; right: 0px; top: 35px; }

    100% { width: 47px; right: 8px; top: 38px; }

}



.success-message {

    padding: 30px;

}



.success-message h2 {

    margin: 0 0 10px;

    color: #333;

    font-size: 24px;

    text-align: center;

}



.success-message p {

    margin: 0 0 25px;

    color: #666;

    text-align: center;

    font-size: 16px;

}



.booking-reference {

    text-align: center;

    background-color: #f5f7fa;

    padding: 10px;

    border-radius: 6px;

    margin-bottom: 25px;

}



.booking-reference span {

    color: #666;

    font-size: 14px;

    margin-right: 5px;

}



.booking-reference strong {

    color: #333;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1px;

}



.driver-info {

    display: flex;

    align-items: center;

    gap: 15px;

    background-color: #f9f9f9;

    padding: 15px;

    border-radius: 8px;

    margin-bottom: 25px;

}



.driver-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    overflow: hidden;

    background-color: #eee;

    flex-shrink: 0;

}



.driver-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.driver-details h3 {

    margin: 0 0 5px;

    font-size: 16px;

    color: #333;

}



.driver-details p {

    margin: 0;

    font-size: 14px;

    color: #666;

    text-align: left;

}



.journey-summary {

    margin-bottom: 25px;

}



.summary-item {

    display: flex;

    margin-bottom: 12px;

}



.summary-item i {

    width: 20px;

    margin-right: 15px;

    color: #666;

}



.summary-item i.pickup-icon {

    color: #4CAF50;

}



.summary-item i.dropoff-icon {

    color: #d01e1ebe;

}



.summary-details {

    display: flex;

    flex-direction: column;

    flex: 1;

}



.summary-label {

    font-size: 12px;

    color: #888;

    margin-bottom: 3px;

}



.summary-value {

    font-size: 14px;

    color: #333;

    font-weight: 500;

}



.success-actions {

    display: flex;

    gap: 15px;

}



.success-actions a {

    flex: 1;

    text-align: center;

    text-decoration: none;

}



/* Responsive Adjustments */

@media (max-width: 1024px) {

    .booking-experience {

        width: 95%;

        height: 90vh;

        max-height: none;

    }

}



@media (max-width: 768px) {

    .booking-container {

        flex-direction: column;

    }

    

    .booking-map-panel, .booking-form-panel {

        width: 100%;

    }

    

    .booking-map-panel {

        height: 50%;

    }

    

    .vehicle-options {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 480px) {

    .booking-experience {

        width: 100%;

        height: 100%;

        max-height: none;

        border-radius: 0;

    }

    

    .modal-content {

        padding: 0;

    }

    

    .booking-form-container {

        padding: 20px;

    }

    

    .journey-stats {

        flex-direction: column;

        gap: 10px;

    }

    

    .stat {

        justify-content: flex-start;

    }

    

    .form-actions {

        flex-direction: column;

        gap: 10px;

    }

    

    .btn-back, .btn-next, .btn-submit {

        width: 100%;

    }

}



/* Map Picker Modal Styles */

.map-picker-modal .modal-content {

    max-width: 800px;

    max-height: 90vh;

    overflow-y: auto;

}



.map-picker-container {

    height: 400px;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 20px;

    position: relative;

}



#picker-map {

    width: 100%;

    height: 100%;

    background-color: #f0f0f0;

}



.address-preview {

    background-color: #f9f9f9;

    padding: 15px;

    border-radius: 8px;

    margin-bottom: 20px;

}



.address-preview h4 {

    margin-top: 0;

    margin-bottom: 10px;

    color: var(--secondary-color);

}



.address-preview p {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.4;

}



.picker-actions {

    display: flex;

    justify-content: space-between;

    gap: 15px;

}



.picker-actions button {

    flex: 1;

}



/* Hidden Gems Explorer Styles */

.hidden-gems-modal .modal-content {

    max-width: 1000px;

    max-height: 90vh;

    overflow-y: auto;

}



.hidden-gems-modal h2 {

    color: var(--secondary-color);

    margin-bottom: 5px;

}



.gems-description {

    color: var(--text-color);

    margin-bottom: 20px;

    text-align: center;

}



.gems-map-container {

    height: 350px;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 20px;

    position: relative;

    border: 1px solid #ddd;

}



#gems-map {

    width: 100%;

    height: 100%;

    background-color: #f0f0f0;

}



.gems-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

    margin-bottom: 25px;

}



.gem-item {

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

    background-color: #fff;

    position: relative;

}



.gem-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}



.gem-item.active {

    border: 2px solid var(--primary-color);

}



.gem-item.selected {

    background-color: rgba(128, 0, 0, 0.05);

}



.gem-image {

    height: 150px;

    overflow: hidden;

    position: relative;

}



.gem-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.gem-item:hover .gem-image img {

    transform: scale(1.05);

}



.gem-type {

    position: absolute;

    top: 10px;

    right: 10px;

    padding: 4px 8px;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    border-radius: 20px;

    background-color: rgba(0, 0, 0, 0.5);

    color: #fff;

}



.gem-type.nature {

    background-color: #4CAF50;

}



.gem-type.cultural {

    background-color: #9C27B0;

}



.gem-type.viewpoint {

    background-color: #2196F3;

}



.gem-type.food {

    background-color: #FF9800;

}



.gem-details {

    padding: 15px;

}



.gem-details h3 {

    margin: 0 0 10px;

    font-size: 1rem;

    color: var(--secondary-color);

}



.gem-details p {

    margin: 0 0 15px;

    font-size: 0.85rem;

color: var(--text-color);

line-height: 1.4;

display: -webkit-box;

line-clamp: 2;

-webkit-line-clamp: 2;

box-orient: vertical;

-webkit-box-orient: vertical;

overflow: hidden;

}



.gem-meta {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 0.75rem;

}



.gem-rating, .gem-distance, .gem-time {

    display: flex;

    align-items: center;

    color: #666;

}



.gem-rating i, .gem-distance i, .gem-time i {

    color: var(--primary-color);

    margin-right: 5px;

    font-size: 0.8rem;

}



.gem-actions {

    padding: 0 15px 15px;

    display: flex;

    justify-content: space-between;

}



.gem-actions button {

    padding: 6px 10px;

    font-size: 0.75rem;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s;

    border: none;

    display: flex;

    align-items: center;

}



.gem-actions button i {

    margin-right: 5px;

}



.btn-view-gem {

    background-color: transparent;

    border: 1px solid #ddd;

    color: var(--text-color);

}



.btn-view-gem:hover {

    background-color: #f0f0f0;

}



.btn-add-gem {

    background-color: var(--primary-color);

    color: white;

}



.btn-add-gem:hover {

    background-color: var(--primary-dark);

}



.gem-item.selected .btn-add-gem {

    background-color: #4CAF50;

}



.gems-actions {

    display: flex;

    justify-content: space-between;

    gap: 15px;

}



.gems-actions button {

    flex: 1;

}



/* Outstation-specific styles */

.outstation-options {

    background-color: #f9f9f9;

    border-radius: 8px;

    padding: 15px;

    margin: 15px 0;

}



.outstation-options h4 {

    margin-top: 0;

    margin-bottom: 15px;

    font-size: 1rem;

    color: var(--secondary-color);

}



.trip-config-row {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

}



.trip-config-row .form-group {

    flex: 1;

    margin-bottom: 0;

}



/* Enhanced location input styles */

.location-input-wrapper {

    display: flex;

    position: relative;

    align-items: center;

}



.location-input-wrapper.focused {

    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.15);

}



.location-input-wrapper.has-value .clear-location-btn {

    display: flex;

}



.location-input-wrapper input {

    padding-right: 80px; /* Make room for both buttons */

    width: 100%;

}



.location-btn, .map-picker-btn {

    background-color: var(--primary-color);

    color: white;

    border: none;

    border-radius: 4px;

    width: 36px;

    height: 36px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s;

    position: absolute;

    z-index: 5;

}



.location-btn {

    right: 4px;

    top: 50%;

    transform: translateY(-50%);

}



.map-picker-btn {

    right: 44px;

    top: 50%;

    transform: translateY(-50%);

    background-color: #2196F3;

}



.location-btn:hover, .map-picker-btn:hover {

    transform: translateY(-50%) scale(1.05);

}



.location-btn:hover {

    background-color: var(--primary-dark);

}



.map-picker-btn:hover {

    background-color: #1976D2;

}



.location-btn:active, .map-picker-btn:active {

    transform: translateY(-50%) scale(0.95);

}



.location-btn.loading, .map-picker-btn.loading {

    opacity: 0.8;

    cursor: not-allowed;

}



.clear-location-btn {

    position: absolute;

    right: 84px;

    top: 50%;

    transform: translateY(-50%);

    width: 24px;

    height: 24px;

    display: none;

    align-items: center;

    justify-content: center;

    background: none;

    border: none;

    color: #999;

    cursor: pointer;

    z-index: 5;

}



.clear-location-btn:hover {

    color: #666;

}



/* Route Details Enhancement */

.route-details {

    margin-top: 15px;

    background-color: #f9f9f9;

    border-radius: 8px;

    padding: 15px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

}



.explore-gems-btn {

    margin-top: 15px;

    background-color: #673AB7;

    color: white;

    border: none;

    border-radius: 6px;

    padding: 10px 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

}



.explore-gems-btn i {

    margin-right: 8px;

    color: #FFC107;

}



.explore-gems-btn:hover {

    background-color: #5E35B1;

    transform: translateY(-2px);

}



.explore-gems-btn:active {

    transform: translateY(0);

}



.pulse-animation {

    animation: pulse 1.5s infinite;

}



@keyframes pulse {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(103, 58, 183, 0.7);

    }

    70% {

        transform: scale(1.02);

        box-shadow: 0 0 0 10px rgba(103, 58, 183, 0);

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(103, 58, 183, 0);

    }

}



/* Responsive fixes */

@media (max-width: 768px) {

    .gems-list {

        grid-template-columns: 1fr;

    }

    

    .trip-config-row {

        flex-direction: column;

        gap: 10px;

    }

    

    .gem-image {

        height: 120px;

    }

}



/* Map Container */

.map-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 1000;

    display: none;

}



.map-container.active {

    display: flex;

    justify-content: center;

    align-items: center;

}



.map-content {

    background: #fff;

    padding: 1rem;

    border-radius: 8px;

    width: 90%;

    max-width: 800px;

    max-height: 90vh;

    overflow: hidden;

    position: relative;

}



.map-content .close-btn {

    position: absolute;

    top: 1rem;

    right: 1rem;

    background: none;

    border: none;

    font-size: 1.5rem;

    cursor: pointer;

    color: #666;

    z-index: 1;

}



.map-content .close-btn:hover {

    color: #333;

}



.map-wrapper {

    height: 400px;

    margin: 1rem 0;

    border-radius: 8px;

    overflow: hidden;

}



#map {

    height: 100%;

    width: 100%;

}



.map-actions {

    display: flex;

    justify-content: flex-end;

    padding: 1rem 0 0;

    border-top: 1px solid #eee;

}



.confirm-location-btn {

    background: #4CAF50;

    color: #fff;

    border: none;

    padding: 0.8rem 1.5rem;

    border-radius: 4px;

    cursor: pointer;

    font-size: 1rem;

    transition: background 0.3s ease;

}



.confirm-location-btn:hover {

    background: #45a049;

}



/* Error state for form fields */

.error {

    border-color: #ff3333 !important;

}



.error-message {

    color: #ff3333;

    font-size: 0.875rem;

    margin-top: 0.25rem;

}



/* Destination Cards Mobile Responsiveness */
.carousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    width: 100%;
    scrollbar-width: none;
    display: flex;
    justify-content: flex-start;
}

.carousel-viewport::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    width: 100%;
}

.destination-card {
    flex: 0 0 auto;
    width: calc(100% - 2rem);
    max-width: 300px;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    scroll-snap-align: center;
}

.carousel-tab-panel {
    margin: 0 !important;
    padding: 0;
}

.carousel-tab-content {
    margin: 0;
    padding: 0;
    width: 100%;
}

#hidden-gems {
    margin: 0 auto;
    padding: 1rem 0;
    width: 100%;
    overflow: hidden;
}

.section-title {
    margin-bottom: 1.5rem;
}

.section-subtitle {
    margin-bottom: 1.5rem;
}

.destination-tabs {
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .carousel-viewport {
        padding: 0;
    }
    
    .carousel-track {
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    
    .destination-card {
        width: 85%;
        min-width: 260px;
    }
    
    #hidden-gems {
        padding: 0.5rem 0;
    }
}

.destination-categories {
    padding: 4rem 5%;
    background: linear-gradient(180deg, #fff6f3 0%, #ffe6e0 100%);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.category-card {
    background: #fff;
    border-radius: 15px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #f0f0f0;
    gap: 1.25rem;
    height: 100%;
}

.category-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 200px;
    justify-content: space-between;
}

.category-card h3 {
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.category-card p {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    flex: 1 1 auto;
}

.category-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(128, 0, 0, 0.05);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: auto;
    align-self: flex-start;
}

.category-link i {
    transition: transform 0.3s ease;
}

.category-card:hover .category-link {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(128, 0, 0, 0.3);
}

.category-card:hover .category-link i {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0.5rem;
    }

    .category-card {
        padding: 1rem;
    }

    .category-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .category-card h3 {
        font-size: 1.1rem;
    }

    .category-card p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .category-link {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .category-content {
        min-height: 170px;
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .category-card {
        padding: 0.8rem;
    }
    
    .category-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }
    
    .category-card h3 {
        font-size: 1rem;
    }
    
    .category-card p {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .category-link {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-top: 0.3rem;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .category-content {
        min-height: 150px;
    }
}

/* Hero Slider Styles */
.hero-slider {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
    display: none !important; /* ensure only one slide shows */
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0);
    display: block !important;
    pointer-events: auto;
}

.hero-slide.previous {
    transform: translateX(-100%);
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 2;
}

.slider-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slider-nav.prev {
    left: 15px;
}

.slider-nav.next {
    right: 15px;
}

@media (max-width: 768px) {
    .hero-slider {
        height: 300px;  /* Reduced from 400px */
        border-radius: 12px;
        margin-top: 0;  /* Remove margin causing the gap */
    }
    
    .slider-nav {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .hero-image {
        max-width: 100%;
        height: 300px;  /* Reduced from 400px */
        margin-top: 0;  /* Ensure no vertical gap */
    }

    .hero-slide img {
        height: 300px;  /* Reduced from 400px */
        object-fit: cover;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 250px;  /* Even smaller for mobile */
        border-radius: 10px;
        margin-top: 0;  /* Ensure consistency across breakpoints */
    }
    
    .hero-image {
        height: 250px;
        margin-top: 0;  /* Ensure consistency across breakpoints */
    }

    .hero-slide img {
        height: 250px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .hero-image {
        margin-bottom: 0.7rem !important; /* Match gap between header and image */
    }
    .hero-content {
        margin-bottom: 0.7rem !important; /* Match gap for consistency */
    }
}

@media (max-width: 768px) {
    .hero-image {
        margin-bottom: 0.2rem !important;
    }
    .hero-content {
        margin-bottom: 0.2rem !important;
        margin-top: 0 !important;
    }
    .hero-slide img {
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .hero {
        gap: 0 !important;
    }
    .hero-image {
        margin-bottom: 0 !important;
    }
    .hero-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .hero-content h1 {
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {
  .hero, .hero > div, .hero-image, .hero-content, .hero-content h1, .hero-content p {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .hero-image {
    display: flex !important;
    align-items: flex-end !important;
  }
}

@media (max-width: 768px) {
  .header {
    padding-bottom: 0 !important;
  }
  .hero {
    margin-top: 80px !important;
  }
}

@media (max-width: 768px) {
  .logo span {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem !important;
  }
}

@media (max-width: 768px) {
  .btn-primary {
    font-size: 0.85rem;
  }
}