@media(max-width: 768px){
    /*Header & Navigation*/
    span{
        display: block;
        padding: 1rem;
        margin-top: .75rem;
        margin-left: 2rem;
        color: black;
    }
    
    .background{
        background-attachment: scroll;
    }

    .header{
        text-align: center;
        align-items: center;
    }
    .header button{
        display: none;
    }

    .header i{
        display: block;
        color: black;
        cursor: pointer;
        font-size: 1.5rem;
    }

    .navbar{
        height: 100%;
        width: 0;
        position: fixed;
        display: block !important;
        z-index: 1;
        left: 0;;
        top: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.9);
        overflow-x: hidden;
        margin-left: 0;
    }

    .navbar .nav{
        position: relative;
        top: 25%;
        display: block !important;
        width: 100%;
        text-align: center;
        margin-top: .25rem;
    }

    .navbar .nav a{
        text-decoration: none;
        font-size: 2rem;
        color: white !important;
        display: block;
        transition: .3s;
        padding: 1rem;
    }

    .navbar .nav a:hover{
        color: #696969 !important;
        background-color: transparent;
    }

    .navbar .closebtn{
        position: absolute;
        color: white;
        top: .5rem;
        right: .75rem;
        font-size:5rem;
        display: block;
        text-decoration: none;
        transition: .3s;
    }

    .navbar .closebtn:hover{
        color: #696969;
    }

    /*Heading Catcher*/
    .catchers-container{
        font-size: .75rem;
        gap: 3rem;
    }

    /*Offer*/
    .offer-container{
        display: block;
    }

    .offer-container .bubble-1{
        padding: .5rem;
    }

    .offer-container .bubble-2{
        margin-top: 2rem;
    }

    /*Seller*/
    .seller-container{
        display: block;
    }
    .seller-container .seller{
        margin-left: 4rem;
    }
    .seller-container img{
        margin-left: 2rem;
    }
    /*Programs*/
    .program .container{
        display: block;
    }

    /*Footer*/
    .footer .footer-container{
        display: block;
        text-align: center;
    }

    .footer .stamp img{
        height: auto;
        width: 24rem;
    }

    /*About*/
    .content-container{
        display: block;
        text-align:center;
    }
    .mission-container{
        display: block;
    }

    .mission-container img{
        margin-top: 0;
    }

    .meet-container .meet, .story{
        display: block;
    }

    .approach-container .accordion-container{
        width: auto;
    }

    /*Booking*/
    .process-container .process{
        display: block;
    }

    .bc-container .offer .offerings{
        display: block;

        .card{
            margin-bottom: 2rem;
        }
    }

    /*Date & Time*/
    .date-container .date_time{
        display: block;

        .calendar iframe{
            width: 20rem;
            height: 20rem;
        }
    }

    .date-container .operation{
        margin-left: 0;
    }

    .student-container .student .info{
        input{
            width: 20rem;
        }
    }

    /*Booking Section*/
    form{
        width: auto;
    }

    .booking-section iframe{
        width: auto;
    }

    /*FAQ*/
    .faq-container .accordion-container{
        width: auto;
    }

    /*Scholarship Page*/
    .about-scholar .grid{
        grid-template-columns: auto;
    }

    .about-scholarship .scholarship-cards{
        grid-template-columns: auto;
    }

    .requirements-container{
        display: block;

        .statement{
            padding-top: 0;
            padding: 1rem;
            margin-bottom: 2rem;
            margin-top: 0;
        }
    }
}