/* ========== SNEL TAXI ERMELO - MOBILE RESPONSIVE ========== */

/* MOBILE (700px and below) */
@media (max-width: 700px) {
    /* NAVBAR - Keep your existing */
    #navbar {
        padding: 0px 5px;
    }
    .nav-ul li {
        display: none;
    }
    #three-lines {
        display: block !important;
    }
    
    /* HERO SECTION - FIRST SECTION */
    #first-section {
        flex-direction: column;
        padding: 1rem 5%;
        gap: 1.5rem;
        min-height: auto;
    }
    
    .first-text-section {
        width: 90%;
        order: 1;
    }
    
    /* INDEX PRIMARY BUTTONS - EXACT FOOTER MATCH FOR MOBILE */
    #first-section .primary-btn,
    #second-section .primary-btn,
    #third-section .primary-btn {
        /* Exact match to .footer-contact-buttons .primary-btn */
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 70px !important;
        max-width: 85px !important;
        margin: 0 !important;
        border-radius: 6px !important;
        flex: 1 !important;
        text-align: center !important;
        
        /* Flex properties for exact match */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        
        /* Ensure same dimensions */
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    /* Extra padding version for mobile - smaller max-width */
    #first-section .primary-btn-extra-padding,
    #second-section .primary-btn-extra-padding,
    #third-section .primary-btn-extra-padding {
        padding: 8px 10px !important; /* Same as regular, not wider */
        max-width: 90px !important; /* Slightly wider for extra text */
    }
    
    /* Button containers - match footer layout */
    #first-section .btn-container,
    #second-section .second-section-btn-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important; /* Same as footer gap */
        margin: 15px 0 !important;
        width: 100% !important;
    }
    
    /* Ensure buttons don't grow */
    #first-section .btn-container .primary-btn,
    #second-section .second-section-btn-container .primary-btn {
        flex: 0 0 auto !important; /* Don't grow or shrink */
    }
    
    /* FIX 2: TYPEWRITER TEXT START FROM LEFT */
    #intro-animated-text {
        height: 24rem;
        min-height: 24rem;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding-top: 1rem;
        color: #000000 !important;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    }
    
    /* Target the typewriter container specifically */
    #intro-animated-text .Typewriter {
        text-align: left;
        width: 100%;
    }
    
    /* FIX 3: BIG TEXT BOX TEXT LEFT ALIGNED */
    .large-Text {
        font-size: 4rem;
        width: 90%;
        line-height: 1.2;
        text-align: left !important;
    }
    
    .image-section {
        width: 100%;
        order: 2;
    }
    
    /* IMAGES - Keep as is */
    .image-section img {
        width: 20rem;
        max-width: 100%;
    }
    
    /* SECOND SECTION - FIX: Text box left aligned */
    #second-section {
        flex-direction: column;
        padding: 2rem 5%;
        gap: 2rem;
    }
    
    #second-section .image-section {
        width: 100%;
    }
    
    #second-section .image-section img {
        width: 20rem;
        max-width: 100%;
    }
    
    /* FIX 3 (CONTINUED): TEXT BOX UNDER PICTURE LEFT ALIGNED */
    .text-section {
        width: 90%;
        padding: 0;
        text-align: left !important;
    }
    
    /* Text inside text box - left aligned */
    .text-section p,
    .text-section .big-text,
    .text-section .highlighted-text,
    .text-section .list-circle,
    .text-section .small-text {
        text-align: left !important;
    }
    
    /* Force left alignment for all text in second section */
    #second-section .text-section * {
        text-align: left !important;
    }
    
    /* SECOND BUTTON - Keep as is */
    .second-section-btn-container {
        justify-content: flex-start;
        text-align: left;
    }
    
    /* THIRD SECTION - Keep as is */
    #third-section {
        padding: 2rem 5%;
    }
    
    .heading-text {
        font-size: 2.5rem;
        margin: 1rem 0 2rem 0;
        text-align: center;
    }
    
    .why-us-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .why-us-card {
        width: 75%;
        margin: 2rem 0;
        padding: 1.5rem;
        text-align: left;
    }
    
    .card-big-text {
        font-size: 1.6rem;
        text-align: center;
    }
    
    /* FOOTER - Keep your existing */
    #footer {
        padding: 1rem 0;
    }
    
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-section {
        margin: 2rem 0.5rem;
        width: 90%;
    }
    
    .footer-logo-section {
        width: 100%;
    }
    
    .footer-contact-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 6px;
    }
    
    .footer-contact-buttons .primary-btn {
        max-width: 85px;
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 70px;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    
    .footer-btn {
        width: 50%;
        max-width: 200px;
        margin-top: 12px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .footer-text-section {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-text-section p {
        font-size: 10px;
    }
    
    hr {
        margin: 1rem 0;
    }
}

/* SMALL MOBILE (500px and below) */
@media (max-width: 500px) {
    .large-Text {
        font-size: 3.2rem;
        text-align: left !important;
    }
    
    .heading-text {
        font-size: 2.2rem;
    }
    
    /* Index primary buttons - exact footer match */
    #first-section .primary-btn,
    #second-section .primary-btn,
    #third-section .primary-btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 65px !important;
        max-width: 80px !important;
    }
    
    #first-section .primary-btn-extra-padding,
    #second-section .primary-btn-extra-padding,
    #third-section .primary-btn-extra-padding {
        max-width: 85px !important;
    }
    
    .image-section img,
    #second-section .image-section img {
        width: 18rem;
    }
    
    .why-us-card {
        width: 85%;
        padding: 1.2rem;
    }
    
    .card-big-text {
        font-size: 1.4rem;
    }
    
    #intro-animated-text {
        height: 20rem;
        min-height: 20rem;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* EXTRA SMALL MOBILE (400px and below) */
@media (max-width: 400px) {
    .large-Text {
        font-size: 2.5rem;
        text-align: left !important;
    }
    
    .heading-text {
        font-size: 2rem;
    }
    
    /* Index primary buttons - exact footer match */
    #first-section .primary-btn,
    #second-section .primary-btn,
    #third-section .primary-btn {
        padding: 7px 9px !important;
        font-size: 12px !important;
        min-width: 60px !important;
        max-width: 75px !important;
    }
    
    #first-section .primary-btn-extra-padding,
    #second-section .primary-btn-extra-padding,
    #third-section .primary-btn-extra-padding {
        max-width: 80px !important;
    }
    
    .image-section img,
    #second-section .image-section img {
        width: 16rem;
    }
    
    .why-us-card {
        width: 90%;
        padding: 1rem;
    }
    
    .card-big-text {
        font-size: 1.3rem;
    }
    
    #intro-animated-text {
        height: 16rem;
        min-height: 16rem;
        align-items: flex-start;
        justify-content: flex-start;
    }
/* ========== SNEL TAXI ERMELO - MOBILE RESPONSIVE ========== */

/* MOBILE (700px and below) */
@media (max-width: 700px) {
    /* NAVBAR - Keep your existing */
    #navbar {
        padding: 0px 5px;
    }
    .nav-ul li {
        display: none;
    }
    #three-lines {
        display: block !important;
    }
    
    /* HERO SECTION - FIRST SECTION */
    #first-section {
        flex-direction: column;
        padding: 1rem 5%;
        gap: 1.5rem;
        min-height: auto;
    }
    
    .first-text-section {
        width: 90%;
        order: 1;
    }
    
    /* INDEX PRIMARY BUTTONS - EXACT FOOTER MATCH FOR MOBILE */
    #first-section .primary-btn,
    #second-section .primary-btn,
    #third-section .primary-btn {
        /* Exact match to .footer-contact-buttons .primary-btn */
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 70px !important;
        max-width: 85px !important;
        margin: 0 !important;
        border-radius: 6px !important;
        flex: 1 !important;
        text-align: center !important;
        
        /* Flex properties for exact match */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        
        /* Ensure same dimensions */
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    /* Extra padding version for mobile - smaller max-width */
    #first-section .primary-btn-extra-padding,
    #second-section .primary-btn-extra-padding,
    #third-section .primary-btn-extra-padding {
        padding: 8px 10px !important; /* Same as regular, not wider */
        max-width: 90px !important; /* Slightly wider for extra text */
    }
    
    /* Button containers - match footer layout */
    #first-section .btn-container,
    #second-section .second-section-btn-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important; /* Same as footer gap */
        margin: 15px 0 !important;
        width: 100% !important;
    }
    
    /* Ensure buttons don't grow */
    #first-section .btn-container .primary-btn,
    #second-section .second-section-btn-container .primary-btn {
        flex: 0 0 auto !important; /* Don't grow or shrink */
    }
    
    /* FIX 2: TYPEWRITER TEXT START FROM LEFT */
    #intro-animated-text {
        height: 24rem;
        min-height: 24rem;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding-top: 1rem;
        color: #000000 !important;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    }
    
    /* Target the typewriter container specifically */
    #intro-animated-text .Typewriter {
        text-align: left;
        width: 100%;
    }
    
    /* FIX 3: BIG TEXT BOX TEXT LEFT ALIGNED */
    .large-Text {
        font-size: 4rem;
        width: 90%;
        line-height: 1.2;
        text-align: left !important;
    }
    
    .image-section {
        width: 100%;
        order: 2;
    }
    
    /* IMAGES - Keep as is */
    .image-section img {
        width: 20rem;
        max-width: 100%;
    }
    
    /* SECOND SECTION - FIX: Text box left aligned */
    #second-section {
        flex-direction: column;
        padding: 2rem 5%;
        gap: 2rem;
    }
    
    #second-section .image-section {
        width: 100%;
    }
    
    #second-section .image-section img {
        width: 20rem;
        max-width: 100%;
    }
    
    /* FIX 3 (CONTINUED): TEXT BOX UNDER PICTURE LEFT ALIGNED */
    .text-section {
        width: 90%;
        padding: 0;
        text-align: left !important;
    }
    
    /* Text inside text box - left aligned */
    .text-section p,
    .text-section .big-text,
    .text-section .highlighted-text,
    .text-section .list-circle,
    .text-section .small-text {
        text-align: left !important;
    }
    
    /* Force left alignment for all text in second section */
    #second-section .text-section * {
        text-align: left !important;
    }
    
    /* SECOND BUTTON - Keep as is */
    .second-section-btn-container {
        justify-content: flex-start;
        text-align: left;
    }
    
    /* THIRD SECTION - Keep as is */
    #third-section {
        padding: 2rem 5%;
    }
    
    .heading-text {
        font-size: 2.5rem;
        margin: 1rem 0 2rem 0;
        text-align: center;
    }
    
    .why-us-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .why-us-card {
        width: 75%;
        margin: 2rem 0;
        padding: 1.5rem;
        text-align: left;
    }
    
    .card-big-text {
        font-size: 1.6rem;
        text-align: center;
    }
    
    /* FOOTER - Keep your existing */
    #footer {
        padding: 1rem 0;
    }
    
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-section {
        margin: 2rem 0.5rem;
        width: 90%;
    }
    
    .footer-logo-section {
        width: 100%;
    }
    
    .footer-contact-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 6px;
    }
    
    .footer-contact-buttons .primary-btn {
        max-width: 85px;
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 70px;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        background-color: #C5A028 !important;
        color: #000000 !important;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7) !important;
        font-family: 'Maven Pro', sans-serif !important;
        font-weight: bold !important;
    }
    
    .footer-btn {
        width: 50%;
        max-width: 200px;
        margin-top: 12px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .footer-text-section {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-text-section p {
        font-size: 10px;
    }
    
    hr {
        margin: 1rem 0;
    }
}

/* SMALL MOBILE (500px and below) */
@media (max-width: 500px) {
    .large-Text {
        font-size: 3.2rem;
        text-align: left !important;
    }
    
    .heading-text {
        font-size: 2.2rem;
    }
    
    /* Index primary buttons - exact footer match */
    #first-section .primary-btn,
    #second-section .primary-btn,
    #third-section .primary-btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 65px !important;
        max-width: 80px !important;
    }
    
    #first-section .primary-btn-extra-padding,
    #second-section .primary-btn-extra-padding,
    #third-section .primary-btn-extra-padding {
        max-width: 85px !important;
    }
    
    .image-section img,
    #second-section .image-section img {
        width: 18rem;
    }
    
    .why-us-card {
        width: 85%;
        padding: 1.2rem;
    }
    
    .card-big-text {
        font-size: 1.4rem;
    }
    
    #intro-animated-text {
        height: 20rem;
        min-height: 20rem;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* EXTRA SMALL MOBILE (400px and below) */
@media (max-width: 400px) {
    .large-Text {
        font-size: 2.5rem;
        text-align: left !important;
    }
    
    .heading-text {
        font-size: 2rem;
    }
    
    /* Index primary buttons - exact footer match */
    #first-section .primary-btn,
    #second-section .primary-btn,
    #third-section .primary-btn {
        padding: 7px 9px !important;
        font-size: 12px !important;
        min-width: 60px !important;
        max-width: 75px !important;
    }
    
    #first-section .primary-btn-extra-padding,
    #second-section .primary-btn-extra-padding,
    #third-section .primary-btn-extra-padding {
        max-width: 80px !important;
    }
    
    .image-section img,
    #second-section .image-section img {
        width: 16rem;
    }
    
    .why-us-card {
        width: 90%;
        padding: 1rem;
    }
    
    .card-big-text {
        font-size: 1.3rem;
    }
    
    #intro-animated-text {
        height: 16rem;
        min-height: 16rem;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* ========== FOOTER MOBILE FIXES ========== */
/* Added to fix footer spacing and alignment in mobile */
@media (max-width: 700px) {
    /* Reduce space between footer columns (Veluwe Regio and Airport) */
    .footer-section:not(:first-child) {
        margin-top: 0.8rem !important;
    }
    
    /* Reduce space after headings in footer sections */
    .footer-big-text {
        margin: 0.8rem 0 0.5rem 0 !important;
    }
    
    /* Reduce overall footer section padding */
    #footer {
        padding: 0.8rem 0 !important;
    }
    
    /* Reduce space between contact buttons and the button below */
    .footer-contact-buttons {
        margin: 8px 0 !important;
    }
    
    /* Reduce space before horizontal rule */
    hr {
        margin: 0.8rem 0 !important;
    }
    
    /* FIX: Center the KLM/Airport images in mobile footer */
    .footer-section-small-img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Center content in all footer sections */
    .footer-section {
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Specifically center images in the airport/lufthaven section */
    .footer-section:last-child img {
        margin: 5px auto !important;
        display: block !important;
    }
}