:root {
    --bs-green-vale: 0, 128, 123, 255;
    --bs-blue-vale: 60,181,229,255;
    --bs-gray-vale: 85, 85, 85, 255;
    --bs-white-vale: 255, 255, 255, 255;
    --bs-gray-300: 237, 241, 246;
}

@font-face {
    font-family: 'Lato-vale';
    src: url('../../fonts/lato/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* #region ================= GENERAL ================== */
.content {
    background-color: rgb(var(--bs-white-vale));
}

.content, p, a, span, button {
    font-family: 'Lato-vale', Montserrat !important;
    font-size: clamp(0.9rem, 1.2vw, 2vw) !important;
    color: rgb(var(--bs-gray-vale));
}

h1, h2, h3, h4, h5 {
    font-family: Lato-vale, Montserrat !important;
    font-weight: bold;
    color: rgb(var(--bs-green-vale));
}

b {
    color: rgb(var(--bs-green-vale));
}

a {
    color: rgb(var(--bs-blue-vale)) !important;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}
    a:hover{
        color: rgb(var(--bs-green-vale)) !important;
    }

.fa {
    color: rgb(var(--bs-blue-vale));
}

.btn-login {
    background-color: rgb(var(--bs-green-vale));
    border-color: transparent;
    color: white !important;
    width: 200px;
}
    .btn-login:hover {
        background-color: transparent;
        color: white !important;
        font-weight: bolder;
    }

.btn-login-sidebar {
    background-color: rgb(var(--bs-green-vale));
    color: white !important;
}
    .btn-login-sidebar:hover {
        color: rgb(var(--bs-green-vale));
        font-weight: bolder;
    }

.card {
    border-color: rgb(var(--bs-blue-vale));
    cursor: crosshair;
}
    .card a {
        color: rgb(var(--bs-green-vale));
    }

.card-icon {
    font-size: 50px !important;
}


/* ==== CARD-VALE ==== */
.card-vale {
    height: 100vh;
    background-image: url('../img/landing-page/vale_ornament_blue.png');
    background-repeat: no-repeat;
    background-size: 39%;
    background-position: bottom right;
}

/* WIDE LAPTOP resolution (1200px and higher) */
@media (min-width: 1200px) {
    .card-vale {
        background-size: 39%;
    }
}

/* STANDART LAPTOP resolution (992px until 1199px) */
@media (max-width: 1199px) {
    .card-vale {
        background-size: 60%;
        margin-bottom: 20px;
    }
}
/* ==== END CARD-VALE ==== */


.background-image {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}
.header-pages-bg {
    height: 50vh;
}

.effect-bg {
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    background: linear-gradient(to right, #001010 -15%, transparent 100%);
    overflow: hidden;
    padding: 0 0 0 7.5% !important;
    text-shadow: 0px 1px 6px black;
}

.breadcrumb {
    color: white;
}
.page-name {
    font-size: clamp(1rem, 2.5vw, 3rem);
}
/* #endregion ============== GENERAL ================== */




/* #region ================= NAVBAR =================== */
.navbar-section {
    z-index: 1000;
}

/* LEFT-navbar */
.left-navbar {
    background-image: url('../img/landing-page/fundo-logo.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    margin-top: -6px;
}

.vale-logo-img {
    width: 40%;
    z-index: 1;
}

.menu-bg-left {
    width: 120%;
    height: 45%;
    margin-left: -10px !important;
    border-radius: 0 100px 100px 0;
    background-color: rgb(var(--bs-green-vale));
}

.menu-icon-left {
    font-size: clamp(1rem, 1.4vw, 5vw);
}
/* END LEFT-navbar */


/* RIGHT-navbar */
.menu-bg-right {
    width: 38px;
    height: 38px;
    background-color: rgb(var(--bs-white-vale));
    border-radius: 50%;
    margin: -5px -10px 0 0;
    box-shadow: lightgrey 0px 0px 8px;
}

.menu-icon-right {
    font-size: 4.5vw;
}

.menu-icon-right i {
    color: rgb(var(--bs-green-vale)) !important;
}
/* END RIGHT-navbar */

/* #endregion ============== NAVBAR =================== */




/* #region ================= SIDEBAR ================== */
.offcanvas {
    background-color: rgb(var(--bs-green-vale));
    background-image: url('../img/landing-page/fundo-logo-menu.png');
    background-repeat: no-repeat;
    background-size: 50%;
    width: 25% !important;
    background-position: bottom right;
}

/* TABLET resolution (768px until 991px) */
@media (max-width: 991px) {
    .offcanvas {
        width: 35% !important;
    }
}

/* MOBILE resolution (max 767px) */
@media (max-width: 767px) {
    .offcanvas {
        width: 65% !important;
    }
}

.menu-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    position: relative;
    margin: 40px 0;
}
    .menu-item a {
        text-decoration: none;
        color: white !important;
        display: flex;
        font-weight: normal !important;
        justify-content: space-between;
        align-items: center;
        transition: transform 0.3s ease-out;
    }
        .menu-item a:hover {
            transform: translateX(15px);
        }

    .menu-item a img {
        display: none;
    }

.btn-exit h2:hover {
    color: rgb(var(--bs-blue-vale)) !important;
}
/* #endregion ============== SIDEBAR ================== */




/* #region ================== HERO ==================== */
.hero {
    height: 100vh;
    background-attachment: fixed;
}

.hero h1 {
    font-family: Lato-vale, Montserrat !important;
    font-size: clamp(2.6rem, 4vw, 5vw);
    color: white;
}

.hero p {
    margin-top: 1rem;
    color: white;
    font-weight: 500;
}

.hero-text {
    transition: opacity 0.5s ease;
}

.hero-title {
    font-size: clamp(3rem, 4.3vw, 5.5vw) !important;
    text-transform: uppercase;
    font-weight: bolder;
    color: rgb(var(--bs-blue-vale));
}
/* #endregion =============== HERO ==================== */




/* #region ================== VIDEO =================== */
.video-vale {
    background: linear-gradient(180deg, rgb(var(--bs-white-vale)) 65%, rgb(var(--bs-blue-vale)) 35%);
}

.video-media {
    box-shadow: 8px 10px 10px rgba(0, 0, 0, 0.5);
    width: 70%;
    border-radius: 8px;
}

/* WIDE LAPTOP resolution (1200px and higher) */
@media (min-width: 1200px) {
    .video-vale {
        height: 90vh;
    }
}

/* STANDART LAPTOP resolution (992px until 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-vale {
        height: 40vh;
    }
}

/* TABLET resolution (768px until 991px) */
@media (max-width: 991px) {
    .video-vale {
        height: 35vh;
    }
}

/* MOBILE resolution (max 767px) */
@media (max-width: 767px) {
    .video-vale {
        height: 20vh;
    }

    .video-media {
        box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
        width: 75%;
        border-radius: 8px;
    }
}
/* #endregion =============== VIDEO =================== */




/* #region =============== WHAT'S NEW ================= */
.what-news {
    background-color: rgb(var(--bs-blue-vale));
}

.card-vale-border {
    z-index: 2;
}

.card-vale-content {
    z-index: 1;
    position: relative;
    transform: translateX(-10%);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
    .card-vale-content.show {
        z-index: 1;
        transform: translateX(0);
        opacity: 1;
    }
/* #endregion ============ WHAT'S NEW ================= */




/* #region ================ PROCEDURE ================= */
.procedure {
    background-color: rgb(var(--bs-green-vale));
}

.tl-entry {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .tl-entry.show {
        opacity: 1;
        transform: translateY(0);
    }
/* #endregion ============= PROCEDURE ================= */




/* #region =================== FAQ ==================== */
.btn-faq {
    color: rgb(var(--bs-green-vale)) !important;
    width: 200px;
    font-weight: bolder;
}
    .btn-faq:hover {
        background-color: rgb(var(--bs-blue-vale));
        color: white !important;
        font-weight: bolder;
    }

.accordion-button {
    background-color: rgb(var(--bs-blue-vale)) !important;
    color: white !important;
    font-weight: bold;
}

    .accordion-button span {
        color: white !important;
    }

.accordion-item {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
    .accordion-item.show {
        opacity: 1;
        transform: translateY(0);
    }
/* #endregion ================ FAQ ==================== */




/* #region =========== SUMMARY PO/GRES PAGE =========== */
.img-summary {
    width: 100%;
}
/* #endregion ======== SUMMARY PO/GRES PAGE =========== */




/* #region ============= COMPLETENESS PAGE ============ */
.completeness-img {
    width: 100%;
}
/* #endregion ========== COMPLETENESS PAGE ============ */




/* #region ================== FOOTER ================== */
footer {
    background-color: rgb(var(--bs-blue-vale));
    color: rgb(var(--bs-gray-300)) !important;
}
    footer a {
        color: rgb(var(--bs-gray-300)) !important;
        font-weight: normal;
    }
        footer a:hover {
            color: rgb(var(--bs-white-vale)) !important;
            text-decoration: underline !important;
        }

footer .list-menu {
    list-style-type: none;
    padding: 0;
}
    footer .list-menu :hover {
        font-weight: bold;
        text-decoration: none;
    }
    footer .list-menu li {
        margin-bottom: 0.7rem;
    }

.footer-title {
    font-size: 1.5rem;
}
/* #endregion ============ FOOTER ============= */