/* =====================
SEO PROCESS
===================== */


.process-section{

background:#050505;

padding:
110px 25px;

}





.process-container{

max-width:1200px;

margin:auto;

}








/* HEADING */


.process-heading{

max-width:760px;

margin-bottom:70px;

}






.process-heading h2{


font-size:

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



line-height:1.1;


letter-spacing:-1.5px;



font-weight:900;



color:white;



margin-bottom:25px;


}







.process-heading p{


font-size:17px;



line-height:1.8;



color:#bdbdbd;

}





.process-heading strong{

color:white;

}









/* TIMELINE */


.process-timeline{


position:relative;



display:flex;



flex-direction:column;



gap:28px;

}







.process-timeline:before{


content:"";



position:absolute;


left:38px;


top:0;


bottom:0;


width:2px;




background:

linear-gradient(

#d4af37,

transparent

);


}










/* CARD */


.process-card{


position:relative;


display:grid;



grid-template-columns:

80px 1fr;



gap:28px;




padding:

35px;



border-radius:28px;




background:

linear-gradient(

145deg,

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

rgba(255,255,255,.02)

);



border:

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




transition:.35s;

}








.process-card:hover{


transform:

translateX(8px);



border-color:

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


}









/* NUMBER */


.process-number{


width:76px;


height:76px;




display:flex;


align-items:center;


justify-content:center;




border-radius:24px;




background:

linear-gradient(

135deg,

#d4af37,

#fff1a8

);



font-size:22px;


font-weight:900;



color:#050505;




z-index:2;


}










.process-content h3{


font-size:26px;



font-weight:900;



color:white;



margin-bottom:15px;


}








.process-content p{


max-width:750px;



font-size:16px;



line-height:1.8;



color:#aaa;



margin-bottom:22px;


}









/* LIST */


.process-content ul{


display:flex;


gap:15px;



flex-wrap:wrap;



list-style:none;


}






.process-content li{


padding:

8px 14px;




border-radius:30px;




background:

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




border:

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




color:#d4af37;




font-size:13px;



font-weight:800;


}









/* RESPONSIVE */


@media(max-width:700px){



.process-section{


padding:

80px 20px;

}





.process-card{


grid-template-columns:1fr;



gap:20px;



padding:

28px;


}




.process-timeline:before{


display:none;

}




.process-card:hover{


transform:none;

}




.process-number{


width:60px;


height:60px;


border-radius:18px;


}




.process-content h3{


font-size:22px;

}



}