/* =========================================
   LUMINA ACADEMY
   PREMIUM EDUCATION WEBSITE
   STYLE.CSS PART 1
========================================= */


/* ==========================
   RESET
========================== */


*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: "Manrope", sans-serif;

    background: #fcfaf5;

    color: #182536;

    overflow-x: hidden;

}



a {

    text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}



img,
video {

    max-width: 100%;

    display: block;

}







/* ==========================
   VARIABLES
========================== */


:root {


    --primary:
    #203A5F;


    --primary-dark:
    #15283F;


    --gold:
    #C89B3C;


    --gold-light:
    #E8C978;


    --cream:
    #FCFAF5;


    --white:
    #FFFFFF;


    --text:
    #182536;


    --gray:
    #667085;


    --light-gray:
    #E9E5DC;



    --shadow:

    0 30px 80px rgba(32,58,95,.12);



    --radius:

    28px;



}






/* ==========================
   CONTAINER
========================== */


.container {

    width: min(1200px, 90%);

    margin: 0 auto;

}





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


.background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    z-index: -1;

}



.circle {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .45;

}



.circle-1 {

    width: 400px;

    height: 400px;

    background:#E8C978;

    top:-150px;

    left:-100px;

}



.circle-2 {

    width:500px;

    height:500px;

    background:#B8D8FF;

    right:-200px;

    top:200px;

}



.circle-3 {

    width:300px;

    height:300px;

    background:#F5D7C0;

    bottom:100px;

    left:20%;

}



.circle-4 {

    width:250px;

    height:250px;

    background:#D6E8D5;

    bottom:-80px;

    right:20%;

}








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


header {

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    padding:25px 0;

    transition:.4s ease;

}



header.scrolled {

    background:rgba(252,250,245,.85);

    backdrop-filter:blur(20px);

    box-shadow:

    0 10px 40px rgba(0,0,0,.08);

}



.nav-wrapper {

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:32px;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--primary);

}



.logo span {

    color:var(--gold);

}





nav ul {

    display:flex;

    align-items:center;

    gap:35px;

}



nav a {

    font-size:15px;

    font-weight:600;

    color:var(--text);

    transition:.3s;

}



nav a:hover {

    color:var(--gold);

}





.header-btn {

    padding:14px 30px;

    background:var(--primary);

    color:white;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}



.header-btn:hover {

    background:var(--gold);

    transform:translateY(-3px);

}








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


.hero {





    position:relative;

}



.hero-grid {

    display:grid;

    grid-template-columns:

    .9fr 1.1fr;

    align-items:center;

    gap:20px;
	


    align-items:center;

    gap:20px;
	

}





/* LEFT SIDE */


.hero-label {

    display:inline-flex;

    padding:10px 20px;

    background:

    rgba(200,155,60,.12);

    color:var(--gold);

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:30px;

}






.hero-left h1 {

    font-size:

    clamp(38px,5vw,35px);

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--primary);

    margin-bottom:30px;

}



.hero-left h1 span {

    color:var(--gold);

}







.hero-left p {

    max-width:560px;

    font-size:18px;

    line-height:1.8;

    color:var(--gray);

    margin-bottom:40px;

}





.hero-buttons {

    display:flex;

    gap:20px;

}



.primary-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 38px;

    border-radius:50px;

    background:var(--primary);

    color:white;

    font-weight:700;

    transition:.4s;

}



.primary-btn:hover {

    background:var(--gold);

    transform:translateY(-5px);

}





.secondary-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 35px;

    border-radius:50px;

    border:2px solid var(--primary);

    color:var(--primary);

    font-weight:700;

}







/* HERO STATS */


.hero-stats {

    display:flex;

    gap:45px;

    margin-top:55px;

}



.hero-stats div {

    display:flex;

    flex-direction:column;

}



.hero-stats strong {

    font-size:32px;

    color:var(--primary);

}



.hero-stats span {

    color:var(--gray);

    font-size:14px;

}


/* =========================================
   STYLE.CSS PART 2
   HERO VIDEO + MACBOOK + FLOATING UI
========================================= */



/* ==========================
   HERO RIGHT AREA
========================== */


.hero-right {

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}





/* ==========================
   MACBOOK FRAME
========================== */


.macbook {

    width:650px;

    position:relative;

    z-index:5;

    animation:
    laptopFloat 6s ease-in-out infinite;

}



@keyframes laptopFloat {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }


    100% {

        transform:translateY(0);

    }


}




.camera {

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#111;

    top:12px;

    left:50%;

    transform:translateX(-50%);

    z-index:10;

}




.video-wrapper {


    position:relative;

    background:#111;

    border-radius:25px 25px 12px 12px;

    overflow:hidden;

    border:8px solid #1d2735;

    box-shadow:

    0 40px 100px rgba(0,0,0,.25);


    aspect-ratio:16/10;


}




.hero-video {

    width:100%;

    height:100%;

    object-fit:cover;

}




.video-overlay {


    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(0,0,0,.05),

    rgba(0,0,0,.45)

    );

}





.macbook-bottom {


    width:650px;

    height:18px;

    background:

    linear-gradient(

    90deg,

    #bfc4ca,

    #f5f5f5,

    #bfc4ca

    );


    border-radius:

    0 0 20px 20px;


    margin-top:-3px;


}





/* ==========================
   VIDEO UI
========================== */


.live-badge {


    position:absolute;

    top:25px;

    left:25px;


    display:flex;

    align-items:center;

    gap:8px;


    background:

    rgba(255,255,255,.9);


    padding:8px 15px;


    border-radius:50px;


    font-size:13px;


    font-weight:800;


    color:#d63939;


    backdrop-filter:blur(10px);


}



.live-badge span {


    width:9px;

    height:9px;

    border-radius:50%;

    background:#18c964;


    animation:pulse 1.5s infinite;


}




@keyframes pulse {


    0% {

        transform:scale(1);

        opacity:1;

    }


    50% {

        transform:scale(1.7);

        opacity:.4;

    }


    100% {

        transform:scale(1);

        opacity:1;

    }


}





.video-title {


    position:absolute;


    bottom:25px;


    left:25px;


    color:white;


    font-size:18px;


    font-weight:700;


}







/* ==========================
   FLOATING CARDS
========================== */


.floating {


    position:absolute;


    background:

    rgba(255,255,255,.85);


    backdrop-filter:blur(20px);


    box-shadow:

    0 20px 50px rgba(0,0,0,.12);


    border-radius:20px;


    padding:15px 22px;


    font-size:15px;


    font-weight:700;


    color:var(--primary);


    z-index:10;


    display:flex;


    align-items:center;


    gap:8px;


}





.floating-1 {


    top:80px;

    left:-20px;


    animation:

    floatingOne 5s infinite ease-in-out;


}




.floating-2 {


    bottom:90px;

    left:-50px;


    animation:

    floatingTwo 6s infinite ease-in-out;


}




.floating-3 {


    top:20px;

    right:-80px;


    animation:

    floatingThree 5.5s infinite ease-in-out;


}





.floating-4 {


    bottom:120px;

    right:-40px;


    animation:

    floatingOne 7s infinite ease-in-out;


}




.floating-5 {


    bottom:20px;

    right:60px;


    animation:

    floatingTwo 6.5s infinite ease-in-out;


}







@keyframes floatingOne {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-18px);

    }


    100% {

        transform:translateY(0);

    }


}




@keyframes floatingTwo {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(12px);

    }


    100% {

        transform:translateY(0);

    }


}




@keyframes floatingThree {


    0% {

        transform:translateX(0);

    }


    50% {

        transform:translateX(15px);

    }


    100% {

        transform:translateX(0);

    }


}







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


.hero-slider {


    margin-top:80px;


    display:flex;


    justify-content:center;


    gap:18px;


    flex-wrap:wrap;


}




.slide {


    padding:12px 25px;


    border-radius:50px;


    background:

    rgba(255,255,255,.65);


    backdrop-filter:blur(10px);


    color:var(--gray);


    font-weight:600;


    cursor:pointer;


    transition:.4s;


}




.slide:hover,


.slide.active {


    background:var(--primary);


    color:white;


    transform:translateY(-5px);


}








/* ==========================
   SCROLL INDICATOR
========================== */


.scroll-down {


    position:absolute;


    bottom:35px;


    left:50%;


    transform:translateX(-50%);


}



.scroll-down span {


    width:30px;

    height:50px;

    border:2px solid var(--primary);


    border-radius:30px;


    display:block;


    position:relative;


}



.scroll-down span::before {


    content:"";


    position:absolute;


    width:6px;

    height:10px;


    background:var(--gold);


    border-radius:10px;


    left:50%;


    top:10px;


    transform:translateX(-50%);


    animation:

    scrollMove 2s infinite;


}





@keyframes scrollMove {


    0% {

        opacity:0;

        transform:

        translate(-50%,0);

    }


    40% {

        opacity:1;

    }


    100% {

        opacity:0;

        transform:

        translate(-50%,20px);

    }


}


/* =========================================
   STYLE.CSS PART 3
   ABOUT + PHILOSOPHY + WHY LUMINA
   COURSE CARDS
========================================= */





/* ==========================
   SECTION GLOBAL STYLE
========================== */





section {

    padding:30px 0;

}

.sectionhf {

    padding:120px 0px 0px 0px;

}




@media (max-width: 1024px) {

.sectionhf {

    padding:60px 0px 0px 0px;

}
}


@media (max-width: 600px) {

.sectionhf {

    padding:40px 0px 0px 0px;

}
}






.section-header {

    max-width:800px;

    margin:0 auto 70px;

    text-align:center;

}



.section-tag {

    display:inline-flex;

    padding:8px 18px;

    background:

    rgba(200,155,60,.15);

    color:var(--gold);

    border-radius:50px;

    font-size:14px;

    font-weight:800;

    margin-bottom:20px;

}



.section-header h2 {


    font-size:

    clamp(36px,4vw,52px);


    line-height:1.15;


    letter-spacing:-1.5px;


    color:var(--primary);


}









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


.about {


    background:

    rgba(255,255,255,.35);


}





.about-grid {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:80px;


    align-items:center;


}





.about-image {


    position:relative;


}





.image-placeholder {


    height:600px;


    border-radius:40px;


    background:


    linear-gradient(

    135deg,

    #f5efe1,

    #ffffff

    );


    display:flex;


    align-items:center;


    justify-content:center;


    color:var(--gold);


    font-size:22px;


    font-weight:800;


    box-shadow:var(--shadow);


}







.about-content h3 {


    font-size:36px;


    color:var(--primary);


    margin-bottom:25px;


}



.about-content p {


    font-size:17px;


    line-height:1.8;


    color:var(--gray);


    margin-bottom:20px;


}






/* ABOUT FEATURES */


.about-features {


    margin-top:40px;


    display:flex;


    flex-direction:column;


    gap:25px;


}




.feature {


    display:flex;


    gap:20px;


    align-items:flex-start;


}



.feature-icon {


    width:55px;


    height:55px;


    border-radius:18px;


    background:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:25px;


    box-shadow:

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


}



.feature h4 {


    color:var(--primary);


    font-size:20px;


    margin-bottom:5px;


}



.feature p {


    font-size:15px;


    margin:0;


}









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


.philosophy-wrapper {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.philosophy-card {


    padding:45px;


    border-radius:32px;


    background:white;


    box-shadow:

    0 20px 60px rgba(0,0,0,.06);


    position:relative;


    overflow:hidden;


    transition:.4s;


}





.philosophy-card:hover {


    transform:translateY(-10px);


}





.philosophy-card::after {


    content:"";


    position:absolute;


    width:160px;


    height:160px;


    border-radius:50%;


    background:

    rgba(200,155,60,.12);


    right:-60px;


    top:-60px;


}



.number {


    font-size:50px;


    font-weight:900;


    color:

    rgba(32,58,95,.1);


    margin-bottom:25px;


}



.philosophy-card h3 {


    font-size:28px;


    color:var(--primary);


    margin-bottom:15px;


}



.philosophy-card p {


    color:var(--gray);


    line-height:1.7;


}









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


.why-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}




.why-card {


    background:white;


    padding:35px;


    border-radius:28px;


    transition:.4s;


    border:

    1px solid rgba(0,0,0,.04);


}



.why-card:hover {


    transform:

    translateY(-8px);


    box-shadow:

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


}



.why-icon {


    width:65px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(200,155,60,.12);


    border-radius:20px;


    font-size:30px;


    margin-bottom:25px;


}



.why-card h3 {


    color:var(--primary);


    font-size:22px;


    margin-bottom:15px;


}



.why-card p {


    color:var(--gray);


    line-height:1.7;


}









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


.courses {


    background:

    linear-gradient(

    180deg,

    transparent,

    rgba(232,201,120,.08)

    );


}




.courses-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}





.course-card {


    position:relative;


    background:white;


    padding:20px;


    border-radius:32px;


    min-height:280px;


    overflow:hidden;


    box-shadow:

    0 20px 50px rgba(0,0,0,.07);


    transition:.5s;


    cursor:pointer;


}





.course-card:hover {


    transform:

    translateY(-12px);


}






.course-icon {


    width:70px;


    height:70px;


    border-radius:22px;


    background:

    rgba(200,155,60,.15);


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:35px;


    margin-bottom:25px;


}





.course-card h3 {


    font-size:25px;


    color:var(--primary);


    margin-bottom:10px;


}



.course-card p {


    color:var(--gray);


    line-height:1.6;


}







/* hidden hover area */


.course-hidden {


    position:absolute;


    inset:0;


    background:

    rgba(32,58,95,.96);


    color:white;


    padding:35px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    gap:15px;


    transform:

    translateY(100%);


    transition:.5s;


}





.course-card:hover .course-hidden {


    transform:

    translateY(0);


}



.course-hidden span {


    font-size:14px;


    opacity:.9;


}



.course-hidden a {


    margin-top:15px;


    display:inline-block;


    color:var(--gold-light);


    font-weight:800;


}


/* =========================================
   STYLE.CSS PART 4
   PROCESS + CLASSROOM + TEACHERS
   PARENTS + FAQ + CTA + FOOTER
========================================= */





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


.process {


    position:relative;


}



.process-wrapper {


    max-width:900px;


    margin:auto;


    position:relative;


}





.process-line {


    position:absolute;


    left:50%;


    top:0;


    bottom:0;


    width:2px;


    background:

    rgba(200,155,60,.35);


    transform:translateX(-50%);


}




.process-item {


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-bottom:70px;


    position:relative;


}





.process-number {


    width:80px;


    height:80px;


    border-radius:50%;


    background:var(--primary);


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:25px;


    font-weight:800;


    position:absolute;


    left:50%;


    transform:translateX(-50%);


    z-index:2;


}





.process-content {


    width:45%;


    background:white;


    padding:35px;


    border-radius:30px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.07);


}





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


    flex-direction:row-reverse;


}



.process-content h3 {


    color:var(--primary);


    font-size:24px;


    margin-bottom:15px;


}



.process-content p {


    color:var(--gray);


    line-height:1.7;


}








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



.classroom {


    background:

    rgba(255,255,255,.45);


}



.classroom-grid {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:70px;


    align-items:center;


}




.classroom-content h2 {


    font-size:45px;


    color:var(--primary);


    line-height:1.2;


    margin-bottom:25px;


}



.classroom-content p {


    color:var(--gray);


    font-size:17px;


    line-height:1.8;


}



.classroom-content ul {


    margin-top:35px;


    display:flex;


    flex-direction:column;


    gap:15px;


}




.classroom-content li {


    font-weight:700;


    color:var(--primary);


}





.classroom-screen {


    background:

    linear-gradient(

    145deg,

    #203A5F,

    #0f1d31

    );


    border-radius:35px;


    padding:25px;


    box-shadow:

    0 40px 90px rgba(0,0,0,.2);


}





.screen-window {


    background:white;


    border-radius:25px;


    padding:20px;


}





.screen-header {


    display:flex;


    align-items:center;


    gap:10px;


    font-weight:800;


    color:var(--primary);


    margin-bottom:20px;


}



.online-dot {


    width:10px;


    height:10px;


    border-radius:50%;


    background:#18c964;


}




.teacher-window {


    height:260px;


    border-radius:20px;


    background:

    linear-gradient(

    135deg,

    #f3eee2,

    #fff

    );


    display:flex;


    justify-content:center;


    align-items:center;


    color:var(--gold);


    font-size:22px;


    font-weight:800;


}



.students-row {


    display:flex;


    justify-content:center;


    gap:20px;


    margin-top:20px;


}



.students-row div {


    width:60px;


    height:60px;


    background:

    #f4f1ea;


    border-radius:20px;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:30px;


}








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



.teachers-grid {


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:35px;


    max-width:800px;


    margin:auto;


}





.teacher-card {


    background:white;


    padding:30px;


    border-radius:35px;


    text-align:center;


    box-shadow:

    0 20px 50px rgba(0,0,0,.06);


}




.teacher-photo {


    height:300px;


    border-radius:25px;


    background:

    linear-gradient(

    135deg,

    #eee6d6,

    #fff

    );


    display:flex;


    justify-content:center;


    align-items:center;


    color:var(--gold);


    font-weight:800;


    font-size:22px;


    margin-bottom:25px;


}



.teacher-card h3 {


    color:var(--primary);


    font-size:25px;


    margin-bottom:8px;


}



.teacher-card span {


    color:var(--gold);


    font-weight:700;


}



.teacher-card p {


    color:var(--gray);


    line-height:1.7;


    margin-top:15px;


}








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



.parents-wrapper {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:70px;


    align-items:center;


}





.parents-content h2 {


    font-size:45px;


    color:var(--primary);


    line-height:1.2;


    margin:25px 0;


}




.parents-content p {


    color:var(--gray);


    line-height:1.8;


}



.parents-list {


    margin-top:35px;


    display:flex;


    flex-direction:column;


    gap:20px;


}



.parent-item {


    display:flex;


    align-items:center;


    gap:15px;


}



.parent-item span {


    width:35px;


    height:35px;


    border-radius:50%;


    background:var(--gold);


    color:white;


    display:flex;


    justify-content:center;


    align-items:center;


}



.parent-item p {


    margin:0;


    font-weight:700;


}




.parents-image {


    height:500px;


    border-radius:40px;


    background:

    linear-gradient(

    135deg,

    #f5efe1,

    #fff

    );


    display:flex;


    align-items:center;


    justify-content:center;


    color:var(--gold);


    font-size:25px;


    font-weight:800;


}


/* =========================================
   STYLE.CSS PART 5
   FAQ + CTA + FOOTER + RESPONSIVE
========================================= */






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


.faq-wrapper {


    max-width:850px;


    margin:auto;


    display:flex;


    flex-direction:column;


    gap:20px;


}





.faq-item {


    background:white;


    border-radius:25px;


    overflow:hidden;


    box-shadow:

    0 15px 40px rgba(0,0,0,.06);


}





.faq-question {


    width:100%;


    border:none;


    background:none;


    padding:30px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    cursor:pointer;


    font-family:inherit;


    font-size:18px;


    font-weight:700;


    color:var(--primary);


}





.faq-question span {


    font-size:30px;


    color:var(--gold);


    transition:.3s;


}





.faq-item.active .faq-question span {


    transform:rotate(45deg);


}





.faq-answer {


    max-height:0;


    overflow:hidden;


    transition:.5s ease;


}





.faq-answer p {


    padding:0 30px 30px;


    color:var(--gray);


    line-height:1.8;


}








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



.final-cta {


    padding-top:80px;


}





.cta-box {


    background:

    linear-gradient(

    135deg,

    #203A5F,

    #314f79

    );


    border-radius:45px;


    padding:80px;


    text-align:center;


    color:white;


    position:relative;


    overflow:hidden;


}





.cta-box::before {


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    border-radius:50%;


    background:

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


    top:-150px;


    right:-100px;


}





.cta-box .section-tag {


    background:

    rgba(255,255,255,.15);


    color:white;


}



.cta-box h2 {


    position:relative;


    font-size:

    clamp(35px,4vw,55px);


    line-height:1.2;


    margin:25px auto;


    max-width:850px;


}



.cta-box p {


    position:relative;


    max-width:600px;


    margin:0 auto 40px;


    color:

    rgba(255,255,255,.85);


    font-size:18px;


}



.cta-box .primary-btn {


    position:relative;


    background:var(--gold);


}



.cta-box .primary-btn:hover {


    background:white;


    color:var(--primary);


}









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



footer {


    margin-top:30px;


    background:#101c2c;


    color:white;


    padding-top:80px;


}




.footer-grid {


    display:grid;


    grid-template-columns:

    2fr 1fr 1fr;


    gap:50px;


    padding-bottom:60px;


}




.footer-brand .logo {


    color:white;


    margin-bottom:20px;


}



.footer-brand p {


    color:

    rgba(255,255,255,.6);


    max-width:300px;


    line-height:1.8;


}



.footer-links {


    display:flex;


    flex-direction:column;


    gap:15px;


}



.footer-links h3,
.footer-contact h3 {


    margin-bottom:15px;


    font-size:20px;


}



.footer-links a {


    color:

    rgba(255,255,255,.65);


    transition:.3s;


}



.footer-links a:hover {


    color:var(--gold-light);


}




.footer-contact p {


    color:

    rgba(255,255,255,.65);


    margin-bottom:15px;


}




.footer-bottom {


    text-align:center;


    padding:25px;


    border-top:

    1px solid rgba(255,255,255,.1);


    color:

    rgba(255,255,255,.5);


    font-size:14px;


}





/* LANGUAGE SWITCHER */


.language-switcher {

    display:flex;

    align-items:center;

    gap:4px;

	padding: 0px;

}


.lang-btn {


    text-decoration:none;


    font-size:14px;


    font-weight:600;


    color:var(--primary);


    transition:.3s ease;


}



.lang-btn:hover {


    color:var(--gold);


}



.lang-btn.active {


    color:var(--gold);


}
/* =========================================
   PREMIUM LUMINA MENU
========================================= */



.nav-wrapper {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}





.logo {

    font-size:30px;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--primary);

}





/* DESKTOP NAV */


nav ul {

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

    margin:0;

    padding:0;

}



nav ul li {

    position:relative;

}



nav ul a {

    text-decoration:none;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    padding:8px 0;

    transition:.3s ease;

}




nav ul a::after {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s ease;

}



nav ul a:hover {

    color:var(--gold);

}



nav ul a:hover::after {

    width:100%;

}




/* =========================================
   LUMINA HEADER PREMIUM REVEAL v2
========================================= */


/* HEADER */

header .nav-wrapper {

    animation:
    headerReveal 1s cubic-bezier(.22,1,.36,1) forwards;

}










/* MENU ITEMS */


header nav ul li {


    opacity:0;


    transform:

    translateY(-20px);


    filter:blur(5px);


    animation:

    menuItemReveal .7s ease forwards;


}





header nav ul li:nth-child(1){

    animation-delay:.3s;

}


header nav ul li:nth-child(2){

    animation-delay:.45s;

}


header nav ul li:nth-child(3){

    animation-delay:.6s;

}


header nav ul li:nth-child(4){

    animation-delay:.75s;

}


header nav ul li:nth-child(5){

    animation-delay:.9s;

}


header nav ul li:nth-child(6){

    animation-delay:1.05s;

}





@keyframes menuItemReveal {


    to {

        opacity:1;


        transform:translateY(0);


        filter:blur(0);

    }

}






/* LOGO */


header .logo {


    animation:

    logoReveal .9s ease .15s forwards;


    opacity:0;


}



@keyframes logoReveal {


    from {

        opacity:0;

        transform:scale(.9);

        filter:blur(5px);

    }


    to {

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}



/* ===========================
   PREMIUM SOCIAL BUTTONS
=========================== */

.social-links{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}


.social-pill{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:999px;

    text-decoration:none;

    color:#1d2b3a;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

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

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

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;

}



.social-pill svg{

    width:22px;

    height:22px;

    fill:#C79A45;

    transition:.35s ease;

}



.social-pill span{

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

}



.social-pill:hover{

    transform:
        translateY(-4px);

    border-color:#C79A45;

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

    box-shadow:
        0 18px 40px rgba(199,154,69,.25);

}



.social-pill:hover svg{

    transform:rotate(-10deg) scale(1.1);

}



.social-pill:active{

    transform:scale(.97);

}




/* ==========================
   PREMIUM FLOATING CONTACT
========================== */

/* =====================================
social MOBILE FIX
===================================== */







:root{
--blue:#3b82f6;
--blue2:#60a5fa;
}

.floating-social{
position:fixed;
right:25px;
bottom:25px;
display:flex;
flex-direction:column;
gap:18px;
z-index:9999;
}

.social{

width:62px;
height:62px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;
color:#fff;
text-decoration:none;

position:relative;
overflow:hidden;

backdrop-filter:blur(18px);

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

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

box-shadow:
0 0 20px rgba(59,130,246,.25),
0 10px 30px rgba(0,0,0,.25);

transition:.35s;

animation:
appear .8s both,
floating 3s ease-in-out infinite;

}

/* հերթականությամբ հայտնվեն */

.social:nth-child(1){

animation-delay:.2s;

}

.social:nth-child(2){

animation-delay:.4s;

}

.social:nth-child(3){

animation-delay:.6s;

}

/* գույներ */

.whatsapp{

background:linear-gradient(135deg,#25D366,#128C7E);

}

.messenger{

background:linear-gradient(135deg,#7360F2,#5B42E6);

}



/* Hover */

.social:hover{

transform:translateY(-8px) scale(1.15);

box-shadow:
0 0 18px #3b82f6,
0 0 40px #60a5fa,
0 0 80px rgba(96,165,250,.65);

}

/* Shine */

.social::before{

content:"";

position:absolute;

top:-120%;
left:-60%;

width:40%;
height:300%;

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

transform:rotate(25deg);

animation:shine 4s infinite;

}

@keyframes shine{

0%{
left:-60%;
}

100%{
left:180%;
}

}

/* Floating */

@keyframes floating{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

}

/* Appearance */

@keyframes appear{

0%{

opacity:0;

transform:
translateX(60px)
scale(.5);

}

100%{

opacity:1;

transform:
translateX(0)
scale(1);

}

}

/* Mobile */

@media(max-width:768px){

.floating-social{

right:7px;
bottom:7px;
gap:5px;

}

.social{

width:32px;
height:32px;
font-size:24px;

}

}


.phone{
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
}


.mobile-only{
    display:none;
}


@media (max-width:768px){

    .mobile-only{
        display:flex;
    }

}












.contact-main {


    display: flex;
    align-items: center;

    padding: 10px 0;
}


.contact-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1fr);

    gap: 100px;

    align-items: center;
}



/* LEFT */

.contact-message {
    max-width: 560px;
}


.contact-message h1 {
    margin: 16px 0 24px;

    color: #27364B;

    font-size: clamp(38px, 4vw, 62px);

    line-height: 1.08;

    letter-spacing: -0.025em;
}


.contact-message p {
    max-width: 500px;

    margin: 0;

    color: #687383;

    font-size: 18px;

    line-height: 1.7;
}


.contact-message-line {
    width: 70px;

    height: 2px;

    margin: 38px 0 18px;

    background: #9A8C70;
}


.contact-message-note {
    color: #27364B;

    font-size: 14px;

    font-weight: 600;
}



/* FORM */

.contact-form-wrapper {
    width: 100%;
    max-width: 560px;

    margin-left: auto;
}


.contact-form-heading {
    margin-bottom: 24px;
}


.contact-form-heading h2 {
    margin: 7px 0 7px;

    color: #27364B;

    font-size: 28px;

    line-height: 1.2;
}


.contact-form-heading p {
    margin: 0;

    color: #687383;

    font-size: 14px;

    line-height: 1.6;
}


.contact-form {
    padding: 34px;

    background: #F8F7F3;

    border: 1px solid rgba(39, 54, 75, 0.10);

    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(39, 54, 75, 0.08);
}


.form-group {
    margin-bottom: 18px;
}


.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #27364B;

    font-size: 13px;

    font-weight: 600;
	
	text-align: center;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid rgba(39, 54, 75, 0.15);

    border-radius: 11px;

    background: #FFFFFF;

    color: #27364B;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #A1A7AE;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #9A8C70;

    box-shadow:
        0 0 0 4px rgba(154, 140, 112, .10);
}


.form-group textarea {
    min-height: 120px;

    resize: vertical;

    line-height: 1.6;
}


.form-group select {
    cursor: pointer;
}


.contact-submit {
    width: 100%;

    padding: 14px 1px;

    border: none;

    border-radius: 11px;

    background: #27364B;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.contact-submit:hover {
    background: #33465D;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(39, 54, 75, .16);
}



/* MOBILE */

@media (max-width: 900px) {

    .contact-main {
        padding: 60px 0;
    }


    .contact-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-message {
        max-width: 700px;
    }


    .contact-form-wrapper {
        max-width: 700px;

        margin: 0;
    }

}


@media (max-width: 600px) {

    .contact-main {
        padding: 5px 0;
    }


    .contact-message h1 {
        font-size: 25px;
    }


    .contact-message p {
        font-size: 16px;
    }


    .contact-form {
        padding: 24px 1px;

        border-radius: 18px;
    }

}



.about-imagehome {
    width: 100%;
}

.image-placeholderhome {
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
}

.image-placeholderhome img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}


@media (max-width: 1024px) {

    .about-imagehome {
        width: 100%;
    }

    .image-placeholderhome {
        border-radius: 20px;
    }

    .image-placeholderhome img {
        width: 100%;
        height: auto;
    }
}


@media (max-width: 600px) {

    .about-imagehome {
        width: 100%;
    }

    .image-placeholderhome {
        width: 100%;
        border-radius: 16px;
    }

    .image-placeholderhome img {
        width: 100%;
        height: auto;
        display: block;
    }
}