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


.about-hero{


background:

radial-gradient(

circle at right,

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

transparent 35%

),

#050505;



padding:

90px 25px 110px;


}








.about-hero-container{


max-width:1200px;


margin:auto;



display:grid;



grid-template-columns:

1fr 1fr;



gap:70px;



align-items:center;


}










/* CONTENT */


.about-badge{


display:inline-flex;



align-items:center;



gap:10px;




padding:

10px 18px;




border-radius:50px;




background:

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




border:

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




font-size:14px;



font-weight:800;



color:#d4af37;




margin-bottom:28px;


}








.about-badge span{


width:8px;



height:8px;



border-radius:50%;



background:#d4af37;



box-shadow:

0 0 15px #d4af37;


}









.about-hero-content h1{


font-size:

clamp(40px,5vw,64px);



line-height:1.05;



letter-spacing:-2px;



font-weight:900;



color:white;



margin-bottom:28px;


}










.about-hero-content p{


font-size:18px;



line-height:1.8;



color:#cfcfcf;


}







.about-hero-content strong{


color:white;


}











/* STATS */


.about-stats{


margin-top:45px;




display:flex;




gap:35px;


}








.about-stats strong{


display:block;



font-size:28px;




font-weight:900;




color:#d4af37;


}








.about-stats span{


font-size:14px;



font-weight:700;



color:#aaa;


}












/* IMAGE */


.about-hero-image{


height:520px;




border-radius:32px;



overflow:hidden;




background:#111;




box-shadow:

0 35px 90px rgba(0,0,0,.55);




border:

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


}








.about-hero-image img{


width:100%;



height:100%;



object-fit:cover;




display:block;


}











/* RESPONSIVE */


@media(max-width:900px){



.about-hero-container{


grid-template-columns:1fr;



gap:50px;



text-align:center;


}





.about-stats{


justify-content:center;


}






.about-hero-image{


height:420px;


}



}









@media(max-width:520px){



.about-hero{


padding:

70px 20px;


}





.about-hero-content h1{


font-size:38px;



letter-spacing:-1px;


}






.about-hero-content p{


font-size:16px;


}






.about-stats{


gap:25px;


flex-wrap:wrap;


}






.about-hero-image{


height:330px;



border-radius:24px;


}



}

/* =====================
SEO INTERNAL LINK
===================== */


.seo-link{


color:#d4af37;


font-weight:800;


text-decoration:none;


position:relative;


transition:.3s;


}






.seo-link:after{


content:"";


position:absolute;


left:0;


bottom:-3px;



width:100%;


height:1px;




background:#d4af37;



transform:

scaleX(0);



transform-origin:left;



transition:.3s;


}







.seo-link:hover{


color:#fff1a8;


}






.seo-link:hover:after{


transform:

scaleX(1);


}