/*
==================================================
SAIR MA'ARIF
Landing Page Style
Traditional Soul Modern School
==================================================
*/


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:
    "Inter",
    "Poppins",
    Arial,
    sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:
    linear-gradient(
        180deg,
        #faf8f2,
        #ffffff
    );

    color:#263238;

}





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


.header{

    position:sticky;
    top:0;
    z-index:100;

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

    padding:20px 8%;

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

    backdrop-filter:blur(15px);

    border-bottom:
    1px solid rgba(0,0,0,.05);

}



.logo h2{

    font-size:28px;

    font-weight:700;

    color:#355c4b;

}



.logo span{

    font-size:12px;

    letter-spacing:3px;

    color:#9b7b35;

}




.header nav{

    display:flex;
    gap:35px;

}



.header a{

    text-decoration:none;

    color:#444;

    font-weight:500;

    transition:.3s;

}


.header a:hover{

    color:#355c4b;

}

/*
==================================================
SAIR BRAND HERO
==================================================
*/


.hero-brand{

min-height:calc(100vh - 90px);

padding:
40px 8% 60px;

display:grid;

grid-template-columns:
1fr 1fr;

align-items:center;

overflow:hidden;

}

.dream{

margin-top:35px;

}



.dream h1{


font-size:80px;

line-height:1;

font-weight:900;


background:

linear-gradient(
90deg,
#355c4b,
#9b7b35
);


-webkit-background-clip:text;

color:transparent;


}




.dream h3{


font-size:35px;

margin-top:20px;

font-weight:600;

}



.dream h3 span{


color:#9b7b35;

}




.philosophy{

margin-top:35px;

font-size:28px;

font-weight:700;

color:#355c4b;

}



.description{


margin-top:25px;

font-size:18px;

line-height:1.8;

max-width:600px;

color:#666;

}




.brand-visual{


height:600px;

position:relative;

display:flex;

justify-content:center;

align-items:center;


}



.light-circle{


position:absolute;


width:450px;

height:450px;


border-radius:50%;


background:

linear-gradient(
135deg,
#edf4ed,
#eee6fa
);


}



.growth-tree{


position:relative;

background:white;


padding:60px;


border-radius:50px;


box-shadow:

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


text-align:center;


}



.tree-icon{


font-size:100px;


margin-bottom:30px;


}



.growth-tree p{


margin:10px;


font-weight:600;

color:#355c4b;

}




.quote-card{


position:absolute;


bottom:80px;


right:20px;


background:white;


padding:25px;


border-radius:25px;


box-shadow:

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


font-style:italic;


max-width:220px;


}





@media(max-width:900px){


.hero-brand{

grid-template-columns:1fr;

text-align:center;

}



.dream h1{

font-size:50px;

}



.brand-visual{

margin-top:50px;

}


}
/*
==================================================
SAIR VIDEO JOURNEY CIRCLE
==================================================
*/


.brand-visual{

position:relative;

display:flex;

justify-content:center;

align-items:center;


}





.video-circle{


width:480px;

height:480px;


border-radius:50%;


overflow:hidden;


position:relative;

z-index:2;


box-shadow:

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


border:

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


}




.video-circle video{


width:100%;

height:100%;


object-fit:cover;


}





.circle-glow{

position:absolute;

width:560px;
height:560px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(220,235,220,.8),
rgba(238,229,250,.2)
);

filter:blur(30px);

animation:
glowPulse 6s infinite;

}


@keyframes glowPulse{

0%,100%{

transform:scale(1);

opacity:.6;

}

50%{

transform:scale(1.08);

opacity:.9;

}



50%{

transform:scale(1.08);

opacity:1;

}


}
.journey-caption{

position:absolute;

bottom:20px;

background:white;

padding:15px 25px;

border-radius:30px;

font-size:14px;

box-shadow:
0 15px 40px rgba(0,0,0,.1);

}
/* =================================
   JOURNEY BUTTON
================================= */


.journey-button{

display:inline-flex;

align-items:center;

gap:18px;


margin-top:40px;


padding:

16px 28px;


border-radius:50px;


background:#355c4b;


color:white;


text-decoration:none;


font-weight:600;


font-size:16px;


transition:.4s;


box-shadow:

0 20px 40px rgba(53,92,75,.25);


}



.journey-button i{


font-style:normal;


font-size:24px;


transition:.4s;


}





.journey-button:hover{


transform:translateY(-5px);


box-shadow:

0 30px 60px rgba(53,92,75,.35);


}



.journey-button:hover i{


transform:translateX(8px);


}
/*
==================================================
SECTION
==================================================
*/


.section{

    padding:
    100px 8%;

    text-align:center;

}



.section h2{

    font-size:42px;

    margin-bottom:25px;

    color:#355c4b;

}



.section>p{

    max-width:800px;

    margin:auto;

    line-height:1.8;

    color:#666;

}





/*
==================================================
SAIR BOX
==================================================
*/


.sair-box{

    margin-top:50px;

    display:grid;

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

    gap:25px;

}



.sair-box div{

    padding:35px;

    border-radius:25px;

    background:white;


    box-shadow:

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

}



.sair-box h3{

    font-size:55px;

    color:#9b7b35;

}





/*
==================================================
PROGRAM CARD
==================================================
*/


.cards{

    margin-top:50px;

    display:grid;

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

    gap:25px;

}



.card{


    padding:35px;


    background:white;


    border-radius:30px;


    text-align:left;


    box-shadow:

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


    transition:.4s;

}



.card:hover{


    transform:
    translateY(-12px);


}




.card h3{

    color:#355c4b;

    margin-bottom:15px;

}






/*
==================================================
SCHOOL
==================================================
*/


.school-grid{


    display:grid;

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

    gap:25px;

    margin-top:50px;

}



.school-grid div{


    padding:30px;

    background:#fafafa;

    border-radius:25px;

}





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


footer{

    padding:
    70px 8%;

    text-align:center;


    background:#355c4b;

    color:white;

}



footer h2{

    font-size:40px;

}



footer p{

    margin-top:20px;

}






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


@media(max-width:900px){


.hero{

    grid-template-columns:1fr;

    text-align:center;

}


.hero-text h1{

    font-size:45px;

}



.sair-box,
.cards,
.school-grid{

    grid-template-columns:1fr;

}



.header nav{

    display:none;

}

}
.video-circle{

width:480px;
height:480px;

border-radius:50%;
overflow:hidden;

position:relative;

z-index:2;

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

}


.video-circle video{

width:100%;
height:100%;

object-fit:cover;

transform:scale(1.05);

}
.opening-film{

display:flex;

width:100%;

height:calc(100vh - 90px);

overflow:hidden;

}
#film{

width:100%;
height:100%;

object-fit:cover;

}
.story-text{

width:30%;

display:flex;

flex-direction:column;

justify-content:center;

padding:70px;


background:

linear-gradient(

135deg,

#f8f3ea,

#e8efe8

);


}
.story-text h2{

font-size:25px;

font-weight:300;

line-height:1.25;

color:#254336;

margin-bottom:25px;

}
.story-text p{

font-size:20px;

color:#666;

line-height:1.6;

}
.story-video{

width:70%;

position:relative;

}
.story-video video{

width:100%;

height:100%;

object-fit:cover;

}


.film-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,

rgba(0,0,0,.55),

rgba(0,0,0,.15),

rgba(0,0,0,.1)

);

}


.film-text{

position:absolute;

left:8%;

top:50%;

transform:translateY(-50%);

z-index:10;

color:white;

display:block;

}


.film-text h2{

font-size:50px;

color:white;

}
#filmTitle{

font-size:68px;

font-weight:300;

line-height:1.2;

opacity:0;

transition:1s;

}
/*fade video*/
function fadeScene(){

player.style.opacity=0;

title.style.opacity=0;

setTimeout(()=>{

playScene(index);

player.style.opacity=1;

},500);

}