/* 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;
}

/* 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;
}

/** TYPEs **/
.title {
    text-transform: uppercase;
    color: #0C62AD;
    font-weight: bold;

}

.subtitle {

}

.cer-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 */
.red-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;
    }
}

.cer-card {
    border-radius: 12px;
    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;
}

.diferencial-card {
    border-radius: 12px;
    height: 60px;
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0C62AD;

    span {
        color: white;
        text-wrap: wrap;
        font-weight: 600;
    }
}


/** 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 {
    background: url("../img/logo_cer_branco.svg") no-repeat;
    background-position: center;
    background-size: cover;
    width: 249px;
    height: 54px;
}
.social-icons {
    display: flex;
    margin-top: .5rem;
    color: white;
    font-weight: 500;
    justify-content: center;
    align-items: center;

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

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

}

.address {
    color: white;
}

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

/** Setores */
.cer-video {
    background-color: #e6e6e6;
    text-align: center;
    padding: 32px;
}

.cer-services {
    background-color: #e6e6e6;
    text-align: center;
    padding: 32px;
}

.cer-diferenciais {
    text-align: center;
    padding: 80px;
}

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

.cer-contact {
    background-color: #e6e6e6;
    text-align: center;
    padding: 32px;

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

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

.cer-footer {
    background-color: #0C62AD;
    padding: 32px;
    justify-content: center;
    color: white;
    text-align: center;
}


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

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

.curriculo-text {
    padding: 12px 0;

    p {

    }
}

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

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

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

.navbar-brand img {
    height: 60px !important;
}