/* ================================
   10. RESPONSIVE MEDIA QUERIES
   ================================ */

/* TABLET & MOBILE - 768px and below */
@media screen and (max-width: 768px) {
    /* Popup */
    .nkomonpopup {
        flex-direction: column;
        display: none !important;
        width: 350px;
    }

    .nkomonpopup img {
        width: auto;
    }

    .nkomonpopup img:not(:first-child) {
        margin-left: 0;
        margin-top: -100%;
    }

    /* Popup Overlay */
    .popup-overlay.active .popup-container {
        width: 95%;
    }

    .destinations-list {
        max-height: 50vh;
    }

    .popup-footer {
        flex-direction: column;
        text-align: center;
    }

    .footer-question {
        margin-right: 0;
        margin-bottom: 10px;
        justify-content: center;
    }

    /* Popupp */
    .popupp {
        margin: 20px;
    }

    .popupp-title {
        font-size: 24px;
        color: white;
    }

    .logo-text {
        font-size: 36px;
    }

    .africa-text {
        font-size: 18px;
    }

    /* Carousel */
    .hotel-card {
        flex: 0 0 100%;
    }

    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Destinations */
    .destinations-row.first,
    .destinations-row.second {
        grid-template-columns: 1fr;
    }

    .header h1 {
        font-size: 2rem;
    }

    .destination-name {
        font-size: 20px;
    }

    /* Hotel Cards NKZ */
    .hotel-card_nkz {
        min-width: 50%;
    }

    /* Offers */
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .offer-card-right {
        flex-direction: column;
        text-align: center;
    }

    .offer-image-small {
        margin-left: 0;
        margin-top: 20px;
    }

    .header h1 {
        font-size: 2rem;
    }

    .offer-title {
        font-size: 1.4rem;
    }

    .container {
        padding: 20px 15px;
    }

    .containernkm {
        padding: 20px 15px;
    }

    /* Title */
    .title_nkz {
        font-size: 24px;
        padding: 15px 30px;
    }

    /* App Download */
    .app-download-section {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .app-icon-container {
        margin-left: 0;
        margin-top: 30px;
    }

    .title {
        font-size: 2rem;
    }

    .title_google {
        font-size: 2rem;
    }

    .download-buttons {
        justify-content: center;
    }

    .download-btn {
        min-width: 140px;
    }

    /* Features */
    .nk-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 25px;
    }

    .nk-feature-icon {
        width: 50px;
        height: 50px;
    }

    .nk-feature-title {
        font-size: 14px;
    }

    /* Account */
    .account-card_nkz {
        padding: 30px 20px;
    }

    .account-title_nkz {
        font-size: 26px;
    }

    .account-subtitle_nkz {
        font-size: 18px;
    }

    .account-buttons_nkz {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .btn-connect_nkz,
    .btn-signup_nkz {
        text-align: center;
        width: 100%;
    }

    /* Gallery */
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }

    /* Forms */
    .col {
        width: 75%;
        margin-top: 0;
    }

    .vl {
        display: none;
    }

    .hide-md-lg {
        width: 200px;
        display: block;
        text-align: center;
    }
}

/* TABLET & DESKTOP - Between 769px and 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
    .hotel-card {
        flex: 0 0 50%;
    }

    .hotel-card_nkz {
        min-width: 50%;
    }
}

/* SMALL MOBILE - 500px and below */
@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

/* MOBILE - 480px and below */
@media (max-width: 480px) {
    /* Title */
    .title {
        font-size: 1.6rem;
    }

    .title_google {
        font-size: 1.6rem;
    }

    /* Description */
    .description {
        font-size: 1rem;
    }

    /* Download Buttons */
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }

    .download-btn {
        width: 100%;
        max-width: 180px;
    }

    /* Destinations */
    .destinations-row.second {
        grid-template-columns: 1fr;
    }

    /* Features Container */
    .nk-features-container {
        padding: 30px 20px;
    }

    .nk-features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Hotel Cards */
    .hotel-card_nkz {
        min-width: 100%;
    }
}

/* OVERLAY - Max height 450px */
@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px;
    }

    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/* FORMS - Max width 650px */
@media screen and (max-width: 650px) {
    .col {
        width: 75%;
        margin-top: 0;
    }

    .vl {
        display: none;
    }

    .hide-md-lg {
        width: 200px;
        display: block;
        text-align: center;
    }
}