/* ----------------------------------------------------------
:: Template Name: Geovani Assis Pereira - Madnezz
:: Author: Geovani Assis
:: Author URL: https://www.geovaniassis.dev.br
:: Version: 1.0.0
:: Created: 25 de Junho de 2025
---------------------------------------------------------- */

/***************************************************************************
   Cores
***************************************************************************/
/*
    Verde Escuro    = #24556b
    verde           = #086868
	Branco          = #ffffff
	Preto           = #000000
*/

/***************************************************************************
   Fonts
***************************************************************************/

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

/***************************************************************************
   Variáveis
***************************************************************************/

:root {
    --cor-verdeEscuro:   #24556b;
    --cor-verde:         #086868;
    --cor-branco:        #ffffff;
    --cor-preto:         #000000;

}

/***************************************************************************
   KeyFrames
***************************************************************************/

/***************************************************************************
   All
***************************************************************************/
html, body {
    margin: 0;
    overflow-x: clip;
    background: #fff;
}

* {
    margin: 0;
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

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

button:focus {
    outline: none;
}

.mobile {
    display: none;
}

.transition_on *,
.transition_on {
    transition: ease .5s all !important;
}

.transition_off *,
.transition_off {
    transition: none !important;
}

.mrg-0 {
    margin: 0px !important;
}

.mrg-15-0 {
    margin: 15px 0px;
}

.mrg-top-30 {
    margin-top: 30px;
}

.mrg-top-45 {
    margin-top: 45px;
}

.mrg-top-50 {
    margin-top: 50px;
}

.mrg-bot-10 {
    margin-bottom: 10px;
}

.mrg-bot-20 {
    margin-bottom: 20px;
}

.mrg-bot-30 {
    margin-bottom: 30px;
}

.mrg-bot-40 {
    margin-bottom: 40px;
}

.mrg-bot-50 {
    margin-bottom: 50px !important;
}

.mrg-bot-60 {
    margin-bottom: 60px;
}

.mrg-bot-75 {
    margin-bottom: 75px;
}

.pdd-0 {
    padding: 0 !important;
}

.pdd-15 {
    padding: 15px !important;
}

.pdd-0-15 {
    padding: 0 15px !important;
}

.pdd-0-40 {
    padding: 0 40px !important;
}

.pdd-15-0 {
    padding: 15px 0 !important;
}

.pdd-50-0 {
    padding: 50px 0 !important;
}

.pdd-70-0 {
    padding: 70px 0 !important;
}

.pdd-100-0 {
    padding: 100px 0 !important;
}

.pdd-25-0-0 {
    padding: 25px 0 0 !important;
}

.pdd-70-0-0 {
    padding: 70px 0 0 !important;
}

.pdd-0-15-0-0 {
    padding: 0 15px 0 0 !important;
}

.pdd-lef-30 {
    padding-left: 30px !important;
}

.pdd-lef-35 {
    padding-left: 35px !important;
}

.pdd-lef-40 {
    padding-left: 40px !important;
}

.pdd-lef-45 {
    padding-left: 45px !important;
}

.pdd-lef-50 {
    padding-left: 50px !important;
}

.pdd-lef-55 {
    padding-left: 55px !important;
}

.pdd-lef-60 {
    padding-left: 60px !important;
}

.pdd-lef-65 {
    padding-left: 65px !important;
}

.pdd-lef-70 {
    padding-left: 70px !important;
}

.pdd-lef-75 {
    padding-left: 75px !important;
}

.pdd-lef-80 {
    padding-left: 80px !important;
}

.pdd-lef-85 {
    padding-left: 85px !important;
}

.pdd-lef-90 {
    padding-left: 90px !important;
}

.pdd-lef-95 {
    padding-left: 95px !important;
}

.pdd-lef-100 {
    padding-left: 100px !important;
}

.pdd-lef-105 {
    padding-left: 105px !important;
}

.pdd-lef-110 {
    padding-left: 110px !important;
}

.pdd-lef-115 {
    padding-left: 115px !important;
}

.pdd-lef-120 {
    padding-left: 120px !important;
}

.pdd-lef-125 {
    padding-left: 125px !important;
}

.pdd-lef-150 {
    padding-left: 150px !important;
}

.pdd-bot-50 {
    padding-bottom: 50px !important;
}

.txt-center {
    text-align: center !important;
}

.txt-justify-center {
    justify-content: center !important;
}

.txt-left {
    text-align: left !important;
}

.txt-right {
    text-align: right !important;
}

.txt-webkit-right {
    text-align: -webkit-right !important;
}

.nao-quebrar {
    white-space: nowrap;
}

.align_self-center {
    align-self: center;
}

.text_align_last-center {
    text-align-last: center;
}

.dpy-flex {
    display: flex;
}

.dpy-flow-root {
    display: flow-root;
}

.dpy-grid {
    display: grid;
}

.flt-left {
    float: left;
}

.flt-right {
    float: right;
}

.navegacao{
    display: flex;
    justify-content: space-between;
    margin: -85px 0 0 0;
}
.swiper-button-prev{
    position: relative;
    margin: 0 0 0 0;
    left: -50px;
    top: auto;
    background-image: url('../img/setaCarrossel.png');
    width: 47px;
    height: 47px;
    background-size: cover;
}

.swiper-button-next{
    position: relative;
    margin: 0 0 0 0;
    right: -50px;
    top: auto;
    background-image: url('../img/setaCarrossel.png');
    width: 47px;
    height: 47px;
    background-size: cover;
    transform: rotate(180deg);
}

/***************************************************************************
   Banner
***************************************************************************/

    #banner{
        background-image: url('../img/banner.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
        max-height: 756px;
    }
    #banner .col-12{
        text-align: -webkit-center;
    }
    #banner .blcSeta{
        margin-top: 610px;
        width: 64px;
        height: 64px;
        border: solid #fff 2px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease 0.5s all;
        padding: 7px 0 0px;
    }
    #banner .blcSeta.baixo{
        padding: 18px 0 0px;
        height: 70px;
    }

/***************************************************************************
   Faixa verde
***************************************************************************/

    #faixaVerde{
        background-color: var(--cor-verdeEscuro);
        padding: 30px 0;
    }
    #faixaVerde .col-12{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    #faixaVerde img{
        width: 66px;
        height: 66px;
    }
    #faixaVerde h2{
        color: #fff;
        font-size: 35px;
        font-weight: 400;
        margin: 0;
        line-height: 35px;
    }
    #faixaVerde h2 span{
        font-weight: 700;
    }

/***************************************************************************
   Big Number
***************************************************************************/

    #bigNumber{
        background-image: url('../img/fundoBrasil.png');
        background-position: center;
        background-repeat: no-repeat;
        min-height: 530px;
        display: flex;
        align-items: center;
        padding: 20px 0px;
    }
    #bigNumber .blcBigNumber {
        margin: 30px 0;
    }
    #bigNumber h2{
        text-align: center;
        font-weight: 700;
        font-size: 30px;
        margin-bottom: 20px;
    }
    #bigNumber h3{
        color: var(--cor-verde);
        font-weight: 700;
        font-size: 100px;
        text-align: center;
        margin: 0;
        line-height: 84px;
    }
    #bigNumber p{
        color: var(--cor-verde);
        text-align: center;
        font-weight: 500;
        font-size: 21px;
    }

/***************************************************************************
   Shopping's
***************************************************************************/

    #shoppings .container-fluid{
        padding: 0;
    }
    #shoppings ul{
        margin: 0px;
        padding: 0px;
    }
    #shoppings li{
        display: block;
    }
    #shoppings img{
        height: 300px;
        width: 100%;
        object-fit: cover;
    }
    #shoppings h2{
        margin: 0;
        background: #086868d9;
        box-shadow: 0 -22px 23px 11px #086868d9;
        color: var(--cor-branco);
        padding: 15px 5px 15px 15px;
        font-size: 22px;
        font-weight: 500;
        position: absolute;
        bottom: 0;
        width: 100%;
        transition: ease .5s all;
        opacity: 0;
    }    
    #shoppings li:hover h2{
        opacity: 1;
    }
    #shoppings h2 span{
        font-weight: 400;
    }

/***************************************************************************
   Estamos
***************************************************************************/

    #estamos{
        padding: 50px 0;
    }
    #estamos h2{
        color: var(--cor-verdeEscuro);
        font-weight: 400;
        font-size: 28px;
    }
    #estamos h2 span{
        font-weight: 700;
    }
    #estamos .direita p {
        margin: 0;
        padding: 5px 0;
        color: var(--cor-verdeEscuro);
        font-weight: 700;
        font-size: 19px;
    }
    #estamos .direita .estadolista>li ul {
        list-style: none;
        padding: 0 0 0 10px;
    }
    #estamos .direita .estadolista>li ul li::before{
        content: "";
        position: absolute;
        width: 2px;
        height: 2px;
        background: #000;
        border-radius: 100px;
        margin: 10px 0 0 -8px;
    }
    #estamos .direita .estadolista {
        padding: 0;
        list-style: none;
        position: relative;
        width: 100%;
        margin-top: 30px;
    }
    #estamos .direita .estadolista>li {
        transition: all ease 0.3s;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
    #estamos .direita .estadolista>li.mostralista {
        opacity: 1;
    }
    #estamos .estado{
        transition: ease .5s all;
    }    
    #estamos .on{cursor:pointer;}
    #estamos .estado.click{
        fill: #1aa2ff;
    }
    
    #estamos .esquerda img{display: none;max-width: 100%;}

/***************************************************************************
   Sobre
***************************************************************************/

    #tituloFaixaVerde{
        background: var(--cor-verdeEscuro);
        padding: 45px;
    }
    #tituloFaixaVerde h2{
        color: var(--cor-branco);
        margin: 0px;
        padding: 0px;
        font-weight: 700;
        font-size: 32px;
    }
    #textoFaixaVerde {
        background-color: #e9e9e9;
        background-image: url('../img/fundoSobre.png');
        background-position: center center;
        background-repeat: no-repeat;
    }
    #textoFaixaVerde img{
        max-width: 100%;
        object-fit: cover;
        border-radius: 35px;
        margin-top: -80px;
        height: 645px;
    }
    #textoFaixaVerde .areaTexto{
        padding: 30px 15px;
    }
    #textoFaixaVerde p{
        font-size: 16px;
        color: var(--cor-preto);
        font-weight: 400;
        line-height: 20px;
    }

/***************************************************************************
   Conheça
***************************************************************************/

    #conheca{
        background-image: url('../img/fundoConeca.png');
        background-size: cover;
        background-position: center center;
        padding-bottom: 30px;
    }
    #conheca h2{
        margin: 70px 0 50px;
        color: var(--cor-verdeEscuro);
        font-weight: 700;
        text-align: center;
        font-size: 40px;
        margin-bottom: 40px;
    }

    #conheca .blcTexto{
        background: #ffffff8c;
        padding: 20px;
        border: solid 3px var(--cor-verdeEscuro);
        border-radius: 20px;
        margin: 20px 0;
    }
    #conheca .blcConheca{
        align-items: center;
    }
    #conheca .blcConheca img{
        width: 240px;
        height: 240px;
        border-radius: 15px;
        object-fit: cover;
    }
    #conheca .blcConheca.esquerda  .blcTexto{
        padding-left: 82px;
    }
    #conheca .blcConheca.esquerda .blcFoto{
        display: inline-grid;
        justify-content: flex-start;
        z-index: 1;
        padding: 0;
    }
    #conheca .blcConheca.direita  .blcTexto{
        padding-right: 82px;
    }
    #conheca .blcConheca.direita .blcFoto{
        display: inline-grid;
        justify-content: flex-end;
        z-index: 1;
        padding: 0;
    }
    #conheca .blcConheca h3{
        color: var(--cor-verdeEscuro);
        font-weight: 700;
        font-size: 22px;
        line-height: 23px;
    }
    #conheca .blcConheca h3 span{
        font-weight: 300;
        font-size: 18px;
    }
    #conheca .blcConheca p{
        font-size: 13px;
        font-weight: 400;
        margin: 0;
        line-height: 14px;
    }

/***************************************************************************
   Diretoria
***************************************************************************/

    #diretoria{
        background-color: var(--cor-verdeEscuro);
        padding: 50px 0;
    }
    #diretoria .container-fluid{
        padding: 0;
    }
    #diretoria h2{
        color: var(--cor-branco);
        font-weight: 700;
        font-size: 28px;
        text-align: center;
        margin-bottom: 40px;
    }
    #diretoria .swiper-slide{
        background: #e9e9e9;
        text-align: center;
        border-radius: 30px;
    }
    #diretoria img{
        width: 100%;
        border-radius: 15px;
        object-fit: cover;
        height: 300px;
    }
    #diretoria h3{
        color: var(--cor-verdeEscuro);
        font-size: 19px;
        font-weight: 700;
        margin: 10px;
        line-height: 18px;
    }
    #diretoria h3 span{
        font-weight: 400;
        font-size: 15px;
    }

/***************************************************************************
   Empreendimentos
***************************************************************************/

    #empreendedores{
        padding: 60px 0px;
    }
    #empreendedores h2{
        color: var(--cor-preto);
        text-align: center;
        font-size: 28px;
        font-weight: 400;
    }
    #empreendedores h2 span{
        font-weight: 700;
    }
    #empreendedores img{
        max-width: 100%;
    }

/***************************************************************************
   Rodapé
***************************************************************************/

    footer{
        background-color: #00546c;
        padding: 65px 0 20px 0;
    }
    footer ul{
        margin: 0 0 30px;
        padding: 0;
    }
    footer ul li{
        display: block;
    }

    footer p,
    footer ul a,
    footer p a{
        color: var(--cor-branco);
        font-size: 22px;
        font-weight: 500;
        transition: ease .5s all;
        display: inline-block;
        width: fit-content;
    }
    footer li a::after,
    footer p a::after{
        content: '';
        display: block;
        width: 0;
        height: 2px;
        margin: -6px 0 6px;
        background: var(--cor-branco);
        transition: ease .5s all;
    }
    footer li a:hover::after,
    footer p a:hover::after{
        width: 100%;
    }
    footer .copyright p{
        margin: 20px 0 0;
        text-align: center;
        width: 100%;
    }
    footer a:hover{
        color: var(--cor-branco);
    }
    footer .social{
        display: flex;
        justify-content: space-evenly;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    footer .social img{
        transition: ease .5s all;
    }
    footer .social img:hover{
        transform: scale(1.1);
    }
    footer .logo{
        max-width: 220px;
        width: 100%;
        margin: 0 auto;
    }
     
/***************************************************************************
   Responsivo
***************************************************************************/

    @media (max-width: 1200px) {}

    @media (max-width: 991px) {
        #textoFaixaVerde img {margin-top: -30px;}
        #textoFaixaVerde {background-position: right bottom;}
        #estamos .direita .estadolista>li {opacity: 1; position: initial;}
        #estamos .esquerda svg{display: none;}
        #estamos .esquerda img{display: block;}
        #estamos .direita .estadolista>li ul{margin-bottom: 30px;}
        #faixaVerde .col-12 {flex-direction: column;}
        #faixaVerde h2{text-align: center;}
    }

    @media (max-width: 767px) {
        .desktop {display: none !important;}
        .mobile {display: block;}
        #banner {max-height: 365px;}
        #banner .blcSeta {margin-top: 260px;}
        #faixaVerde h2 {font-size: 25px;}
        #textoFaixaVerde img {height: 465px;}
        #conheca .blcConheca img {margin: -70px 0 20px 0;}
        #conheca .blcConheca.esquerda .blcTexto {padding-left: 20px;}
        #conheca .blcConheca {margin-bottom: 40px;}
        .swiper-button-prev{left: 0px;}
        .swiper-button-next{right: 0px;}
        #empreendedores .swiper-container {height: 200px;}
    }