/* =========================================================
   RADIANT EDUCATION
   COMPLETE RESPONSIVE CSS
   CLEAN + RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   1200px
========================================================= */

@media (max-width:1200px){

    .container{
        width:92%;
    }

    .about-home-container,
    .about-container,
    .enroll-container{
        width:92%;
        gap:50px;
    }

    .courses-container,
    .healthcare-container,
    .collaboration-container,
    .testimonial-container{
        width:92%;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:1600 / 481;
        overflow:hidden;
        margin:0;
        padding:0;
    }

    .hero-slides{
        width:100%;
        height:100%;
        position:relative;
    }

    .hero-slide{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    .hero-slide img{
        width:100%;
        height:100%;
        display:block;
        object-fit:fill;
        object-position:center;
    }


    /* =====================================================
       COURSE SLIDER
    ===================================================== */

    .course-slider-wrapper{
        width:100%;
        padding:0 45px;
        position:relative;
    }

    .course-slider{
        width:100%;
        overflow:hidden;
    }

    .course-track{
        display:flex;
        gap:24px;
        width:100%;
        transition:transform .5s ease;
        will-change:transform;
    }

    .course-card{
        flex:0 0 calc((100% - 48px) / 3);
        min-width:0;
        max-width:none;
    }

    .course-image{
        width:100%;
        height:210px;
        overflow:hidden;
    }

    .course-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }

    .course-content{
        padding:21px;
    }

    .course-content h3{
        font-size:17px;
        line-height:1.45;
    }

    .course-content p{
        font-size:12.5px;
        line-height:1.7;
    }

    .slider-btn{
        width:42px;
        height:42px;
        z-index:20;
    }

    .slider-prev{
        left:0;
    }

    .slider-next{
        right:0;
    }


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

    .about-home-content h2,
    .about-content h2{
        font-size:40px;
    }

    .courses-heading h2,
    .collaboration-heading h2,
    .healthcare-heading h2,
    .testimonial-heading h2{
        font-size:38px;
    }

    .enroll-content-box h2{
        font-size:40px;
    }

}


/* =========================================================
   TABLET
   991px
========================================================= */

@media (max-width:991px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .container{
        width:92%;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:1600 / 481;
        overflow:hidden;
        margin:0;
        padding:0;
    }

    .hero-slides{
        width:100%;
        height:100%;
        position:relative;
        margin:0;
        padding:0;
    }

    .hero-slide{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    .hero-slide img{
        display:block;
        width:100%;
        height:100%;
        min-width:0;
        max-width:none;
        object-fit:fill;
        object-position:center;
        margin:0;
        padding:0;
    }

    .hero-prev,
    .hero-next{
        width:42px;
        height:42px;
    }

    .hero-prev{
        left:15px;
    }

    .hero-next{
        right:15px;
    }

    .hero-dots{
        bottom:15px;
    }


    /* =====================================================
       FEATURE
    ===================================================== */

    .feature-section{
        margin-top:30px;
    }

    .feature-container{
        width:92%;
        grid-template-columns:repeat(2,1fr);
    }

    .feature-card{
        min-height:165px;
        padding:28px 20px;
    }

    .feature-card:nth-child(2),
    .feature-card:nth-child(4){
        border-right:0;
    }

    .feature-card:nth-child(-n+2){
        border-bottom:1px solid #e9efed;
    }


    /* =====================================================
       ABOUT HOME
    ===================================================== */

    .about-home-section{
        padding:90px 0;
    }

    .about-home-container{
        width:92%;
        grid-template-columns:1fr;
        gap:55px;
    }

    .about-home-images{
        width:100%;
        max-width:700px;
        margin:auto;
    }

    .about-home-content{
        width:100%;
        max-width:100%;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-section{
        padding:90px 0;
    }

    .about-container{
        width:92%;
        grid-template-columns:1fr;
        gap:55px;
    }

    .about-gallery{
        width:100%;
        max-width:700px;
        margin:auto;
    }


    /* =====================================================
       COURSE SLIDER
    ===================================================== */

    .courses-section{
        padding:90px 0;
    }

    .courses-container{
        width:92%;
    }

    .course-slider-wrapper{
        width:100%;
        padding:0 40px;
        position:relative;
    }

    .course-slider{
        width:100%;
        overflow:hidden;
    }

    .course-track{
        display:flex;
        gap:20px;
        width:100%;
    }

    .course-card{
        flex:0 0 calc((100% - 20px) / 2);
        min-width:0;
        max-width:none;
    }

    .course-image{
        width:100%;
        height:215px;
    }

    .course-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }

    .course-content{
        padding:20px;
    }

    .course-content h3{
        font-size:17px;
        line-height:1.45;
        min-height:auto;
    }

    .course-content p{
        font-size:12px;
        line-height:1.7;
        min-height:auto;
    }

    .slider-btn{
        width:38px;
        height:38px;
        z-index:30;
        top:50%;
        transform:translateY(-50%);
    }

    .slider-btn:hover{
        transform:translateY(-50%);
    }

    .slider-prev{
        left:0;
    }

    .slider-next{
        right:0;
    }

    .course-dots{
        margin-top:25px;
    }


    /* =====================================================
       HEALTHCARE
    ===================================================== */

    .healthcare-section{
        padding:90px 0;
    }

    .healthcare-container{
        width:92%;
    }

    .healthcare-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }


    /* =====================================================
       ENROLL
    ===================================================== */

    .enroll-section{
        padding:90px 0;
    }

    .enroll-container{
        width:92%;
        grid-template-columns:1fr;
        gap:55px;
    }

    .enroll-form-box{
        width:100%;
        max-width:700px;
        margin:auto;
    }

    .enroll-content-box{
        width:100%;
        max-width:700px;
        margin:auto;
    }


    /* =====================================================
       COLLABORATION
    ===================================================== */

    .collaboration-section{
        padding:90px 0;
    }

    .university-list{
        grid-template-columns:repeat(3,1fr);
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .testimonial-section{
        padding:90px 0;
    }

    .testimonial-card{
        flex:0 0 100%;
    }

}


/* =========================================================
   TABLET PORTRAIT
   800px
========================================================= */

@media (max-width:800px){

    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider{
        width:100%;
        height:auto !important;
        aspect-ratio:1600 / 481;
        min-height:0 !important;
        max-height:none !important;
    }

    .hero-slide img{
        width:100%;
        height:100%;
        object-fit:fill;
        object-position:center;
    }

    .hero-prev,
    .hero-next{
        width:38px;
        height:38px;
    }


    /* =====================================================
       COURSE
    ===================================================== */

    .course-slider-wrapper{
        padding:0 36px;
    }

    .course-track{
        gap:16px;
    }

    .course-card{
        flex:0 0 100%;
        min-width:100%;
        max-width:100%;
    }

    .course-image{
        height:220px;
    }

    .course-content{
        padding:20px;
    }

    .slider-btn{
        width:36px;
        height:36px;
    }

    .slider-prev{
        left:0;
    }

    .slider-next{
        right:0;
    }


    /* =====================================================
       UNIVERSITY
    ===================================================== */

    .university-list{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =========================================================
   MOBILE
   640px
========================================================= */

@media (max-width:640px){

    body{
        width:100%;
        overflow-x:hidden;
    }

    .container,
    .courses-container,
    .healthcare-container,
    .collaboration-container,
    .testimonial-container,
    .about-home-container,
    .about-container,
    .enroll-container{
        width:92%;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:1600 / 481;
        overflow:hidden;
        margin:0;
        padding:0;
    }

    .hero-slides{
        width:100%;
        height:100%;
    }

    .hero-slide{
        width:100%;
        height:100%;
    }

    .hero-slide img{
        display:block;
        width:100%;
        height:100%;
        min-width:0;
        max-width:none;
        object-fit:fill;
        object-position:center;
        margin:0;
        padding:0;
    }

    .hero-prev,
    .hero-next{
        width:32px;
        height:32px;
        font-size:10px;
    }

    .hero-prev{
        left:8px;
    }

    .hero-next{
        right:8px;
    }

    .hero-dots{
        bottom:8px;
        gap:5px;
    }

    .hero-dot{
        width:7px;
        height:7px;
    }

    .hero-dot.active{
        width:21px;
    }


    /* =====================================================
       FEATURE
    ===================================================== */

    .feature-section{
        margin-top:0;
        padding-bottom:15px;
    }

    .feature-container{
        width:92%;
        grid-template-columns:1fr;
        border-radius:12px;
        margin-top:20px;
    }

    .feature-card{
        min-height:140px;
        padding:24px 18px;
        border-right:0 !important;
        border-bottom:1px solid #e9efed;
    }

    .feature-card:last-child{
        border-bottom:0;
    }


    /* =====================================================
       ABOUT HOME
    ===================================================== */

    .about-home-section{
        padding:65px 0;
    }

    .about-home-container{
        width:92%;
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-home-images{
        min-height:350px;
    }

    .about-image-main{
        width:82%;
        height:300px;
    }

    .about-image-second{
        width:50%;
        height:170px;
    }

    .about-home-content h2,
    .about-content h2{
        font-size:29px;
    }


    /* =====================================================
       NOTICE
    ===================================================== */

    .notice-bar{
        height:46px;
    }

    .notice-bar .container{
        width:94%;
    }

    .notice-badge{
        padding:5px 10px;
        font-size:9px;
    }

    .notice-bar marquee{
        margin-left:8px;
        font-size:10px;
    }


    /* =====================================================
       MAIN ABOUT
    ===================================================== */

    .about-section{
        padding:65px 0;
    }

    .about-container{
        width:92%;
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-top-images{
        gap:10px;
    }

    .about-small-image{
        height:150px;
    }

    .about-large-image{
        height:245px;
    }

    .about-text p{
        font-size:12px;
        line-height:1.75;
    }


    /* =====================================================
       COURSE SLIDER — MOBILE
    ===================================================== */

    .courses-section{
        padding:65px 0;
    }

    .courses-container{
        width:92%;
    }

    .courses-heading{
        margin-bottom:30px;
    }

    .courses-heading h2{
        font-size:29px;
    }

    .courses-heading p{
        font-size:12px;
        line-height:1.7;
    }

    .course-tabs{
        gap:7px;
        margin-bottom:30px;
    }

    .course-tab{
        padding:9px 13px;
        font-size:9px;
    }


    /*
       IMPORTANT:
       Slider wrapper gives arrows their own space.
       Card itself stays 100% of slider window.
    */

    .course-slider-wrapper{
        width:100%;
        padding:0 28px;
        position:relative;
    }

    .course-slider{
        width:100%;
        overflow:hidden;
        border-radius:12px;
    }

    .course-track{
        display:flex;
        gap:0;
        width:100%;
        transition:transform .5s ease;
        will-change:transform;
    }

    .course-card{
        flex:0 0 100%;
        width:100%;
        min-width:100%;
        max-width:100%;
        margin:0;
        border-radius:12px;
        overflow:hidden;
    }

    .course-image{
        width:100%;
        height:195px;
        overflow:hidden;
    }

    .course-image img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }

    .course-content{
        padding:18px;
    }

    .course-content h3{
        font-size:16px;
        line-height:1.45;
        min-height:auto;
        margin-bottom:10px;
    }

    .course-content p{
        font-size:12px;
        line-height:1.7;
        min-height:auto;
        margin-bottom:0;
    }

    .course-line{
        width:100%;
        margin:15px 0;
    }

    .enquiry-btn{
        padding:9px 15px;
        font-size:10px;
    }


    /* MOBILE ARROWS */

    .slider-btn{
        width:34px;
        height:34px;
        font-size:10px;
        z-index:50;
        top:50%;
        transform:translateY(-50%);
    }

    .slider-btn:hover{
        transform:translateY(-50%);
    }

    .slider-prev{
        left:-2px;
    }

    .slider-next{
        right:-2px;
    }


    /* MOBILE DOTS */

    .course-dots{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:6px;
        margin-top:22px;
    }

    .course-dots button{
        width:7px;
        height:7px;
    }

    .course-dots button.active{
        width:22px;
    }


    /* =====================================================
       HEALTHCARE
    ===================================================== */

    .healthcare-section{
        padding:65px 0;
    }

    .healthcare-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .healthcare-image{
        height:205px;
    }

    .healthcare-content{
        padding:19px;
    }


    /* =====================================================
       ENROLL
    ===================================================== */

    .enroll-section{
        padding:65px 0;
    }

    .enroll-container{
        width:92%;
        grid-template-columns:1fr;
        gap:45px;
    }

    .enroll-form-box{
        padding:25px 20px;
    }

    .enroll-content-box h2{
        font-size:30px;
    }


    /* =====================================================
       COLLABORATION
    ===================================================== */

    .collaboration-section{
        padding:65px 0;
    }

    .university-list{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .university-card{
        height:105px;
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .testimonial-section{
        padding:65px 0;
        min-height:auto;
    }

    .testimonial-slider{
        padding:0 35px;
    }

    .testimonial-card{
        flex:0 0 100%;
        min-height:270px;
        padding:22px;
    }

}


/* =========================================================
   SMALL MOBILE
   480px
========================================================= */

@media (max-width:480px){

    .container,
    .courses-container,
    .healthcare-container,
    .collaboration-container,
    .testimonial-container,
    .about-home-container,
    .about-container,
    .enroll-container{
        width:94%;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:1600 / 481;
    }

    .hero-slide img{
        width:100%;
        height:100%;
        object-fit:fill;
        object-position:center;
    }


    /* =====================================================
       COURSE SLIDER
    ===================================================== */

    .courses-container{
        width:94%;
    }

    .course-slider-wrapper{
        padding:0 25px;
    }

    .course-slider{
        width:100%;
    }

    .course-track{
        gap:0;
    }

    .course-card{
        flex:0 0 100%;
        width:100%;
        min-width:100%;
        max-width:100%;
    }

    .course-image{
        height:180px;
    }

    .course-content{
        padding:17px;
    }

    .course-content h3{
        font-size:15px;
    }

    .course-content p{
        font-size:11px;
    }

    .slider-btn{
        width:30px;
        height:30px;
        font-size:9px;
    }

    .slider-prev{
        left:-1px;
    }

    .slider-next{
        right:-1px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-home-images{
        min-height:320px;
    }

    .about-image-main{
        height:275px;
    }

    .about-image-second{
        height:155px;
    }


    /* =====================================================
       HEALTHCARE
    ===================================================== */

    .healthcare-image{
        height:180px;
    }


    /* =====================================================
       UNIVERSITY
    ===================================================== */

    .university-card{
        height:90px;
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .testimonial-slider{
        padding:0 25px;
    }

    .testimonial-card{
        min-height:290px;
        padding:19px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   360px
========================================================= */

@media (max-width:360px){

    .hero-slider{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:1600 / 481;
    }

    .hero-slide img{
        width:100%;
        height:100%;
        object-fit:fill;
    }

    .hero-prev,
    .hero-next{
        width:27px;
        height:27px;
        font-size:8px;
    }


    /* COURSE */

    .course-slider-wrapper{
        padding:0 22px;
    }

    .course-card{
        flex:0 0 100%;
        min-width:100%;
        width:100%;
    }

    .course-image{
        height:165px;
    }

    .course-content{
        padding:15px;
    }

    .course-content h3{
        font-size:14px;
    }

    .course-content p{
        font-size:11px;
    }

    .slider-btn{
        width:28px;
        height:28px;
        font-size:8px;
    }

    .slider-prev{
        left:-1px;
    }

    .slider-next{
        right:-1px;
    }


    /* HEADINGS */

    .about-home-content h2,
    .about-content h2,
    .courses-heading h2,
    .healthcare-heading h2,
    .collaboration-heading h2,
    .testimonial-heading h2{
        font-size:24px;
    }

}


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

@media (max-width:767px) and (orientation:landscape){

    .hero-slider{
        width:100%;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:1600 / 481;
    }

    .hero-slide img{
        width:100%;
        height:100%;
        object-fit:fill;
    }

    .feature-container{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-card{
        min-height:130px;
    }


    /* COURSE */

    .course-slider-wrapper{
        padding:0 35px;
    }

    .course-card{
        flex:0 0 100%;
        min-width:100%;
    }

}


/* =========================================================
   FINAL OVERFLOW PROTECTION
========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
}

.course-slider,
.testimonial-window{
    max-width:100%;
    overflow:hidden;
}

.course-track,
.testimonial-track{
    max-width:none;
}