/*=========================================================
    LANGUAGE HEADER
=========================================================*/

.language-header{

    position:relative;

    background:linear-gradient(135deg,#2563EB 0%,#06B6D4 100%);

    padding:90px 0 70px;

    overflow:hidden;

}


.language-header::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:320px;

    height:320px;

    background:rgba(255,255,255,.10);

    border-radius:50%;

}


.language-header::after{

    content:"";

    position:absolute;

    bottom:-100px;

    left:-100px;

    width:250px;

    height:250px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

}


.language-header .container{

    position:relative;

    z-index:2;

}


/*=========================================================
    LANGUAGE TEXT
=========================================================*/


#languageName{

    color:#fff;

    font-size:3rem;

    font-weight:800;

    margin-bottom:18px;

}


#languageDescription{

    color:rgba(255,255,255,.92);

    font-size:1.1rem;

    line-height:1.8;

    max-width:700px;

}



/*=========================================================
    LANGUAGE IMAGE
=========================================================*/


.language-image{

    width:220px;

    height:220px;

    object-fit:contain;

    background:#fff;

    border-radius:25px;

    padding:20px;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}



/*=========================================================
    SEARCH SECTION
=========================================================*/


#searchCourse{

    height:52px;

}


#sortCourses{

    height:52px;

}



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


.course-card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

}



.course-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}



.course-image{

    width:100%;

    height:200px;

    object-fit:cover;

}



.course-card .card-body{

    padding:22px;

}



.language-badge{

    width:max-content;

    padding:8px 14px;

    border-radius:50px;

    font-size:.80rem;

}



.course-title{

    font-size:1.05rem;

    font-weight:700;

    line-height:1.5;

    min-height:60px;

}



.course-description{

    color:#6B7280;

    font-size:.92rem;

    line-height:1.6;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}



.course-button{

    border-radius:12px;

}



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


.stat-card{

    background:#fff;

    border-radius:18px;

    padding:35px 20px;

    text-align:center;

    height:100%;

    border:1px solid #E5E7EB;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}



.stat-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}



.stat-card i{

    font-size:2.5rem;

    color:#2563EB;

    margin-bottom:18px;

}



.stat-card h2{

    font-size:2rem;

    font-weight:800;

}



.stat-card p{

    color:#6B7280;

    font-weight:600;

}



/*=========================================================
    LOADING
=========================================================*/


#loadingCourses{

    padding:60px 0;

}



/*=========================================================
    EMPTY STATE
=========================================================*/


#noCourses{

    padding:70px 0;

}



#noCourses h3{

    font-weight:700;

}



/*=========================================================
    FOOTER
=========================================================*/


.footer{

    background:#fff;

    border-top:1px solid #E5E7EB;

}



/*=========================================================
    BACK TO TOP
=========================================================*/


#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:45px;

    height:45px;

    border-radius:50%;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999;

}



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


@media(max-width:991px){


    .language-header{

        text-align:center;

        padding:70px 0 60px;

    }



    #languageName{

        font-size:2.3rem;

        margin-top:25px;

    }



    #languageDescription{

        margin:auto;

    }



    .language-image{

        width:180px;

        height:180px;

        margin-top:30px;

    }


}



@media(max-width:576px){


    .language-header{

        padding:60px 0 50px;

    }



    #languageName{

        font-size:1.9rem;

    }



    #languageDescription{

        font-size:.95rem;

    }



    .language-image{

        width:150px;

        height:150px;

    }



    .course-card .card-body{

        padding:18px;

    }


}