/* ==========================================
   GOOGLE FONT
========================================== */

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

/* ==========================================
   ROOT
========================================== */

:root{

--bg:#070B14;
--card:#111827;
--card-hover:#182235;

--green:#22C55E;
--blue:#3B82F6;

--text:#F8FAFC;
--muted:#94A3B8;

--border:#243246;

}

/* ==========================================
   RESET
========================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Poppins',sans-serif;

background:linear-gradient(
180deg,
#070B14,
#0B1120,
#111827
);

color:white;

overflow-x:hidden;

}

.container{

width:92%;
max-width:1200px;
margin:auto;

}

a{

text-decoration:none;

}


/* ==========================================
   HERO
========================================== */

.faq-hero{

padding:120px 20px 70px;

text-align:center;

position:relative;

overflow:hidden;

}

.faq-hero::before{

content:"";

position:absolute;

width:450px;
height:450px;

left:-150px;
top:-150px;

background:#22C55E20;

filter:blur(120px);

}

.faq-hero::after{

content:"";

position:absolute;

width:400px;
height:400px;

right:-120px;
bottom:-120px;

background:#3B82F620;

filter:blur(120px);

}

.badge{

display:inline-block;

padding:10px 22px;

background:#182235;

border:1px solid var(--border);

border-radius:40px;

color:#22C55E;

font-weight:600;

margin-bottom:25px;

}

.faq-hero h1{

font-size:60px;

font-weight:800;

margin-bottom:18px;

}

.faq-hero p{

font-size:19px;

color:#CBD5E1;

margin-bottom:40px;

}

/* ==========================================
   SEARCH
========================================== */

.search-box{

max-width:650px;

margin:auto;

background:#182235;

border:1px solid var(--border);

border-radius:18px;

display:flex;

align-items:center;

padding:18px 25px;

}

.search-box i{

font-size:20px;

color:#22C55E;

margin-right:15px;

}

.search-box input{

width:100%;

background:none;

border:none;

outline:none;

color:white;

font-size:16px;

}

.search-box input::placeholder{

color:#94A3B8;

}

/* ==========================================
   FAQ
========================================== */

.faq-section{

padding:80px 20px;

}

.faq-container{

max-width:900px;

margin:auto;

}

/* ==========================================
   FAQ CARD
========================================== */

.faq-item{

background:rgba(24,34,53,.85);

backdrop-filter:blur(14px);

border:1px solid var(--border);

border-radius:18px;

margin-bottom:20px;

overflow:hidden;

transition:.35s;

}

.faq-item:hover{

border-color:#22C55E;

transform:translateY(-5px);

box-shadow:

0 20px 40px rgba(0,0,0,.35);

}

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

.faq-question{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 30px;

cursor:pointer;

}

.faq-question span{

font-size:18px;

font-weight:600;

}

.faq-question i{

font-size:22px;

transition:.35s;

color:#22C55E;

}

/* ==========================================
   ANSWER
========================================== */

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

padding:0 30px;

color:#CBD5E1;

line-height:1.8;

}

.faq-item.active .faq-answer{

max-height:300px;

padding:0 30px 25px;

}

.faq-item.active .faq-question i{

transform:rotate(45deg);

}

/* ==========================================
   SUPPORT
========================================== */

.contact-support{

padding:100px 20px;

text-align:center;

}

.contact-support h2{

font-size:44px;

margin-bottom:20px;

}

.contact-support p{

color:#94A3B8;

margin-bottom:40px;

font-size:18px;

}

.contact-support a{

display:inline-block;

padding:18px 45px;

background:#22C55E;

border-radius:15px;

color:white;

font-weight:700;

transition:.35s;

}

.contact-support a:hover{

background:#16A34A;

transform:translateY(-4px);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:768px){

.faq-hero h1{

font-size:40px;

}

.faq-question{

padding:20px;

}

.faq-question span{

font-size:16px;

}

.contact-support h2{

font-size:30px;

}

.search-box{

padding:15px 20px;

}

}