/* HERO */

.hero{
position:relative;
height:350px;
overflow:hidden;
}

.hero-slider{
position:relative;
height:100%;
}

.hero-slide{
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:opacity 1s;
}

.hero-slide.active{
opacity:1;
}

.hero-slide img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.7);
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.4);
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
width:100%;
}

.hero-content h1{
color:#fff;
font-size:64px;
font-weight:900;
letter-spacing:2px;
}

/* BREADCRUMB */

.breadcrumb{
background:#f8f9fa;
padding:15px 0;
border-bottom:1px solid #e5e7eb;
}

.breadcrumb .container{
display:flex;
gap:10px;
font-size:16px;
}

.breadcrumb a{
color:#6b21a8;
text-decoration:none;
font-weight:500;
}

.sep,.current{
color:#6b21a8;
}

/* INTRO */

.intro{
padding:60px 0 40px;
text-align:center;
background:#f9f9f9;
}

.main-title{
font-size:36px;
font-weight:900;
margin-bottom:20px;
}

.main-title span{
color:#dc2626;
}

.description{
max-width:800px;
margin:auto;
color:#555;
line-height:1.7;
}

/* BLOOD INFO */

.blood-info-section{
padding:60px 0;
background:#fff;
}

.blood-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
align-items:center;
}

.blood-image img{
width:100%;
border-radius:12px;
}

.blood-text h3{
font-size:28px;
margin-bottom:15px;
}

.blood-text ul{
margin:20px 0;
}

.blood-text li{
margin-bottom:10px;
}

.donate-btn{
display:inline-block;
background:#dc2626;
color:#fff;
padding:12px 30px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}

/* FORM */

.donor-form-section{
background:#f5f5f5;
padding:60px 0;
}

.donor-form{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:40px;
}

.donor-form input,
.donor-form select,
.donor-form textarea{
padding:14px;
border:1px solid #ccc;
border-radius:8px;
font-size:15px;
}

.donor-form textarea{
grid-column:span 2;
height:120px;
}

.donor-form button{
grid-column:span 2;
padding:14px;
background:#dc2626;
color:#fff;
border:none;
border-radius:30px;
font-size:16px;
font-weight:600;
cursor:pointer;
}

@media(max-width:768px){

.blood-grid{
grid-template-columns:1fr;
}

.donor-form{
grid-template-columns:1fr;
}

.hero-content h1{
font-size:36px;
}

}

.hero{
height:350px !important;
}

.donate-btn{
display:inline-block;
background:#3b82f6;
color:#fff;
padding:12px 30px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.donate-btn:hover{
background:#2563eb;
}

.breadcrumb{
background:#f8f9fa;
border-bottom:1px solid #e5e7eb;
}

.breadcrumb-container{
max-width:1200px;
margin:0 auto;
padding:15px 20px;
display:flex;
align-items:center;
gap:10px;
font-size:16px;
}

.breadcrumb a{
color:#6b21a8;
text-decoration:none;
font-weight:500;
}

.breadcrumb a:hover{
text-decoration:underline;
}

.sep{
color:#6b21a8;
}

.current{
color:#6b21a8;
font-weight:500;
}

/* ================= DIN TRACKER ================= */

.din-tracker-section{
background: #f9f9f9;;
padding:30px 0;
border-bottom:1px solid #e5e7eb;
}

.din-container{
max-width:1200px;
margin:auto;
padding:0 20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
flex-wrap:wrap;
}

.din-left h3{
font-size:22px;
font-weight:700;
margin-bottom:5px;
}

.din-left p{
color:#666;
font-size:14px;
}

.din-search{
display:flex;
gap:10px;
}

.din-search input{
padding:12px 16px;
border:1px solid #ccc;
border-radius:6px;
width:220px;
font-size:14px;
}

.din-search button{
background:#3b82f6;
color:white;
border:none;
padding:12px 20px;
border-radius:6px;
font-weight:600;
cursor:pointer;
}

.din-search button:hover{
background:#2563eb;
}

/* ================= STICKY CTA ================= */

.sticky-cta{
position:fixed;
right:20px;
bottom:30px;
display:flex;
flex-direction:column;
gap:10px;
z-index:999;
}

.sticky-cta a{
text-decoration:none;
padding:12px 18px;
border-radius:30px;
font-weight:600;
color:white;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:0.3s;
}

.cta-request{
background:#ef4444;
}

.cta-request:hover{
background:#dc2626;
}

.cta-donor{
background:#3b82f6;
}

.cta-donor:hover{
background:#2563eb;
}


/* ================= ACTION BAR ================= */

.action-bar{
background: #f9f9f9;
padding:30px 0;
border-bottom:1px solid #e5e7eb;
}

.action-container{
max-width:1200px;
margin:auto;
padding:0 20px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

.action-left h3{
font-size:22px;
font-weight:700;
margin-bottom:4px;
}

.action-left p{
color:#6b7280;
font-size:14px;
}

/* BUTTONS */

.action-buttons{
display:flex;
gap:15px;
}

.action-btn{
display:flex;
align-items:center;
gap:8px;
padding:12px 20px;
border-radius:6px;
font-weight:600;
text-decoration:none;
font-size:15px;
background:#dc2626;
color:white;
transition:0.3s;
}

.action-btn i{
font-size:16px;
}

.action-btn:hover{
background:#b91c1c;
}


/* ================= WHO CAN DONATE ================= */

.donate-eligibility{
background:#f5f5f5;
padding:60px 0;
}

.donate-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}

.donate-text h2{
font-size:36px;
font-weight:900;
color:#dc2626;
margin-bottom:20px;
}

.donate-text p{
color:#444;
line-height:1.7;
margin-bottom:15px;
}

.donate-buttons{
margin:25px 0;
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn-primary{
background:#dc2626;
color:#fff;
padding:12px 22px;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.btn-primary:hover{
background:#b91c1c;
}

.btn-outline{
border:2px solid #dc2626;
color:#dc2626;
padding:10px 22px;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.btn-outline:hover{
background:#dc2626;
color:#fff;
}

.donate-text small{
display:block;
margin-top:20px;
color:#6b7280;
font-size:13px;
}

.donate-image{
text-align:center;
}

.donate-image img{
max-width:250px;
opacity:0.8;
}

/* MOBILE */

@media(max-width:768px){

.donate-grid{
grid-template-columns:1fr;
text-align:center;
}

.donate-buttons{
justify-content:center;
}

}

.donate-eligibility{
background:#f5f5f5;
padding:60px 0;
min-height:400px;
display:flex;
align-items:center;
}

.donate-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
width:100%;
}

.donate-image{
display:flex;
justify-content:center;
align-items:center;
}

.container{
max-width:1500px;
margin:0 auto;
padding:0 80px;
}

/* ================= DONATION PROCESS ================= */

.donation-process{
background:#f5f5f5;
padding:80px 0;
text-align:center;
}

.process-header h2{
font-size:34px;
font-weight:900;
color:#dc2626;
margin-bottom:10px;
}

.process-header p{
color:#444;
max-width:600px;
margin:auto;
line-height:1.6;
margin-bottom:60px;
}

/* STEPS */

.process-steps{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.step{
flex:1;
min-width:220px;
text-align:center;
}

.step-icon{
font-size:28px;
color:#dc2626;
margin-bottom:15px;
}

.step h3{
font-size:20px;
margin-bottom:8px;
}

.step p{
color:#555;
font-size:14px;
}

/* LINE BETWEEN STEPS */

.step-line{
height:2px;
flex:1;
background:linear-gradient(to right,#dc2626 50%,transparent 50%);
background-size:10px 2px;
}

/* MOBILE */

@media(max-width:768px){

.process-steps{
flex-direction:column;
}

.step-line{
display:none;
}

}

/* ================= HEADER ACTION BAR ================= */

.header-action-bar{
background:#ffffff;
border-bottom:1px solid #e5e7eb;
padding:15px 0;
position:sticky;
top:0;
z-index:999;
}

.header-action-container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

/* DIN TRACKER */

.din-tracker{
display:flex;
align-items:center;
background:#f5f5f5;
border-radius:40px;
padding:6px 6px 6px 15px;
gap:10px;
}

.din-tracker i{
color:#dc2626;
font-size:18px;
}

.din-tracker input{
border:none;
background:transparent;
outline:none;
padding:10px;
width:200px;
font-size:14px;
}

.din-tracker button{
background:#dc2626;
border:none;
color:white;
padding:10px 18px;
border-radius:30px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:0.3s;
}

.din-tracker button:hover{
background:#b91c1c;
}

/* CTA BUTTONS */

.header-cta{
display:flex;
gap:15px;
}

.cta-btn{
display:flex;
align-items:center;
gap:8px;
padding:12px 20px;
border-radius:30px;
text-decoration:none;
font-weight:600;
color:white;
transition:0.3s;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.cta-btn i{
font-size:16px;
}

/* REQUEST BLOOD */

.request-btn{
background:#dc2626;
}

.request-btn:hover{
background:#b91c1c;
}

/* REGISTER DONOR */

.donor-btn{
background:#3b82f6;
}

.donor-btn:hover{
background:#2563eb;
}

/* MOBILE */

@media(max-width:768px){

.header-action-container{
flex-direction:column;
align-items:stretch;
}

.header-cta{
justify-content:center;
}

.din-tracker{
width:100%;
}

.din-tracker input{
width:100%;
}

}

/* ================= REQUEST FORM ================= */

.request-section{
background:#f5f5f5;
padding:80px 0;
}

.request-title{
text-align:center;
font-size:32px;
color:#dc2626;
margin-bottom:40px;
}

.request-title i{
margin-right:8px;
}

.request-form{
background:#ffffff;
padding:40px;
border-radius:12px;
max-width:800px;
margin:auto;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* EMERGENCY */

.form-emergency{
display:flex;
align-items:center;
gap:15px;
margin-bottom:30px;
font-weight:600;
color:#dc2626;
}

/* SWITCH */

.switch{
position:relative;
display:inline-block;
width:50px;
height:24px;
}

.switch input{
display:none;
}

.slider{
position:absolute;
cursor:pointer;
background:#ccc;
border-radius:30px;
top:0;
left:0;
right:0;
bottom:0;
transition:0.3s;
}

.slider:before{
position:absolute;
content:"";
height:18px;
width:18px;
left:3px;
bottom:3px;
background:white;
border-radius:50%;
transition:0.3s;
}

input:checked + .slider{
background:#dc2626;
}

input:checked + .slider:before{
transform:translateX(26px);
}

/* GRID */

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;
}

.form-grid input,
.form-grid select{
padding:14px;
border:1px solid #ccc;
border-radius:8px;
font-size:14px;
}

/* CONSENT */

.form-consent{
margin:20px 0;
display:flex;
gap:10px;
font-size:14px;
}

/* SUBMIT BUTTON */

.submit-btn{
background:#dc2626;
color:#fff;
border:none;
padding:14px;
width:100%;
border-radius:30px;
font-weight:600;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

.submit-btn:hover{
background:#b91c1c;
}

/* ================= MODAL ================= */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.modal-content{
background:#fff;
padding:40px;
border-radius:12px;
text-align:center;
max-width:400px;
}

.modal-content i{
font-size:40px;
color:#dc2626;
margin-bottom:15px;
}

.din-number{
font-size:24px;
font-weight:700;
margin:15px 0;
color:#3b82f6;
}

.modal-content button{
background:#dc2626;
border:none;
color:white;
padding:10px 20px;
border-radius:8px;
cursor:pointer;
}


/* ================= DONOR FORM ================= */

.donor-section{
background:#f5f5f5;
padding:80px 0;
}

.donor-title{
text-align:center;
font-size:32px;
color:#dc2626;
margin-bottom:40px;
}

.donor-title i{
margin-right:8px;
}

.donor-form{
background:#ffffff;
padding:40px;
border-radius:12px;
max-width:800px;
margin:auto;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* GRID */

.donor-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:25px;
}

.donor-grid input,
.donor-grid select{
padding:14px;
border:1px solid #ccc;
border-radius:8px;
font-size:14px;
}

/* AVAILABILITY TOGGLE */

.availability-toggle{
display:flex;
align-items:center;
gap:15px;
font-weight:600;
color:#dc2626;
margin-bottom:20px;
}

/* SWITCH */

.switch{
position:relative;
display:inline-block;
width:50px;
height:24px;
}

.switch input{
display:none;
}

.slider{
position:absolute;
cursor:pointer;
background:#ccc;
border-radius:30px;
top:0;
left:0;
right:0;
bottom:0;
transition:0.3s;
}

.slider:before{
position:absolute;
content:"";
height:18px;
width:18px;
left:3px;
bottom:3px;
background:white;
border-radius:50%;
transition:0.3s;
}

input:checked + .slider{
background:#3b82f6;
}

input:checked + .slider:before{
transform:translateX(26px);
}

/* CONSENT */

.donor-consent{
display:flex;
gap:10px;
font-size:14px;
margin-bottom:25px;
}

/* SUBMIT BUTTON */

.donor-submit{
background:#3b82f6;
color:white;
border:none;
width:100%;
padding:14px;
border-radius:30px;
font-size:16px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
transition:0.3s;
}

.donor-submit:hover{
background:#2563eb;
}

/* MOBILE */

@media(max-width:768px){

.donor-grid{
grid-template-columns:1fr;
}

}

/* ================= LIVE REQUEST BOARD ================= */

.requests-board{
background:#fff;
padding:80px 0;
}

.board-title{
text-align:center;
font-size:32px;
color:#dc2626;
margin-bottom:40px;
}

/* FILTER BAR */

.filter-bar{
display:flex;
gap:15px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:40px;
}

.filter-bar select{
padding:10px 14px;
border-radius:8px;
border:1px solid #ccc;
}

.view-toggle{
background:#3b82f6;
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}

/* REQUEST CARDS */

.requests-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
}

.request-card{
background:#ffffff;
padding:20px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.blood-type{
font-size:30px;
font-weight:900;
color:#dc2626;
}

.request-info{
flex:1;
margin-left:15px;
}

.request-info h3{
font-size:18px;
margin-bottom:5px;
}

.request-info p{
font-size:14px;
color:#666;
margin-bottom:6px;
}

/* BADGES */

.badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
margin-right:5px;
}

.emergency{
background:#dc2626;
color:white;
}

.standard{
background:#facc15;
color:#000;
}

.pending{
background:#3b82f6;
color:white;
}

.progress{
background:#2563eb;
color:white;
}

/* DONATE BUTTON */

.donate-btn{
background:#dc2626;
color:white;
border:none;
padding:10px 16px;
border-radius:30px;
cursor:pointer;
font-weight:600;
}

/* MAP */

.map-view{
display:none;
height:450px;
border-radius:12px;
overflow:hidden;
}
.impact-section{
padding:70px;
background:#f9f9f9;
text-align:center;
}

.impact-container{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
margin-top:40px;
}

.impact-box{
background:white;
padding:30px;
border-radius:12px;
width:220px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.impact-box i{
font-size:32px;
color:#e53935;
margin-bottom:10px;
}

.impact-box h3{
font-size:30px;
color:#222;
}
.impact{
padding:80px 10%;
/* background:linear-gradient(135deg,#fff5f5,#fefefe); */
text-align:center;
}

.impact-title{
font-size:28px;
font-weight:600;
margin-bottom:50px;
color:#222;
}

.impact-wrapper{
display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;
}

.impact-card{
background:white;
padding:40px 30px;
width:230px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.3s;
}

.impact-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.impact-card i{
font-size:34px;
color:#e53935;
margin-bottom:15px;
}

.impact-card h3{
font-size:32px;
font-weight:700;
color:#222;
margin-bottom:5px;
}

.impact-card p{
font-size:16px;
color:#666;
}
.section-title{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:40px;
}

.section-title i{
color:#e53935;
font-size:26px;
}

.section-title h2{
font-size:32px;
font-weight:600;
color:#e53935;
}

.how-it-works{
    padding:100px 10%;
    background:linear-gradient(135deg,#fff5f5,#ffecec);
    text-align:center;
}

.section-title{
    font-size:40px;
    font-weight:700;
    margin-bottom:60px;
    color:#c1121f;
}

.steps-container{
    display:flex;
    justify-content:space-between;
    position:relative;
    gap:30px;
}

/* Timeline Line */

.steps-container::before{
    content:"";
    position:absolute;
    top:45px;
    left:5%;
    width:90%;
    height:4px;
    background:linear-gradient(90deg,#ff4d4d,#c1121f);
    z-index:0;
}

/* Step Card */

.step{
    position:relative;
    background:white;
    padding:40px 25px;
    border-radius:20px;
    width:100%;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:all 0.4s ease;
    z-index:1;
}

/* Hover Animation */

.step:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* Icon */

.step-icon{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    border-radius:50%;
    background:linear-gradient(135deg,#ff4d4d,#c1121f);
    color:white;
    margin:auto;
    margin-bottom:20px;
    animation:pulse 2s infinite;
}

/* Pulse Animation */

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,77,77,0.6);
    }
    70%{
        box-shadow:0 0 0 20px rgba(255,77,77,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,77,77,0);
    }
}

.step h3{
    font-size:22px;
    margin-bottom:10px;
    color:#c1121f;
}

.step p{
    font-size:15px;
    color:#555;
}

/* Responsive */

@media(max-width:900px){

.steps-container{
    flex-direction:column;
}

.steps-container::before{
    display:none;
}

}

.how-section{

padding:100px 10%;
background:#ffffff;
text-align:center;

}

.how-title{

font-size:38px;
font-weight:700;
margin-bottom:70px;
color:#d62828;

}

.how-container{

display:flex;
justify-content:space-between;
position:relative;
gap:30px;

}

/* Timeline Line */

.how-container::before{

content:"";
position:absolute;
top:45px;
left:8%;
width:84%;
height:3px;
background:#f1f1f1;
z-index:0;

}

/* Step Card */

.how-step{

background:#ffffff;
padding:35px 25px;
border-radius:14px;
width:100%;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:all 0.35s ease;
position:relative;
z-index:1;

}

.how-step:hover{

transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,0,0,0.12);

}

/* Icon Circle */

.icon-box{

width:80px;
height:80px;
border-radius:50%;
background:linear-gradient(135deg,#ff4d4d,#c1121f);
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:20px;
color:white;
font-size:30px;
animation:iconPulse 2.5s infinite;

}

/* Icon Animation */

@keyframes iconPulse{

0%{
box-shadow:0 0 0 0 rgba(255,77,77,0.6);
}

70%{
box-shadow:0 0 0 18px rgba(255,77,77,0);
}

100%{
box-shadow:0 0 0 0 rgba(255,77,77,0);
}

}

.how-step h3{

font-size:20px;
margin-bottom:10px;
color:#d62828;

}

.how-step p{

font-size:15px;
color:#555;
line-height:1.6;

}

/* Responsive */

@media(max-width:900px){

.how-container{

flex-direction:column;

}

.how-container::before{

display:none;

}

}

.eligibility-box{
text-align:center;
margin-top:40px;
}

.check-btn{

background:#d62828;
color:white;
padding:14px 30px;
border:none;
border-radius:30px;
font-size:18px;
cursor:pointer;
transition:0.3s;

}

.check-btn:hover{
background:#b71c1c;
}

.quiz-container{

display:none;
width:420px;
margin:auto;
padding:40px;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
border-radius:15px;
animation:fadeIn 0.5s;

}

.answers button{

margin:10px;
padding:12px 25px;
border:none;
border-radius:25px;
background:#f1f1f1;
cursor:pointer;
font-size:16px;

}

.answers button:hover{
background:#d62828;
color:white;
}

.progress{

height:10px;
background:#eee;
margin-top:25px;
border-radius:20px;
overflow:hidden;

}

.progress-bar{

height:100%;
width:0%;
background:#d62828;
transition:0.4s;

}

.result-box{

margin-top:40px;
font-size:22px;
font-weight:bold;

}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ELIGIBILITY MODAL */

.eligibility-modal{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
align-items:center;
justify-content:center;
z-index:1000;

}

.eligibility-card{

background:white;
padding:40px;
width:420px;
border-radius:15px;
text-align:center;
animation:fadeUp 0.5s;

}

.answers button{

margin:10px;
padding:12px 25px;
border:none;
border-radius:25px;
background:#f1f1f1;
cursor:pointer;
font-size:16px;
transition:0.3s;

}

.answers button:hover{

background:#d62828;
color:white;

}

.progress{

height:8px;
background:#eee;
border-radius:10px;
margin-top:25px;
overflow:hidden;

}

.progress-bar{

height:100%;
width:0%;
background:#d62828;
transition:0.4s;

}

/* RESULT CARD */

.result-area{

margin-top:30px;
font-size:22px;
font-weight:600;

}

.result-meter{

width:110px;
height:110px;
border-radius:50%;
border:8px solid #d62828;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:24px;
font-weight:bold;
color:#d62828;

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}
/* ELIGIBILITY MODAL */

.eligibility-modal{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
align-items:center;
justify-content:center;
z-index:1000;

}

.eligibility-card{

background:white;
padding:40px;
width:420px;
border-radius:15px;
text-align:center;
animation:fadeUp 0.5s;

}

.answers button{

margin:10px;
padding:12px 25px;
border:none;
border-radius:25px;
background:#f1f1f1;
cursor:pointer;
font-size:16px;
transition:0.3s;

}

.answers button:hover{

background:#d62828;
color:white;

}

.progress{

height:8px;
background:#eee;
border-radius:10px;
margin-top:25px;
overflow:hidden;

}

.progress-bar{

height:100%;
width:0%;
background:#d62828;
transition:0.4s;

}

/* RESULT CARD */

.result-area{

margin-top:30px;
font-size:22px;
font-weight:600;

}

.result-meter{

width:110px;
height:110px;
border-radius:50%;
border:8px solid #d62828;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:24px;
font-weight:bold;
color:#d62828;

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.wellness-section{

padding:100px 10%;
background:#f5f5f5;
text-align:center;

}

.wellness-title{

font-size:38px;
font-weight:700;
margin-bottom:70px;
color:#d62828;

}

.wellness-container{

display:flex;
flex-direction:column;
gap:60px;

}

.block-title{

font-size:24px;
margin-bottom:35px;
color:#d62828;

}

.tips-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;

}

.tip-card{

background:#ffffff;
padding:30px;
border-radius:14px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.35s;

}

.tip-card:hover{

transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);

}

.tip-icon{

width:65px;
height:65px;
border-radius:50%;
background:linear-gradient(135deg,#ff4d4d,#c1121f);
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:15px;
color:white;
font-size:24px;

}

.tip-card h4{

margin-bottom:8px;
color:#d62828;

}

.tip-card p{

font-size:14px;
color:#555;
line-height:1.6;

}

.faq-section{

padding:100px 10%;
background:white;

}

.faq-title{

text-align:center;
font-size:38px;
color:#d62828;
margin-bottom:60px;

}

.faq-container{

max-width:800px;
margin:auto;

}

.faq-item{

border-bottom:1px solid #eee;

}

.faq-question{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
cursor:pointer;
font-size:18px;
font-weight:600;

}

.faq-icon{

font-size:24px;
color:#d62828;
transition:0.3s;

}

.faq-answer{

max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;

}

.faq-answer p{

margin:15px 0;
color:#555;
line-height:1.6;

}

.faq-title{

text-align:center;
font-size:40px;
color:#d62828;
margin-bottom:60px;
font-weight:800;
letter-spacing:1px;

}

.faq-section{

padding:100px 10%;
background:#ffffff;

}

.faq-title{

text-align:center;
font-size:40px;
font-weight:800;
color:#d62828;
margin-bottom:60px;
letter-spacing:1px;

}

.faq-title::after{

content:"";
display:block;
width:90px;
height:4px;
background:#d62828;
margin:12px auto 0;
border-radius:3px;

}

.faq-container{

max-width:850px;
margin:auto;

}

.faq-item{

border-bottom:1px solid #eee;
padding:10px 0;
transition:0.3s;

}

.faq-question{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
cursor:pointer;
font-size:19px;
font-weight:600;
color:#222;

}

.faq-icon{

font-size:26px;
color:#d62828;
transition:0.4s;

}

.faq-answer{

max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;

}

.faq-answer p{

margin:15px 0;
color:#555;
line-height:1.7;

}

/* Open State */

.faq-item.active{

background:#fafafa;
border-radius:8px;
padding-left:10px;

}

.faq-item.active .faq-icon{

transform:rotate(45deg);

}

.trust-section{

width:100%;
padding:50px 10%;
background:#ffffff;
border-top:1px solid #eee;

}

.trust-wrapper{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:40px;

}

.trust-left{

display:flex;
align-items:center;
gap:20px;
max-width:500px;

}

.trust-icon{

width:60px;
height:60px;
border-radius:50%;
background:linear-gradient(135deg,#ff4d4d,#c1121f);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:24px;

}

.trust-left h3{

color:#d62828;
margin-bottom:5px;

}

.trust-left p{

color:#555;
font-size:14px;

}

.trust-right h4{

margin-bottom:10px;
color:#d62828;

}

.partner-logos{

display:flex;
gap:25px;
align-items:center;

}

.partner-logos img{

width:90px;
opacity:0.7;
transition:0.3s;

}

.partner-logos img:hover{

opacity:1;
transform:scale(1.05);

}

.newsletter-section{

padding:80px 10%;
background: #f9f9f9;
text-align:center;

}

.newsletter-section h2{

font-size:36px;
color:#d62828;
margin-bottom:10px;

}

.newsletter-section p{

color:#555;
margin-bottom:30px;

}

.newsletter-box{

display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;

}

.newsletter-box input{

padding:14px 20px;
width:300px;
border:1px solid #ddd;
border-radius:30px;
outline:none;

}

.newsletter-box button{

padding:14px 30px;
border:none;
border-radius:30px;
background:#d62828;
color:white;
cursor:pointer;
transition:0.3s;

}

.newsletter-box button:hover{

background:#b91c1c;

}

.trust-section{

width:100%;
padding:90px 10%;   /* height increase */
/* background:#ffffff; */
border-top:1px solid #eee;

}

.trust-wrapper{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:60px;

}

.trust-left{

display:flex;
align-items:center;
gap:25px;
max-width:520px;

}

.trust-icon{

width:70px;
height:70px;
border-radius:50%;
background:linear-gradient(135deg,#ff4d4d,#c1121f);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:28px;

}

.trust-text h3{

color:#d62828;
font-size:22px;
margin-bottom:8px;

}

.trust-text p{

color:#555;
line-height:1.7;

}

.trust-right{

max-width:500px;

}

.trust-right h4{

margin-bottom:20px;
color:#d62828;
font-size:20px;

}

.partner-logos{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}

.partner-logos img{

width:100px;
margin:auto;
opacity:0.7;
transition:0.3s;

}

.partner-logos img:hover{

opacity:1;
transform:scale(1.05);

}

/* Mobile */

@media(max-width:768px){

.trust-wrapper{

flex-direction:column;
text-align:center;

}

.trust-left{

flex-direction:column;

}

}

html{
scroll-behavior:smooth;
}
/* THIRD ROW GRID */

.form-grid-3{
grid-template-columns:1fr 1fr 1fr;
}


.organization-registration{

padding:100px 10%;
background:#ffffff;
text-align:center;

}

.org-title{

font-size:36px;
color:#d62828;
font-weight:800;
margin-bottom:10px;

}

.org-subtitle{

color:#555;
margin-bottom:50px;

}

.org-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:40px;

}

.org-card{

background:white;
padding:35px;
border-radius:14px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;

}

.org-card:hover{

transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);

}

.org-card h3{

margin-bottom:20px;
color:#d62828;

}

.org-card form{

display:flex;
flex-direction:column;
gap:12px;

}

.org-card input,
.org-card textarea{

padding:12px;
border:1px solid #ddd;
border-radius:6px;
outline:none;

}

.org-card textarea{

resize:none;
height:80px;

}

.org-card button{

margin-top:10px;
padding:12px;
border:none;
background:#d62828;
color:white;
border-radius:6px;
cursor:pointer;
transition:0.3s;

}

.org-card button:hover{

background:#b91c1c;

}

.organization-registration{

padding:100px 10%;
background:#f9f9f9;   /* same light background */
text-align:center;

}

.org-title{

font-size:38px;
color:#d62828;
font-weight:800;
margin-bottom:10px;

}

.org-title i{

margin-right:10px;
color:#d62828;

}

.org-subtitle{

color:#555;
margin-bottom:50px;

}

.org-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:40px;

}

.org-card{

background:white;
padding:35px;
border-radius:14px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;

}

.org-card:hover{

transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);

}

.org-card h3{

margin-bottom:20px;
color:#d62828;
font-size:20px;

}

.org-card h3 i{

margin-right:8px;

}

.form-section{

padding:80px 10%;
background:#fff;

}

.form-title{

text-align:center;
font-size:34px;
color:#d62828;
margin-bottom:40px;
font-weight:700;

}

.blood-form{

background:white;
padding:40px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);

}

.form-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;

}

.form-grid input,
.form-grid select{

padding:12px;
border:1px solid #ddd;
border-radius:6px;
outline:none;
font-size:14px;

}

.form-grid input:focus,
.form-grid select:focus{

border-color:#d62828;

}

.consent{

margin-top:20px;
font-size:14px;
color:#444;

}

.toggle-row{

margin-top:25px;
display:flex;
align-items:center;
gap:15px;
font-weight:600;
color:#d62828;

}

/* Toggle Switch */

.switch{

position:relative;
display:inline-block;
width:55px;
height:28px;

}

.switch input{

opacity:0;
width:0;
height:0;

}

.slider{

position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:#ccc;
transition:.4s;
border-radius:34px;

}

.slider:before{

position:absolute;
content:"";
height:22px;
width:22px;
left:3px;
bottom:3px;
background:white;
transition:.4s;
border-radius:50%;

}

input:checked + .slider{

background-color:#d62828;

}

input:checked + .slider:before{

transform:translateX(26px);

}

/* Button */

.form-btn{

margin-top:30px;
width:100%;
padding:14px;
border:none;
background:#d62828;
color:white;
font-size:16px;
border-radius:8px;
cursor:pointer;
transition:0.3s;

}

.form-btn:hover{

background:#b71c1c;

}

.input-group{

position:relative;
display:flex;
align-items:center;

}

.input-group i{

position:absolute;
left:12px;
color:#d62828;
font-size:14px;

}

.input-group input,
.input-group select{

width:100%;
padding:12px 12px 12px 38px;
border:1px solid #ddd;
border-radius:6px;
outline:none;

}

.input-group input:focus,
.input-group select:focus{

border-color:#d62828;

}
.donor-section,
.request-section{
scroll-margin-top:120px;
}

.partner-logos img{
filter: grayscale(100%);
transition:0.3s;
}

.partner-logos img:hover{
filter: grayscale(0%);
}

.privacy-policy-section{
background:#ffff;
padding:80px 10%;
}

.privacy-container{
max-width:1100px;
margin:auto;
text-align:center;
}

.privacy-title{
font-size:32px;
color:#dc2626;
margin-bottom:15px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
}

.privacy-desc{
color:#555;
max-width:700px;
margin:auto;
margin-bottom:50px;
line-height:1.7;
}

.privacy-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.privacy-item{
background: #f9f9f9;
padding:25px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.privacy-item:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.privacy-item i{
font-size:26px;
color:#dc2626;
margin-bottom:10px;
}

.privacy-item h4{
margin-bottom:8px;
color:#222;
}

.privacy-item p{
font-size:14px;
color:#555;
line-height:1.6;
}