/* ----------------------------------------------------------
    Theme Name: Portal do Cliente Theme
    Theme URI: https://marcasite.com.br
    Author: Vinicius Rodrigues
    Author URI: https://www.linkedin.com/in/vinicius-rodrigues-466243186/
    ----------------------------------------------------------- */

/***************************************************************************
       Fonts
***************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/***************************************************************************
       Variáveis
***************************************************************************/

:root {
        --cor-title: #2b2bd5;
        --cor-texto: #3c3c3c;

        --font-Montserrat: "Montserrat", serif;

        --font-extralight: 200;
        --font-light: 300;
        --font-regular: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 800;
}

/***************************************************************************
        Barra de rolagem
***************************************************************************/

html ::-webkit-scrollbar {
        width: 5px;
}

html ::-webkit-scrollbar-thumb {
        background: var(--cor-texto);
        border-radius: 50px;
}

html ::-webkit-scrollbar-track {
        background: #ededed;
}

/***************************************************************************
        All
***************************************************************************/
* {
        margin: 0;
        box-shadow: 0 0 0 0;
        border: 0 none;
        outline: 0;
        font-family: var(--font-Montserrat);
}

body {
        overflow-x: hidden;
}

/************************************************************************************
Header
***********************************************************************************/
header {
        position: relative;
        z-index: 9;
}

header h1 {
        text-transform: uppercase;
        font-size: 33px;
        color: white;
        font-weight: var(--font-light);

        &&& b {
                font-weight: var(--font-semibold);
        }
}

header .padding-header {
        padding: 6rem 1rem;
}

/************************************************************************************
Banner principal
***********************************************************************************/
#banner-principal {
        background-image: url(../imagens/754.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        position: relative;
        top: -19rem;
        padding: 14rem 0rem;
}

#banner-principal h2 {
        font-size: 40px;
        color: white;
        font-weight: var(--font-bold);
}

#banner-principal ul {
        padding: 0px 25px;
        margin: 20px 0px;
}

#banner-principal li {
        font-size: 24px;
        color: white;
        font-weight: 300;
}

.btn-universal {
        background: rgb(52, 196, 53);
        background: linear-gradient(0deg, rgba(52, 196, 53, 1) 51%, rgba(80, 231, 98, 1) 95%);
        color: white;
        padding: 15px 25px;
        border-radius: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        width: 21rem;
        text-decoration: none;
        transition: all ease-in-out 0.4s;
        font-weight: var(--font-semibold);
}

.btn-universal:hover {
        opacity: 80%;
        transition: all ease-in-out 0.4s;
}

.btn-universal::after {
        content: "";
        background-image: url(../imagens/174879.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 26px;
        height: 26px;
}

.btn-universal a {
        font-size: 17px;
}

/************************************************************************************
Serviços
***********************************************************************************/
#servicos {
        position: relative;
        top: -10rem;
        overflow-x: hidden;
}

#servicos h2 {
        color: var(--cor-title);
        font-weight: var(--font-bold);
        font-size: 30px;
}

#servicos .coluna-2 {
        width: 100%;
}

#servicos .coluna-2 p {
        color: var(--cor-texto);
        font-size: 20px;
        width: 70%;
        font-weight: var(--font-regular);
}

.flutuante {
        animation: flutuar 3s ease-in-out infinite;
}

@keyframes flutuar {
        0% {
                transform: translateY(0);
        }

        50% {
                transform: translateY(-20px);
        }

        100% {
                transform: translateY(0);
        }
}

/************************************************************************************
Soluções
***********************************************************************************/

#solucoes {
        background-image: url(../imagens/cooperation-analyst-chart-professional-paper-economics.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        position: relative;
        top: -16rem;
        padding: 8rem 0px;
        color: white;
        margin-top: 10rem;
}

#solucoes h2 {
        margin: 10px 0px;
        font-weight: var(--font-bold);
        font-size: 30px;
}

#solucoes p {
        font-size: 20px;
        font-weight: var(--font-regular);
        width: 58%;
        margin: auto;
}

#solucoes .btn-universal {
        margin: 20px auto;
}


/************************************************************************************
        Sobre
***********************************************************************************/
#sobre {
        position: relative;
        top: -8rem;
        overflow: hidden;
}

#sobre h2 {
        font-size: 30px;
        color: var(--cor-title);
        font-weight: var(--font-bold);
        width: 27.7rem;
        margin: 1rem 0rem;
}

#sobre p {
        font-size: 20px;
        font-weight: var(--font-regular);
        margin: 1rem 0rem 2rem;
        width: 35vw;
        display: flex;
        justify-content: center;
}

#sobre img {
        width: 80%;
}

#sobre .btn-universal {
        background: linear-gradient(0deg, rgba(52, 196, 53, 1) 51%, rgba(80, 231, 98, 1) 95%);
        color: white;
        padding: 15px 25px;
        border-radius: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        width: 16rem;
        text-decoration: none;
        transition: all ease-in-out 0.4s !important;
        gap: 20px;
}

#sobre .btn-universal:hover {
        transition: all ease-in-out 0.4s !important;
}

#sobre .line-2 {
        width: 87%;
        margin: 16rem auto;
        position: relative;
}

#sobre .camada-sobre {
        position: absolute;
        right: -315px;
        width: 48rem;
        bottom: -54px;
        height: 362px;
        object-fit: cover;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        transition: allease-in-out 0.4s !important;
}

/************************************************************************************
        Cards
***********************************************************************************/

#cards {
        position: relative;
        top: -8rem;
}

#cards h2 {
        color: var(--cor-title);
        font-weight: var(--font-bold);
        font-size: 30px;
        width: 54%;
        margin: 0px auto 4rem;
}

#cards img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        margin-bottom: 30px;
}

#cards .card {
        border: 2px solid #e0e0e067;
        border-radius: 26px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        padding: 37px 64px 30px 50px;
        width: 100%;
        min-height: 465px;
        margin: 15px auto;
}

#cards .card h3 {
        font-weight: 700;
        font-size: 28px;
        color: var(--cor-texto);
}

#cards .card p {
        font-weight: 500;
        font-size: 18px;
        color: var(--cor-texto);
}

#cards .btn-universal {
        margin: 30px auto;
}

/************************************************************************************
Footer
***********************************************************************************/

footer {
        background-image: url(../imagens/8122.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        position: relative;
        padding: 8rem 0px;

}

footer span {
        font-size: 22px;
        color: white;
}

footer .creditos {
        display: flex;
        justify-content: center;
        border-top: 0.6px solid rgba(255, 255, 255, 0.3);
        width: 67%;
        margin: auto;
        padding: 30px 0px;
        position: relative;
        bottom: -8rem;
}

/************************************************************************************
Resposividade
***********************************************************************************/

@media (max-width: 1199px) {
        #sobre .camada-sobre {
                position: absolute;
                right: -315px;
                width: 38rem;
                bottom: -159px;
                height: 314px;
                object-fit: cover;
                border-radius: 33px;
                transition: allease-in-out 0.4s !important;
        }
}

@media (max-width: 992px) {
        #servicos h2 {
                color: var(--cor-title);
                font-weight: 800;
                font-size: 30px;
                text-align: center;
        }

        #servicos .coluna-2 p {
                color: var(--cor-texto);
                font-size: 20px;
                width: 70%;
                font-weight: var(--font-regular);
                text-align: center;
                margin: 36px auto;
        }

        #banner-principal .btn-universal {
                background: rgb(52, 196, 53);
                background: linear-gradient(0deg, rgba(52, 196, 53, 1) 51%, rgba(80, 231, 98, 1) 95%);
                color: white;
                padding: 15px 25px;
                border-radius: 50px;
                display: flex
        ;
                justify-content: space-between;
                align-items: center;
                white-space: nowrap;
                width: 80%;
                text-decoration: none;
                transition: allease-in-out 0.4s;
            }

        #solucoes p {
                font-size: 20px;
                font-weight: var(--font-regular);
                width: 90%;
                margin: auto;
        }

        #sobre h2 {
                font-size: 25px;
                color: var(--cor-title);
                font-weight: 800;
                width: 90%;
                margin: 1rem auto;
                text-align: center;
        }

        #sobre p {
                font-size: 20px;
                font-weight: var(--font-regular);
                margin: 1rem auto 2rem;
                width: 100%;
                text-align: center;
        }

        #sobre .line-2 {
                width: 100%;
                margin: 4rem auto;
                position: relative;
        }

        #sobre .camada-sobre {
                position: relative;
                width: 100%;
                height: auto;
                right: 0px;
                bottom: 0px;
                height: 300px;
                object-fit: cover;
                margin-top: 40px;
        }


        #cards h2 {
                color: var(--cor-title);
                font-weight: 800;
                font-size: 25px;
                width: 100%;
                margin: 0px auto 4rem;
        }
}

@media (max-width: 767px) {
    #banner-principal {
        top: -23rem;
    }
}

@media (max-width: 700px) {
        header {
                position: relative;
                z-index: 9;
                text-align: center;
        }

        header h1 {
                text-transform: uppercase;
                font-size: 25px;
                color: white;
                font-weight: var(--font-light);
                text-align: left;
        }

        #banner-principal {
                background-image: url(../imagens/7541.png);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                width: 100%;
                position: relative;
                top: -19rem;
                padding: 14rem 1rem 66px;
            }

            header .padding-header {
                padding: 4rem 2rem;
            }

        #banner-principal h2 {
                font-size: 28px;
                color: white;
                font-weight: var(--font-bold);
                text-align: left;
        }

        #banner-principal ul {
                padding: 0px 25px;
                margin: 20px 0px;
                text-align: left;
            }

            #banner-principal .btn-universal {
                background: rgb(52, 196, 53);
                background: linear-gradient(0deg, rgba(52, 196, 53, 1) 51%, rgba(80, 231, 98, 1) 95%);
                color: white;
                padding: 15px 25px;
                border-radius: 50px;
                display: flex
        ;
                justify-content: space-between;
                align-items: center;
                white-space: nowrap;
                width: 270px;
                text-decoration: none;
                transition: allease-in-out 0.4s;
                text-align: center;
                margin: 60px 0px;
                font-size: 80%;
            }

            .btn-universal {
                background: rgb(52, 196, 53);
                background: linear-gradient(0deg, rgba(52, 196, 53, 1) 51%, rgba(80, 231, 98, 1) 95%);
                color: white;
                padding: 15px 25px;
                border-radius: 50px;
                display: flex
            ;
                justify-content: space-between;
                align-items: center;
                white-space: nowrap;
                width: 90%;
                text-decoration: none;
                transition: allease-in-out 0.4s;
                font-weight: var(--font-semibold);
                margin: auto;
            }

        #servicos .coluna-2 p {
                color: var(--cor-texto);
                font-size: 20px;
                width: 90%;
                font-weight: var(--font-regular);
                text-align: center;
                margin: 36px auto;
        }

        footer .creditos {
                display: flex
            ;
                justify-content: center;
                border-top: 0.6px solid rgba(255, 255, 255, 0.3);
                width: 90%;
                margin: auto;
                padding: 30px 0px;
                position: relative;
                bottom: -8rem;
            }   

            #banner-principal li {
                font-size: 22px;
                color: white;
                font-weight: 300;
            }
}