.faq{


width:min(1400px,92%);


margin:130px auto 140px;


display:grid;


grid-template-columns:1fr 380px;


gap:70px;


align-items:center;


}





/* Left FAQ Cards */


.faq-container{


display:flex;


flex-direction:column;


gap:20px;


}





.faq-item{


background:white;


border-radius:24px;


border:1px solid #dbeafe;


box-shadow:


0 18px 45px rgba(37,99,235,.08);


overflow:hidden;


transition:.35s;


}



.faq-item:hover{


box-shadow:


0 25px 60px rgba(37,99,235,.15);


}





.faq-item button{


width:100%;


display:flex;


justify-content:space-between;


align-items:center;


padding:25px;


font-size:18px;


font-weight:600;


cursor:pointer;


border:none;


background:white;


color:#0f172a;


}





.faq-item svg{


color:#2563eb;


transition:.4s;


}





.faq-answer{


max-height:0;


overflow:hidden;


transition:.45s ease;


}





.faq-answer p{


padding:0 25px 25px;


color:#64748b;


line-height:1.8;


}





.faq-item.active .faq-answer{


max-height:250px;


}





.faq-item.active svg{


transform:rotate(180deg);


}









/* Right Heading */


.faq-heading span{


color:#2563eb;


font-size:14px;


font-weight:700;


letter-spacing:3px;


}





.faq-heading h2{


margin-top:18px;


font-size:48px;


line-height:1.2;


font-weight:800;


color:#0f172a;


}





.faq-heading p{


margin-top:22px;


color:#64748b;


font-size:17px;


line-height:1.8;


}









@media(max-width:900px){


.faq{


grid-template-columns:1fr;


gap:40px;


}



.faq-heading{


order:-1;


}



.faq-heading h2{


font-size:36px;


}


}