/* =====================================
   LUMINA ACADEMY
   LANGUAGES PAGE STYLE
===================================== */


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


.languages-hero{



    display:flex;

    align-items:center;

    padding:25px;

    position:relative;

    overflow:hidden;

}



.languages-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-150px;

    top:80px;

    background:

    radial-gradient(
        circle,
        rgba(199,154,69,.18),
        transparent 70%
    );

    filter:blur(20px);

}



.inner-hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}




.hero-text .section-label{

    display:inline-block;

    margin-bottom:20px;

}



.hero-text h1{

    font-size:56px;

    line-height:1.15;

    margin-bottom:25px;

}



.hero-text p{

    font-size:18px;

    line-height:1.8;

    max-width:560px;

    color:#555;
    margin-bottom:40px;
}





.hero-image{

    position:relative;

}



.hero-image img{

    width:100%;

    max-width:550px;

    border-radius:32px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.15);

}





/* ===============================
   SECTION HEADING
================================ */


.section-heading{

    max-width:750px;

    margin:0 auto 30px;

    text-align:center;

}



.section-label{

    color:#C79A45;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}



.section-heading h2{

    font-size:42px;

    line-height:1.25;

    margin:18px 0;

}



.section-heading p{

    color:#666;

    font-size:17px;

    line-height:1.7;

}





/* ===============================
   LANGUAGE COURSES
================================ */


.language-courses{

    padding:10px 0;

}




.course-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}





.course-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

    0 15px 45px rgba(0,0,0,.08);

    transition:.45s cubic-bezier(.22,1,.36,1);

}





.course-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.14);

}




.course-image{

    height:240px;

    overflow:hidden;

}



.course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.course-card:hover .course-image img{

    transform:scale(1.08);

}





.course-content{

    padding:30px;

    position:relative;

}





.course-icon{

    width:70px;

    height:70px;

    background:#0024;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.1);

    margin-top:-65px;

    margin-bottom:25px;

}



.course-icon img{

    width:38px;

    height:38px;

}





.course-content h3{

    font-size:28px;

    margin-bottom:15px;

}





.course-content p{

    color:#666;

    line-height:1.7;

}





.card-link{

    display:inline-flex;

    gap:10px;

    margin-top:20px;

    color:#C79A45;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}



.card-link:hover span{

    transform:translateX(6px);

}



.card-link span{

    transition:.3s;

}



/* =====================================
   SKILLS SECTION
===================================== */


.skills-section{

    padding:10px 0;

    background:#faf8f3;

}



.skills-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.skill-card{

    background:#fff;

    padding:35px 25px;

    border-radius:24px;

    text-align:center;

    border:1px solid rgba(199,154,69,.12);

    transition:.4s cubic-bezier(.22,1,.36,1);

}



.skill-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.1);

    border-color:#C79A45;

}



.skill-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        135deg,
        rgba(199,154,69,.15),
        rgba(199,154,69,.05)
    );

}



.skill-icon img{

    width:38px;

    height:38px;

}



.skill-card h3{

    font-size:22px;

    margin-bottom:15px;

}



.skill-card p{

    font-size:15px;

    line-height:1.7;

    color:#666;

}







/* =====================================
   FORMAT SECTION
===================================== */


.format-section{

    padding:10px 0;

}



.format-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}



.format-image img{

    width:100%;

    border-radius:32px;

    box-shadow:

    0 25px 70px rgba(0,0,0,.15);

}



.format-content h2{

    font-size:42px;

    line-height:1.25;

    margin:20px 0;

}



.format-content>p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}




.format-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}



.format-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

}



.format-icon{

    min-width:60px;

    height:60px;

    border-radius:18px;

    background:#faf8f3;

    display:flex;

    align-items:center;

    justify-content:center;

}



.format-icon img{

    width:30px;

    height:30px;

}



.format-item h3{

    margin-bottom:8px;

    font-size:20px;

}



.format-item p{

    color:#666;

    line-height:1.6;

}







/* =====================================
   ADVANTAGES SECTION
===================================== */


.why-section{

    padding:100px 0;

    background:#101827;

    color:white;

}



.why-section .section-label{

    color:#D4AF37;

}



.why-section .section-heading p{

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

}




.advantages-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}




.advantage-card{

    padding:35px 28px;

    border-radius:26px;

    background:

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    transition:.4s;

}



.advantage-card:hover{

    transform:translateY(-10px);

    background:

    rgba(255,255,255,.13);

}



.advantage-card span{

    font-size:42px;

    color:#D4AF37;

    font-weight:700;

    opacity:.8;

}



.advantage-card h3{

    margin:20px 0 15px;

    font-size:22px;

}



.advantage-card p{

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

    line-height:1.7;

}







/* =====================================
   CTA SECTION
===================================== */


.cta-section{

    padding:30px 0;

}



.cta-box{

    padding:80px 50px;

    text-align:center;

    border-radius:40px;

    background:

    linear-gradient(
        135deg,
        #101827,
        #1c2940
    );

    color:white;

    position:relative;

    overflow:hidden;

}



.cta-box::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-100px;

    top:-100px;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.35),
        transparent 70%
    );

}



.cta-box h2{

    position:relative;

    font-size:42px;

    max-width:800px;

    margin:0 auto 20px;

}



.cta-box p{

    position:relative;

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

    margin-bottom:35px;

    font-size:18px;

}



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


.languages-page .footer{

    margin-top:0;

}



.footer-logo img{

    max-width:180px;

}



.footer-links a{

    transition:.3s ease;

}



.footer-links a:hover{

    color:#C79A45;

    transform:translateX(5px);

}






/* =====================================
   PREMIUM HOVER DETAILS
===================================== */



.course-card,
.skill-card,
.advantage-card{

    position:relative;

    overflow:hidden;

}




.course-card::before,
.skill-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-60px;

    top:-60px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(199,154,69,.15),
        transparent 70%
    );

    opacity:0;

    transition:.4s;

}



.course-card:hover::before,
.skill-card:hover::before{

    opacity:1;

}







/* =====================================
   SCROLL REVEAL SUPPORT
===================================== */


.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

}






/* =====================================
   FLOATING CONTACT POSITION
===================================== */


.languages-page .floating-contact{

    right:30px;

    bottom:30px;

}







/* =====================================
   TABLET
===================================== */


@media(max-width:1024px){



.languages-hero{

    padding-top:100px;

}



.inner-hero-content{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-text p{

    margin:0 auto 30px;

}



.hero-image{

    max-width:600px;

    margin:auto;

}




.course-grid{

    grid-template-columns:repeat(2,1fr);

}



.skills-grid{

    grid-template-columns:repeat(2,1fr);

}



.format-wrapper{

    grid-template-columns:1fr;

}



.format-image{

    order:2;

}



.advantages-grid{

    grid-template-columns:repeat(2,1fr);

}



.cta-box h2{

    font-size:34px;

}



}








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


@media(max-width:768px){



.languages-hero{

    min-height:auto;

    padding:90px 0 60px;

}



.hero-text h1{

    font-size:34px;

}



.hero-text p{

    font-size:16px;

}



.hero-buttons{

    flex-direction:column;

    gap:15px;

}



.hero-buttons a{

    width:100%;

}



.hero-image img{

    border-radius:22px;

}






.section-heading h2{

    font-size:30px;

}



.section-heading p{

    font-size:15px;

}





.language-courses,
.skills-section,
.format-section,
.why-section,
.cta-section{

    padding:70px 0;

}





.course-grid{

    grid-template-columns:1fr;

}



.course-image{

    height:210px;

}





.course-content{

    padding:25px;

}




.skills-grid{

    grid-template-columns:1fr;

}





.skill-card{

    padding:30px 20px;

}






.format-content h2{

    font-size:30px;

}





.format-item{

    gap:15px;

}





.advantages-grid{

    grid-template-columns:1fr;

}



.advantage-card{

    padding:30px 22px;

}





.cta-box{

    padding:50px 25px;

    border-radius:28px;

}



.cta-box h2{

    font-size:30px;

}



.cta-box p{

    font-size:16px;

}





.floating-contact{

    right:15px;

    bottom:15px;

}



}


/* =====================================
   ACTIVE MENU
===================================== */


.languages-page .main-menu a.active{

    color:#C79A45;

}



.languages-page .main-menu a.active::after{

    width:100%;

}


/* =====================================
   PAGE BACKGROUND
===================================== */


.languages-page{

    background:#fff;

}



.languages-page .language-courses{

    background:#fff;

}



.languages-page .skills-section{

    background:

    linear-gradient(
        180deg,
        #faf8f3,
        #ffffff
    );

}


.course-image{

    position:relative;

}


.course-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        transparent,
        rgba(0,0,0,.15)
    );

}