.hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .50) 0%,
            rgba(0, 0, 0, .12) 25%,
            rgba(0, 0, 0, .03) 50%,
            rgba(0, 0, 0, .20) 72%,
            rgba(0, 0, 0, .65) 100%
        );
}

.hero-content p {
    max-width: 350px;
}

.hero-banner .hero-corner-text {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 5;
    color: var(--text-secondary);
}

.hero-banner .hero-corner-text p {
    margin: 0;
}

@media (max-width: 768px) {
    .hero-banner .hero-corner-text {
        position: relative;
        right: auto;
        bottom: auto;
        grid-row: 2;
        padding: 15px;
        background: #1A2704;
    }
}

.banner-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.hero-banner.journey-banner .hero-content p {
    max-width: 350px;
}

@media (max-width: 768px) {
    .hero-banner.journey-banner {
        grid-template-rows: 100vh;
    }

    .hero-banner.journey-banner .hero-content {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        grid-row: 1;
        align-self: end;
    }
}

.hero-info-box {
    position: absolute;
    bottom: 0;
    right: 12%;
    z-index: 5;
    width: 300px;
    background: rgba(20, 15, 12, .62);
    backdrop-filter: blur(4px);
    transform: translateY(-35%);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .18);
}

.hero-info-item {
    padding: 20px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.hero-info-item:last-child {
    border-bottom: 0;
}

.hero-info-item span {
    display: block;
    color: var(--text-secondary);
    text-transform: capitalize;
    font: 400 16px/1.2 "Mallory", sans-serif;
}

.hero-info-item h5 {
    color: var(--text-secondary);
}


@media (max-width: 1399px) {

    .hero-info-box {
        right: 8%;
        width: 280px;
    }

}


@media (max-width: 1200px) {

    .hero-info-box {
        right: 40px;
        width: 270px;
    }

    .hero-info-item {
        padding: 18px 20px;
    }

}


@media (max-width: 991px) {

    .hero-info-box {
        right: 20px;
        width: 250px;
    }

}


@media (max-width: 768px) {

    .hero-banner {
        height: auto;
        min-height: 0;
        overflow: visible;
        display: grid;
        grid-template-rows: 100vh auto;
    }

    .hero-bg,
    .hero-overlay {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        height: 100vh;
    }

    .hero-content {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        grid-row: 1;
        align-self: end;
        width: 100%;
        z-index: 5;
    }

    .hero-info-box {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        grid-row: 2;
        width: 100%;
        padding: 10px 0px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: #1A2704;
        transform: none;
        box-sizing: border-box;
    }

    .hero-info-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .18);
    }

}

@media (max-width: 575px) {

    .hero-info-box {
        grid-template-columns: 1fr;
    }

    .hero-info-item {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .hero-info-item:last-child {
        border-bottom: 0;
    }
}