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

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Poppins',sans-serif;
background:#f4f8fb;
overflow-x:hidden;
}


/* ===============================
NAVBAR
================================ */

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

padding:18px 25px;

position:fixed;
top:0;
left:0;
width:100%;

background:rgba(255,255,255,0.1);
backdrop-filter:blur(12px);

box-shadow:0 8px 30px rgba(0,0,0,0.2);

color:white;
z-index:1000;
}


/* ===============================
BRAND
================================ */

.brand{
display:flex;
flex-direction:column;
}

.brand-bg{
font-size:26px;
font-weight:700;
letter-spacing:2px;
color:#ffd700;
text-shadow:0 0 10px rgba(255,215,0,0.8);
}

.brand-sub{
font-size:12px;
opacity:.9;
}


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

.menu{
list-style:none;
display:flex;
gap:30px;
margin:0;
padding:0;
}

.menu li a{
color:white;
text-decoration:none;
font-weight:500;
position:relative;
transition:.3s;
}

.menu li a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#ffd700;
transition:.3s;
}

.menu li a:hover::after{
width:100%;
}


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

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
margin-left:auto;
}

.hamburger span{
height:3px;
width:25px;
background:white;
margin:4px 0;
border-radius:2px;
}


/* ===============================
BANNER
================================ */

.banner{
position:relative;

background-image:
linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('../assets/images/sekolah.jpg');

background-size:cover;
background-position:center;

height:720px;

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

color:white;
padding-top:80px;
}


/* DARK OVERLAY */

.banner::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
135deg,
rgba(0,0,0,.8),
rgba(11,127,171,.7)
);
}


/* HERO CONTENT */

.banner-content{
position:relative;
z-index:2;
max-width:800px;
animation:fadeUp 1.2s ease;
}

.banner h2{
font-size:58px;
font-weight:700;
margin-bottom:15px;
}

.highlight{
color:#ffd700;
text-shadow:0 0 15px rgba(255,215,0,.8);
}

.banner p{
font-size:20px;
margin-bottom:25px;
opacity:.9;
}

.stars{
font-size:22px;
margin-bottom:25px;
}


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

.buttons a{
padding:14px 30px;
border-radius:40px;
text-decoration:none;
font-weight:600;
margin:10px;
display:inline-block;
transition:.4s;
}

/* BUTTON SURVEY */

.btn-ipak{
background:linear-gradient(135deg,#ffd700,#ffc400);
color:#333;
box-shadow:0 5px 20px rgba(255,215,0,.6);
}

.btn-ipak:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(255,215,0,.8);
}

/* BUTTON HASIL */

.btn-ipkp{
background:white;
color:#0b7fab;
box-shadow:0 5px 20px rgba(0,0,0,.3);
}

.btn-ipkp:hover{
transform:translateY(-3px);
}


/* ===============================
INFO SECTION
================================ */

.info{
padding:80px 20px;
text-align:center;
background:#f4f8fb;
}

.info h3{
font-size:34px;
color:#0b7fab;
margin-bottom:30px;
}


/* CARD CONTAINER */

.box{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-top:40px;
}


/* CARD */

.item{
background:rgba(255,255,255,.7);
backdrop-filter:blur(12px);

padding:30px;
border-radius:18px;

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

width:200px;
transition:.4s;
}

.item:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.item i{
font-size:34px;
color:#0b7fab;
margin-bottom:10px;
}


/* ===============================
INTEGRITAS
================================ */

.integritas{
padding:80px 20px;
text-align:center;

background:linear-gradient(135deg,#0b7fab,#4facfe);
color:white;
}

.integritas h3{
font-size:34px;
margin-bottom:15px;
}

.stars-big{
font-size:36px;
margin-top:20px;
}


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

footer{
background:#071f2b;
color:white;
text-align:center;
padding:35px;
font-size:14px;
line-height:1.8;
}


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

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


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

@media (max-width:900px){

/* NAVBAR */

.navbar{
padding:15px 20px;
}

/* HAMBURGER */

.hamburger{
display:flex;
}

/* MENU MOBILE */

.menu{
display:none;
flex-direction:column;

position:absolute;
top:65px;
right:0;

background:#0b7fab;
width:220px;

padding:20px;

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

.menu.show{
display:flex;
}

.menu li{
margin:10px 0;
}

/* HERO TEXT */

.banner h2{
font-size:36px;
}

/* CARD */

.box{
flex-direction:column;
align-items:center;
}

}