/* =========================================================
   EURAS HUB
   MOBILE SYSTEM
   ========================================================= */

.mobile-header {
    display: none;
}

/* =========================================================
   MOBILE ONLY
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       DESKTOP HEADER OFF
       ===================================================== */

    .site-header {
        display: none;
    }

    /* =====================================================
       MOBILE HEADER
       ===================================================== */

    .mobile-header {

        display: flex;

        position: fixed;

        top: 0;
        left: 0;

        width: 100%;

        height: 72px;

        background: rgba(20,20,20,0.96);

        z-index: 99999;

        align-items: center;

        justify-content: space-between;

        padding: 0 20px;

        border-bottom: 1px solid rgba(255,255,255,0.08);

        backdrop-filter: blur(8px);

    }

    .mobile-logo img {

        height: 42px;
        width: auto;

    }

    /* =====================================================
       HAMBURGER
       ===================================================== */

    .mobile-toggle {

        width: 32px;

        cursor: pointer;

    }

    .mobile-toggle span {

        display: block;

        width: 100%;
        height: 3px;

        background: #ffffff;

        margin: 6px 0;

        transition: 0.3s ease;

    }

    /* =====================================================
       MOBILE MENU
       ===================================================== */

    .mobile-menu {

        position: fixed;

        top: 72px;
        left: 0;

        width: 100%;

        background: #1f1f1f;

        display: none;

        flex-direction: column;

        padding: 30px 0;

        z-index: 99998;

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

    }

    .mobile-menu.active {

        display: flex;

    }

    .mobile-menu a {

        color: #ffffff;

        text-align: center;

        padding: 18px 0;

        text-transform: uppercase;

        letter-spacing: 1px;

        font-size: 16px;

        border-bottom: 1px solid rgba(255,255,255,0.04);

    }

    .mobile-menu a:hover,
    .mobile-menu a.active-link {

        color: #f79d20;

    }

    /* =====================================================
       HERO MOBILE
       ===================================================== */

    .hero-section {

        min-height: 70vh;

        padding-top: 72px;

    }

    .hero-content {

        padding-top: 40px;

    }

    .hero-content h1 {

        font-size: 22px;

        line-height: 1.15;

        max-width: 100%;

    }

    .hero-content p {

        font-size: 15px;

        line-height: 1.6;

        max-width: 100%;

    }

    /* =====================================================
       CONTENT
       ===================================================== */

    .main-content,
    .special-section {

        padding: 60px 0;

    }

    .main-content h2,
    .special-container h2 {

        font-size: 30px;

    }

    .main-content p,
    .special-container p {

        font-size: 16px;

    }

    /* =====================================================
       SIMPLE FOOTER
       ===================================================== */

    footer.simple-footer {

        display: block !important;

        width: 100% !important;

        padding: 18px 12px !important;

        text-align: center !important;

        box-sizing: border-box !important;

    }

    footer.simple-footer p {

        display: block !important;

        width: 100% !important;

        margin: 4px 0 !important;

        padding: 0 !important;

        text-align: center !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

    }

}