.hero{

    height:500px;

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

    position:relative;

    display:flex;
    align-items:center;
}

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);
}

.hero-content{

    position:relative;
    z-index:2;

    width:90%;
    max-width:1300px;

    margin:auto;

    color:white;
}

.hero-content h1{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:33px;
}

.hero-content h4{
    font-size:25px;
    color: red;
}

.hero-content p{
    font-size:22px;

/* Responsif untuk Layar Ponsel di hero.css */
@media (max-width: 768px) {
    .hero {
        height: 350px; /* Mengurangi tinggi banner agar lebih proporsional di HP */
    }

    .hero-content {
        width: 95%; /* Lebar konten dibuat sedikit lebih luas di HP */
    }

    .hero-content h1 {
        font-size: 24px; /* Memperkecil ukuran judul utama */
        letter-spacing: 1px;
    }

    .hero-content h4 {
        font-size: 18px; /* Memperkecil sub-judul */
    }

    .hero-content p {
        font-size: 15px; /* Memperkecil paragraf agar mudah dibaca */
    }
}
}