@media (max-width: 768px) {
    .headline {
        font-size: 2.5rem !important;
    }

    .description {
        font-size: 1.1rem;
    }

    .large-text {
        font-size: 1.4rem;
    }

    .next-slide-btn {
        bottom: 80px;
        width: 50px;
        height: 50px;
        position: fixed !important;
    }

    main .inner-container {
        margin-bottom: 160px;
    }

    .split-slide {
        flex-direction: column-reverse;
        padding: 0 10vw;
    }

    .split-content {
        width: 100%;
        height: auto;
        padding: 40px 0;
    }

    .left-content {
        width: 100%;
        padding: 40px 0;
    }

    .vendor-wrapper {
        flex-direction: column;
        display: block;
        padding: 100px 0 0 0;
        min-height: auto;
        overflow-y: visible;
        height: auto;
        align-items: flex-start;
    }

    #vendors.tab-content {
        scroll-snap-type: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    .vendor-text-section {
        width: 100%;
        padding: 0px 10vw;
        min-height: auto;
        margin-bottom: 20px;
    }

    .vendor-text-section .inner-container {
        max-width: 100%;
    }

    .vendor-cal-section {
        position: relative;
        width: 100%;
        /* Ensure enough space for the full booking/payment flow */
        top: 0;
        right: 0;
        left: 0;
        padding: 0;
        /*
        height: auto;
        min-height: 1200px;
        margin-bottom: 40px;
        margin-top: -7.5vh;
        */
    }

    #my-cal-inline-30min {
        width: 100% !important;
        border-radius: 30px;
        height: 100% !important;
        /*
        margin-top: 10vh;
        overflow: hidden;
        overflow-y: auto;
        max-height: 80vh;
        */
    }

    .vendor-footer {
        margin-top: -7.5vh;
    }

    .vendor-footer {
        display: block;
        padding: 40px 10vw 100px 10vw;
    }

    .hero-mac {
        width: 100vw;
        right: -15vw;
        bottom: 5vh;
        z-index: 1;
    }

    .hero-iphone {
        width: 25vw;
        top: auto;
        bottom: 10vh;
        right: auto;
        left: 5vw;
        z-index: 5;
    }

    .process-steps {
        flex-direction: column;
    }

    .slide-progress {
        bottom: 100px !important;
    }

    .hero-trip-planner {
        left: 50%;
        width: 45vw;
        bottom: -100vh !important;
        max-width: none;
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

    body[data-active-slide="1"] .hero-trip-planner {
        bottom: 0vh !important;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    #about .slide:nth-child(2) .visible-text {
        top: -10vh !important;
    }

}

@media (max-width: 480px) {
    .headline {
        font-size: 2rem !important;
        margin-bottom: 1rem;
    }

    .description {
        font-size: 1rem;
        line-height: 1.4;
    }

    /* Fix Hero Images Overlap */
    .hero-mac {
        width: 120vw;
        max-width: none;
        right: -30vw;
        bottom: 0vh;
        opacity: 0.4;
        /* Fade it out slightly if it's behind text */
        z-index: 0;
    }

    .hero-iphone {
        width: 30vw;
        left: 10vw;
        bottom: 15vh;
        z-index: 1;
    }

    /* Ensure content is above images */
    main .inner-container {
        position: relative;
        z-index: 2;
        margin-bottom: 40vh;
        /* Reduced from 160px */
    }

    /* Adjust Next Button */
    .next-slide-btn {
        bottom: 30px;
        width: 44px;
        height: 44px;
        padding: 8px;
    }

    .next-slide-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Slide Progress Dots */
    .slide-progress {
        bottom: 90px !important;
    }

    /* Trip Planner Hero */
    body[data-active-slide="1"] .hero-trip-planner {
        bottom: 0vh !important;
        width: 40vw;
    }

    /* Adjust Vendor Calendar */
    .vendor-cal-section {
        max-height: 70vh;
    }

    #my-cal-inline-30min {
        margin-left: 0;
        width: 100% !important;
    }
}

@media (max-width: 375px) {
    .headline {
        font-size: 1.8rem !important;
    }

    .hero-mac {
        bottom: 0;
        opacity: 0.2;
        /* More transparent on very small screens */
    }

    main .inner-container {
        padding: 0 5vw;
        /* Less horizontal padding */
        margin-bottom: 50vh;
    }

    .slide {
        padding: 0 5vw;
    }

    .next-slide-btn {
        bottom: 20px;
    }

    .slide-progress {
        bottom: 80px !important;
    }
}

/* Fix landscape on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .slide {
        height: auto;
        min-height: 100vh;
        padding-top: 80px;
        justify-content: flex-start;
    }

    .headline {
        font-size: 1.8rem !important;
    }

    .hero-mac,
    .hero-iphone {
        display: none;
        /* Hide decorative images in landscape to save space */
    }

    .next-slide-btn {
        display: none;
        /* Scroll is better in landscape */
    }
}