/* ============================================================
   MOBILE RESPONSIVE CSS - airmie.com
   Adds mobile-first responsive support to all main pages
   Added: 2026-04-04
   ============================================================ */

/* ============================================================
   MOBILE NAVIGATION (max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

    /* --- Header: hide normal nav, show hamburger --- */
    .header .row-middle,
    .header .row-right {
        display: none !important;
    }

    /* Hamburger button — visible only on mobile */
    .mobile-nav-toggle {
        display: block !important;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10001;
        padding: 0;
        outline: none;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #333;
        margin: 6px auto;
        transition: all 0.3s ease;
    }

    .mobile-nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .mobile-nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Mobile nav overlay */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: 10000;
        overflow-y: auto;
    }

    .mobile-nav-overlay.active {
        display: block;
    }

    .mobile-nav-menu {
        background: #fff;
        width: 85%;
        max-width: 320px;
        height: 100%;
        float: right;
        overflow-y: auto;
        padding: 0;
    }

    .mobile-nav-header {
        display: block !important;
        padding: 15px 25px 20px;
        border-bottom: 2px solid #f5a500;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    .mobile-nav-close {
        float: right;
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: #999;
        line-height: 1;
        padding: 0;
        margin-top: -3px;
    }

    .mobile-nav-menu .item {
        border-bottom: 1px solid #eee;
    }

    .mobile-nav-menu .item .aItem {
        display: block;
        float: none !important;
        height: auto !important;
        line-height: 50px !important;
        padding: 0 25px !important;
        font-size: 16px !important;
        color: #333 !important;
        border-bottom: none !important;
        text-align: left;
    }

    .mobile-nav-menu .item .aItem:hover {
        color: #f5a500 !important;
        background: #fafafa;
    }

    .mobile-nav-menu .moreNav {
        display: block !important;
    }

    .mobile-nav-menu .moreNav .item .aItem {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 44px !important;
        padding: 0 25px 0 40px !important;
    }

    /* --- Layout fixes --- */
    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .header {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* --- Content stacking --- */
    .itemContainer,
    .gridItem,
    .list .item,
    .row-main .item,
    .itemGroup,
    .infoGroup,
    .destion {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 15px !important;
    }

    .itemContainer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* --- Swiper carousels — full width --- */
    .swiper-container {
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .swiper-wrapper {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .swiper-slide {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 0 !important;
    }

    .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    .swiper-pagination,
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    /* --- Typography --- */
    .section-title,
    .destion .title,
    h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }

    .destion .description,
    .description {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 0 10px !important;
    }

    /* --- Buttons & forms --- */
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
        min-height: 40px;
    }

    input, textarea, select {
        font-size: 16px !important;
    }

    /* --- Footer --- */
    .footer {
        width: 100% !important;
        min-width: 0 !important;
        padding: 20px 10px !important;
    }

    /* --- Stats section --- */
    .numberGroup,
    .statGroup {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
    }

    .numberGroup .item,
    .statGroup .item {
        width: 50% !important;
        margin-bottom: 20px !important;
    }

    /* --- Action / CTA --- */
    .action {
        padding: 20px 10px !important;
    }

}

/* ============================================================
   TABLET (769px - 1024px)
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    .header .row-middle .mainNav .list .item .aItem {
        padding: 0 15px !important;
        font-size: 14px !important;
    }

    .itemContainer {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}

/* ============================================================
   DESKTOP — always hidden helpers
   ============================================================ */
.mobile-nav-toggle {
    display: none;
}

.mobile-nav-header {
    display: none;
}