/* =========================================
   THE GOLDEN WAVE
   MOBILE RESPONSIVE STABILIZER
========================================= */

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}

/* =========================================
   GLOBAL MEDIA
========================================= */

img,
video,
iframe{
    max-width:100%;
    height:auto;
}

/* =========================================
   TABLE RESPONSIVE
========================================= */

table{
    width:100%;
}

.table-responsive,
.checkout-table-wrap{
    overflow-x:auto;
    width:100%;
}

/* =========================================
   INPUT FIXES
========================================= */

input,
select,
textarea,
button{
    max-width:100%;
    font-family:inherit;
}

.hero{
    min-height:100vh;
    height:auto;
    display:flex;
    align-items:center;
    position:relative;
    padding:120px 0 60px;
    overflow:hidden;
}

.hero .wrap{
    position:relative;
    z-index:5;
}



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

@media(max-width:768px){

    /* ==============================
       GLOBAL SPACING
    ============================== */

    body{
        overflow-x:hidden;
    }

    .wrap,
    .container,
    .main-container,
    .content-wrapper,
    .buy-package-wrapper,
    .role-container{
        width:100% !important;
        padding-left:15px !important;
        padding-right:15px !important;
    }

    /* ==============================
       HEADINGS
    ============================== */

    h1,
    .hero-title{
        font-size:34px !important;
        line-height:1.2 !important;
    }

    h2{
        font-size:26px !important;
        line-height:1.3 !important;
    }

    h3{
        font-size:22px !important;
    }

    p{
        line-height:1.7;
    }

    /* ==============================
       FLEX FIXES
    ============================== */

    .two-col,
    .auth-flex,
    .wallet-actions,
    .header-inner,
    .footer-inner,
    .features,
    .dashboard,
    .gift-input{
        flex-direction:column !important;
    }

    .wallet-actions,
    .gift-input{
        gap:12px !important;
    }

    /* ==============================
       AUTH PAGES
    ============================== */

    .auth-page,
    .page-wrap,
    .verify-wrapper{
        padding:90px 15px 40px !important;
    }

    .auth-card,
    .verify-box,
    .card,
    .success-box{
        width:100% !important;
        padding:24px 18px !important;
        border-radius:18px !important;
    }

    .auth-logo{
        height:80px !important;
    }

    .auth-title{
        font-size:24px !important;
    }

/* AUTH FLEX FIX */

.auth-flex{
    display:flex !important;
    flex-direction:column !important;
    gap:15px !important;
}

.auth-flex > div{
    width:100% !important;
}
    /* ==============================
       DASHBOARD
    ============================== */

    .dashboard{
        min-height:auto !important;
    }

    .main-content{
       
        padding:20px 15px !important;
    }

    .w-card,
    .p-card,
    .wallet-card,
    .checkout-card,
    .package-header{
        padding:20px !important;
        border-radius:18px !important;
    }

    /* ==============================
       GRID SYSTEMS
    ============================== */

    .role-grid,
    .categories,
    .comm-grid,
    .dashboard-grid{
        grid-template-columns:1fr !important;
    }

    /* ==============================
       PACKAGE PAGE
    ============================== */

    .sub-packages{
        padding:18px !important;
    }

    .role-card,
    .card,
    .sub-card{
        padding:20px !important;
    }

    /* ==============================
       TABLES
    ============================== */

    .txn-table,
    .checkout-table{
        min-width:700px;
    }

    /* ==============================
       BUTTONS
    ============================== */

    .btn,
    .btn-primary,
    .btn-gold,
    .auth-btn,
    .role-btn,
    .button,
    .success-btn,
    .verify-btn{
        width:100% !important;
        text-align:center;
    }

    /* ==============================
       NAVIGATION
    ============================== */

    .main-nav{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
        margin-top:15px;
    }

    .main-nav a{
        margin-left:0 !important;
    }

    /* ==============================
       HERO SECTION
    ============================== */

    .hero{
        height:auto !important;
        padding:80px 0 60px !important;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 48%, rgba(0,0,0,0.72) 100%),
            url("../image/home/home-hero-mobile.webp") center center / cover no-repeat;
    }

    .hero-title{
        font-size:42px !important;
    }

    .hero-sub{
        font-size:15px !important;
    }

    /* ==============================
       PROFILE PAGE
    ============================== */

    .profile-card img{
        width:90px !important;
        height:90px !important;
    }

    .upgrade-banner{
        padding:24px 18px !important;
    }

    /* ==============================
       ROLE PAGE
    ============================== */

    .role-page{
        padding:100px 15px 50px !important;
    }

    /* ==============================
       CHECKOUT
    ============================== */

    .checkout-wrap{
        padding:20px 0 !important;
    }

    .gift-input input,
    .crypto-select{
        width:100% !important;
        max-width:100% !important;
        min-width:auto !important;
    }

    /* ==============================
       BINARY TREE
    ============================== */

    .binary-tree-wrapper{
        overflow-x:auto !important;
    }


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

    .site-header{
        padding:12px 0;
    }

    .header-inner{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:15px;
    }

    .logo-box{
        flex-direction:column;
        text-align:center;
    }

    .logo-img{
        height:60px !important;
    }

    .logo-text{
        font-size:16px !important;
    }

    /* ==============================
       NAVIGATION
    ============================== */

    .main-nav{
        width:100%;
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center;
        gap:10px;
        margin-top:5px;
    }

    .main-nav a{
        margin-left:0 !important;
        font-size:14px;
        padding:8px 10px;
    }

    .login-btn{
        width:auto !important;
    }

    /* ==============================
       HERO SECTION
    ============================== */

/* ==============================
   HERO SECTION
============================== */



    .hero{
        min-height:85vh;
        padding:120px 20px 60px;
        text-align:center;
    }

    .hero-title{
        font-size:42px !important;
        line-height:1.15 !important;
    }

    .hero-sub{
        font-size:15px !important;
        line-height:1.7;
        margin-top:18px;
    }

    .hero .btn{
        width:100%;
        max-width:260px;
    }

    .hero::before{
        width:320px;
        height:320px;
        left:50%;
        top:10%;
        transform:translateX(-50%);
    }



    /* ==============================
       GENERAL SECTIONS
    ============================== */

    .section{
        padding:60px 0 !important;
    }

    .travel-box,
    .what-box,
    .course-card,
    .pricing-card,
    .legal-section,
    .contact-form-box,
    .contact-info{
        padding:22px !important;
        border-radius:18px !important;
        width:100% !important;
    }

    /* ==============================
       FEATURES SECTION
    ============================== */

    .features{
        display:flex;
        flex-direction:column !important;
        gap:20px !important;
    }

    .features-left,
    .what-box{
        width:100% !important;
        flex:unset !important;
    }

    /* ==============================
       ROLE PAGE
    ============================== */

    .role-header h1{
        font-size:32px !important;
    }

    .role-header p{
        font-size:14px !important;
        line-height:1.7;
    }

    /* ==============================
       PRICING PAGE
    ============================== */

    .pricing-grid{
        grid-template-columns:1fr !important;
    }

    .pricing-card{
        width:100% !important;
    }

    /* ==============================
       CONTACT PAGE
    ============================== */

    .contact-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:20px !important;
    }

    .contact-row input,
    .contact-row textarea{
        width:100% !important;
    }

    .contact-btn{
        width:100%;
    }

    /* ==============================
       LEGAL PAGES
    ============================== */

    .legal-content{
        grid-template-columns:1fr !important;
    }

    .legal-section{
        width:100% !important;
    }

    .legal-header h1,
    .legal-title{
        font-size:30px !important;
        line-height:1.3;
    }

    .legal-header p,
    .legal-section p,
    .legal-section li{
        font-size:14px !important;
        line-height:1.8;
    }

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

    .footer-inner{
        flex-direction:column !important;
        text-align:center;
        gap:25px !important;
    }

    .footer-links{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
    }

    .footer-links a{
        margin-right:0 !important;
    }


 .section{
        opacity:1 !important;
        transform:none !important;
        visibility:visible !important;
    }

    .section.show{
        opacity:1 !important;
        transform:none !important;
    }
	.hero,
    .section,
    .travel-box,
    .course-card,
    .what-box{
        transform:none !important;
    }
}
/* =========================================
   AFTER LOGIN RESPONSIVE
========================================= */

@media(max-width:768px){

    /* ==============================
       DASHBOARD LAYOUT
    ============================== */

    .dashboard{
        display:flex !important;
        flex-direction:column !important;
        min-height:auto !important;
    }

    .main-content{
        
        padding:20px 15px !important;
    }

    /* ==============================
       SIDEBAR
    ============================== */
    .nav{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:10px;
    }

    .nav a{
        width:auto !important;
        margin-bottom:0 !important;
        padding:10px 14px !important;
        font-size:13px !important;
    }

    /* ==============================
       CARDS
    ============================== */

    .w-card,
    .p-card,
    .wallet-card,
    .checkout-card,
    .package-header,
    .sub-packages{
        width:100% !important;
        padding:20px !important;
        border-radius:18px !important;
    }

    /* ==============================
       HEADERS
    ============================== */

    .header h1{
        font-size:28px !important;
        line-height:1.3;
    }

    .header p{
        font-size:14px !important;
    }

    /* ==============================
       WALLET ACTIONS
    ============================== */

    .wallet-actions{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
    }

    .wallet-actions .btn-primary{
        width:100% !important;
    }

    /* ==============================
       COMMISSION GRID
    ============================== */

    .comm-grid{
        grid-template-columns:1fr !important;
        gap:15px !important;
    }

    /* ==============================
       PACKAGE PAGE
    ============================== */

    .categories{
        grid-template-columns:1fr !important;
    }

    .sub-card{
        padding:18px !important;
    }

    /* ==============================
       TABLES
    ============================== */

    .txn-table,
    .checkout-table{
        min-width:700px;
    }

    .txn-table th,
    .txn-table td,
    .checkout-table th,
    .checkout-table td{
        padding:12px !important;
        font-size:13px !important;
    }

    /* ==============================
       BUTTONS
    ============================== */

    .btn-primary,
    .btn-gold,
    .button{
        width:100% !important;
        text-align:center;
    }

    /* ==============================
       PROFILE PAGE
    ============================== */

    .profile-card img{
        width:90px !important;
        height:90px !important;
    }

    .profile-card h2{
        font-size:24px !important;
    }

    /* ==============================
       UPGRADE BANNER
    ============================== */

    .upgrade-banner{
        padding:22px 18px !important;
    }

    .upgrade-content h2{
        font-size:24px !important;
    }

    /* ==============================
       LONG ADDRESSES
    ============================== */

    .wallet-address .address{
        word-break:break-word;
        font-size:12px;
    }


/* =========================================
   MOBILE SIDEBAR FIX
========================================= */

.sidebar{
    position:fixed !important;
    top:80px !important; /* same as mobile header height */
    left:-260px;
    width:260px !important;
    height:calc(100vh - 80px) !important;
    z-index:9998;
    transition:0.3s ease;
    overflow-y:auto;
}

.sidebar.active{
    left:0 !important;
}
.sidebar .brand{
    display:none !important;
}

/* MAIN CONTENT FULL WIDTH */
.main-content{
   
    margin-left:0 !important;
    padding:20px 15px !important;
}

/* REMOVE DESKTOP OFFSET */
.dashboard{
    display:block !important;
}

/* prevent horizontal scroll */
body{
    overflow-x:hidden !important;
}

}