:root {
    --peach: #ffdab9;
    --dark: #2f4f4f;
    --cyan: #e0ffff;
    --brown: #3e2723;
    --green: #25d366;
    --blue: #4DB6FF;
}

* {
    box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,body {
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section{
padding:70px 10%;
text-align:center;
}

#nav-container{
    background-color: var(--blue);
    position: sticky;
    top: 0px;
}
.nav-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 60px;
}
.nav-flex label,#humberger {
    display: none;
}
nav ul {
    list-style-type: none;
    display: flex;
    padding: 0;
    margin: 0;
}
nav ul li a {
    display: block;
    color: white;
    padding: 0  16px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 60px;
}
nav ul li a:hover {
    background-color: var(--peach);
    transition: all 0.3s;
}
.nav-brand h2 {
    margin: 14px 0 0 10px;
    color: white;
}

/* HERO */

#hero-container{
height:500px;
background-repeat: no-repeat;
display:flex;
flex-direction: column;
justify-content:center;
background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),
url("https://images.unsplash.com/photo-1596461404969-9ae70f2830c1");
background-size:cover;
color: white;
background-attachment: fixed;
}
.hero-text{
    padding:70px 10%;
    text-align:center;
}

.hero-text h1{
font-size:50px;
color:#FFD84D;
}

.hero h2{
margin:10px 0;
}

.hero p{
width:60%;
margin:auto;
}
.btn{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:#FFD84D;
color:black;
text-decoration:none;
border-radius:30px;
font-weight:600;
}

.btn-wa{
display:inline-block;
margin-left:10px;
padding:12px 25px;
background:#25D366;
color:white;
text-decoration:none;
border-radius:30px;
}
.btn:hover, .btn-wa:hover {
    background-color: var(--dark);
    transition: all 0.3s;
}


main {
    width: 80%;
    margin: auto;    
}
/* About */
#about h1 {
    color: black;
    text-align: center;
    margin-top: 50px;
}
#about .about-deskripsi {
    text-align: center;
    color: var(--dark);
}
.about-flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 30px auto;
}
.about-image,.about-text {
    width: 50%;
    margin: 14px;
    text-align: justify;
}
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;    
}
/* PROGRAM */
#program {
    display: flex;
    flex-direction: column; /* Mengatur judul di atas, kartu di bawah */
    align-items: center;    /* Menengahkan semuanya secara horizontal */
    width: 100%;
    padding: 20px 0;        /* Memberi ruang atas dan bawah agar rapi */
}

#program h2 {
    text-align: center;
    width: 100%;           /* Memastikan judul mengambil ruang penuh */
    margin: 20px auto;    /* Memberi jarak ke kartu-kartu di bawahnya */
}
#program, .program-container{
display:flex;
gap:30px;
margin-top:30px;
justify-content:center;
}
.card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
width:250px;
}

.card i{
font-size:40px;
color:#4DB6FF;
margin-bottom:15px;
}
.card:hover {
    transform: translateY(-10px); /* Kartu naik ke atas 10px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Bayangan jadi lebih tebal */
}

/* Efek tambahan: mengubah warna icon saat kartu di-hover */
.card:hover i {
    color: #2a9df4; /* Warna biru yang sedikit lebih gelap atau terang */
    transform: scale(1.1); /* Icon membesar sedikit */
    transition: 0.3s;
}

/* Activities */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin: 30px auto;
    
}
.gallery img {
    width: 25%; 
    object-fit: cover;
    border-radius: 10px;
    transition: 0.3s;
    padding: 5px;
}
.gallery img:hover {
    transform: scale(1.05); /* Gambar membesar sedikit (5%) */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Memberi bayangan agar terlihat 'terangkat' */
    cursor: pointer; /* Mengubah kursor jadi tangan */
    filter: brightness(1.1); /* Opsional: gambar jadi sedikit lebih terang */
}
/* SCHEDULE */

table{
margin:auto;
margin-top:20px;
border-collapse:collapse;
}

table th, table td{
border:1px solid #ddd;
padding:15px 30px;
}

/* FACILITIES */

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

.facility-box i{
font-size:40px;
color:#FFD84D;
margin-bottom:10px;
transition: transform 0.3s ease, color 0.3s ease;
}

/* 2. Efek saat icon di-hover */
.facility-box i:hover {
    transform: scale(1.2); /* Icon membesar 20% */
    color: #e3ba15; /* Warna berubah jadi kuning lebih terang saat disentuh */
    cursor: pointer;
}

/* 3. Efek jika ingin seluruh box (ikon + teks) sedikit terangkat */
.facility-box > div {
    transition: transform 0.3s ease;
}

.facility-box > div:hover {
    transform: translateY(-5px); /* Seluruh bagian naik sedikit */
    cursor: pointer;
}

/* CONTACT US*/
#contact h1 {
    margin-top: 80px;
    text-align: center;
}
.contact-deskripsi {
    text-align: center;
    color: var(--dark);
}
.contact-flex {
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
    width: 100%;
}
.map {
    width: 60%;
}
.map h3 {
    text-align: center;
    color: var(--dark);
}
.map iframe {
    border-radius: 10px;
}
.social-media {
    width: 40%;
    padding: 10px;    
}
.social-media h3 {
    text-align: center;
    color: var(--dark);
}
.social-icon {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    text-decoration: none;    
    color: white;
    padding: 5px;
    border-radius: 10px;
}
.facebook {
    background-color: #3b5998;
}
.twitter {
    background-color: #1da1f2;
}
.instagram {
    background-color: #e4405f;;
}
.linkedin {
    background-color: #0077b5;
}
.social-icon:hover {
    opacity: 0.8;
}



/* FOOTER */

footer{
text-align:center;
padding:20px;
background-color: var(--blue);
color:white;
}

/* WHATSAPP FLOAT */

.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
font-size:30px;
padding:15px;
border-radius:50%;
text-decoration:none;
}


/* Versi Tablet */
@media screen and (max-width:768px) {
    /* tampilan icon humberger */
    #nav-container .nav-flex label {
        display: inline-block;
        color: var(--dark);
        font-style: normal;
    } 
/* Susun Ulang menu Menjadi vertical */
#nav-conainer .nav-flex {
    width: 100%;
}
nav ul {
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}
nav ul li a {
    display: block;
    color: white;    
    padding: 0 30px;
    height: auto;
}   
   pindahkan posisi brand ke kanan, dan perkecil /*  */
.nav-brand h2 {
    position: absolute;
    right: 20px;
}
/* menyembunyikan?menyembunyikan menu */
#nav-container nav {
    display: none;
}
#nav-container .nav-flex input:checked ~ nav {
    display: flex;
}
    /* Menampilkan menu ketika text garis tiga diklik */
    #humberger:checked ~ .menu{
        display: none;
    }

    /* Hero */
    .hero-text{
        display:none;
    }

    /* About */
    .about-flex {
        flex-direction: column;
    }
    .about-image,.about-text {
        width: auto;
    }
     
    /* Program */
   .program-container { 
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        gap: 20px; 
    }
    /* Activities */

    .gallery img {
        width: 50%;
        height: 150px; 
        object-fit: cover;
    }
    /* Contact */
    .contact-flex {
        flex-direction: column;
    }
    .map,.social-media {
        width: 100%;
    }
    /* Facilities */
    .facility-box {
    display: grid;
    /* Membuat 2 kolom dengan ukuran yang sama (fr = fraction) */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; /* Jarak antar kotak (atas-bawah & kiri-kanan) */
    text-align: center;
    padding: 20px;
}
    
}

/* Versi Handphone */
@media screen and (max-width:481px) {
/* Activities */
 .gallery img {
        width: 100%;            
    }  
    
/* Facilities */
.facility-box {
        grid-template-columns: 1fr; /* 1 Kolom penuh */
        gap: 30px; /* Jarak antar item diperlebar sedikit agar enak dilihat */
    }
}