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

.hero-banner {
    margin-bottom: 70px;
}

.banner-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
}

/* OVERLAY */

.carousel-item {
    position: relative;
}

    .carousel-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.35);
        border-radius: 24px;
    }

/* CAPTION */

.carousel-caption {
    bottom: 18%;
}

    .carousel-caption h1 {
        font-size: 56px;
        font-weight: 800;
    }

    .carousel-caption p {
        font-size: 20px;
        margin-top: 16px;
    }

/* =========================
   GALERIA
========================= */

.galeria-section {
    margin-bottom: 80px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 44px;
    font-weight: 800;
    color: #07112b;
}

.gallery-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 24px;
}

/* =========================
   CONTROLES
========================= */

.carousel-control-prev,
.carousel-control-next {
    width: 8%;
}

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

@media (max-width: 768px) {

    .banner-img {
        height: 260px;
        border-radius: 18px;
    }

    .gallery-img {
        height: 220px;
        border-radius: 18px;
    }

    .carousel-caption {
        bottom: 10%;
    }

        .carousel-caption h1 {
            font-size: 28px;
        }

        .carousel-caption p {
            font-size: 14px;
        }

    .section-title {
        font-size: 32px;
    }
}