/* reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; font-size: 100%; line-height: 1; list-style: none; outline: 0px; }

/* root */
:root { --white: #FFF; --black: #000; --ocean-blue: #28D0F7; --ocean-blue-2: #089FD7; --dark-blue: #00173D; --dark-blue-2: #003C5C; --gray: #bdbdbd8e; --green: #288959; --green-2: #69ec69; --green-3: #80bf26; --green-4:#8ee100; }

/* fonts */
@font-face { font-family: 'Montserrat Light'; src: url('../fonts/Montserrat/static/Montserrat-Light.ttf'); }
@font-face { font-family: 'Montserrat Regular'; src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf'); }
@font-face { font-family: 'Montserrat Medium'; src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf'); }
@font-face { font-family: 'Montserrat Semibold'; src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf'); }
@font-face { font-family: 'Montserrat Bold'; src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf'); }
@font-face { font-family: 'Axiforma'; src: url('../fonts/Axiforma-Bold.otf'); }

/* global class */
.container { display: block; width: auto; max-width: 1100px; height: auto; margin: 0px auto; }

/* general config */
button { all: unset; display: inline-block; }
a { text-decoration: none; cursor: pointer; }
p { font-size: 16px; color: var(--white); }
img { display: block; }
html { background-color: var(--black); scroll-behavior: smooth; }
body { background-color: #00311c; font-family: 'Montserrat Light', sans-serif; }

/* area-banner */
#area-banner { background: url("../img/real-state_imagens/banner-real-state.png") no-repeat center; background-size: cover; height: 80vh; width: 100%; }

/* area-banner -> header */
#area-banner .container .area-banner-header { display: flex; align-items: center; height: 160px; position: relative; }
#area-banner .container .area-banner-header .area-banner-list { display: flex; align-items: center; gap: 40px; position: absolute; left: 42%; transform: translateX(-50%); }
#area-banner .container .area-banner-header .area-banner-list li a { color: var(--white); font-family: 'Montserrat Semibold', sans-serif; font-size: 17px; text-wrap: nowrap; }
#area-banner .container .area-banner-header .area-banner-list .whatsapp-button { position: relative; right: 0px; }

/* area-banner -> area-banner-texts */
#area-banner .container .area-banner-texts { height: calc(100vh - 160px) ; position: relative; }
#area-banner .container .area-banner-texts .text { width: 540px; position: absolute; top: 50%; transform: translateY(-75%); }
#area-banner .container .area-banner-texts .text h2 { font-family: 'Montserrat Semibold', sans-serif; color: #ffffff; font-size: 36px; margin-bottom: 8px; }
#area-banner .container .area-banner-texts .text p:nth-of-type(1) { font-family: 'Montserrat Semibold', sans-serif; font-size: 24px; color: var(--green-4); }
#area-banner .container .area-banner-texts .text p:nth-of-type(2) { line-height: 1.7; margin-bottom: 25px; }

/* solutions */
#solutions { background-color: #00311c; }
#solutions .container { padding: 80px 0px; text-align: center; height: auto; width: 100%;}
#solutions .container h2 { font-size: 31px; font-family: 'Axiforma', sans-serif; color: #8ee100; margin-bottom: 50px; }
#solutions .container section { display: flex; align-items: center; flex-direction: column; gap: 50px; }
#solutions .container section .box-text h3 { font-family: 'Axiforma', sans-serif; font-size: 28px; }
#solutions .container section .box-text p { line-height: 1.7; color: var(--white); }
#solutions .container section .box-text a { display: inline-block; border-radius: 20px; color: var(--white); font-family: 'Montserrat Semibold', sans-serif; padding: 10px 18px; margin-top: 40px;}
#solutions .container section .box-text.real-estate { text-align: left; }
#solutions .container section .botao-faleconsultor { display: inline-block; border-radius: 20px; color: var(--white); font-family: 'Montserrat Semibold', sans-serif; padding: 10px 18px; margin-top: 20px; background-color: #64a100;}


/* reference (modifiquei algumas coisas)*/
#reference { background-color: var(--white); }
#reference .container { padding: 55px 0px 15px }
#reference .container .section { display:flex; justify-content: center; gap: 30px; margin-bottom: 30px; }

@media screen and (max-width: 786px) {
    #reference .container .section {
        width: 100%;
        flex-direction: column;
    }
    #reference .container .section .card{
        width: 100%;
    }
}
@media screen and (min-width: 787px) {
    #reference .container .section {
        flex-direction: row;
    }
    #reference .container .section .card{
        width: 100%;
        max-width: 380px;
    }
}

#reference .container section h2 { text-align: center; font-size: 32px; font-family: 'Axiforma', sans-serif; color: var(--black); padding: 20px 0px; margin: 0px auto 50px; position: relative; max-width: 600px; }
#reference .container section h2::after { content: ''; width: 59%; border-bottom: 3px solid var(--black); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#reference .container section p { line-height: 1.7; color: #01420f;}
#reference .container .nossos-servicos p { text-align: center; margin-bottom: 50px;}
#reference .container .card {overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.8s ease; display: flex; flex-direction: column; width: 275px; } 
#reference .container .icon { max-width: 40px;}
#reference .container .card-content { padding: 20px 0px 20px 50px ; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-around; ;}
#reference .container .card h3 {  margin: 0;  font-size: 16px; font-weight: bolder; color: var(--black); line-height: 1.4; font-family: 'Axiforma'; position: relative;}
#reference .container .card #card-title-1::before {position: absolute; content: ''; background: url("../img/real-state_icons/icon-1.png") no-repeat; background-size: cover; width: 40px; height: 40px; left: -50px;}
#reference .container .card #card-title-2::before {position: absolute; content: ''; background: url("../img/real-state_icons/icon-2.png") no-repeat; background-size: cover; width: 40px; height: 40px; left: -50px;}
#reference .container .card #card-title-3::before {position: absolute; content: ''; background: url("../img/real-state_icons/icon-3.png") no-repeat; background-size: cover; width: 40px; height: 40px; left: -50px;}
#reference .container .card #card-title-4::before {position: absolute; content: ''; background: url("../img/real-state_icons/icon-4.png") no-repeat; background-size: cover; width: 40px; height: 40px; left: -50px;}
#reference .container .card p {margin-top: 10px;  font-size: 14px; flex-grow: 1; overflow: hidden; color: var(--black); line-height: 1.2;}
#reference .botao-faleconsultor { display: inline-block; border-radius: 20px; color: var(--white); font-family: 'Montserrat Semibold', sans-serif; padding: 10px 18px; margin: 30px 0; background-color: #64a100;}
#reference .btn-reference { display: flex; justify-content: center; align-items: center;}

/* brands */
#brands { background-color: var(--green-3); }
#brands .container { padding: 55px 0px 15px }
#brands .container section h2 { text-align: center; font-size: 32px; font-family: 'Axiforma', sans-serif; color: var(--white); padding: 20px 0px; position: relative; }
#brands .container section h2::after { content: ''; width: 28%; border-bottom: 3px solid var(--white); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#brands .container section figure img { width: 100%; }

/* footer */
#footer { background-color: var(--dark-blue); padding: 110px 0px 80px 0px; }
#footer .container { display: flex; flex-direction: column; }
#footer .container .informations { display: flex; align-items: center; position: relative; }
#footer .container .informations .address { font-family: 'Montserrat Regular', sans-serif; line-height: 1.5; margin: 10px 0px 0px 100px; }
#footer .container .informations .contacts {font-family: 'Montserrat Semibold', sans-serif; font-size: 24px; color: var(--white); margin: 10px 0px 0px 110px;}
#footer .container .informations .contacts .social-media { display: flex; align-items: center; gap: 15px; margin-top: 15px; font-weight: 200px; }
#footer .container .informations .links { position: absolute; right: 0; }
#footer .container .informations .links li { padding: 5px 0px; }
#footer .container .informations .links li a { font-family: 'Montserrat Semibold', sans-serif; color: var(--white); }
#footer .container .lmx-rights { font-family: 'Montserrat Medium', sans-serif; margin-top: 40px; text-align: center; line-height: 1.4; }