/* =========================================
   LUMINA ACADEMY
   RESPONSIVE.CSS

   PART 1
   RESET + TABLET LAYOUT
========================================= */





/* ==========================
   GENERAL RESPONSIVE RESET
========================== */


@media (max-width:1024px){



    html,
    body {

        overflow-x:hidden;

    }



    .container {

        width:92%;

        max-width:none;

    }



    section {

        padding:90px 0;

    }





    h1,
    h2,
    h3 {

        word-break:normal;

    }



    img,
    video {

        max-width:100%;

        height:auto;

    }









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


    header {

        padding:18px 0;

    }



    .nav-wrapper {

        gap:4px;

    }



    nav ul {

        gap:18px;

    }



    nav a {

        font-size:14px;

    }



    .header-btn {

        padding:12px 22px;

    }









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



    .hero {

        min-height:auto;

        padding-top:130px;

        padding-bottom:80px;

    }




    .hero-grid {


        grid-template-columns:1fr;


        gap:60px;


        text-align:center;


    }




    .hero-left {


        display:flex;


        flex-direction:column;


        align-items:center;


    }




    .hero-left h1 {


        max-width:750px;


        font-size:clamp(38px,5vw,60px);


    }




    .hero-left p {


        max-width:650px;


    }





    .hero-buttons {


        justify-content:center;


    }







    /* HERO VIDEO */


    .hero-right {


        width:100%;


        display:flex;


        justify-content:center;


    }





    .macbook {


        width:700px;


        max-width:95%;


    }





    .floating {


        transform:scale(.8);


    }







    /* Disable dangerous floating positions */


    .floating-1 {


        left:-30px;

    }



    .floating-2 {


        left:-20px;

    }



    .floating-3 {


        right:-30px;

    }



    .floating-4 {


        right:-20px;

    }








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



    .about-grid {


        grid-template-columns:1fr;


        gap:50px;


    }



    .about-image {


        order:-1;


    }





    .image-placeholder {


        height:450px;


    }







    /* ==========================
       PHILOSOPHY
    ========================== */



    .philosophy-wrapper {


        grid-template-columns:

        repeat(2,1fr);


        gap:25px;


    }





    .philosophy-card {


        padding:35px;


    }









    /* ==========================
       WHY LUMINA
    ========================== */



    .why-grid {


        grid-template-columns:

        repeat(2,1fr);


        gap:25px;


    }




    .why-card {


        padding:30px;


    }









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



    .courses-grid {


        grid-template-columns:

        repeat(2,1fr);


        gap:25px;


    }





    .course-card {


        min-height:300px;


    }



    .course-image {


        height:200px;


    }









    /* ==========================
       ONLINE CLASSROOM
    ========================== */



    .classroom-grid {


        grid-template-columns:1fr;


        gap:50px;


    }





    .classroom-content {


        text-align:center;


    }





    .classroom-content ul {


        align-items:center;


    }





    .classroom-screen {


        max-width:750px;


        margin:auto;


    }









    /* ==========================
       PROCESS
    ========================== */



    .process-line {


        display:none;


    }



    .process-item,
    .process-item:nth-child(even){


        flex-direction:column;


        gap:30px;


        margin-bottom:60px;


    }




    .process-number {


        position:relative;


        left:auto;


        transform:none;


    }





    .process-content {


        width:90%;


        text-align:center;


    }









    /* ==========================
       TEACHERS
    ========================== */



    .teachers-grid {


        grid-template-columns:

        repeat(2,1fr);


        gap:25px;


    }





    .teacher-photo {


        height:260px;


    }









    /* ==========================
       PARENTS
    ========================== */



    .parents-wrapper {


        grid-template-columns:1fr;


        gap:50px;


    }




    .parents-image {


        order:-1;


        height:450px;


    }





}


/* =========================================
   RESPONSIVE.CSS
   PART 2

   MOBILE VERSION
   320px - 767px
========================================= */





@media (max-width:767px){



    /* ==========================
       GLOBAL
    ========================== */


    .container {

        width:90%;

    }



    section {

        padding:70px 0;

    }



    .section-header {

        margin-bottom:40px;

    }



    .section-header h2 {


        font-size:32px;

        line-height:1.2;


    }



    .section-tag {


        font-size:12px;

        padding:8px 15px;


    }








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



    header {


        padding:15px 0;


    }



    .nav-wrapper {


        justify-content:space-between;


    }




    .logo {


        font-size:24px;


    }




    nav {


        display:none;


    }





    .header-btn {


        padding:10px 18px;


        font-size:13px;


    }









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



    .hero {


        padding-top:105px;


        padding-bottom:50px;


    }




    .hero-grid {


        gap:40px;


    }




    .hero-left {


        text-align:center;


    }




    .hero-left h1 {


        font-size:36px;


        letter-spacing:-1px;


        line-height:1.15;


    }





    .hero-left p {


        font-size:15px;


        line-height:1.7;


    }





    .hero-buttons {


        width:100%;


        flex-direction:column;


        gap:15px;


    }





    .primary-btn,
    .secondary-btn {


        width:100%;


        padding:16px;


    }






    .hero-stats {


        width:100%;


        justify-content:center;


        flex-wrap:wrap;


        gap:25px;


        margin-top:40px;


    }





    .hero-stats strong {


        font-size:26px;


    }







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


    .macbook {


        width:100%;


        animation:none;


    }




    .video-wrapper {


        border-width:5px;


        border-radius:20px;


    }




    .macbook-bottom {


        display:none;


    }





    .floating {


        display:none;


    }




    .live-badge {


        top:10px;


        left:10px;


        font-size:11px;


        padding:7px 12px;


    }





    .video-title {


        bottom:12px;


        left:12px;


        font-size:14px;


    }







    .hero-slider {


        margin-top:35px;


        gap:8px;


    }





    .slide {


        font-size:11px;


        padding:8px 12px;


    }









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



    .about-grid {


        gap:35px;


    }




    .image-placeholder {


        height:320px;


        border-radius:25px;


        font-size:18px;


    }




    .about-content h3 {


        font-size:30px;


    }





    .about-content p {


        font-size:15px;


    }




    .about-features {


        gap:18px;


    }




    .feature {


        gap:12px;


    }





    .feature-icon {


        width:45px;


        height:45px;


        border-radius:15px;


        font-size:18px;


        flex-shrink:0;


    }





    .feature h4 {


        font-size:17px;


    }








    /* ==========================
       PHILOSOPHY
    ========================== */



    .philosophy-wrapper {


        grid-template-columns:1fr;


        gap:20px;


    }





    .philosophy-card {


        padding:30px;


        border-radius:25px;


    }





    .number {


        font-size:40px;


    }









    /* ==========================
       WHY LUMINA
    ========================== */



    .why-grid {


        grid-template-columns:1fr;


    }





    .why-card {


        padding:25px;


    }








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



    .courses-grid {


        grid-template-columns:1fr;


        gap:20px;


    }





    .course-card {


        min-height:auto;


        padding:20px;


        border-radius:25px;


    }





    .course-image {


        height:180px;


        border-radius:20px;


    }





    /*
       Mobile-ում hover overlay չկա
       որպեսզի content-ը չկորցնի
    */


    .course-hidden {


        position:relative;


        transform:none;


        inset:auto;


        margin-top:20px;


        border-radius:20px;


        min-height:150px;


    }





    .course-card:hover {


        transform:none;


    }









    /* ==========================
       CLASSROOM
    ========================== */



    .classroom-content h2 {


        font-size:32px;


    }




    .classroom-content p {


        font-size:15px;


    }





    .classroom-content ul {


        align-items:flex-start;


        text-align:left;


    }





    .classroom-screen {


        padding:12px;


        border-radius:22px;


    }





    .teacher-window {


        height:180px;


        font-size:18px;


    }





    .students-row {


        gap:10px;


    }




    .students-row div {


        width:45px;


        height:45px;


        font-size:18px;


        border-radius:15px;


    }








    /* ==========================
       PROCESS
    ========================== */


    .process-content {


        width:100%;


        padding:25px;


        border-radius:25px;


    }




    .process-number {


        width:60px;


        height:60px;


    }




    .process-content h3 {


        font-size:21px;


    }







    /* ==========================
       TEACHERS
    ========================== */


    .teachers-grid {


        grid-template-columns:1fr;


    }





    .teacher-card {


        border-radius:25px;


    }





    .teacher-photo {


        height:240px;


    }









    /* ==========================
       PARENTS
    ========================== */


    .parents-content h2 {


        font-size:32px;


    }




    .parents-image {


        height:320px;


        border-radius:25px;


    }





    .parent-item {


        align-items:flex-start;


    }





    .parent-item span {


        flex-shrink:0;


    }









    /* ==========================
       FAQ
    ========================== */


    .faq-wrapper {


        gap:15px;


    }





    .faq-question {


        padding:20px;


        font-size:15px;


        gap:15px;


        text-align:left;


    }





    .faq-question span {


        font-size:24px;


        flex-shrink:0;


    }





    .faq-answer p {


        padding:0 20px 20px;


        font-size:14px;


    }









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


    .final-cta {


        padding-top:40px;


    }





    .cta-box {


        padding:40px 20px;


        border-radius:25px;


    }





    .cta-box h2 {


        font-size:32px;


    }





    .cta-box p {


        font-size:15px;


    }









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


    footer {


        margin-top:50px;


        padding-top:50px;


    }





    .footer-grid {


        grid-template-columns:1fr;


        text-align:center;


        gap:35px;


    }





    .footer-brand p {


        margin:auto;


    }




}


/* =========================================
   RESPONSIVE.CSS
   PART 3

   SMALL MOBILE OPTIMIZATION
   320px - 430px
========================================= */





@media (max-width:430px){



    /* ==========================
       GLOBAL SMALL SCREEN
    ========================== */


    body {

        font-size:15px;

    }




    .container {

        width:96%;

    }



    section {

        padding:30px 0px 0px 0px;

    }







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



    .logo {

        font-size:18px;

    }



    .header-btn {

        padding:9px 14px;

        font-size:12px;

    }








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



    .hero {

        padding-top:90px;

    }




    .hero-left h1 {

        font-size:31px;

        line-height:1.18;

    }




    .hero-left p {

        font-size:14px;

    }




    .hero-buttons a {

        font-size:14px;

    }





    .hero-stats {

        gap:15px;

    }





    .hero-stats div {

        width:100%;

    }





    .hero-stats strong {

        font-size:24px;

    }








    /* HERO VIDEO */


    .video-wrapper {

        border-radius:16px;

        border-width:4px;

    }




    .live-badge {


        font-size:10px;

        padding:6px 10px;


    }





    .video-title {


        font-size:12px;


    }





    .hero-slider {


        flex-wrap:wrap;


        justify-content:center;


    }








    /* ==========================
       SECTION TITLES
    ========================== */



    .section-header h2 {


        font-size:28px;


    }



    .section-header p {


        font-size:14px;


    }








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



    .image-placeholder {


        height:260px;


    }





    .about-content h3 {


        font-size:26px;


    }





    .feature h4 {


        font-size:15px;


    }





    .feature p {


        font-size:13px;


    }








    /* ==========================
       PHILOSOPHY
    ========================== */



    .philosophy-card {


        padding:25px;


    }





    .philosophy-card h3 {


        font-size:21px;


    }





    .philosophy-card p {


        font-size:14px;


    }








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



    .course-card {


        padding:10px;


    }





    .course-image {


        height:160px;


    }





    .course-card h3 {


        font-size:20px;


    }





    .course-card p {


        font-size:14px;


    }





    .course-hidden {


        padding:20px;


    }









    /* ==========================
       ONLINE CLASSROOM
    ========================== */



    .classroom-content h2 {


        font-size:28px;


    }




    .screen-header {


        font-size:12px;


    }





    .teacher-window {


        height:150px;


    }





    .students-row div {


        width:38px;


        height:38px;


        font-size:15px;


    }








    /* ==========================
       PROCESS
    ========================== */



    .process-content {


        padding:20px;


    }




    .process-content h3 {


        font-size:19px;


    }




    .process-content p {


        font-size:14px;


    }









    /* ==========================
       TEACHERS
    ========================== */



    .teacher-photo {


        height:220px;


    }




    .teacher-card h3 {


        font-size:20px;


    }









    /* ==========================
       PARENTS
    ========================== */



    .parents-image {


        height:260px;


    }




    .parent-item {


        gap:12px;


        font-size:14px;


    }









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



    .cta-box {


        padding:35px 18px;


    }





    .cta-box h2 {


        font-size:28px;


    }




    .cta-box .primary-btn {


        font-size:14px;


        padding:14px;


    }









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



    .footer-brand .logo {


        font-size:24px;


    }




    .footer-links a {


        font-size:14px;


    }




}



/* =========================================
   MOBILE VIDEO FIX
========================================= */


@media(max-width:767px){


    .hero-right {

        display:flex !important;

        visibility:visible !important;

        opacity:1 !important;

        height:auto;

        overflow:visible;

    }



    .macbook {

        display:block !important;

        visibility:visible !important;

        opacity:1 !important;

        width:100%;

        max-width:100%;

    }





    .video-wrapper {

        display:block !important;

        visibility:visible !important;

        opacity:1 !important;

        width:100%;

        aspect-ratio:16 / 10;

        overflow:hidden;

    }





    .video-wrapper video,
    .hero-video {

        display:block !important;

        visibility:visible !important;

        opacity:1 !important;

        width:100%;

        height:100%;

        object-fit:cover;

    }





    .macbook-bottom {

        display:none !important;

    }


}


@media(max-width:767px){

    .macbook {

        animation:none !important;

        opacity:1 !important;

    }

}



/* =========================================
   MOBILE HAMBURGER MENU
========================================= */



.hamburger {

    display:none;

    width:35px;

    height:45px;

    border:none;

    background:transparent;

    cursor:pointer;

    padding:8px;

    position:relative;

    z-index:1001;

}





.hamburger span {

    display:block;

    width:28px;

    height:3px;

    background:var(--primary);

    border-radius:10px;

    margin:5px auto;

    transition:.35s ease;

}






/* ==========================
   MOBILE MENU PANEL
========================== */



.mobile-menu {


    position:fixed;


    top:0;


    right:-100%;


    width:85%;


    max-width:360px;


    height:100vh;


    background:white;


    z-index:1000;


    padding:10px;


    box-shadow:


    -20px 0 60px rgba(0,0,0,.15);


    transition:.45s ease;


    display:flex;


    flex-direction:column;


}






.mobile-menu.active {


    right:0;


}







.mobile-menu-header {


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:50px;


}







.close-menu {


    width:40px;


    height:40px;


    border:none;


    background:#f5efe1;


    border-radius:50%;


    font-size:30px;


    line-height:1;


    cursor:pointer;


    color:var(--primary);


}







.mobile-menu ul {


    list-style:none;


    padding:0;


    margin:0;


    display:flex;


    flex-direction:column;


    gap:25px;


}







.mobile-menu ul li {


    opacity:0;


    transform:translateX(30px);


    transition:.4s ease;


}







.mobile-menu.active ul li {


    opacity:1;


    transform:translateX(0);


}






.mobile-menu.active ul li:nth-child(1){

    transition-delay:.1s;

}


.mobile-menu.active ul li:nth-child(2){

    transition-delay:.15s;

}


.mobile-menu.active ul li:nth-child(3){

    transition-delay:.2s;

}


.mobile-menu.active ul li:nth-child(4){

    transition-delay:.25s;

}


.mobile-menu.active ul li:nth-child(5){

    transition-delay:.3s;

}


.mobile-menu.active ul li:nth-child(6){

    transition-delay:.35s;

}







.mobile-menu ul a {


    font-size:20px;


    font-weight:600;


    color:var(--primary);


    transition:.3s;


}







.mobile-menu ul a:hover {


    color:var(--gold);


}







.mobile-contact {


    margin-top:auto;


    text-align:center;


    width:100%;


}








/* ==========================
   OVERLAY
========================== */



.menu-overlay {


    position:fixed;


    inset:0;


    background:


    rgba(0,0,0,.45);


    backdrop-filter:blur(5px);


    z-index:999;


    opacity:0;


    visibility:hidden;


    transition:.35s;


}







.menu-overlay.active {


    opacity:1;


    visibility:visible;


}









/* ==========================
   HAMBURGER ANIMATION
========================== */



.hamburger.active span:nth-child(1){


    transform:


    translateY(8px)

    rotate(45deg);


}



.hamburger.active span:nth-child(2){


    opacity:0;


}



.hamburger.active span:nth-child(3){


    transform:


    translateY(-8px)

    rotate(-45deg);


}









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



@media(max-width:767px){



    .hamburger {


        display:block;


    }




    .desktop-nav {


        display:none;


    }



    .header-btn {


        display:none;


    }



}



/* =========================================
   MOBILE LANGUAGE FLAGS FIX
========================================= */


.language-switcher {

    display:flex;

    align-items:center;

    flex-shrink:0;

}



.lang-btn {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    white-space:nowrap;

    flex-shrink:0;

}



.lang-btn img {

    width:18px !important;

    height:12px !important;

    min-width:18px;

    min-height:12px;

    object-fit:cover;

    display:block;

}





@media(max-width:768px){

.social-links{

    justify-content:center;

    gap:12px;

}



.social-pill{

    padding:12px 18px;

}



.social-pill span{

    font-size:14px;

}

}



.phone-btn{

    display:none;

}

@media(max-width:768px){

.phone-btn{

    display:flex;

}

.floating-contact{

    right:18px;

    bottom:18px;

}

.floating-btn{

    width:32px;

    height:32px;

}

}






/* =====================================
   LUMINA ACADEMY
   LANGUAGES RESPONSIVE
===================================== */


/* GLOBAL FIX */

html,
body{

    overflow-x:hidden;

}



.languages-page *{

    box-sizing:border-box;

}



.languages-page img{

    max-width:100%;

    height:auto;

}





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


@media(max-width:1024px){



.container{

    padding-left:25px;

    padding-right:25px;

}





/* HERO */


.inner-hero-content{

    grid-template-columns:1fr;

    gap:45px;

    text-align:center;

}



.languages-hero{

    min-height:auto;

    padding:110px 0 70px;

}



.hero-text{

    max-width:700px;

    margin:auto;

}



.hero-text h1{

    font-size:12px;

}



.hero-image{

    max-width:650px;

    margin:auto;

}





/* COURSES */


.course-grid{

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

}



.course-card{

    min-width:0;

}





/* SKILLS */


.skills-grid{

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

}





/* FORMAT */


.format-wrapper{

    grid-template-columns:1fr;

}



.format-content{

    text-align:center;

}





/* ADVANTAGES */


.advantages-grid{

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

}




}


/* =====================================
   MOBILE RESPONSIVE
   max-width:768px
===================================== */


@media(max-width:768px){



/* GLOBAL */

.container{

    padding-left:1px;

    padding-right:1px;
	
	
	

}





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


.languages-hero{

    padding:0px 0px 20px;

}



.inner-hero-content{

    display:flex;

    flex-direction:column;

    gap:35px;

}



.hero-text{

    width:100%;

}



.hero-text h1{

    font-size:18px;

    line-height:1.25;

}



.hero-text p{

    font-size:15px;

    line-height:1.7;

}





.hero-buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.hero-buttons a{

    width:100%;

    justify-content:center;

    text-align:center;

}





.hero-image{

    width:100%;

}



.hero-image img{

    width:100%;

    border-radius:22px;

}





/* ===============================
   SECTION TITLES
================================ */


.section-heading{

    margin-bottom:40px;

}



.section-heading h2{

    font-size:18px;

    line-height:1.3;

}



.section-heading p{

    font-size:15px;

}





/* ===============================
   LANGUAGE CARDS
================================ */


.language-courses{

   padding:0px 0px 20px;

}



.course-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:22px;

}



.course-card{

    width:100%;

}



.course-image{

    height:210px;

}



.course-content{

    padding:24px;

}



.course-content h3{

    font-size:24px;

}



.course-content p{

    font-size:15px;

}





.course-icon{

    width:60px;

    height:60px;

}



.course-icon img{

    width:32px;

}





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


.skills-section{

    padding:60px 0;

}



.skills-grid{

    grid-template-columns:1fr;

    gap:20px;

}



.skill-card{

    padding:28px 20px;

}





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


.format-section{

    padding:60px 0;

}



.format-wrapper{

    display:flex;

    flex-direction:column;

    gap:35px;

}



.format-image{

    order:2;

}



.format-content{

    text-align:center;

}



.format-content h2{

    font-size:18px;

}



.format-content > p{

    font-size:15px;

}





.format-list{

    gap:22px;

}



.format-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}





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


.why-section{

    padding:0px 0;

}



.advantages-grid{

    grid-template-columns:1fr;

    gap:18px;

}



.advantage-card{

    padding:28px 22px;

}



.advantage-card span{

    font-size:34px;

}





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


.cta-section{

    padding:10px 0;

}



.cta-box{

    padding:45px 20px;

    border-radius:24px;

}



.cta-box h2{

    font-size:26px;

    line-height:1.3;

}



.cta-box p{

    font-size:15px;

}





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


.footer-container{

    flex-direction:column;

    text-align:center;

    gap:35px;

}



.footer-links a{

    display:block;

    margin-bottom:10px;

}





/* ===============================
   FLOATING BUTTONS
================================ */


.floating-contact{

    right:14px;

    bottom:14px;

}



.floating-btn{

    width:52px;

    height:52px;

}



.floating-btn svg{

    width:24px;

    height:24px;

}



}