/* =====================
PROBLEM SECTION
===================== */


.problem-section{


background:#050505;


padding:

100px 25px;


}






.problem-container{


max-width:1200px;


margin:auto;



display:grid;


grid-template-columns:

.9fr 1.1fr;



gap:70px;



align-items:center;


}









/* LEFT */


.section-label{


display:inline-flex;



padding:

9px 18px;



border-radius:50px;



background:

rgba(212,175,55,.12);



border:

1px solid rgba(212,175,55,.3);




color:#d4af37;



font-size:13px;


font-weight:800;



margin-bottom:24px;


}








.problem-content h2{


font-size:

clamp(34px,4vw,52px);



line-height:1.1;



letter-spacing:-1.5px;



font-weight:900;



color:#ffffff;



margin-bottom:25px;


}









.problem-content p{


font-size:17px;



line-height:1.8;



color:#bdbdbd;


}







.problem-content strong{


color:#ffffff;


}










/* HIGHLIGHT */


.problem-highlight{


margin-top:35px;



padding:

22px;




border-radius:20px;



display:flex;



gap:15px;




background:

rgba(255,255,255,.05);




border:

1px solid rgba(212,175,55,.25);



color:white;




font-size:15px;


line-height:1.6;


}








.problem-highlight span{


width:28px;


height:28px;



border-radius:50%;



background:#d4af37;



color:#050505;




display:flex;


align-items:center;


justify-content:center;



font-weight:900;




flex-shrink:0;


}









/* CARDS */


.problem-list{


display:grid;



grid-template-columns:

repeat(2,1fr);



gap:22px;


}








.problem-card{


padding:

30px;




border-radius:26px;




background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);




border:

1px solid rgba(212,175,55,.20);




transition:.3s;


}








.problem-card:hover{


transform:

translateY(-6px);



border-color:

rgba(212,175,55,.55);


}










.problem-icon{


width:42px;


height:42px;



border-radius:14px;




display:flex;


align-items:center;


justify-content:center;




background:

linear-gradient(

135deg,

#d4af37,

#fff1a8

);



color:#050505;



font-size:22px;



font-weight:900;



margin-bottom:25px;


}









.problem-card h3{


font-size:20px;



font-weight:900;



color:white;



margin-bottom:15px;


}







.problem-card p{


font-size:15px;



line-height:1.7;



color:#aaa;


}









/* RESPONSIVE */


@media(max-width:950px){



.problem-container{


grid-template-columns:1fr;



gap:50px;


}




}








@media(max-width:600px){



.problem-section{


padding:

80px 20px;


}




.problem-list{


grid-template-columns:1fr;


}




.problem-card{


padding:

26px;


}



}