/* =========================================
   WE BUY & RECYCLE PAGE
========================================= */

.sf-recycle-page{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw);
background:linear-gradient(135deg,#020617 0%,#07111f 100%);
overflow:hidden;
padding:90px 40px;
}

.sf-recycle-wrap{
max-width:1450px;
margin:auto;
}

.sf-recycle-top{
text-align:center;
margin-bottom:70px;
}

.sf-recycle-sub{
color:#84cc16;
font-size:14px;
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:18px;
}

.sf-recycle-title{
font-size:clamp(42px,5vw,82px);
line-height:1.02;
font-weight:900;
color:#fff;
margin-bottom:28px;
}

.sf-recycle-text{
max-width:980px;
margin:auto;
font-size:20px;
line-height:1.9;
color:#dbe4ee;
}

.sf-recycle-grid{
display:grid;
grid-template-columns:1fr 420px;
gap:40px;
align-items:start;
}

.sf-recycle-content{
display:flex;
flex-direction:column;
gap:34px;
}

.sf-recycle-card{
background:
linear-gradient(
135deg,
rgba(255,255,255,.04),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.06);

border-radius:28px;

padding:40px;
}

.sf-recycle-card h2{
color:#fff;
font-size:38px;
line-height:1.1;
margin-bottom:22px;
font-weight:900;
}

.sf-recycle-card p{
color:#dbe4ee;
font-size:18px;
line-height:1.9;
margin-bottom:22px;
}

.sf-recycle-card p:last-child{
margin-bottom:0;
}

/* =========================================
   HIGHLIGHT BOX
========================================= */

.sf-highlight{
background:
linear-gradient(
135deg,
#84cc16,
#65a30d
);

border-radius:24px;

padding:34px;

color:#07111f;
}

.sf-highlight-title{
font-size:34px;
line-height:1.1;
font-weight:900;
margin-bottom:14px;
}

.sf-highlight-text{
font-size:18px;
line-height:1.8;
font-weight:700;
}

/* =========================================
   MATERIAL GRID
========================================= */

.sf-material-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:28px;
}

.sf-material{
background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

border-radius:18px;

padding:20px;

color:#fff;

font-weight:700;

display:flex;

align-items:center;

gap:12px;
}

.sf-material span{
width:34px;
height:34px;

border-radius:50%;

background:rgba(132,204,22,.12);

color:#84cc16;

display:flex;
align-items:center;
justify-content:center;

font-weight:900;

flex-shrink:0;
}

/* =========================================
   RIGHT PANEL
========================================= */

.sf-recycle-side{
position:sticky;
top:120px;
display:flex;
flex-direction:column;
gap:28px;
}

.sf-side-image{
min-height:340px;
border-radius:28px;
overflow:hidden;

background:
linear-gradient(
rgba(0,0,0,.2),
rgba(0,0,0,.45)
),
url('/images/solderflow-industrial.jpg')
center center/cover no-repeat;

box-shadow:
0 30px 70px rgba(0,0,0,.35);
}

.sf-side-card{
background:
linear-gradient(
135deg,
rgba(255,255,255,.04),
rgba(255,255,255,.02)
);

border:1px solid rgba(255,255,255,.06);

border-radius:28px;

padding:34px;
}

.sf-side-title{
color:#fff;
font-size:32px;
line-height:1.1;
font-weight:900;
margin-bottom:22px;
}

.sf-contact-row{
display:flex;
gap:16px;
align-items:flex-start;
margin-bottom:24px;
}

.sf-contact-row:last-child{
margin-bottom:0;
}

.sf-contact-icon{
width:46px;
height:46px;

border-radius:50%;

background:rgba(132,204,22,.12);

color:#84cc16;

display:flex;
align-items:center;
justify-content:center;

font-size:20px;

flex-shrink:0;
}

.sf-contact-text{
color:#dbe4ee;
line-height:1.8;
font-size:16px;
}

.sf-whatsapp{
margin-top:30px;

display:flex;

align-items:center;
justify-content:center;

gap:12px;

background:#25D366;

color:#07111f;

padding:18px 24px;

border-radius:14px;

font-weight:900;

text-transform:uppercase;

transition:.3s ease;
}

.sf-whatsapp:hover{
transform:translateY(-2px);
color:#07111f;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:1200px){

.sf-recycle-grid{
grid-template-columns:1fr;
}

.sf-recycle-side{
position:relative;
top:auto;
}
}

@media (max-width:768px){

.sf-recycle-page{
padding:70px 22px;
}

.sf-recycle-title{
font-size:46px;
}

.sf-recycle-text{
font-size:18px;
}

.sf-recycle-card{
padding:32px 24px;
}

.sf-recycle-card h2{
font-size:30px;
}

.sf-highlight-title{
font-size:28px;
}

.sf-material-grid{
grid-template-columns:1fr;
}

.sf-side-card{
padding:30px 24px;
}

}