@import url('https://fonts.googleapis.com/css2?family=Montaser:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900;&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

body{
background-color: #d9d9d9;
color: white;
overflow-x: hidden;
min-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
}
*{
    color: black;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
nav{
background-color: white;
width: 107%;
height: 100px;
overflow: hidden;
position: fixed;
top: -30px;
left: -70px;
display: flex;
align-items: center;
display: flex;
z-index: 1;
}
#caixadt{
position: fixed;
left: 260px;
display: flex;
top: 17px;
flex-direction: row;
gap: 50px;
text-transform: uppercase;
font-size: 39%;
}
.text4{
position: relative;
display: inline-block;
transition: color .3s ease-in-out;

}
.text4::after{
content: "";
width: 45px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: -01px;

}
.text2{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text2::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text2:hover::after{
opacity: 0.7;
width: 56px;
}
.text2:hover{
color: rgb(22, 196, 22);
}
.text3{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text3::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text3:hover::after{
opacity: 0.7;
width: 59px;
}
.text3:hover{
color: rgb(22, 196, 22);
}
.text1{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text1::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text1:hover::after{
opacity: 0.7;
width: 37px;
}
.text1:hover{
color: rgb(22, 196, 22);
}

.text5{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text5::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text5:hover::after{
opacity: 0.7;
width: 70px;
}
.text5:hover{
color: rgb(22, 196, 22);
}

.text6{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text6::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text6:hover::after{
opacity: 0.7;
width: 40px;
}
.text6:hover{
color: rgb(22, 196, 22);
}
.text7{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text7::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text7:hover::after{
opacity: 0.7;
width: 83px;
}
.text7:hover{
color: rgb(22, 196, 22);
}
#logo{
width: 100px;
height: 100px;
    background-image: url("LogoQ.png");
position: absolute;
z-index: 100;
background-size: contain;
left: -200px;
}

.text8{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text8::after{
content: "";
width: 0px;
height: 4px;
position: absolute;
background-color: rgb(22, 196, 22);
opacity: 0.7;
top: 16px;
left: 0px;
z-index: -1;

transition: all .3s ease-in-out;
}

.text8:hover::after{
opacity: 0.7;
width: 37px;
}
.text8:hover{
color: rgb(22, 196, 22);
}
#logo{
width: 90px;
height: 90px;
    background-image: url("/LogoQ.png");
position: absolute;
z-index: 100;
background-size: contain;
left: -200px;
top: -25px;
}
.condominios{
width: 400px;
height: 400px;
background-color: transparent;
border: 4px solid white;
position: relative;
top:70px;
border-radius: 50px;
background-image: url('Imagens/Predio.avif');
background-size: 110%;
background-repeat: no-repeat;
overflow: hidden;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
margin: 50px auto;
}
#cover{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4%);
backdrop-filter: brightness(0.2);
transition: all .3s ease-in-out;
position: absolute;
top: -0px;

}
.condominios:hover, 
#cover:hover{
   backdrop-filter: brightness(0.3); 
}
.textc{
color: white;
z-index: 300;
position: absolute;
left: 90px;
top: 50px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.qkc{
    width: 265px;
height: 60px;
    border: none;
position: absolute;
top: 250px;
left: 80px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;

}
.c:hover{
background-color: rgba(0, 0, 0, 0.15);


}
.c{
border: 2px solid white;
width: 150px;
height: 50px;
position: relative;
top: 180px;
border-radius: 50px;
font-weight: 600;
color: white;
background-color: rgba(0, 0, 0, 0.55);
left: 130px;
transition: all .3s ease-in-out;
cursor: pointer;

}

.empresas{
width: 400px;
height: 400px;
background-color: transparent;
border: 4px solid white;
position: relative;
left: 70px;
border-radius: 50px;
background-image: url('Imagens/Predio.avif');
background-size: 110%;
background-repeat: no-repeat;
overflow: hidden;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
margin: 50px auto;
top: 70px;
}
#over{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4%);
backdrop-filter: brightness(0.2);
transition: all .3s ease-in-out;
position: absolute;
top: -0px;

}
.empresas:hover, 
#over:hover{
   backdrop-filter: brightness(0.3); 
}
.texte{
color: white;
z-index: 300;
position: absolute;
left: 120px;
top: 50px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.qke{
    width: 265px;
height: 60px;
    border: none;
position: absolute;
top: 250px;
left: 80px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;

}
.e:hover{
background-color: rgba(0, 0, 0, 0.15);


}
.e{
border: 2px solid white;
width: 150px;
height: 50px;
position: relative;
top: 180px;
border-radius: 50px;
font-weight: 600;
color: white;
background-color: rgba(0, 0, 0, 0.55);
left: 130px;
transition: all .3s ease-in-out;
cursor: pointer;

}
.locaiss{

    display: flex;
    flex-wrap: wrap;    /* Se a tela dividir e não couber, ele joga o card para baixo em vez de quebrar */
    justify-content: center;
    gap: 20px;
    padding-top: 120px; /* Para não ficar embaixo da nav */
}