@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-image: url('./Imagens/planodf.jpg');
background-repeat: no-repeat;
background-size: 130%;
background-position: 1px 0px;
background-color: rgba(0, 0, 0, 0.15);
overflow-x: hidden;
display: flex;
justify-content: center;
height: 80vh;
align-items: center;
}
.over-body{
width: 110%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
position: absolute;
top: 0px;
left: -50px;
overflow: hidden;
}


*{
    color: black;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
nav{
background-color: white;
width: 107%;
height: 100px;

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%;
opacity: 1;
}

.text4{
position: relative;
display: inline-block;
z-index: 2;
transition: color .3s ease-in-out;
cursor: pointer;
}
.text4::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;
}

.text4:hover::after{
opacity: 0.7;
width: 37px;
}
.text4:hover{
color: rgb(22, 196, 22);
}
.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;
}
.container{
    width: 600px;
    height: 600px;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    position: absolute;
top: 200px;
    -webkit-backdrop-filter: blur(20px);
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.18);
border-radius: 40px;
display: flex;
justify-content: center;
overflow: hidden;
border: 3px solid rgba(255, 255, 255, 0.19);
}
.texto-1{
color: rgba(255, 255, 255, 0.57);
font-weight: 800;
font-size: 220%;
position: absolute;
}
.text-decor{
width: 300px;
height: 200px;
border: 3px solid rgba(255, 255, 255, 0.19);
position: absolute;
top: -110px;
border-radius: 40px;
background-color: rgba(255, 255, 255, 0.01);
backdrop-filter: blur(15px);
}
.condominio{
    position: absolute;
top: 200px;
color: rgba(255, 255, 255, 0.57);

}
li{
color: rgba(255, 255, 255, 0.57);
font-size: 120%;
text-decoration: none;
list-style: none;
}
.div-ul{
width: 590px;
position: absolute;
left: 80px;
}
.decoration{
    width: 550px;
    height: 260px;
    border: 4px solid rgba(255, 255, 255, 0.19);
    position: absolute;
top: 160px;
border-radius: 35px;
}
.container.cel{
width: 330px;
}
.div-ul.cel{
position: absolute;
    left: -10px;
}
nav.cel{
width: 700px;
}
#caixadt.cel{
opacity: 0;
}
.celphone{
    width: 30px;
    height: 5px;
    background-color: rgb(22, 196, 22);
    position: relative;
    left: 250px;
    top: 13px;
    opacity: 0;
    transition: transform .3s ease-in-out;
transform-origin: center center;
}
.celphone::after{
content: "";
width: 30px;
height: 5px;
background-color: rgb(22, 196, 22);
position: absolute;
top: -10px;
}
.celphone::before{
content: "";
width: 30px;
height: 5px;
background-color: rgb(22, 196, 22);
position: absolute;
top: 10px;
}
.celphone.cel{
    opacity: 1;

}
.over-body.cel{
    width: 700px;
}
body.cel{
background-size: 340%;
}
.celphone.click{
transform: rotate(90deg);
transform-origin: center center;
}
.menu{
width: 400px;
height: 0px;
background-color: white;
position: absolute;
left: 70px;
top: 30px;
z-index: -1;
opacity: 0;
transition: height .3s ease-in-out, opacity .3s ease-in-out;
text-transform: uppercase;
font-size: 60%;
text-decoration: none;
}
.menu.appears{
height: 400px;
opacity: 1;
text-transform: uppercase;
font-size: 60%;
text-decoration: none;
}
#caixadt.appears{
opacity: 1;
}
.texts1{
position: absolute;
top: 90px;
left: 50px;
transition: opacity .3s ease-in-out;}
.texts2{
position: absolute;
top: 140px;
left: 50px;

transition: opacity .3s ease-in-out;
}
.texts3{
position: absolute;
top: 190px;
left: 50px;
transition: opacity .3s ease-in-out;}
.texts4{
position: absolute;
top: 90px;
left: 260px;
transition: opacity .3s ease-in-out;}

.texts5{
position: absolute;
top: 140px;
left: 220px;
transition: opacity .3s ease-in-out;}
.texts6{
position: absolute;
top: 190px;
left: 270px;
transition: opacity .3s ease-in-out;
}
.texts7{
position: absolute;
top: 330px;
left: 134px;
transition: opacity .3s ease-in-out;
}
.texts8{
position: absolute;
top: 290px;
left: 170px;

}