body {
    margin: 0;
    padding: 0;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Poppins',sans-serif;
    overflow: hidden;
}

.dash-page {
    position: relative;
    width: 100%;
    max-width: 390px; /* Mobile width */
    height: 844px; /* iPhone style height */
    background: #111;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 90px; /* footer er jonno space */
    border: 1px solid #00D4FF;
    /* border-radius: 30px; */
}
.logo-section {
    text-align: center;
    margin-bottom: 30px;
}

    .logo-section img {
        width: 100px;
    }

.menu-card {
    background: #1a1a1a;
    border-radius: 20px;
    padding: 85px 15px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: .3s;
    /* Emboss Effect */
    box-shadow: -6px -6px 12px rgba(255,255,255,0.05), 6px 6px 12px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.03);
}

    .menu-card:hover {
        transform: translateY(-3px);
        box-shadow: -8px -8px 15px rgba(255,255,255,0.06), 8px 8px 15px rgba(0,0,0,0.9);
    }

    .menu-card i {
        font-size: 38px;
        display: block;
        margin-bottom: 10px;
        color: #fff;
    }

    .menu-card h6 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
    }

    .menu-card i {
        font-size: 32px;
        display: block;
        margin-bottom: 10px;
    }

    .menu-card h6 {
        margin: 0;
        font-size: 15px;
    }

.trading-card {
    position: relative;
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
    background: url('img/trade1.jpg') center center/cover no-repeat;
}

    .trading-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

    .trading-card .card-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .trading-card i {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .trading-card h6 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.course-card {
    position: relative;
    height: 50px;
    border-radius: 20px;
    overflow: hidden;
    background: url('img/favicon.png') center center/cover no-repeat;
}

    .course-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.45);
    }

    .course-card .card-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .course-card i {
        font-size: 40px;
        margin-bottom: 10px;
    }

.crypto-card {
    position: relative;
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
    background: url('img/crypto.jpg') center center/cover no-repeat;
}

    .crypto-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.55);
    }

    .crypto-card .card-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .crypto-card i {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .crypto-card h6 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.forex-card {
    position: relative;
    height: 180px;
    border-radius: 15px;
    overflow: hidden;
    /* Background Image */
    background: url('img/forex.jpg') center center/cover no-repeat;
}

    .forex-card .overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55); /* overlay darkness */
        z-index: 1;
    }

    .forex-card .card-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .forex-card i {
        font-size: 40px;
        margin-bottom: 10px;
    }

.crypto-card {
    border: 1px solid #00D4FF;
}

.forex-card {
    border: 1px solid #00FF88;
}

.trading-card {
    border: 1px solid #00D4FF;
}

.course-card {
    border: 1px solid #00FF88;
}
/* Mobile Screen */
.mobile-frame {
    width: 390px;
    max-width: 100%;
    height: 100vh; /* fixed 844px এর বদলে */
    max-height: 844px;
    background: #151515;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #00D4FF;
    box-shadow: 0 0 30px rgba(0, 0, 0, .8), inset 2px 2px 5px rgba(255, 255, 255, .05), inset -2px -2px 5px rgba(0, 0, 0, .8);
}

    /* Hide Scrollbar */
    .mobile-frame::-webkit-scrollbar {
        width: 0;
    }

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid gray;
    min-height: 60px;
    margin-bottom: 10px;
}

    .app-header img {
        width: 60px;
        margin-bottom: 10px;
    }

    .app-header i {
        color: #fff;
        font-size: 28px;
    }

.dash-page {
    position: relative;
    width: 100%;
    max-width: 390px;
    height: 844px;
    background: #111;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 90px;
    border: 1px solid #00D4FF;
}

.bottom-nav{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #121826;
    margin-bottom:100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom-nav .nav-item{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #bdbdbd;
    font-size: 11px;
    transition: .3s;
}

.bottom-nav .nav-item i{
    font-size: 22px;
    margin-bottom: 4px;
}

.bottom-nav .nav-item.active,
.bottom-nav .nav-item{
    color: #FFD700;
}

#loader-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity .6s ease;
}

.loader-content{
    text-align: center;
    color: #fff;
}

.loader-content img{
    width: 120px;
    height: auto;
    animation: zoomLogo 1.2s ease-in-out;
}

.loader-content h4{
    margin-top: 15px;
}

@keyframes zoomLogo{
    0%{
        transform: scale(.5);
        opacity:0;
    }
    100%{
        transform: scale(1);
        opacity:1;
    }
}

.hide-loader{
    opacity:0;
    pointer-events:none;
}