section {
    padding-top: 100px;
    padding-bottom: 50px;
}


/* hero */
.hero-box .box p{
    width: 500px;
}

.hero-box .box img {
    width: 400px;
}

@media (max-width: 992px) {
    .hero-box .box p{
    font-size: 14px;
    width: 300px;
}

.hero-box .box img {
    width: 300px;
}
}

@media (max-width: 768px) {
    .hero {
        padding-top: 50px;
    }


    .hero-box{
        text-align: center;
    }

    .hero-box .box-p{
        width: 100%;
    }
}
/* Hero */

/* About */
.about-box img{
    width: 400px;
}

@media (max-width: 475px) {
    .about-img{
        width: 300px;
    }
}
/* About */

/* Services */
.services-box .service i{
    font-size: 30px;
    border-radius: 4;
}

/* FAQ */
.faq-box .accordion-button::after{
    background-color: white;
    border-radius: 100%;
}

.footer {
    margin-top: 100px;
    padding-bottom: 20px;
}

.footer-box .row .col:nth-child(2) a {
    opacity: 75%;
}

.footer-box .row .col:nth-child(2) a:hover {
    opacity: 100%;
}

.copyright{
    margin-top: 100px;
    
}

      body{
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
        }

        .lokasi{
            background: white;
            width: 80%;
            margin: 40px auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        }

        iframe{
            width: 100%;
            height: 350px;
            border-radius: 10px;
        }

/* Judul */
.title{
    text-align:center;
    color:white;
    padding:40px 20px;
}

.title h1{
    margin:0;
    font-size:36px;
}

/* Container Guru */
.guru-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:30px;
    padding:40px;
}

/* Card Guru */
.card{
    background:white;
    border-radius:15px;
    text-align:center;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-10px);
}

/* Foto Guru */
.card img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #4facfe;
}

/* Nama Guru */
.nama{
    font-size:20px;
    font-weight:bold;
    margin-top:15px;
}

/* Mapel */
.mapel{
    color:#777;
    margin-top:5px;
}

/* Tombol */
.btn{
    display:inline-block;
    margin-top:15px;
    padding:8px 18px;
    background:#4facfe;
    color:white;
    text-decoration:none;
    border-radius:20px;
    font-size:14px;
}

.btn:hover{
    background:#2b7cff;
}