/* ==========================================
            LARGE LAPTOP
========================================== */

@media (max-width:1200px){

    header{

        padding:0 40px;

    }

    .hero{

        padding:60px;

    }

    .hero-left h1{

        font-size:48px;

        line-height:62px;

    }

}



/* ==========================================
            LAPTOP
========================================== */

@media (max-width:992px){

    header{

        padding:0 30px;

    }

    .logo span{

        font-size:20px;

    }

    .hero{

        flex-direction:column-reverse;

        text-align:center;

        padding:50px;

    }

    .hero-left{

        width:100%;

    }

    .hero-left p{

        max-width:100%;

    }

    .hero-right{

        width:100%;

    }

    .hero-right img{

        max-width:450px;

    }

    .module-container{

        grid-template-columns:1fr;

    }

}



/* ==========================================
            TABLET
========================================== */

@media (max-width:768px){

    header{

        height:auto;

        padding:20px;

        flex-direction:column;

        gap:20px;

    }

    .logo{

        flex-direction:column;

        text-align:center;

    }

    .logo span{

        font-size:18px;

    }

    .hero{

        margin-top:30px;

        padding:35px;

    }

    .hero-left h1{

        font-size:38px;

        line-height:50px;

    }

    .hero-left p{

        font-size:16px;

        line-height:30px;

    }

    .hero-left button{

        width:100%;

    }

    .module-title h2{

        font-size:34px;

    }

    .module-title p{

        font-size:16px;

    }

    .features{

        grid-template-columns:1fr;

    }

}



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

@media (max-width:576px){

    .hero{

        padding:25px;

        border-radius:20px;

    }

    .badge{

        font-size:12px;

        padding:8px 18px;

    }

    .hero-left h1{

        font-size:30px;

        line-height:42px;

    }

    .hero-left p{

        font-size:15px;

        line-height:28px;

    }

    .hero-left button{

        padding:15px 25px;

        font-size:15px;

    }

    .profile{

        width:100%;

        justify-content:center;

    }

    .module-title{

        margin-top:50px;

    }

    .module-title h2{

        font-size:28px;

    }

    .feature{

        padding:30px;

    }

}
@media(max-width:992px){

.featured-card{

    flex-direction:column;

}

.featured-left{

    width:100%;

}

.featured-right{

    width:100%;

}

.feature-list{

    grid-template-columns:1fr;

}

}
@media(max-width:992px){

.stats{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.stats{

grid-template-columns:1fr;

}

}
@media(max-width:992px){

.coming-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.coming-grid{

grid-template-columns:1fr;

}

}
@media(max-width:992px){

    .module-container{

        grid-template-columns:1fr;

    }

}
/* ===========================================
   MODULE CARD RESPONSIVE FIX
=========================================== */

.module-container {
    display: grid;
    width: 90%;
    max-width: 1400px;
    margin: 40px auto 90px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
    align-items: stretch;
}

.featured-card {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 450px;
    align-items: stretch;
    overflow: visible;
    box-sizing: border-box;
}

.featured-left {
    min-width: 0;
    box-sizing: border-box;
}

.featured-right {
    width: 60%;
    min-width: 0;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
}

.dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 5;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
}

/* Tablet: preserve horizontal card layout */
@media (min-width: 577px) and (max-width: 992px) {
    .module-container {
        grid-template-columns: minmax(0, 1fr);
        width: 92%;
        gap: 28px;
    }

    .featured-card {
        flex-direction: row;
        min-height: 380px;
    }

    .featured-left {
        width: 35%;
        min-height: 380px;
        height: auto;
        flex-shrink: 0;
    }

    .featured-right {
        width: 65%;
        padding: 24px;
    }

    .feature-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dashboard-btn {
        margin-top: 24px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .module-container {
        grid-template-columns: minmax(0, 1fr);
        width: 92%;
        gap: 24px;
    }

    .featured-card {
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .featured-left {
        width: 100%;
        height: 210px;
        min-height: 210px;
        flex-shrink: 0;
    }

    .featured-right {
        width: 100%;
        height: auto;
        padding: 22px;
        overflow: visible;
    }

    .feature-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dashboard-btn {
        display: flex;
        width: 100%;
        margin-top: 22px;
        padding: 15px 18px;
        font-size: 16px;
        white-space: normal;
    }
}
}