/* =====================
CARA PAKAI PRODUK SEO
===================== */


.how-section{

background:
radial-gradient(
circle at left,
rgba(212,175,55,.12),
transparent 35%
),
#050505;


padding:110px 25px;

}







.how-container{

max-width:1100px;

margin:auto;

}










/* HEADING */


.how-heading{

max-width:850px;

margin:0 auto 70px;


text-align:center;

}






.how-heading h2{

font-size:
clamp(34px,4vw,56px);


line-height:1.1;


letter-spacing:-1.5px;


font-weight:900;


color:white;


margin-bottom:25px;

}







.how-heading p{

font-size:17px;


line-height:1.8;


color:#bdbdbd;

}






.how-heading strong{

color:white;

}









/* STEPS */


.how-wrapper{

display:flex;


flex-direction:column;


gap:25px;

}









.how-card{

display:grid;


grid-template-columns:
90px 1fr;



gap:30px;


padding:35px;


border-radius:32px;


background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);



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



transition:.35s;

}










.how-card:hover{

transform:
translateX(8px);


border-color:
rgba(212,175,55,.60);

}










.how-number{

width:70px;

height:70px;


display:flex;


align-items:center;


justify-content:center;


border-radius:22px;



background:
linear-gradient(
135deg,
#d4af37,
#fff1a8
);



color:#050505;


font-size:22px;


font-weight:900;

}











.how-content h3{

font-size:24px;


font-weight:900;


color:white;


margin-bottom:14px;

}








.how-content p{

font-size:16px;


line-height:1.8;


color:#aaa;

}









/* NOTE */


.how-note{

margin-top:55px;


display:flex;


gap:20px;


align-items:center;


padding:32px;


border-radius:30px;



background:
linear-gradient(
135deg,
rgba(212,175,55,.16),
rgba(255,255,255,.04)
);



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

}









.how-note span{

width:42px;

height:42px;

min-width:42px;



display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:#d4af37;



color:#050505;


font-weight:900;

}








.how-note p{

font-size:17px;


line-height:1.7;


color:white;

}










/* RESPONSIVE */


@media(max-width:650px){


.how-section{

padding:

80px 20px;

}




.how-card{

grid-template-columns:1fr;


gap:20px;

}



.how-card:hover{

transform:none;

}



}