/* =========================
   GLOBAL MOBILE RESPONSIVE
========================= */

*{
    box-sizing:border-box;
}

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

/* =========================
   IMAGES
========================= */

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

/* =========================
   CONTAINERS
========================= */

.container,
.container-fluid{
    width:100% !important;
}

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

.table-responsive{
    overflow-x:auto;
}

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

@media(max-width:768px){

    body{
        font-size:14px !important;
        padding:0 !important;
        margin:0 !important;
    }

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

    h1{
        font-size:28px !important;
    }

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

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

    h4,
    h5,
    h6{
        font-size:18px !important;
    }

    /* =========================
       CONTAINERS
    ========================= */

    .container,
    .container-fluid{
        padding-left:10px !important;
        padding-right:10px !important;
    }

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

    .card{
        width:100% !important;
        margin-bottom:15px !important;
    }

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

    .btn{
        width:100%;
        margin-bottom:10px;
        font-size:15px !important;
    }

    /* =========================
       FORMS
    ========================= */

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

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

    table{
        font-size:12px !important;
    }

    /* =========================
       NAVBAR MOBILE FIX
    ========================= */

    nav{
        flex-direction:column !important;
        gap:15px;
        padding:10px !important;
    }

    nav ul{
        flex-direction:column !important;
        width:100%;
        text-align:center;
        gap:12px !important;
        padding:0 !important;
        margin:0 !important;
    }

    nav ul li{
        width:100%;
        list-style:none;
    }

    nav ul li a{
        display:block;
        width:100%;
        padding:10px;
    }

    /* =========================
       EXAM PAGE
    ========================= */

    .question-box{
        font-size:22px !important;
    }

    .option-btn,
    .option-box,
    .answer-option{
        width:100% !important;
        display:block;
        margin-bottom:10px;
        font-size:15px !important;
    }

    /* =========================
       FLEX LAYOUT
    ========================= */

    .d-flex{
        flex-direction:column !important;
    }

    /* =========================
       ROW COLUMNS
    ========================= */

    .row > div{
        width:100% !important;
        margin-bottom:15px;
    }

}

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

@media(max-width:480px){

    h1{
        font-size:24px !important;
    }

    h2{
        font-size:20px !important;
    }

    .btn{
        font-size:14px !important;
        padding:10px !important;
    }

    nav{
        padding:5px !important;
    }

}
/* =========================
   EXAM PAGE MOBILE FIX
========================= */

@media(max-width:768px){

    .question-container{
        padding:15px !important;
    }

    #q-text{
        font-size:18px !important;
        line-height:1.5;
    }

    .opt-label{
        font-size:15px !important;
        padding:14px !important;
    }

    #timer{
        font-size:18px !important;
        padding:8px 12px !important;
    }

    button{
        width:100% !important;
        margin-bottom:10px !important;
    }

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

    .pay-card{
        margin:10px auto !important;
        padding:15px !important;
    }

    .student-bar{
        flex-direction:column !important;
        gap:10px;
        text-align:center;
    }

}