.hero-section{
    width:100%;
    padding:10px 0 0;
    background:#070b17;
    overflow:hidden;
}

.hero-viewport{
    width:100%;
    overflow:visible;
}

.hero-track{
    display:flex;
    gap:18px;
    transition:transform .7s ease;
    padding:0 3.2vw;
}

.hero-slide{
    position:relative;
    flex:0 0 93.6vw;
    height:590px;

    border-radius:22px;
    overflow:hidden;

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

    border:1px solid #707070;

    box-shadow:
        0 28px 50px rgba(0,0,0,.62),
        0 8px 20px rgba(0,0,0,.45);

    cursor:pointer;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.hero-slide:hover{
    border-color:rgba(255,255,255,.95);

    box-shadow:
        0 0 0 3px rgba(255,255,255,.95),
        0 30px 55px rgba(0,0,0,.70),
        0 10px 24px rgba(0,0,0,.50);
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.62) 22%,
        rgba(0,0,0,.25) 48%,
        rgba(0,0,0,0) 82%
    ),
    linear-gradient(
        0deg,
        rgba(0,0,0,.56) 0%,
        rgba(0,0,0,.18) 38%,
        rgba(0,0,0,0) 75%
    );

    z-index:1;
}

.hero-content{
    position:absolute;
    left:72px;
    top:50%;
    transform:translateY(-42%);
    z-index:2;
    color:#fff;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:29px;
    padding:0 11px;

    border-radius:5px;
    background:#fff;
    color:#111;

    font-size:14px;
    font-weight:800;

    margin-bottom:14px;
}

.hero-content h1{
    line-height:.9;
    font-weight:900;
}

.hero-subtitle{
    margin:24px 0 0;
    font-size:16px;
    font-weight:800;
    color:#fff;
}

.hero-info{
    margin:8px 0 0;
    font-size:14px;
    color:rgba(255,255,255,.76);
}

.hero-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:11px;
    margin-top:22px;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:.3s ease;
}

.dot.active{
    background:#fff;
}




/* Menu principal */
.menu-custom{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:17px;
    font-weight:500;
    text-transform:none !important;
    letter-spacing:0;
}

/* Ícones */
.menu-custom i{
    font-size:16px;
    transition:all .3s ease;
}

/* Hover */
.menu-custom:hover i{
    transform:translateY(-1px);
}

/* Remove maiúsculo do tema */
.nav-links .nav-link{
    text-transform:none !important;
}

/* Espaçamento entre menus */
.nav-links > li{
    margin:0 14px;
}




/* FORÇA TAMANHO DO MENU */
#navigation.modern-nav .nav-menu .nav-links,
#navigation.modern-nav .nav-menu .nav-links > li,
#navigation.modern-nav .nav-menu .nav-links > li > a,
#navigation.modern-nav .nav-menu .nav-links > li > a span,
#navigation.modern-nav .nav-menu .nav-links > li > a i {
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

/* Ícones um pouco menores que o texto */
#navigation.modern-nav .nav-menu .nav-links > li > a i {
    font-size: 17px !important;
    margin-right: 8px;
}

/* Alinhamento */
#navigation.modern-nav .nav-menu .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}



/* FORÇA TAMANHO DOS BOTÕES DO MENU */
#navigation a.nav-button,
#navigation a.nav-button:link,
#navigation a.nav-button:visited,
#navigation a.nav-button:hover,
#navigation a.nav-button:focus {
    font-size: 15px !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

/* Ajusta altura e respiro dos botões */
#navigation .nav-button {
    padding: 13px 20px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Tamanho dos menus Início / Catálogo */
#navigation .nav-menu .nav-links > li > a.menu-custom,
#navigation .nav-menu .nav-links > li > a.menu-custom span {
    font-size: 15px !important;
}

/* Tamanho dos ícones */
#navigation .nav-menu .nav-links > li > a.menu-custom i {
    font-size: 15px !important;
}

/* Tamanho dos botões Entrar / Contato */
#navigation .nav-button {
    font-size: 15px !important;
}



/* ==========================
   FOOTER SST CLASS
========================== */

.sst-footer{
    background:#02020b;
    padding:70px 20px 40px;
    text-align:center;
}

.footer-logo img{
    max-width:180px;
    margin-bottom:30px;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    margin-bottom:18px;
}

.footer-links a{
    color:#ffffff;
    font-size:14px;
    text-decoration:none;
    transition:.3s;
    opacity:.85;
}

.footer-links a:hover{
    opacity:1;
    color:#ffffff;
}

.footer-description{
    max-width:700px;
    margin:35px auto 25px;
    color:#b9b9b9;
    font-size:13px;
    line-height:1.8;
}

.footer-copyright{
    color:#8f8f8f;
    font-size:13px;
}


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

    .hero-track{
        gap:12px;
        padding:0 5vw;
    }

    .hero-slide{
        flex-basis:90vw;
        height:420px;
        border-radius:18px;
        background-position:center center;
    }

    .hero-content{
        position:absolute;
        left:15px;
        right:15px;
        top:50%;

        max-width:95%;

        transform:translateY(-50%);
    }

    .hero-tag{
        height:25px;
        padding:0 10px;
        margin-bottom:12px;

        font-size:12px;
    }

    .hero-content h1{
        font-size:clamp(28px, 8vw, 42px);
        line-height:.9;
        margin-bottom:10px;
    }

    .hero-subtitle{
        margin-top:10px;
        font-size:clamp(14px, 4vw, 18px);
        line-height:1.25;
        max-width:95%;
    }

    .hero-info{
        margin-top:8px;
        font-size:13px;
        line-height:1.3;
    }

    .hero-dots{
        margin-top:18px;
    }

}



/* CELULAR PEQUENO */
@media (max-width: 480px){

    .hero-slide{
        flex-basis:90vw;
        height:340px;
        border-radius:16px;
    }

    .hero-content{
        left:15px;
        right:15px;

        max-width:95%;
    }

    .hero-tag{
        font-size:11px;
    }

    .hero-content h1{
        font-size:clamp(24px, 8vw, 34px);
        line-height:.95;
    }

    .hero-subtitle{
        font-size:13px;
        line-height:1.25;
        margin-top:8px;
    }

    .hero-info{
        font-size:11px;
    }

    .hero-dots{
        gap:9px;
        margin-top:15px;
    }

    .dot{
        width:7px;
        height:7px;
    }

}