/* main.scss */

/* Import other SCSS files */
/* @import 'other_file'; */
@import './navbar.scss';
@import './banner.scss';
@import './services.scss';
@import './whatsapp.scss';

/**
 * Smooth scrolling on the whole document
 */
 html {
	scroll-behavior: smooth;
    font-weight: lighter;
}

/* Your SCSS styles go here */
body {
    color: #4c4c4c !important;
}
.remove-paddings {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.max-width {
    max-width: 1280px !important;
    margin: 0 auto;
}

/** TYPEs **/
.title {
    text-transform: uppercase;
    color: #fbc306;
    font-weight: normal;

}

.subtitle {

}

.guara-menu {
    width: 100%;
    justify-content: end;
}


/** Estilos aplicados na área de video **/
.text-column {
    text-align: left;
    padding: 32px;
    align-items: center;

}

.video-column {
    justify-content: right;
    text-align: right;
}


/** Estilos aplicados para os icones de serviço */
.orange-svg-icon {
    //filter: invert(19%) sepia(66%) saturate(7476%) hue-rotate(350deg) brightness(95%) contrast(96%)
}

.services-line {
    display: flex;
    justify-content: center;
}

.service-item {
    width: fit-content !important;
    width: -moz-fit-content  !important;
    text-align: center;

    .card-area {
        max-width: 120px;
        /* text-align: center; */
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;

    }

    p {
        margin-top: 6px !important;
        font-weight: 500;
    }

    a {
        text-decoration: none;
        color: #4c4c4c;
    }
}

.guara-card {
    border-radius: 50%;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    box-shadow: var(--bs-box-shadow-sm)!important;
    padding: 24px;
}




/** Estilos para a a área de diferenciais */
.diferenciais-line {
    display: flex;
    justify-content: center;
}

.diferencial-item {
    width: fit-content !important;
    width: -moz-fit-content  !important;
    text-align: center;
    max-width: 210px !important;

    a {
        text-decoration: none !important;
    }
}

.diferencial-card {
    border-radius: 4px;
    height: 72px;
    /* width: 140px; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fbc306;
    margin: 0 auto;
    padding: 0 8px;

    span {
        color: black;
        text-wrap: wrap;
        font-weight: normal;
        text-transform: uppercase;
    }
}


/** Estilos para a a área de clients */
.clients-line {
    display: flex;
    justify-content: center;
}

.client-item {
    width: fit-content !important;
    width: -moz-fit-content  !important;
    text-align: center;
}

.client-card {
    height: 100px;
    width: 150px;
    background-position: center;
    background-size: cover;

}

/** Estilos para a a área de footer */
.footer-logo {
    width: 113px;
    height: 86px;
    margin-left: auto;
    display: block;
}
.social-icons {
    display: flex;
    margin-top: .5rem;
    color: black;
    font-weight: lighter;
    justify-content: center;
    align-items: center;

    .sicon {
        margin-right: 4px;
        height: 18px;
        width: 18px;
        color: black;
    }

    a {
        text-decoration: none;
            color: black;
    }

}

.address {
        font-weight: lighter;
}

.copy {
    padding: 4rem 0 0 0;
    color: black;
    font-weight: lighter;
    text-align: center;
    font-size: 10px;
}

/** Setores */
.guara-video {
    text-align: center;
    padding: 32px;
}

.guara-services {
    background-color: #fbc306;
    text-align: center;
    padding: 32px;
    color: #242424;

    h3 {
        color: white !important;
    }
}

.guara-diferenciais {
    text-align: center;
    padding: 32px;
}

.guara-clients {
    text-align: center;
    padding: 32px;
}

.guara-contact {
    text-align: center;
    padding: 32px;
    color: black;
    font-weight: lighter;
    
    .form-control {
        background-color: #e5e5e5 !important;
    }

    .btn-red {
        background:#fbc306;
        color: black;
        border-radius: 4px;
        margin-top: 1rem;
    }

    .btn-red:hover {
        background:#e8b50b;
        color: white;
    }
}

.guara-footer {
    background-color: #fbc306;
    padding: 32px;
    justify-content: center;
    font-weight: lighter;
    color: black;
}


.guara-curriculo-titulo {
    background-color: #fbc306;
    color: white;
    text-transform: uppercase;
    padding: 24px 0;

    h3 {
        margin-bottom: 0 !important;
        font-weight: bolder !important;
    }
}

.curriculo-text {
    padding: 12px 0;

    p {

    }
}

.guara-curriculo {
    padding: 36px 24px;
    height: 40vh;

    .btn-red {
        background:#fbc306;
        color: white;
        border-radius: 2px;
        margin-top: 1rem;
    }

    .btn-red:hover {
        background:#d8161d;
        font-weight: 500;
        color: white;
    }
}

.tel-footer {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    
}

.hand-shake-img {
    background: url('../../assets/img/hand_shake.png') no-repeat;
    background-position: center;
    background-size: cover;
    width: 100.5%;
    height: 240px;
}

.custom-hr {
    color: #fbc306;
    width: 90%;
    margin: 0 auto;
    border: solid 1.5px #fbc306
}

/** Página de servicos */
.servicos {
    font-weight: lighter;
}
.truste-header {
    background: url('../../assets/img/guara-site-page-trustee.svg') no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 180px;
}

.antecipacao-header {
    background: url('../../assets/img/guara-site-page-antecipacao.svg') no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 180px;
}

.emprestimo-header {
    background: url('../../assets/img/guara-site-page-emprestimos.svg') no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 180px;
}

.header-text {
    width: 100%;
    height: 100%;
    color: black;
    font-weight: lighter;
    padding: 72px 0;
    justify-content: center;
    text-align: center;

    h2 {
        font-weight: lighter;
    
    }

    h5 {
        font-weight: lighter;
    }
}

.services-item {
    padding: 0 12px;
}