/* Top Page Responsive */



@media screen and (max-width:1400px) {

    .hdr-bottom ul {

        gap: 20px;

    }

}



@media screen and (max-width:1300px) {

    .hdr-bottom ul {

        margin-right: 0;

    }





    .filter-options label {

        width: 23%;

    }





    .filter-options label {

        width: 23%;

    }



    .section-2 .news-section {

        width: 65%;

    }



    .lesson-ranking {

        width: 35%;

        max-width: 100%;

    }



    .hdr-bottom ul li a {

        font-size: 14px;

    }

}



@media screen and (max-width:1200px) {



    .hdr-bottom ul {

        gap: 10px;

        margin-right: 0;

    }



    .filter-options label span {

        font-size: 15px;

    }



    .btn-login,

    .btn-register,

    .btn-translate {

        width: 60px;

    }



    .hdr-bottom ul li a {

        font-size: 12px;

    }

    

}



@media screen and (max-width:1000px) {

    .hdr-top .txt-left {

        width: 100%;

        text-align: center;

        padding: 10px;

        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    }



    .hdr-top {

        flex-wrap: wrap;

    }



    .hdr-top-right {

        justify-content: space-between;

        width: 100%;

    }



    .hdr-top-right ul {

        margin-right: 0;

        padding-left: 10px;

    }



    .hdr-bottom ul {

        width: 100%;

    }



    .hdr-bottom {

        flex-wrap: wrap;

        gap:0;

        padding:0;

    }



    .hdr-bottom .main-logo {

        margin: 20px auto;

        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        padding-bottom: 20px;

    }



    .hdr-bottom ul.nav {

        margin: 20px auto;

        justify-content: center;

    }







}





@media (max-width: 1000px) {

    /* ================= MOBILE MENU STYLES ================= */

    

    .hdr-bottom.sp-only {display: flex!important;}

    .hdr-bottom.sp-only .main-logo {padding:0;margin:0;border-bottom: none;}

    .hdr-bottom.sp-only {padding:20px;}



    .btn-login,

    .btn-register,

    .btn-translate {

        width: 100%;

        border-radius: 5px;

        font-size: 12px;

        

    }





    .hdr-top-right ul li a {

        font-size: 10px;

    }



    .hdr-top-right ul {

        gap: 10px;

    }





    /* Mobile Menu */

    .mobile-meneu-hdr {

        background: rgba(0, 0, 0, 0.5);

        position: fixed;

        top: 0;

        right: 0;

        /* Keep right at 0 */

        width: 100%;

        height: 100%;

        z-index: 1000;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        opacity: 0;

        /* Make it invisible initially */

        visibility: hidden;

        /* Hide it when not active */

        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;

    }



    /* Mobile menu container */

    .mobile-menu-overlay {

        width: 320px;

        max-width: 100%;

        position: absolute;

        right: -100%;

        /* Start hidden */

        height: 100%;

        transition: right 0.7s ease-in-out;

        /* Smooth slide */

        z-index: 1000;

    }



    /* Show menu */

    .mobile-meneu-hdr.active {

        opacity: 1;

        visibility: visible;

    }



    .mobile-meneu-hdr.active .mobile-menu-overlay {

        right: 0;

        /* Slide menu into view */

    }



    /* Menu container */

    .mobile-menu {

        display: flex;

        flex-direction: column;

        height: 100%;

        background: #FAFAFA;

        padding: 20px;

        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);

        gap: 20px;

    }



    /* Smooth link effects */

    .mobile-menu ul li a {

        padding: 15px;

        font-size: 16px;

        text-align: center;

        display: block;

        border-radius: 10px;

        border: 1px solid var(--primary-color);

        color: var(--primary-color);

        margin-bottom: 10px;

        transition: background 0.3s ease, color 0.3s ease;

    }



    /* Hover effect */

    .mobile-menu ul li a:hover {

        background: #05A557;

        border: 1px solid #05A557;

        color: var(--color-white);

    }



    /* Header section */

    .menu-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        padding-bottom: 10px;

    }



    /* Logo */

    .menu-logo {

        width: 150px;

    }



    /* Close button */

    .close-btn {

        font-size: 18px;

        color: var(--primary-color);

        text-decoration: none;

        cursor: pointer;

        background: none;

        border: none;

        outline: none;

        padding: 10px;

    }



    /* Navigation list */

    .sp-nav {

        list-style: none;

    }



    .sp-nav li {

        margin-bottom: 10px;

    }



    .sp-nav li a {

        display: block;

        padding: 12px;

        background: #fff;

        color: #333;

        text-decoration: none;

        font-size: 16px;

        font-weight: bold;

        text-align: center;

        border-radius: 5px;

    }



    /* Hover effect */

    .sp-nav li a:hover {

        background: #e0c58b;

    }



    /* Hide Hamburger Button When Menu is Open */

    .mobile-menu-btn {

        font-size: 24px;

        top: 15px;

        right: 15px;

        background: var(--gradient1);

        color: #fff;

        padding: 10px 15px;

        border-radius: 5px;

        cursor: pointer;

        z-index: 1100;

        transition: opacity 0.3s ease-in-out;

    }



    /* Hide the hamburger button when the menu is active */

    .mobile-meneu-hdr.active~.mobile-menu-btn {

        display: none;

    }



        /* 

    

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



                    HERO AREA



    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



    */



    .hero {

        padding: 20px 15px;

    }



    .hero-cont {

        gap: 20px;

        flex-wrap: wrap;

        justify-content: center;

        flex-direction: row;

    }

    

    .featured-slider .slide-cont {

        flex-wrap: wrap;

        flex-direction: column;

        align-items: center;

    }



    .hero-right .article-info {

        width: 100%;

        max-width: 240px;

    }



    .featured-slider .slide {

        margin: 0 10px;

    }



    /* .hero-right .slick-slide img {

        width: 100% !important;

    } */



    .featured-slider {

             /* width: 100%; */

        height: initial; 

        overflow: initial!important;

    }

    .hero-left {

        height: auto;

    }



    /* .hero-right .slick-slide img {

        height: auto;

        width: 240px;

    }



    .hero-right .article-info {

        width: 200px;

        max-width: 100%;

    } */



    

        /* 

        

        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    

                        Filters 



        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    

        */





    .filters-cont {

        flex-direction: column;

    }



    .category-options,

    .level-options {

        gap: 0;

        flex-direction: column;

    }



    .filter-options {

        gap: 0;

    }



    .filters-cont .category-options {

        gap: 0;

        align-items: flex-start;

        flex-direction: row;

    }



    .filter-options label {

        width: 100%;

    }



    .filter-options label:last-of-type {

        border-bottom: none;

    }



    .sec-filters {

        padding:10px 20px 20px;

    }



    .filter-sp-label {

        padding: 17px;

    }



    /* 

    

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



                    SECTION 2



    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



    */



    .section-2 {

        padding:40px 20px 100px;

    }



    .section-2-cont {

        flex-wrap: wrap;

    }



    .section-2 .news-section {

        width: 100%;

    }



    .lesson-ranking {

        width: 100%;

    }



    .section-2 .news-articles .article {

        margin:0 10px;

    }



    .news-articles {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        padding: 10px 0;

    }



    .section-2 .category .more-btn {

        width: 40px;

        padding-left: 0;

        font-size: 0;

        padding: 0;

    }



    .section-2 .category .more-btn::before {

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .section-2 .category .section-title {

        margin-left: 0;

        padding-left: 0;

        display: block;

    }



    .section-2 .category .section-title::before {

        display: none;

    }



    .section-2 .category .section-title {

        font-size: 10px;

    }



    .lesson-ranking {

        padding-top: 50px;

        border-top: 4px solid rgba(0, 0, 0, 0.05);

        margin-top: 50px;

    }



    .section-2 .category .section-header h2 {

        margin-bottom: 5px;

    }    



    .section-2-cont {

        gap: 0;

    }



    .lesson-ranking h2 {

        margin-bottom: 50px;

    }



    .lesson-ranking .ranking-tabs .tab {

        line-height: 60px;

        padding: 0;

    }



    .lesson-ranking .ranking-list .rank-item .rank-content h3 {

        margin-bottom: 20px;

    }



    .lesson-ranking .ranking-tabs {

        margin-bottom: 20px;

    }





    /* 

    

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



                    FOOTER 



    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



    */





    .footer-logo {

        margin-bottom: 30px;

    }



    .site-footer {

        padding: 20px;

    }



    .footer-nav ul,

    .footer-categories ul {

        gap: 10px;

        flex-direction: column;

        align-content: start;

        text-align: left;

    }



    .footer-copy {

        margin-top: 30px;

    }



    .footer-categories {

        /* margin-top: 30px; */

    }



    

    .footer-nav ul {

        flex-direction: row;

        flex-wrap: wrap;

    }

    .footer-nav ul li {

        width: 48%;

    }

    .footer-nav ul li a {

        display: block;

        width: 100%;

        line-height:40px;

        border:1px solid var(--color-gray1);

        text-align: center;

        border-radius: 5px;

    }

    .footer-nav ul li a:hover {

        background: var(--color-gray1);

        color: var(--color-white);

    }



    .footer-categories ul {

        flex-direction: row;

        flex-wrap: wrap;

    }

    .footer-categories ul li {

        width: 32%;

    }

    .footer-categories ul li a {

        display: block;

        width: 100%;

        line-height:40px;

        border:1px solid var(--color-gray1);

        text-align: center;

        border-radius: 5px;

    }

    .footer-categories ul li a:hover {

        background: var(--color-gray1);

        color: var(--color-white);

    }



}



@media screen and (max-width:600px) {

    .hdr-top .txt-left {

        font-size: 12px;

        padding:15px;
		
		margin: 0 !important;

    }

    .hero-right .article-info {

        width: 100%;

        max-width: 100%;

    }



    .featured-slider .slide-cont {

        width: 240px;

        margin: 0 auto;

    }



    .filter-options label span {

        font-size: 16px;

    }

    .sec-filters .search-btn {

        margin-top: 10px;

    }



    .lesson-ranking {            

        margin: 50px auto 0;

    }





    

    .footer-nav ul {

        flex-direction: row;

        flex-wrap: wrap;

    }

    .footer-nav ul li {

        width: 48%;

    }

    .footer-nav ul li a {

        display: block;

        width: 100%;

        line-height:40px;

        border:1px solid var(--color-gray1);

        text-align: center;

        border-radius: 5px;

    }

    .footer-nav ul li a:hover {

        background: var(--color-gray1);

        color: var(--color-white);

    }



    .footer-categories ul {

        flex-direction: row;

        flex-wrap: wrap;

    }

    .footer-categories ul li a {

        display: block;

        width: 100%;

        line-height:40px;

        border:1px solid var(--color-gray1);

        text-align: center;

        border-radius: 5px;

    }

    .footer-categories ul li a:hover {

        background: var(--color-gray1);

        color: var(--color-white);

    }



    .footer-nav ul li {

        width: 100%;

    }



    .footer-categories {

        margin-top:0;

        /* padding-top: 20px; */

        padding-top: 0;

        border-top: none;

    }



    .footer-categories ul li {

        width: 100%;

    }

}



/* 



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



                MOBILE MENU



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



*/



/* Hide on larger screens */

@media screen and (min-width: 1001px) {

    .mobile-menu-btn {

        display: none;

    }

}