body{
font-family: Arial, sans-serif;
margin: 0;
color: #ffffff;

background: url("img/index.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;

height: 100vh;
}

/* NAVBAR */

.navbar{
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 15px;
padding: 12px;

background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);

z-index: 1000;
}

/* BUTTON */

.navbar button{
padding: 10px 18px;
border: none;
border-radius: 8px;
cursor: pointer;
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
}

.navbar button:hover{
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* COLORS */

.contact-btn{ background:#007bff; }
.faq-btn{ background:#4e73df; }
.service-btn{ background:#6f42c1; }
.about-btn{ background:#17a2b8; }
.login-btn{ background:#28a745; }

/* HERO */

.hero{
text-align: center;
margin-top: 180px;
}

.hero img{
width: 860px;
max-width: 90%;
animation: float 4s ease-in-out infinite;
}

/* LOGO FLOAT */

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

/* OVERLAY */

.overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.55);
display: none;
z-index: 999;
}

/* POPUP */

.popup{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);

padding: 30px;
width: 340px;

border-radius: 15px;

box-shadow: 0 10px 40px rgba(0,0,0,0.4);

display: none;
z-index: 1000;

color:#fff;
}

/* POPUP TITLE */

.popup h2{
text-align: center;
margin-bottom: 20px;
}

/* FORM */

.popup form{
display: flex;
flex-direction: column;
align-items: center;
}

/* INPUT */

.popup input{
width: 260px;
padding: 12px;
margin: 8px 0;

border-radius: 8px;
border: none;

background: rgba(255,255,255,0.2);
color: #fff;

outline: none;
}

.popup input::placeholder{
color: #ddd;
}

/* LOGIN BUTTON */

.login-submit{
width: 260px;
padding: 12px;

margin-top: 10px;

border: none;
border-radius: 8px;

background: linear-gradient(45deg,#4e73df,#6f42c1);

color: #fff;
font-size: 16px;

cursor: pointer;
transition: 0.3s;
}

.login-submit:hover{
transform: scale(1.03);
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

/* REGISTER TEXT */

.register-text{
text-align: center;
margin-top: 12px;
}

/* CLOSE BUTTON */

.close{
position: absolute;
top: 10px;
right: 15px;
font-size: 22px;
cursor: pointer;
}

/* MOBILE */

@media (max-width:768px){

.hero img{
width:260px;
}

.navbar{
flex-wrap:wrap;
}

.popup{
width:90%;
}

.popup input,
.login-submit{
width:100%;
}

}