:root{

--yellow:#FFC400;
--orange:#FF5A00;

--bg:#F8F7F4;

--card:#FFFFFF;

--text:#222;

--muted:#6B7280;

}

body{

margin:0;

font-family:
Inter,
system-ui;

background:
var(--bg);

}

.volunteer-page{

min-height:100vh;

background:

radial-gradient(
circle at top,

#FFF5DB,

#FFFDF8 55%,

#F8F7F4

);

}

.hero{

padding:
60px 20px 80px;

}

.logo{

width:220px;

display:block;

margin:auto;

margin-bottom:4px;

}

.hero-title{

font-size: 24px;

font-weight:900;

line-height:0.95;

background:

linear-gradient(
135deg,
var(--yellow),
var(--orange)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:14px;

}

.hero-sub{

color:
var(--muted);

font-size:
18px;

}

.form-card{

max-width:900px;

margin:auto;

background:
var(--card);

padding:50px;

border-radius:36px;

box-shadow:

0 20px 60px
rgba(
255,
130,
0,
0.08
);

}

.form-label{

font-size:13px;

font-weight:800;

color:

var(--orange);

margin-bottom:10px;

letter-spacing:1px;

text-transform:uppercase;

}

.custom-input{

height:52px;

border:

2px solid
#F3F4F6;

border-radius:12px;

padding:8px 18px;

font-size:16px;

transition:.2s;

}

textarea.custom-input{

height:170px;

}

.custom-input:focus{

border-color:

var(--yellow);

box-shadow:

0 0 0 6px
rgba(
255,
196,
0,
0.15
);

}

.form-check{

color:
var(--muted);

}

.submit-btn{

width:100%;

height:72px;

border:none;

border-radius:999px;

font-size:18px;

font-weight:800;

background:

linear-gradient(
135deg,
var(--yellow),
var(--orange)
);

color:white;

transition:.3s;

}

.submit-btn:hover{

transform:
translateY(-4px);

box-shadow:

0 20px 50px
rgba(
255,
120,
0,
0.25
);

}

@media(max-width:768px){

.hero{

padding:40px 16px;

}

.logo{

width:160px;

}

.hero-title{

font-size:32px;

}

.form-card{

padding:26px;

border-radius:24px;

}

}


.info-box{

background:

linear-gradient(
180deg,
#FFF8EC,
white
);

padding:24px;

border-radius:20px;

height:100%;

}

.info-box h6{

color:#FF5A00;

font-weight:800;

margin-bottom:16px;

}

.info-box ul{

padding-left:18px;

margin:0;

}

.collapse{

transition:.4s;

}

.toggle-btn{

background:none;

border:none;

color:#FF7A00;

font-weight:700;

font-size:15px;

}

.toggle-btn:hover{

opacity:.7;

}

.preview-image{

width:90px;

height:90px;

border-radius:20px;

object-fit:cover;

padding:4px;

background:white;

border:

3px solid
#FFE7BE;

box-shadow:

0 15px 35px
rgba(
255,
166,
0,
0.15
);

transition:
.3s;

}

.preview-image:hover{

transform:
scale(
1.05
);

}



input[type=file]{

cursor:pointer;

}



.custom-input[type=file]{

padding:
14px;

}

/* ------------------------- */
/* SUBMIT LOADING */
/* ------------------------- */
.loading-overlay{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:
rgba(
255,
255,
255,
0.82
);

backdrop-filter:
blur(
10px
);

opacity:0;

visibility:hidden;

transition:.2s;

z-index:999999;

}



.loading-overlay.show{

opacity:1;

visibility:visible;

}