/* ================================= */
/* VIDEO BACKGROUND */
/* ================================= */

.video-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:-1;
}


/* ================================= */
/* SHARED PAGE WIDTH */
/* ================================= */

.page-width{
width:94%;
max-width:1200px;
margin:auto;
}


/* ================================= */
/* CONTACT HEADER */
/* ================================= */

.contact-header{
text-align:center;
padding:240px 20px 0;
color:white;
margin-bottom:40px;
}

.contact-header h1{
font-size:64px;
margin-bottom:40px;
letter-spacing:1px;
}


/* ================================= */
/* QUESTION BANNER */
/* ================================= */

.contact-banner{

padding:30px 20px;

margin-bottom:40px;

background:rgba(255,255,255,0.12);

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

border-top:1px solid rgba(255,255,255,0.15);
border-bottom:1px solid rgba(255,255,255,0.15);

text-align:center;

}

.contact-title{
font-size:30px;
margin-bottom:8px;
color:white;
}

.contact-subtitle{
font-size:20px;
opacity:0.95;
color:white;
}


/* ================================= */
/* LUNAR PANEL IMAGE */
/* ================================= */

.lunar-panel{
margin-bottom:40px;
}

.lunar-panel img{

width:100%;

display:block;

border-radius:8px;

box-shadow:
0 0 25px rgba(255,255,255,0.12),
0 20px 50px rgba(0,0,0,0.6);

}


/* ================================= */
/* CONTACT FORM PANEL */
/* ================================= */

.contact-form-section{
padding-bottom:120px;
}

.contact-panel{

background:rgba(255,255,255,0.14);

padding:70px 80px;

border-radius:12px;

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

border:1px solid rgba(255,255,255,0.20);

box-shadow:
0 30px 60px rgba(0,0,0,0.45),
0 0 40px rgba(255,255,255,0.06);

}


/* ================================= */
/* CONTACT FORM */
/* ================================= */

.contact-form{
display:flex;
flex-direction:column;
gap:30px;
}

.form-row{
display:flex;
gap:30px;
flex-wrap:wrap;
}

.input-group{
position:relative;
flex:1;
}

.input-group input,
.input-group textarea{

width:100%;
padding:18px 0;

border:none;

border-bottom:1px solid rgba(255,255,255,0.7);

background:transparent;

color:white;

font-size:20px;

outline:none;

}

.input-group textarea{
min-height:140px;
resize:none;
}

.input-group label{

position:absolute;
top:14px;
left:0;

font-size:18px;

opacity:0.85;

pointer-events:none;

transition:.25s ease;

}

.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label{

top:-14px;
font-size:14px;
opacity:1;

}


/* ================================= */
/* BUTTON */
/* ================================= */

.contact-form button{

margin-top:25px;

padding:16px;

border:none;

background:black;

color:white;

font-size:20px;

cursor:pointer;

border-radius:5px;

transition:.3s ease;

}

.contact-form button:hover{

background:#1a1a1a;

transform:translateY(-2px);

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

}


/* ================================= */
/* FOOTER */
/* ================================= */

.site-footer{

margin-top:120px;

padding:70px 20px;

text-align:center;

color:white;

background:rgba(0,0,0,0.6);

}

.footer-top{

display:flex;
justify-content:center;
gap:120px;
flex-wrap:wrap;
margin-bottom:40px;

}

.footer-top hr{

width:45px;
border:1px solid #7c4dff;
margin:10px auto;

}

.social-icons{

display:flex;
gap:22px;
justify-content:center;

}

.social-icons img{

width:30px;
height:30px;

}

.footer-logo{

width:65px;
margin-bottom:12px;

}

.footer-bottom p{

font-size:15px;
opacity:.8;

}