/* VIDEO BACKGROUND */

.video-bg{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-2;

}



/* DARK OVERLAY */

body::before{

content:"";

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.55);

z-index:-1;

}



/* PAGE LAYOUT */

.faq-content{

min-height:100vh;

padding:130px 8% 80px;

max-width:1100px;

margin:auto;

}



/* TITLE */

.faq-title{

font-family:'Caudex',serif;

font-size:60px;

text-align:center;

margin-bottom:60px;

color:white;

}



/* FAQ LIST */

.faq-container{

display:flex;
flex-direction:column;
gap:28px;

}



/* QUESTION BAR */

.faq-question{

display:flex;

align-items:center;   /* this vertically centers everything */

border:1px solid rgba(255,255,255,.25);

background:rgba(0,0,0,.35);

cursor:pointer;

transition:.3s;

}

.faq-question:hover{

background:rgba(255,255,255,.06);

}



/* NUMBER */

.faq-number{

width:120px;

background:rgba(255,255,255,.12);

text-align:center;

font-size:38px;

padding:28px 0;

font-family:'Caudex',serif;

color:#c6d4ff;

}



/* QUESTION TEXT */

.faq-text{

flex:1;

padding:0 30px;

font-size:20px;

font-family:'Caudex',serif;

color:#b8c8ff;

}



/* ARROW */

.faq-arrow{

display:flex;

align-items:center;
justify-content:center;

width:60px;

font-size:26px;

color:white;

transition:transform .3s;

}



/* ANSWER */

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .45s ease;

padding:0 40px;

background:rgba(0,0,0,.55);

}

.faq-answer p{

padding-top:18px;

line-height:1.8;

font-family:'Caudex',serif;

color:#ddd;

}



/* REGOLITH NOTE */

.regolith-note{

margin-top:25px;

padding:18px;

background:rgba(255,255,255,.08);

border-left:3px solid #b8c8ff;

font-size:14px;

color:#ddd;

}



/* ACTIVE STATE */

.faq-item.active .faq-answer{

max-height:700px;

}

.faq-item.active .faq-arrow{

transform:rotate(180deg);

}



/* MOBILE */

@media(max-width:900px){

.faq-number{

width:80px;
font-size:24px;
padding:20px 0;

}

.faq-text{

font-size:16px;

}

.faq-title{

font-size:42px;

}

}