/* .hero {
    background:
    linear-gradient(
        rgba(0,0,0,.6),
        rgba(0,0,0,.6)
    ),
    url('../img/masjid.jpg');

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

    color:white;

    padding:120px 0;
} */

.hero{
    min-height:60vh;

    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.65)),
    url('../img/hero.jpg');

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

    color:white;

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

.hero-logo{
    max-width:320px;
    height:auto;
}

.hero h1{
    font-size:3.5rem;
    font-weight:700;
    margin-bottom:20px;
}

.hero p{
    max-width:800px;
    margin:auto;
}

/* Tablet */
@media (max-width: 992px){

    .hero h1{
        font-size:2.8rem;
    }

}

/* Smartphone */
@media (max-width: 768px){

    .hero-logo{
        max-width:220px;
        height:auto;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:1rem;
    }

}

/* Smartphone kecil */
@media (max-width: 576px){

    .hero h1{
        font-size:1.7rem;
    }

}

.section-title{
    font-weight:bold;
    margin-bottom:30px;
}

.card{
    transition:.3s;
}

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

.gallery-img{
    width:100%;
    /* height:250px; */
    aspect-ratio: 4 / 3;
    object-fit:cover;
    border-radius:15px;

    transition:.3s;

}

.gallery-img:hover{
    transform:scale(1.03);
}