/* =========================================================
   BANNER HOME
========================================================= */

.banner-home {

    width: 100%;
    height: 720px;

    position: relative;

    overflow: hidden;

    background: #00263f;
}

/* =========================================================
   SLIDES
========================================================= */

.slide {

    width: 100%;
    height: 100%;

    position: absolute;

    top: 0;
    left: 0;

    opacity: 0;

    visibility: hidden;

    transition: opacity 1s ease;

    z-index: 1;
}

.slide.ativo {

    opacity: 1;

    visibility: visible;

    z-index: 2;
}

.slide picture,
.slide img {

    width: 100%;
    height: 100%;

    display: block;
}

.slide img {

    object-fit: cover;

    object-position: center center;
}

/* =========================================================
   FILTRO
========================================================= */

.banner-overlay {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(0,38,63,0.88) 0%,
        rgba(0,38,63,0.72) 35%,
        rgba(0,38,63,0.25) 70%,
        rgba(0,38,63,0.05) 100%
    );
}

/* =========================================================
   TEXTO
========================================================= */

.banner-texto {

    position: absolute;

    top: 50%;
    left: 80px;

    transform: translateY(-50%);

    width: 600px;

    z-index: 3;

    color: #fff;
}

.banner-texto span {

    display: inline-block;

    color: #f4ead6;

    font-family: 'HomepageBold', Arial, sans-serif;

    font-size: 12px;

    letter-spacing: 4px;

    border-left: 3px solid #c7a15e;

    padding-left: 16px;

    margin-bottom: 25px;

    text-transform: uppercase;
}

.banner-texto h1 {

    font-family: 'Crosever', serif;

    font-size: 78px;

    line-height: 0.95;

    font-weight: normal;

    color: #f4ead6;

    margin-bottom: 25px;

    text-transform: uppercase;
}

.banner-texto h2 {

    font-family: 'HomepageBook', Arial, sans-serif;

    font-size: 26px;

    line-height: 1.4;

    font-weight: normal;

    margin-bottom: 35px;
}

/* =========================================================
   BOTÕES
========================================================= */

.banner-botoes {

    display: flex;

    gap: 12px;
}

.btn-claro {

    background: #f4ead6;

    color: #00263f;

    text-decoration: none;

    padding: 16px 28px;

    font-family: 'HomepageBold', Arial, sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all .3s;
}

.btn-claro:hover {

    background: #d7c29a;
}

.btn-escuro {

    border: 1px solid #fff;

    color: #fff;

    text-decoration: none;

    padding: 16px 28px;

    font-family: 'HomepageBold', Arial, sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all .3s;
}

.btn-escuro:hover {

    background: #fff;

    color: #00263f;
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:768px) {

    .banner-home {

        height: 760px;
    }

    .slide img {

        object-position: center center;
    }

    .banner-overlay {

        background: linear-gradient(
            180deg,
            rgba(0,38,63,0.15) 0%,
            rgba(0,38,63,0.35) 35%,
            rgba(0,38,63,0.92) 100%
        );
    }

    .banner-texto {

        width: calc(100% - 40px);

        left: 20px;

        right: 20px;

        top: auto;

        bottom: 40px;

        transform: none;

        text-align: center;
    }

    .banner-texto span {

        border-left: none;

        border-top: 2px solid #c7a15e;

        padding-left: 0;

        padding-top: 12px;

        font-size: 11px;
    }

    .banner-texto h1 {

        font-size: 46px;
    }

    .banner-texto h2 {

        font-size: 20px;
    }

    .banner-botoes {

        flex-direction: column;
    }

    .btn-claro,
    .btn-escuro {

        width: 100%;

        text-align: center;
    }

}