@media (max-width:992px) {
    #slider h1 {
        font-size: 40px;
    }

    #slider p {
        font-size: 17px;
    }

    #header {
        padding: 12px 0px;
    }

    #header .nav li {
        padding: 0px;
    }

    #footer span {
        font-size: 14px;
    }

    #footer {
        padding: 16px;
    }
}

/* media query (768) for small screen desktop - laptops */
@media (max-width:768px) {
    #header .header-details {
        justify-content: space-between;

    }

    #header .header-details nav {
        position: absolute;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.425);
        height: 100vh;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        transition: all ease .3s;

    }

    #header .header-details nav.show {
        pointer-events: all;
        opacity: 1;

    }

    #header .header-details nav .nav {
        position: absolute;
        background-color: white;
        max-width: 450px;
        padding: 16px 0px;
        border-radius: 10px;
        width: 100%;

        transition: all ease .3s;
        left: 50%;
        top: 40%;
        transform: translate(-50% ,-50%);

    }

    #header .header-details nav.show .nav {
top: 50%;
    }

    #header .header-details nav ul li {
        width: 100%;
    }

    #header .header-details nav ul li:hover {
        background-color: #62B6E6;
        border-color: transparent !important;
    }

    #header .header-details nav ul li:hover>a {
        color: white;
    }

    #header .header-details nav ul li a {
        padding: 10px 20px;
        transition: all ease .1s;
        font-size: 14px;
    }
/*
    #header .header-details nav ul li {
        padding: 0px;
    } */

    #header .header-details .buttons .btn-2 {
        color: rgb(255, 255, 255);
    }

    #header .toggle {
        display: block !important;
    }

    #header .login-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-right: 8px;
    }

    #header .logo img {
        width: 120px;
    }

    #header .buttons .button {
        display: none;
    }

    #header .buttons {
        justify-content: center;
    }

    #header .drop-down .dropDownMenu {
        border-radius: 0 !important;
        padding: 0px !important;
        pointer-events: none !important;
        max-height: 0px;
        overflow: hidden;
        width: 100%;
        position: static !important;
        margin: 0px;
        box-shadow: none;
        transition: all ease .5s;

    }

    #header .drop-down:hover .dropDownMenu {
        pointer-events: all !important;
      max-height: 1000px;
        overflow: auto;


    }

    #header .buttons .button {
        display: none;
    }

    .closeMenuBtn {
        position: absolute;
        width: 32px;
        height: 32px;
        top: -10px;
        right: -10px;
        background-color: #62B6E6;
        box-shadow: 0px 0px 5px rgb(96, 94, 94);
    }

    /* */

    #slider h1 {
        font-size: 40px;
    }

    #slider p {
        font-size: 16px;
    }

    #slider {
        padding: 50px 0px;
    }

    #footer span {
        font-size: 12px;
    }

    #footer {
        padding: 14px;
    }
}








/* media query (576) for tablate n other high resolution mobiles */
@media (max-width:576px) {
    #slider h1 {
        font-size: 26px;
    }

    #slider p {
        font-size: 13px;
    }

    .paragraph {
        margin-bottom: 20px;
    }

    #slider {
        padding: 40px 0px;
    }
    #slider .new-course {
        font-size: 14px;
    }

    #latest-events {
        padding-bottom: 40px;
    }

    #categories {
        padding-bottom: 40px;
    }

    .section-padding {
        padding: 40px 0px;
    }

    #footer span {
        font-size: 10px;
    }

    #footer {
        padding: 12px;
    }

    .modal-signup-text {
        padding: 20px;
        position: absolute;
        background: white;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        border-radius: 5px;
    }


}

/* media query (420) for mobiles screen  */
@media (max-width:576px) {

}

/* media query (300) for small mobiles screen  */

@media (max-width:460px) {
    #header .header-details nav .nav {
        max-width: 90%;}
        .modal-content{
            margin: 0px !important;
        }
        .modal-login-text {
            padding: 0px;
        }
}