/* ============================================================ */
/* DONATE PAGE                                                  */
/* ============================================================ */

/* ----- Donate Hero ----- */
.donate-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.donate-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.donate-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.donate-hero h1 span {
    color: #f17833;
}

.donate-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ----- Donation Form ----- */
.donate-form-section {
    padding: 80px 0;
    background: #ffffff;
}

.donate-form-wrapper {
    background: #f8fafc;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e9edf2;
}

.form-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}
.form-header p {
    color: #64748b;
    font-size: 0.95rem;
}

/* Amount Buttons */
.donation-amounts {
    margin: 24px 0;
}

.amount-label {
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
}

.amount-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.amount-btn {
    padding: 10px 20px;
    border: 2px solid #e9edf2;
    border-radius: 50px;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.amount-btn:hover {
    border-color: #f17833;
    color: #f17833;
}

.amount-btn.active {
    background: #f17833;
    border-color: #f17833;
    color: #fff;
}

.custom-amount {
    margin-top: 12px;
}

.custom-amount label {
    font-weight: 600;
    color: #0f172a;
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.custom-amount-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e9edf2;
    border-radius: 50px;
    overflow: hidden;
    padding: 0 16px;
    transition: border-color 0.3s;
}

.custom-amount-input:focus-within {
    border-color: #f17833;
}

.currency-symbol {
    font-weight: 700;
    color: #0f172a;
    margin-right: 6px;
}

.custom-amount-input input {
    border: none;
    padding: 12px 0;
    width: 100%;
    outline: none;
    font-size: 1rem;
    background: transparent;
}

/* Frequency Toggle */
.donation-frequency {
    margin: 24px 0;
}

.frequency-label {
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
}

.frequency-toggle {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.freq-btn {
    padding: 10px 28px;
    border: 2px solid #e9edf2;
    border-radius: 50px;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.freq-btn:hover {
    border-color: #f17833;
    color: #f17833;
}

.freq-btn.active {
    background: #f17833;
    border-color: #f17833;
    color: #fff;
}

/* Payment Gateway */
.payment-gateway {
    margin: 24px 0 16px;
}

.gateway-note {
    font-size: 0.85rem;
    color: #16a34a;
    margin-bottom: 12px;
}

.gateway-note i {
    margin-right: 4px;
}

.donate-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 16px !important;
    font-size: 1.1rem !important;
}

/* Trust Badges below form */
.form-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
    justify-content: center;
}

.form-trust-badges span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #475569;
}

.form-trust-badges i {
    color: #16a34a;
}

/* ----- Donate Sidebar (Fund Breakdown) ----- */
.donate-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.fund-breakdown {
    background: #fff8f0;
    border-radius: 24px;
    padding: 32px;
    border: 1px solid #f3e2c8;
}

.fund-breakdown h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.fund-intro {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.fund-bar-row {
    margin-bottom: 16px;
}

.fund-bar-row:last-child {
    margin-bottom: 0;
}

.fund-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #0f172a;
}

.fund-percent {
    font-weight: 700;
    color: #0f172a;
}

.fund-track {
    width: 100%;
    height: 8px;
    border-radius: 50px;
    background: #e9edf2;
    overflow: hidden;
    margin-top: 4px;
}

.fund-fill {
    height: 100%;
    border-radius: 50px;
}

.fund-trust {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 8px;
    font-size: 0.85rem;
    color: #475569;
}

.fund-trust i {
    color: #16a34a;
    font-size: 1rem;
    margin-top: 2px;
}

/* Mini Impact Stats */
.donate-impact-mini {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #e9edf2;
}

.donate-impact-mini h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}

.mini-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mini-stat {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e9edf2;
}

.mini-number {
    font-size: 1.2rem;
    font-weight: 800;
    color: #f17833;
}

.mini-label {
    font-size: 0.85rem;
    color: #64748b;
}

/* ----- Trust Section ----- */
.donate-trust {
    padding: 80px 0;
    background: #f8fafc;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 30px 0 20px;
}

.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.trust-badge i {
    font-size: 2.8rem;
    color: #f17833;
}

.trust-badge span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
}

.trust-note {
    font-size: 0.95rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
}

/* ----- Other Ways to Give ----- */
.donate-other-ways {
    padding: 80px 0;
    background: #ffffff;
}

.other-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 40px;
}

.other-card {
    background: #f8fafc;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.other-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.other-icon {
    font-size: 2.8rem;
    color: #f17833;
    margin-bottom: 12px;
}

.other-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.other-card p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 16px;
}

.other-card .btn-outline {
    background: transparent;
    color: #f17833;
    border: 2px solid #f17833;
    border-radius: 50px;
    padding: 8px 24px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.other-card .btn-outline:hover {
    background: #f17833;
    color: #fff;
}

/* ============================================================ */
/* RESPONSIVE – Donate Page                                     */
/* ============================================================ */

@media (max-width: 991.98px) {
    .donate-hero h1 {
        font-size: 2.6rem;
    }
    .donate-form-wrapper {
        padding: 28px;
    }
    .amount-grid {
        justify-content: center;
    }
    .frequency-toggle {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .donate-hero {
        padding: 60px 0 40px;
    }
    .donate-hero h1 {
        font-size: 2.2rem;
    }
    .donate-subtitle {
        font-size: 1rem;
    }
    .donate-form-section {
        padding: 60px 0;
    }
    .donate-form-wrapper {
        padding: 24px 16px;
    }
    .form-header h2 {
        font-size: 1.5rem;
    }
    .amount-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    .freq-btn {
        padding: 8px 20px;
        font-size: 0.8rem;
    }
    .fund-breakdown {
        padding: 24px 16px;
    }
    .donate-impact-mini {
        padding: 20px 16px;
    }
    .trust-badges {
        gap: 16px;
    }
    .trust-badge i {
        font-size: 2.2rem;
    }
    .donate-other-ways {
        padding: 60px 0;
    }
    .other-card {
        padding: 24px 16px;
    }
}

@media (max-width: 575.98px) {
    .donate-hero h1 {
        font-size: 1.8rem;
    }
    .amount-grid {
        grid-template-columns: 1fr 1fr;
    }
    .amount-btn {
        width: 100%;
        text-align: center;
    }
    .frequency-toggle {
        flex-direction: column;
        align-items: stretch;
    }
    .freq-btn {
        width: 100%;
        text-align: center;
    }
    .form-trust-badges {
        flex-direction: column;
        align-items: center;
    }
    .trust-badges {
        flex-direction: column;
        align-items: center;
    }
}


/* ============================================================ */
/* INTERNATIONAL DONATE PAGE                                    */
/* ============================================================ */

.international-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

/* ----- Currency Selection ----- */
.currency-selection {
    margin: 24px 0;
}

.currency-label {
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px;
}

.currency-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.currency-btn {
    padding: 8px 16px;
    border: 2px solid #e9edf2;
    border-radius: 50px;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.currency-btn:hover {
    border-color: #f17833;
    color: #f17833;
}

.currency-btn.active {
    background: #f17833;
    border-color: #f17833;
    color: #fff;
}

.currency-note {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 8px;
}

.currency-note i {
    color: #f17833;
}

/* ----- NRI Tax Card ----- */
.nri-tax-card {
    background: #0f172a;
    border-radius: 24px;
    padding: 32px;
    color: #fff;
}

.nri-tax-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.tax-intro {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.tax-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tax-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tax-benefit i {
    color: #86efac;
    font-size: 1.1rem;
    margin-top: 2px;
}

.tax-benefit strong {
    display: block;
    color: #fff;
    font-size: 0.9rem;
}

.tax-benefit span {
    color: #cbd5e1;
    font-size: 0.8rem;
}

.nri-note {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.nri-note i {
    color: #f17833;
    font-size: 1.2rem;
    margin-top: 2px;
}

.nri-note p {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin: 0;
}

.nri-note a {
    color: #f17833;
    text-decoration: none;
}
.nri-note a:hover {
    text-decoration: underline;
}

/* ----- FCRA Info Card ----- */
.fca-info-card {
    background: #fff8f0;
    border-radius: 16px;
    padding: 20px 24px;
    border: 1px solid #f3e2c8;
}

.fca-info-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.fca-info-card h4 i {
    color: #f17833;
    margin-right: 8px;
}

.fca-info-card p {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 4px;
}

.fca-number {
    font-weight: 700;
    color: #0f172a;
    font-family: monospace;
    letter-spacing: 1px;
}

/* ----- Transfer Options ----- */
.transfer-options {
    padding: 80px 0;
    background: #ffffff;
}

.transfer-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.transfer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.transfer-card i {
    font-size: 2.4rem;
    color: #f17833;
    margin-bottom: 10px;
}

.transfer-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.transfer-card p {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

.bank-details-link {
    font-size: 0.9rem;
    color: #64748b;
}
.bank-details-link a {
    color: #f17833;
    font-weight: 600;
    text-decoration: none;
}
.bank-details-link a:hover {
    text-decoration: underline;
}

/* ----- FAQ Section ----- */
.donate-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.faq-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.faq-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.faq-item h4 i {
    color: #f17833;
    margin-right: 8px;
}

.faq-item p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================ */
/* RESPONSIVE – International Donate                            */
/* ============================================================ */
@media (max-width: 991.98px) {
    .international-hero h1 {
        font-size: 2.6rem;
    }
    .currency-grid {
        justify-content: center;
    }
    .nri-tax-card {
        padding: 24px 20px;
    }
}

@media (max-width: 767.98px) {
    .international-hero {
        padding: 60px 0 40px;
    }
    .international-hero h1 {
        font-size: 2.2rem;
    }
    .currency-btn {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
    .transfer-options {
        padding: 60px 0;
    }
    .donate-faq {
        padding: 60px 0;
    }
    .faq-item {
        padding: 20px 16px;
    }
    .nri-tax-card {
        padding: 20px 16px;
    }
    .fca-info-card {
        padding: 16px;
    }
}

@media (max-width: 575.98px) {
    .international-hero h1 {
        font-size: 1.8rem;
    }
    .currency-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .currency-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
        width: 100%;
        text-align: center;
    }
    .tax-benefit {
        flex-direction: column;
        gap: 4px;
    }
}

/* ============================================================ */
/* REPORT ANIMAL PAGE                                           */
/* ============================================================ */

/* ----- Emergency Hero ----- */
.emergency-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.emergency-badge {
    display: inline-block;
    background: #e11d48;
    color: #ffffff;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.emergency-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.emergency-hero h1 span {
    color: #e11d48;
}

.emergency-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ----- Emergency Action Buttons ----- */
.emergency-actions {
    padding: 40px 0 60px;
    background: #ffffff;
}

.emergency-action-btn {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 16px;
    border: 2px solid #e9edf2;
    position: relative;
}

.emergency-action-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.action-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.call-btn .action-icon {
    background: #e11d48;
    color: #fff;
}
.call-btn {
    border-color: #e11d48;
}
.call-btn:hover {
    border-color: #e11d48;
    background: #fef2f2;
}

.whatsapp-btn .action-icon {
    background: #25D366;
    color: #fff;
}
.whatsapp-btn {
    border-color: #25D366;
}
.whatsapp-btn:hover {
    border-color: #25D366;
    background: #f0fdf4;
}

.form-btn .action-icon {
    background: #f17833;
    color: #fff;
}
.form-btn {
    border-color: #f17833;
}
.form-btn:hover {
    border-color: #f17833;
    background: #fff8f0;
}

.action-text {
    flex: 1;
}
.action-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.action-number {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.action-badge {
    background: #e9edf2;
    color: #475569;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ----- Guidance Section ----- */
.waiting-guidance {
    padding: 80px 0;
    background: #f8fafc;
}

.guidance-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.guidance-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.guidance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.guidance-step {
    font-size: 3rem;
    font-weight: 900;
    color: #f17833;
    opacity: 0.1;
    line-height: 1;
    margin-bottom: 4px;
}

.guidance-icon {
    font-size: 2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.guidance-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.guidance-card p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- First-Aid Section ----- */
.firstaid-section {
    padding: 80px 0;
    background: #ffffff;
}

.firstaid-grid {
    margin-top: 20px;
}

.firstaid-card {
    background: #fff8f0;
    border-radius: 16px;
    padding: 24px 20px;
    border: 1px solid #f3e2c8;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.firstaid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.firstaid-icon {
    font-size: 1.8rem;
    color: #f17833;
    flex-shrink: 0;
}

.firstaid-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.firstaid-card p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ----- Report Form ----- */
.report-form-section {
    padding: 80px 0;
    background: #f8fafc;
}

.form-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.report-form-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 12px;
}
.report-form-content h2 span {
    color: #f17833;
}

.report-form-content p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 20px;
}

.form-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.form-trust span {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}
.form-trust i {
    color: #16a34a;
    margin-right: 4px;
}

.report-form-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid #e9edf2;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
}

.report-form .form-control {
    border-radius: 12px;
    border: 1px solid #e9edf2;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.report-form .form-control:focus {
    border-color: #f17833;
    box-shadow: 0 0 0 4px rgba(241, 120, 51, 0.1);
}

.report-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0f172a;
}

/* ----- Floating Emergency Button ----- */
.floating-emergency {
    position: fixed;
    bottom: 120px;
    right: 30px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.floating-emergency.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.floating-label {
    background: #e11d48;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.floating-buttons {
    display: flex;
    gap: 10px;
}

.floating-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.08);
    color: #fff;
}

.floating-btn.call-btn {
    background: #e11d48;
}
.floating-btn.whatsapp-btn {
    background: #25D366;
}

/* ----- Success Stories ----- */
.rescue-success {
    padding: 80px 0;
    background: #ffffff;
}

.success-card {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.success-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.success-image {
    height: 200px;
    overflow: hidden;
}
.success-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.success-content {
    padding: 20px 24px 24px;
}

.success-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.success-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.success-content p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .emergency-hero h1 {
        font-size: 2.6rem;
    }
    .emergency-action-btn {
        padding: 16px 20px;
    }
    .guidance-card {
        padding: 20px 16px;
    }
    .firstaid-card {
        padding: 20px 16px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .report-form-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    .emergency-hero {
        padding: 60px 0 40px;
    }
    .emergency-hero h1 {
        font-size: 2.2rem;
    }
    .emergency-subtitle {
        font-size: 1rem;
    }
    .emergency-actions {
        padding: 20px 0 40px;
    }
    .emergency-action-btn {
        padding: 14px 16px;
        gap: 12px;
    }
    .action-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    .action-number {
        font-size: 0.95rem;
    }
    .waiting-guidance {
        padding: 60px 0;
    }
    .guidance-card {
        padding: 16px 14px;
    }
    .guidance-step {
        font-size: 2.2rem;
    }
    .firstaid-section {
        padding: 60px 0;
    }
    .report-form-section {
        padding: 60px 0;
    }
    .report-form-content {
        text-align: center;
    }
    .form-trust {
        justify-content: center;
    }
    .report-form-wrapper {
        padding: 24px 16px;
    }
    .rescue-success {
        padding: 60px 0;
    }
    .success-image {
        height: 160px;
    }
    .floating-emergency {
        bottom: 90px;
        right: 16px;
    }
    .floating-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
}

@media (max-width: 575.98px) {
    .emergency-hero h1 {
        font-size: 1.8rem;
    }
    .emergency-action-btn {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .action-badge {
        width: 100%;
        text-align: center;
    }
    .guidance-grid {
        gap: 12px;
    }
    .firstaid-card {
        padding: 16px 14px;
    }
    .report-form-content h2 {
        font-size: 1.6rem;
    }
    .success-card {
        margin-bottom: 16px;
    }
}


/* ============================================================ */
/* ADOPT A DOG PAGE                                             */
/* ============================================================ */

/* ----- Adopt Hero ----- */
.adopt-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.adopt-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.adopt-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.adopt-hero h1 span {
    color: #f17833;
}

.adopt-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ----- Adoption Process ----- */
.adopt-process {
    padding: 80px 0;
    background: #ffffff;
}

.process-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 40px;
}

.process-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.process-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: #f17833;
    opacity: 0.1;
    line-height: 1;
    margin-bottom: 4px;
}

.process-icon {
    font-size: 2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.process-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.process-card p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Adoption Requirements / House-Check ----- */
.adoption-requirements {
    padding: 80px 0;
    background: #f8fafc;
}

.requirements-intro {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 24px;
}

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.requirement-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.requirement-item i {
    color: #16a34a;
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.requirement-item strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.requirement-item span {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.house-check-note {
    background: #fff8f0;
    border: 1px solid #f3e2c8;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 20px;
}

.house-check-note i {
    color: #f17833;
    font-size: 1.2rem;
    margin-top: 2px;
}

.house-check-note p {
    font-size: 0.9rem;
    color: #475569;
    margin: 0;
}

.house-check-note strong {
    color: #0f172a;
}

.house-check-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.house-check-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.image-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.image-caption i {
    color: #f17833;
    font-size: 1.2rem;
    opacity: 0.5;
}

.image-caption p {
    font-size: 0.95rem;
    font-style: italic;
    margin: 4px 0 6px;
    line-height: 1.5;
}

.image-caption span {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ----- Adoption Form ----- */
.adopt-form-section {
    padding: 80px 0;
    background: #ffffff;
}

.form-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.adopt-form-wrapper {
    background: #f8fafc;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e9edf2;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9edf2;
}

.adopt-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0f172a;
}

.adopt-form .form-control {
    border-radius: 12px;
    border: 1px solid #e9edf2;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.adopt-form .form-control:focus {
    border-color: #f17833;
    box-shadow: 0 0 0 4px rgba(241, 120, 51, 0.1);
}

.adopt-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
}

.adopt-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f17833;
}

.adopt-form .btn1 {
    padding: 14px !important;
    font-size: 1.05rem !important;
}

/* ----- Adoption Fee ----- */
.adoption-fee {
    padding: 80px 0;
    background: #f8fafc;
}

.fee-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.fee-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.fee-icon {
    font-size: 2.4rem;
    color: #f17833;
    margin-bottom: 10px;
}

.fee-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.fee-card p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.fee-total {
    display: inline-block;
    background: #fff8f0;
    border: 2px solid #f17833;
    border-radius: 16px;
    padding: 16px 32px;
    margin-bottom: 12px;
}

.fee-amount {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: #f17833;
    line-height: 1.2;
}

.fee-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.fee-note {
    font-size: 0.9rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto;
}

/* ----- Adoptable Dogs ----- */
.adoptable-dogs {
    padding: 80px 0;
    background: #ffffff;
}

.dog-card {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.dog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.dog-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.dog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dog-card:hover .dog-image img {
    transform: scale(1.03);
}

.dog-status {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #16a34a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dog-content {
    padding: 20px 20px 24px;
}

.dog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.dog-header h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.dog-meta {
    font-size: 0.8rem;
    color: #94a3b8;
}

.dog-trait {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 14px;
}

.dog-trait i {
    color: #f17833;
    margin-right: 4px;
}

.dog-card .btn1 {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
}

.adopt-note {
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 16px;
}

.adopt-note a {
    color: #f17833;
    font-weight: 600;
    text-decoration: none;
}
.adopt-note a:hover {
    text-decoration: underline;
}

/* ----- Success Stories ----- */
.adopt-success {
    padding: 80px 0;
    background: #f8fafc;
}

.adopt-success .testimonial-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e9edf2;
    height: 100%;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .adopt-hero h1 {
        font-size: 2.6rem;
    }
    .process-card {
        padding: 24px 16px;
    }
    .house-check-image img {
        height: 350px;
    }
    .adopt-form-wrapper {
        padding: 28px;
    }
    .fee-total {
        padding: 14px 24px;
    }
    .fee-amount {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    .adopt-hero {
        padding: 60px 0 40px;
    }
    .adopt-hero h1 {
        font-size: 2.2rem;
    }
    .adopt-subtitle {
        font-size: 1rem;
    }
    .adopt-process {
        padding: 60px 0;
    }
    .process-card {
        padding: 20px 14px;
    }
    .process-number {
        font-size: 2.2rem;
    }
    .adoption-requirements {
        padding: 60px 0;
        text-align: center;
    }
    .requirement-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .house-check-note {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .house-check-image img {
        height: 280px;
    }
    .image-caption {
        bottom: 16px;
        left: 16px;
        right: 16px;
        padding: 16px;
    }
    .adopt-form-section {
        padding: 60px 0;
    }
    .adopt-form-wrapper {
        padding: 24px 16px;
    }
    .form-section-title {
        font-size: 1rem;
    }
    .adoption-fee {
        padding: 60px 0;
    }
    .fee-card {
        padding: 20px 16px;
    }
    .fee-total {
        padding: 12px 20px;
    }
    .fee-amount {
        font-size: 1.8rem;
    }
    .adoptable-dogs {
        padding: 60px 0;
    }
    .dog-image {
        height: 200px;
    }
    .adopt-success {
        padding: 60px 0;
    }
}

@media (max-width: 575.98px) {
    .adopt-hero h1 {
        font-size: 1.8rem;
    }
    .process-grid {
        gap: 12px;
    }
    .process-card {
        padding: 16px 12px;
    }
    .process-icon {
        font-size: 1.6rem;
    }
    .process-card h4 {
        font-size: 0.9rem;
    }
    .process-card p {
        font-size: 0.75rem;
    }
    .house-check-image img {
        height: 220px;
    }
    .image-caption p {
        font-size: 0.85rem;
    }
    .dog-image {
        height: 180px;
    }
    .dog-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dog-card .btn1 {
        width: 100%;
        justify-content: center;
    }
}



/* ============================================================ */
/* FOSTER A DOG PAGE                                            */
/* ============================================================ */

/* ----- Foster Hero ----- */
.foster-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.foster-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.foster-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.foster-hero h1 span {
    color: #f17833;
}

.foster-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.foster-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ----- Foster Process ----- */
.foster-process {
    padding: 80px 0;
    background: #ffffff;
}

.process-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 40px;
}

.process-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.process-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: #f17833;
    opacity: 0.1;
    line-height: 1;
    margin-bottom: 4px;
}

.process-icon {
    font-size: 2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.process-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.process-card p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Foster Duration ----- */
.foster-duration {
    padding: 80px 0;
    background: #f8fafc;
}

.duration-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 40px;
}

.duration-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.duration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.duration-card-featured {
    border-color: #f17833;
    border-width: 2px;
    background: #fff8f0;
}

.duration-icon {
    font-size: 2.8rem;
    color: #f17833;
    margin-bottom: 12px;
}

.duration-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.duration-time {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f17833;
    margin-bottom: 10px;
}

.duration-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 14px;
}

.duration-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----- Foster Responsibilities ----- */
.foster-responsibilities {
    padding: 80px 0;
    background: #ffffff;
}

.responsibilities-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.provide-card {
    border-radius: 20px;
    padding: 32px;
    height: 100%;
}

.provide-card-we {
    background: #f8fafc;
    border: 1px solid #e9edf2;
}

.provide-card-you {
    background: #fff8f0;
    border: 1px solid #f3e2c8;
}

.provide-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.provide-card h3 i {
    color: #f17833;
}

.provide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.provide-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.95rem;
    color: #475569;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.provide-list li:last-child {
    border-bottom: none;
}

.provide-list li i {
    color: #16a34a;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.provide-card-you .provide-list li i {
    color: #f17833;
}

.responsibility-note {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.responsibility-note i {
    color: #16a34a;
    font-size: 1.3rem;
}

.responsibility-note p {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
}

.responsibility-note strong {
    color: #0f172a;
}

/* ----- Foster FAQ ----- */
.foster-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.faq-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.faq-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.faq-item h4 i {
    color: #f17833;
    margin-right: 8px;
}

.faq-item p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Foster Form ----- */
.foster-form-section {
    padding: 80px 0;
    background: #ffffff;
}

.form-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.foster-form-wrapper {
    background: #f8fafc;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e9edf2;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9edf2;
}

.foster-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0f172a;
}

.foster-form .form-control {
    border-radius: 12px;
    border: 1px solid #e9edf2;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.foster-form .form-control:focus {
    border-color: #f17833;
    box-shadow: 0 0 0 4px rgba(241, 120, 51, 0.1);
}

.foster-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
}

.foster-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f17833;
}

.foster-form .btn1 {
    padding: 14px !important;
    font-size: 1.05rem !important;
}

/* ----- Foster Impact ----- */
.foster-impact {
    padding: 80px 0;
    background: #f8fafc;
}

.impact-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.impact-number {
    font-size: 2.6rem;
    font-weight: 800;
    color: #f17833;
    line-height: 1.2;
}

.impact-card p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.foster-testimonial {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e9edf2;
    height: 100%;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .foster-hero h1 {
        font-size: 2.6rem;
    }
    .process-card {
        padding: 24px 16px;
    }
    .duration-card {
        padding: 24px 20px;
    }
    .provide-card {
        padding: 24px 20px;
    }
    .foster-form-wrapper {
        padding: 28px;
    }
}

@media (max-width: 767.98px) {
    .foster-hero {
        padding: 60px 0 40px;
    }
    .foster-hero h1 {
        font-size: 2.2rem;
    }
    .foster-subtitle {
        font-size: 1rem;
    }
    .foster-process {
        padding: 60px 0;
    }
    .process-card {
        padding: 20px 14px;
    }
    .process-number {
        font-size: 2.2rem;
    }
    .foster-duration {
        padding: 60px 0;
    }
    .duration-card {
        padding: 20px 16px;
    }
    .duration-icon {
        font-size: 2.2rem;
    }
    .foster-responsibilities {
        padding: 60px 0;
    }
    .provide-card {
        padding: 20px 16px;
    }
    .provide-card h3 {
        font-size: 1.1rem;
    }
    .provide-list li {
        font-size: 0.85rem;
    }
    .responsibility-note {
        flex-direction: column;
        text-align: center;
    }
    .foster-faq {
        padding: 60px 0;
    }
    .faq-item {
        padding: 20px 16px;
    }
    .foster-form-section {
        padding: 60px 0;
    }
    .foster-form-wrapper {
        padding: 24px 16px;
    }
    .form-section-title {
        font-size: 1rem;
    }
    .foster-impact {
        padding: 60px 0;
    }
    .impact-number {
        font-size: 2.2rem;
    }
}

@media (max-width: 575.98px) {
    .foster-hero h1 {
        font-size: 1.8rem;
    }
    .foster-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .process-grid {
        gap: 12px;
    }
    .process-card {
        padding: 16px 12px;
    }
    .process-icon {
        font-size: 1.6rem;
    }
    .process-card h4 {
        font-size: 0.9rem;
    }
    .process-card p {
        font-size: 0.75rem;
    }
    .duration-grid {
        gap: 16px;
    }
    .duration-card {
        padding: 20px 16px;
    }
    .duration-time {
        font-size: 0.95rem;
    }
    .provide-card {
        padding: 16px 12px;
    }
    .provide-list li {
        font-size: 0.8rem;
        padding: 6px 0;
    }
    .foster-form .btn1 {
        font-size: 0.95rem !important;
    }
    .impact-grid {
        gap: 16px;
    }
    .impact-number {
        font-size: 1.8rem;
    }
}

/* ============================================================ */
/* VOLUNTEER PAGE                                               */
/* ============================================================ */

/* ----- Volunteer Hero ----- */
.volunteer-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.volunteer-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.volunteer-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.volunteer-hero h1 span {
    color: #f17833;
}

.volunteer-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.volunteer-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ----- Volunteer Impact Mini ----- */
.volunteer-impact-mini {
    padding: 40px 0 60px;
    background: #ffffff;
}

.mini-impact-card {
    text-align: center;
    padding: 20px 16px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
}

.mini-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.mini-impact-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: #f17833;
    line-height: 1.2;
}

.mini-impact-label {
    display: block;
    font-size: 0.9rem;
    color: #64748b;
}

/* ----- Volunteer Roles ----- */
.volunteer-roles {
    padding: 80px 0;
    background: #f8fafc;
}

.roles-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.role-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
    text-align: center;
}

.role-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.role-icon {
    font-size: 2.8rem;
    color: #f17833;
    margin-bottom: 12px;
}

.role-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.role-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 14px;
}

.role-time {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 8px;
}

.role-time i {
    color: #f17833;
    margin-right: 4px;
}

.role-tag {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----- Time Commitment ----- */
.volunteer-time {
    padding: 80px 0;
    background: #ffffff;
}

.time-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 40px;
}

.time-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.time-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.time-card-featured {
    border-color: #f17833;
    border-width: 2px;
    background: #fff8f0;
}

.time-icon {
    font-size: 2.8rem;
    color: #f17833;
    margin-bottom: 12px;
}

.time-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.time-commitment {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f17833;
    margin-bottom: 10px;
}

.time-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 14px;
}

.time-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----- Volunteer Benefits ----- */
.volunteer-benefits {
    padding: 80px 0;
    background: #f8fafc;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.benefit-item i {
    color: #16a34a;
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.benefit-item strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.benefit-item span {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.benefits-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.benefits-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.benefits-image-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.benefits-image-caption i {
    color: #f17833;
    font-size: 1.2rem;
    opacity: 0.5;
}

.benefits-image-caption p {
    font-size: 0.95rem;
    font-style: italic;
    margin: 4px 0 6px;
    line-height: 1.5;
}

.benefits-image-caption span {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ----- Volunteer Form ----- */
.volunteer-form-section {
    padding: 80px 0;
    background: #ffffff;
}

.form-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.volunteer-form-wrapper {
    background: #f8fafc;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e9edf2;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9edf2;
}

.volunteer-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0f172a;
}

.volunteer-form .form-control {
    border-radius: 12px;
    border: 1px solid #e9edf2;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.volunteer-form .form-control:focus {
    border-color: #f17833;
    box-shadow: 0 0 0 4px rgba(241, 120, 51, 0.1);
}

.volunteer-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
}

.volunteer-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f17833;
}

.volunteer-form .btn1 {
    padding: 14px !important;
    font-size: 1.05rem !important;
}

/* ----- Volunteer Stories ----- */
.volunteer-stories {
    padding: 80px 0;
    background: #f8fafc;
}

.story-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e9edf2;
    height: 100%;
    transition: all 0.3s ease;
}

.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.story-card-content i {
    color: #f17833;
    opacity: 0.3;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.story-card-content p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    font-style: italic;
}

.story-card-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.story-card-author .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.story-card-author .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-card-author .author-info h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.story-card-author .author-info span {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ----- Bottom CTA ----- */
.volunteer-cta-bottom {
    padding: 80px 0;
    background: linear-gradient(135deg, #f17833, #e8632a);
    color: #fff;
    text-align: center;
}

.volunteer-cta-bottom h2 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.volunteer-cta-bottom h2 span {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.volunteer-cta-bottom p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.cta-bottom-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cta-bottom-buttons .btn1 {
    background: #fff !important;
    color: #f17833 !important;
}

.cta-bottom-buttons .btn1:hover {
    background: #f1f5f9 !important;
}

.cta-bottom-buttons .btn2 {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.cta-bottom-buttons .btn2:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .volunteer-hero h1 {
        font-size: 2.6rem;
    }
    .role-card {
        padding: 24px 20px;
    }
    .time-card {
        padding: 24px 20px;
    }
    .volunteer-form-wrapper {
        padding: 28px;
    }
    .benefits-image img {
        height: 320px;
    }
}

@media (max-width: 767.98px) {
    .volunteer-hero {
        padding: 60px 0 40px;
    }
    .volunteer-hero h1 {
        font-size: 2.2rem;
    }
    .volunteer-subtitle {
        font-size: 1rem;
    }
    .volunteer-impact-mini {
        padding: 20px 0 40px;
    }
    .mini-impact-number {
        font-size: 1.8rem;
    }
    .volunteer-roles {
        padding: 60px 0;
    }
    .role-card {
        padding: 20px 16px;
    }
    .role-icon {
        font-size: 2.2rem;
    }
    .volunteer-time {
        padding: 60px 0;
    }
    .time-card {
        padding: 20px 16px;
    }
    .time-icon {
        font-size: 2.2rem;
    }
    .volunteer-benefits {
        padding: 60px 0;
        text-align: center;
    }
    .benefit-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .benefits-image img {
        height: 280px;
    }
    .benefits-image-caption {
        bottom: 16px;
        left: 16px;
        right: 16px;
        padding: 16px;
    }
    .volunteer-form-section {
        padding: 60px 0;
    }
    .volunteer-form-wrapper {
        padding: 24px 16px;
    }
    .form-section-title {
        font-size: 1rem;
    }
    .volunteer-stories {
        padding: 60px 0;
    }
    .story-card {
        padding: 24px 20px;
    }
    .volunteer-cta-bottom {
        padding: 60px 0;
    }
    .volunteer-cta-bottom h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 575.98px) {
    .volunteer-hero h1 {
        font-size: 1.8rem;
    }
    .volunteer-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .mini-impact-number {
        font-size: 1.5rem;
    }
    .roles-grid {
        gap: 16px;
    }
    .role-card {
        padding: 16px 14px;
    }
    .role-icon {
        font-size: 1.8rem;
    }
    .role-card h4 {
        font-size: 1rem;
    }
    .role-card p {
        font-size: 0.8rem;
    }
    .time-grid {
        gap: 16px;
    }
    .time-card {
        padding: 16px 14px;
    }
    .time-commitment {
        font-size: 0.95rem;
    }
    .benefits-image img {
        height: 220px;
    }
    .benefits-image-caption p {
        font-size: 0.85rem;
    }
    .volunteer-form .btn1 {
        font-size: 0.95rem !important;
    }
    .volunteer-cta-bottom h2 {
        font-size: 1.8rem;
    }
    .cta-bottom-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================ */
/* SPONSOR A MEAL PAGE                                          */
/* ============================================================ */

/* ----- Sponsor Hero ----- */
.sponsor-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.sponsor-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.sponsor-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.sponsor-hero h1 span {
    color: #f17833;
}

.sponsor-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.sponsor-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ----- Pricing Cards ----- */
.sponsor-pricing {
    padding: 80px 0;
    background: #ffffff;
}

.pricing-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 40px;
}

.pricing-card {
    background: #f8fafc;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.pricing-card-featured {
    border-color: #f17833;
    border-width: 2px;
    background: #fff8f0;
}

.pricing-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.pricing-card-featured .pricing-badge {
    background: #f17833;
    color: #fff;
}

.pricing-icon {
    font-size: 2.8rem;
    color: #f17833;
    margin-bottom: 10px;
}

.pricing-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.pricing-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: #f17833;
    margin-bottom: 8px;
}

.pricing-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 14px;
}

.pricing-tag {
    display: block;
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 16px;
}

.pricing-tag i {
    color: #16a34a;
}

.pricing-card .btn-outline {
    background: transparent;
    color: #f17833;
    border: 2px solid #f17833;
    border-radius: 50px;
    padding: 8px 24px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.pricing-card .btn-outline:hover {
    background: #f17833;
    color: #fff;
}

.pricing-note {
    font-size: 0.9rem;
    color: #64748b;
}

.pricing-note strong {
    color: #0f172a;
}

/* ----- What Your Donation Provides ----- */
.sponsor-breakdown {
    padding: 80px 0;
    background: #f8fafc;
}

.breakdown-intro {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 24px;
}

.breakdown-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breakdown-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.breakdown-item i {
    color: #f17833;
    font-size: 1.4rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.breakdown-item strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.breakdown-item span {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.breakdown-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.breakdown-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.breakdown-image-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.breakdown-image-caption i {
    color: #f17833;
    font-size: 1.2rem;
    opacity: 0.5;
}

.breakdown-image-caption p {
    font-size: 0.95rem;
    font-style: italic;
    margin: 4px 0 6px;
    line-height: 1.5;
}

.breakdown-image-caption span {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ----- Fund Breakdown ----- */
.sponsor-fund-breakdown {
    padding: 80px 0;
    background: #ffffff;
}

.fund-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 40px;
}

.fund-bars {
    max-width: 600px;
    margin: 0 auto;
}

.fund-bar-row {
    margin-bottom: 16px;
}

.fund-bar-row:last-child {
    margin-bottom: 0;
}

.fund-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #0f172a;
}

.fund-percent {
    font-weight: 700;
    color: #0f172a;
}

.fund-track {
    width: 100%;
    height: 8px;
    border-radius: 50px;
    background: #e9edf2;
    overflow: hidden;
    margin-top: 4px;
}

.fund-fill {
    height: 100%;
    border-radius: 50px;
}

.fund-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #475569;
    justify-content: center;
}

.fund-trust i {
    color: #16a34a;
    font-size: 1.2rem;
}

/* ----- Sponsor Form ----- */
.sponsor-form-section {
    padding: 80px 0;
    background: #f8fafc;
}

.form-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 40px;
}

.sponsor-form-wrapper {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e9edf2;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9edf2;
}

.sponsor-form label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0f172a;
}

.sponsor-form .form-control {
    border-radius: 12px;
    border: 1px solid #e9edf2;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.sponsor-form .form-control:focus {
    border-color: #f17833;
    box-shadow: 0 0 0 4px rgba(241, 120, 51, 0.1);
}

.sponsor-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
}

.sponsor-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f17833;
}

.sponsor-form .btn1 {
    padding: 14px !important;
    font-size: 1.05rem !important;
}

/* Plan Radio Buttons */
.plan-option-label {
    display: block;
    background: #f8fafc;
    border: 2px solid #e9edf2;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.plan-option-label:hover {
    border-color: #f17833;
}

.plan-option-label input[type="radio"] {
    accent-color: #f17833;
    margin-right: 8px;
}

.plan-option-label input:checked + span {
    color: #f17833;
}

.plan-option-label span {
    font-size: 0.95rem;
    color: #0f172a;
}

.plan-option-label strong {
    font-weight: 700;
    color: #0f172a;
}

/* Frequency Buttons */
.frequency-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.freq-btn {
    padding: 10px 28px;
    border: 2px solid #e9edf2;
    border-radius: 50px;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.freq-btn:hover {
    border-color: #f17833;
    color: #f17833;
}

.freq-btn.active {
    background: #f17833;
    border-color: #f17833;
    color: #fff;
}

/* ----- Sponsor Testimonials ----- */
.sponsor-testimonials {
    padding: 80px 0;
    background: #ffffff;
}

.sponsor-testimonials .testimonial-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e9edf2;
    height: 100%;
    transition: all 0.3s ease;
}

.sponsor-testimonials .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

/* ----- FAQ ----- */
.sponsor-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.sponsor-faq .faq-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.sponsor-faq .faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.sponsor-faq .faq-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.sponsor-faq .faq-item h4 i {
    color: #f17833;
    margin-right: 8px;
}

.sponsor-faq .faq-item p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Bottom CTA ----- */
.sponsor-cta-bottom {
    padding: 80px 0;
    background: linear-gradient(135deg, #f17833, #e8632a);
    color: #fff;
    text-align: center;
}

.sponsor-cta-bottom h2 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.sponsor-cta-bottom h2 span {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.sponsor-cta-bottom p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.sponsor-cta-bottom .btn1 {
    background: #fff !important;
    color: #f17833 !important;
}

.sponsor-cta-bottom .btn1:hover {
    background: #f1f5f9 !important;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .sponsor-hero h1 {
        font-size: 2.6rem;
    }
    .pricing-card {
        padding: 24px 20px;
    }
    .pricing-amount {
        font-size: 2rem;
    }
    .sponsor-form-wrapper {
        padding: 28px;
    }
    .breakdown-image img {
        height: 320px;
    }
}

@media (max-width: 767.98px) {
    .sponsor-hero {
        padding: 60px 0 40px;
    }
    .sponsor-hero h1 {
        font-size: 2.2rem;
    }
    .sponsor-subtitle {
        font-size: 1rem;
    }
    .sponsor-pricing {
        padding: 60px 0;
    }
    .pricing-card {
        padding: 20px 16px;
    }
    .pricing-icon {
        font-size: 2.2rem;
    }
    .pricing-amount {
        font-size: 1.8rem;
    }
    .sponsor-breakdown {
        padding: 60px 0;
        text-align: center;
    }
    .breakdown-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .breakdown-image img {
        height: 260px;
    }
    .breakdown-image-caption {
        bottom: 16px;
        left: 16px;
        right: 16px;
        padding: 16px;
    }
    .sponsor-fund-breakdown {
        padding: 60px 0;
    }
    .sponsor-form-section {
        padding: 60px 0;
    }
    .sponsor-form-wrapper {
        padding: 24px 16px;
    }
    .form-section-title {
        font-size: 1rem;
    }
    .plan-option-label {
        padding: 12px 14px;
    }
    .sponsor-testimonials {
        padding: 60px 0;
    }
    .sponsor-faq {
        padding: 60px 0;
    }
    .sponsor-faq .faq-item {
        padding: 20px 16px;
    }
    .sponsor-cta-bottom {
        padding: 60px 0;
    }
    .sponsor-cta-bottom h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 575.98px) {
    .sponsor-hero h1 {
        font-size: 1.8rem;
    }
    .sponsor-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .pricing-card {
        padding: 16px 14px;
    }
    .pricing-amount {
        font-size: 1.6rem;
    }
    .pricing-card h4 {
        font-size: 1rem;
    }
    .breakdown-image img {
        height: 220px;
    }
    .breakdown-image-caption p {
        font-size: 0.85rem;
    }
    .frequency-options {
        flex-direction: column;
    }
    .freq-btn {
        width: 100%;
        text-align: center;
    }
    .sponsor-form .btn1 {
        font-size: 0.95rem !important;
    }
    .sponsor-cta-bottom h2 {
        font-size: 1.8rem;
    }
}


/* ============================================================ */
/* WHERE YOUR DONATION GOES – Transparency Page                 */
/* ============================================================ */

/* ----- Transparency Hero ----- */
.transparency-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.transparency-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.transparency-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.transparency-hero h1 span {
    color: #f17833;
}

.transparency-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ----- Pie Chart Section ----- */
.transparency-chart-section {
    padding: 80px 0;
    background: #ffffff;
}

.chart-wrapper {
    display: flex;
    justify-content: center;
}

.chart-circle {
    position: relative;
    width: 320px;
    height: 320px;
}

.pie-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #f17833 0% 42%,
        #fbbf6d 42% 70%,
        #86efac 70% 90%,
        #94a3b8 90% 100%
    );
    position: relative;
}

.chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.chart-center .chart-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.chart-center .chart-label {
    font-size: 0.85rem;
    color: #64748b;
}

/* Legend */
.chart-legend {
    padding: 20px 0;
}

.chart-legend h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}
.chart-legend h2 span {
    color: #f17833;
}

.legend-intro {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 24px;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legend-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 4px;
}

.legend-item strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.legend-item span {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

/* ----- Detailed Breakdown ----- */
.transparency-breakdown {
    padding: 80px 0;
    background: #f8fafc;
}

.breakdown-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 40px;
}

.breakdown-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid #e9edf2;
    height: 100%;
}

.programmatic-card {
    border-top: 4px solid #16a34a;
}

.operational-card {
    border-top: 4px solid #f17833;
}

.breakdown-header {
    text-align: center;
    margin-bottom: 24px;
}

.breakdown-percent {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.programmatic-card .breakdown-percent {
    color: #16a34a;
}

.breakdown-header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 4px 0 2px;
}

.breakdown-header p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

.breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.breakdown-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #475569;
}

.breakdown-list li:last-child {
    border-bottom: none;
}

.breakdown-list li span:last-child {
    font-weight: 700;
    color: #0f172a;
}

.breakdown-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 2px solid #e9edf2;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.breakdown-total strong {
    font-size: 1.2rem;
}

.programmatic-card .breakdown-total strong {
    color: #16a34a;
}

.operational-card .breakdown-total strong {
    color: #f17833;
}

.breakdown-note {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px 24px;
}

.breakdown-note i {
    color: #16a34a;
    font-size: 1.3rem;
}

.breakdown-note p {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
}

.breakdown-note strong {
    color: #0f172a;
}

/* ----- Real Impact ----- */
.transparency-impact {
    padding: 80px 0;
    background: #ffffff;
}

.impact-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 40px;
}

.impact-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.impact-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #f17833;
    line-height: 1.2;
}

.impact-label {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 600;
    margin-top: 4px;
}

.impact-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 50px;
    margin-top: 6px;
}

/* ----- Reports & Certifications ----- */
.transparency-reports {
    padding: 80px 0;
    background: #f8fafc;
}

.reports-intro {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 24px;
}

.report-downloads {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-download {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.report-download:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border-color: #f17833;
}

.report-download i {
    font-size: 2rem;
    color: #e11d48;
}

.report-download div {
    flex: 1;
}

.report-download strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.report-download span {
    font-size: 0.8rem;
    color: #94a3b8;
}

.download-btn {
    background: #f8fafc;
    color: #0f172a;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
}

.report-download:hover .download-btn {
    background: #f17833;
    color: #fff;
    border-color: #f17833;
}

/* Certifications Grid */
.certifications-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.certification-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
}

.certification-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.cert-icon {
    font-size: 2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.certification-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.certification-card p {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 8px;
}

.cert-status {
    display: inline-block;
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 50px;
}

/* ----- Trust Indicators ----- */
.transparency-trust {
    padding: 60px 0;
    background: #ffffff;
}

.trust-card {
    text-align: center;
    padding: 24px 16px;
    border-radius: 16px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.trust-icon {
    font-size: 2.2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.trust-card h4 {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.trust-card p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* ----- Transparency Testimonials ----- */
.transparency-testimonials {
    padding: 80px 0;
    background: #f8fafc;
}

.transparency-testimonials .testimonial-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e9edf2;
    height: 100%;
    transition: all 0.3s ease;
}

.transparency-testimonials .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

/* ----- FAQ ----- */
.transparency-faq {
    padding: 80px 0;
    background: #ffffff;
}

.transparency-faq .faq-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.transparency-faq .faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.transparency-faq .faq-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.transparency-faq .faq-item h4 i {
    color: #f17833;
    margin-right: 8px;
}

.transparency-faq .faq-item p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Bottom CTA ----- */
.transparency-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #f17833, #e8632a);
    color: #fff;
    text-align: center;
}

.transparency-cta h2 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.transparency-cta h2 span {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.transparency-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cta-buttons .btn1 {
    background: #fff !important;
    color: #f17833 !important;
}

.cta-buttons .btn1:hover {
    background: #f1f5f9 !important;
}

.cta-buttons .btn2 {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.cta-buttons .btn2:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .transparency-hero h1 {
        font-size: 2.6rem;
    }
    .chart-circle {
        width: 260px;
        height: 260px;
    }
    .chart-center {
        width: 120px;
        height: 120px;
    }
    .chart-center .chart-amount {
        font-size: 1.8rem;
    }
    .chart-legend h2 {
        font-size: 2rem;
    }
    .breakdown-card {
        padding: 24px 20px;
    }
    .breakdown-percent {
        font-size: 2.6rem;
    }
    .certifications-grid {
        grid-template-columns: 1fr 1fr;
    }
    .impact-number {
        font-size: 1.6rem;
    }
}

@media (max-width: 767.98px) {
    .transparency-hero {
        padding: 60px 0 40px;
    }
    .transparency-hero h1 {
        font-size: 2.2rem;
    }
    .transparency-subtitle {
        font-size: 1rem;
    }
    .transparency-chart-section {
        padding: 60px 0;
        text-align: center;
    }
    .chart-circle {
        width: 220px;
        height: 220px;
        margin: 0 auto 30px;
    }
    .chart-center {
        width: 100px;
        height: 100px;
    }
    .chart-center .chart-amount {
        font-size: 1.4rem;
    }
    .chart-center .chart-label {
        font-size: 0.7rem;
    }
    .chart-legend h2 {
        font-size: 1.8rem;
    }
    .legend-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .transparency-breakdown {
        padding: 60px 0;
    }
    .breakdown-card {
        padding: 20px 16px;
    }
    .breakdown-percent {
        font-size: 2.2rem;
    }
    .transparency-impact {
        padding: 60px 0;
    }
    .impact-card {
        padding: 20px 12px;
    }
    .impact-number {
        font-size: 1.4rem;
    }
    .transparency-reports {
        padding: 60px 0;
        text-align: center;
    }
    .report-download {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    .certifications-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .certification-card {
        padding: 16px 12px;
    }
    .certification-card h4 {
        font-size: 0.85rem;
    }
    .transparency-trust {
        padding: 40px 0;
    }
    .trust-card h4 {
        font-size: 1.6rem;
    }
    .transparency-testimonials {
        padding: 60px 0;
    }
    .transparency-faq {
        padding: 60px 0;
    }
    .transparency-faq .faq-item {
        padding: 20px 16px;
    }
    .transparency-cta {
        padding: 60px 0;
    }
    .transparency-cta h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 575.98px) {
    .transparency-hero h1 {
        font-size: 1.8rem;
    }
    .chart-circle {
        width: 180px;
        height: 180px;
    }
    .chart-center {
        width: 80px;
        height: 80px;
    }
    .chart-center .chart-amount {
        font-size: 1.2rem;
    }
    .chart-center .chart-label {
        font-size: 0.6rem;
    }
    .certifications-grid {
        grid-template-columns: 1fr 1fr;
    }
    .certification-card {
        padding: 14px 10px;
    }
    .cert-icon {
        font-size: 1.6rem;
    }
    .trust-card h4 {
        font-size: 1.4rem;
    }
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .transparency-cta h2 {
        font-size: 1.8rem;
    }
}

/* ============================================================ */
/* TAX EXEMPTION PAGE – 80G/12A                                */
/* ============================================================ */

/* ----- Tax Hero ----- */
.tax-hero {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    padding: 80px 0 60px;
    border-bottom: 1px solid #f3e2c8;
}

.tax-badge {
    display: inline-block;
    background: #fcecd2;
    color: #f17833;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.tax-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}
.tax-hero h1 span {
    color: #f17833;
}

.tax-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

.tax-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.hero-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    border: 1px solid #e9edf2;
}

.hero-badge-item i {
    color: #16a34a;
}

/* ----- Tax Benefits ----- */
.tax-benefits {
    padding: 60px 0;
    background: #ffffff;
}

.tax-benefit-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.tax-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.tax-benefit-icon {
    font-size: 2.4rem;
    color: #f17833;
    margin-bottom: 12px;
}

.tax-benefit-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.tax-benefit-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Tax Explanation ----- */
.tax-explanation {
    padding: 80px 0;
    background: #f8fafc;
}

.explanation-intro {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 24px;
}

.explanation-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.explanation-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.explanation-point i {
    color: #16a34a;
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.explanation-point strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.explanation-point span {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

/* Tax Calculator */
.tax-calculator {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid #e9edf2;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
}

.tax-calculator h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.calculator-intro {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 20px;
}

.calculator-input {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e9edf2;
    border-radius: 12px;
    padding: 0 16px;
    transition: border-color 0.3s ease;
    margin-bottom: 20px;
}

.calculator-input:focus-within {
    border-color: #f17833;
}

.calculator-input .currency-symbol {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.1rem;
    margin-right: 8px;
}

.calculator-input input {
    border: none;
    padding: 14px 0;
    width: 100%;
    outline: none;
    font-size: 1.1rem;
    background: transparent;
    font-weight: 600;
}

.calculator-result {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
    color: #475569;
    border-bottom: 1px solid #e9edf2;
}

.result-row:last-child {
    border-bottom: none;
}

.result-total {
    font-weight: 700;
    color: #0f172a;
}

.result-amount {
    font-weight: 600;
}

.result-total .result-amount {
    color: #16a34a;
    font-size: 1.1rem;
}

.calculator-note {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 12px;
}

.calculator-note i {
    color: #f17833;
}

/* ----- Registration Details ----- */
.tax-registration {
    padding: 80px 0;
    background: #ffffff;
}

.registration-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 550px;
    margin: 0 auto 40px;
}

.registration-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.registration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.registration-icon {
    font-size: 2.4rem;
    color: #f17833;
    margin-bottom: 10px;
}

.registration-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.registration-number {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f17833;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.registration-card p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 10px;
}

.registration-status {
    display: inline-block;
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 50px;
}

.registration-note {
    background: #f8fafc;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.registration-note i {
    color: #f17833;
    font-size: 1.2rem;
}

.registration-note p {
    font-size: 0.85rem;
    color: #475569;
    margin: 0;
}

.registration-note strong {
    color: #0f172a;
}

/* ----- Claim Process ----- */
.tax-claim-process {
    padding: 80px 0;
    background: #f8fafc;
}

.claim-intro {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 40px;
}

.claim-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.claim-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.claim-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: #f17833;
    opacity: 0.1;
    line-height: 1;
    margin-bottom: 4px;
}

.claim-icon {
    font-size: 2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.claim-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.claim-card p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* ----- Tax FAQ ----- */
.tax-faq {
    padding: 80px 0;
    background: #ffffff;
}

.tax-faq .faq-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.tax-faq .faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.tax-faq .faq-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.tax-faq .faq-item h4 i {
    color: #f17833;
    margin-right: 8px;
}

.tax-faq .faq-item p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ----- Tax Trust ----- */
.tax-trust {
    padding: 60px 0;
    background: #f8fafc;
}

.tax-trust .trust-card {
    text-align: center;
    padding: 24px 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e9edf2;
    transition: all 0.3s ease;
    height: 100%;
}

.tax-trust .trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.tax-trust .trust-icon {
    font-size: 2.2rem;
    color: #f17833;
    margin-bottom: 8px;
}

.tax-trust .trust-card h4 {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.tax-trust .trust-card p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* ----- Tax CTA ----- */
.tax-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #f17833, #e8632a);
    color: #fff;
    text-align: center;
}

.tax-cta h2 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.tax-cta h2 span {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.tax-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cta-buttons .btn1 {
    background: #fff !important;
    color: #f17833 !important;
}

.cta-buttons .btn1:hover {
    background: #f1f5f9 !important;
}

.cta-buttons .btn2 {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.cta-buttons .btn2:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */

@media (max-width: 991.98px) {
    .tax-hero h1 {
        font-size: 2.6rem;
    }
    .tax-calculator {
        padding: 24px;
    }
    .registration-card {
        padding: 24px 20px;
    }
    .claim-card {
        padding: 24px 16px;
    }
}

@media (max-width: 767.98px) {
    .tax-hero {
        padding: 60px 0 40px;
    }
    .tax-hero h1 {
        font-size: 2.2rem;
    }
    .tax-subtitle {
        font-size: 1rem;
    }
    .tax-benefits {
        padding: 40px 0;
    }
    .tax-benefit-card {
        padding: 20px 16px;
    }
    .tax-explanation {
        padding: 60px 0;
        text-align: center;
    }
    .explanation-point {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tax-registration {
        padding: 60px 0;
    }
    .registration-card {
        padding: 20px 16px;
    }
    .registration-note {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tax-claim-process {
        padding: 60px 0;
    }
    .claim-card {
        padding: 20px 14px;
    }
    .claim-number {
        font-size: 2.2rem;
    }
    .tax-faq {
        padding: 60px 0;
    }
    .tax-faq .faq-item {
        padding: 20px 16px;
    }
    .tax-trust {
        padding: 40px 0;
    }
    .tax-trust .trust-card h4 {
        font-size: 1.6rem;
    }
    .tax-cta {
        padding: 60px 0;
    }
    .tax-cta h2 {
        font-size: 2.2rem;
    }
    .tax-hero-badges {
        gap: 10px;
    }
    .hero-badge-item {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
}

@media (max-width: 575.98px) {
    .tax-hero h1 {
        font-size: 1.8rem;
    }
    .tax-calculator {
        padding: 16px;
    }
    .tax-calculator h3 {
        font-size: 1.1rem;
    }
    .calculator-result {
        padding: 12px;
    }
    .result-row {
        font-size: 0.85rem;
    }
    .result-total .result-amount {
        font-size: 1rem;
    }
    .registration-number {
        font-size: 0.8rem;
    }
    .claim-number {
        font-size: 1.8rem;
    }
    .claim-icon {
        font-size: 1.6rem;
    }
    .claim-card h4 {
        font-size: 0.9rem;
    }
    .claim-card p {
        font-size: 0.75rem;
    }
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .tax-cta h2 {
        font-size: 1.8rem;
    }
}