/* =========================================
   HEADER LOGO
   ========================================= */
.text-muted {
    color: #53b703 !important;
}
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 30px;
}

.header-logo {
    width: 190px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
    display: block;
}

.futurevolt-whatsapp{
   background-color:#53b703;
   color:#ffffff;
   font-size:30px;
   margin:0 10px;
   
}

/* =========================================================
   FUTUREVOLT - FREE CONSULTATION MODAL
   PREMIUM GRADIENT + HOVER + ANIMATIONS
========================================================= */

/* ---------------------------------------------------------
   MODAL
--------------------------------------------------------- */

.fv-consultation-modal {
    position: relative;
    border: 0;
    border-radius: 20px;
    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(23, 53, 31, 0.25),
        0 8px 25px rgba(85, 185, 7, 0.10);

    animation: fvModalScale 0.45s ease both;
}


/* ---------------------------------------------------------
   MODAL HEADER
--------------------------------------------------------- */

.fv-consultation-modal-header {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 24px 30px 21px;

    background:
        linear-gradient(
            135deg,
            #55b907 0%,
            #3e9404 55%,
            #236d03 100%
        );

    overflow: hidden;
}


/* Decorative gradient glow */

.fv-consultation-modal-header::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -130px;
    right: -70px;

    border-radius: 50%;

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

    pointer-events: none;
}


.fv-consultation-modal-header::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    bottom: -110px;
    left: 35%;

    border-radius: 50%;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   EYEBROW
--------------------------------------------------------- */

.fv-consultation-eyebrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;

    color: #c8f6a9;
}


/* Small glowing dot */

.fv-consultation-eyebrow::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.12),
        0 0 12px rgba(255, 255, 255, 0.7);

    animation: fvPulseDot 2s infinite;
}


/* ---------------------------------------------------------
   HEADER TITLE
--------------------------------------------------------- */

.fv-consultation-modal-header h4 {
    position: relative;
    z-index: 2;

    margin: 0 45px 5px 0;

    font-size: 24px;
    line-height: 1.2;
    font-weight: 750;

    color: #ffffff;

    letter-spacing: -0.3px;
}


.fv-consultation-modal-header p {
    position: relative;
    z-index: 2;

    margin: 0;

    max-width: 560px;

    font-size: 12px;
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.86);
}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.fv-consultation-close {
    position: absolute;

    top: 17px;
    right: 18px;

    z-index: 5;

    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;

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

    color: #ffffff;

    font-size: 12px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.fv-consultation-close:hover {
    transform: rotate(90deg) scale(1.08);

    background: #ffffff;

    border-color: #ffffff;

    color: #3e9404;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.15);
}


/* ---------------------------------------------------------
   MODAL BODY
--------------------------------------------------------- */

.fv-consultation-modal-body {
    position: relative;

    padding: 24px 30px 27px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfefa 100%
        );
}


/* ---------------------------------------------------------
   FORM LABELS
--------------------------------------------------------- */

.fv-consultation-form label {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;
    font-weight: 700;

    color: #17351f;

    transition: color 0.25s ease;
}


.fv-consultation-form label span {
    color: #55b907;
}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

.fv-consultation-form .form-control {
    width: 100%;

    min-height: 42px;

    padding: 9px 13px;

    border: 1px solid #dce8d8;
    border-radius: 9px;

    background: #f8fbf6;

    color: #17351f;

    font-size: 12px;

    box-shadow: inset 0 1px 2px rgba(23, 53, 31, 0.02);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.25s ease;
}


/* Placeholder */

.fv-consultation-form .form-control::placeholder {
    color: #9aa69a;

    transition: color 0.25s ease;
}


/* Hover */

.fv-consultation-form .form-control:hover {
    border-color: #acd39f;

    background: #fbfef9;

    transform: translateY(-1px);
}


/* Focus */

.fv-consultation-form .form-control:focus {
    border-color: #55b907;

    background: #ffffff;

    outline: none;

    transform: translateY(-1px);

    box-shadow:
        0 0 0 3px rgba(85, 185, 7, 0.10),
        0 7px 20px rgba(85, 185, 7, 0.08);
}


.fv-consultation-form .form-control:focus::placeholder {
    color: #b5c0b2;
}


/* ---------------------------------------------------------
   LABEL COLOR WHEN FIELD IS FOCUSED
--------------------------------------------------------- */

.fv-consultation-form .form-control:focus + .fv-input-label {
    color: #55b907;
}


/* ---------------------------------------------------------
   SELECT WRAPPER
--------------------------------------------------------- */

.fv-select-wrapper {
    position: relative;
}


/* Select */

.fv-select-wrapper select.form-control {
    padding-right: 42px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;
}


/* Font Awesome Arrow */

.fv-select-arrow {
    position: absolute;

    top: 50%;
    right: 15px;

    z-index: 3;

    transform: translateY(-50%);

    color: #55b907;

    font-size: 11px;

    pointer-events: none;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* Arrow hover/focus */

.fv-select-wrapper:hover .fv-select-arrow {
    color: #3e9404;
}


/* Rotate arrow when select is focused */

.fv-select-wrapper:focus-within .fv-select-arrow {
    color: #3e9404;

    transform:
        translateY(-50%)
        rotate(180deg);
}


/* ---------------------------------------------------------
   TEXTAREA
--------------------------------------------------------- */

.fv-consultation-form textarea.form-control {
    min-height: 78px;
    max-height: 110px;

    resize: vertical;
}


/* ---------------------------------------------------------
   SUBMIT BUTTON
--------------------------------------------------------- */

.fv-consultation-submit {
    position: relative;

    width: 100%;

    min-height: 45px;

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

    gap: 9px;

    margin-top: 4px;

    padding: 10px 22px;

    border: none;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #55b907 0%,
            #48a306 45%,
            #3e9404 100%
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.1px;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(85, 185, 7, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* Moving shine */

.fv-consultation-submit::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.65s ease;
}


/* Button hover */

.fv-consultation-submit:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #3e9404 0%,
            #55b907 100%
        );

    box-shadow:
        0 12px 28px rgba(85, 185, 7, 0.30);
}


.fv-consultation-submit:hover::before {
    left: 130%;
}


/* Button icon */

.fv-consultation-submit i {
    font-size: 11px;

    transition:
        transform 0.3s ease;
}


.fv-consultation-submit:hover i {
    transform: translateX(4px);
}


/* Click */

.fv-consultation-submit:active {
    transform: translateY(0);

    box-shadow:
        0 5px 12px rgba(85, 185, 7, 0.20);
}


/* ---------------------------------------------------------
   FORM ROW ANIMATION
--------------------------------------------------------- */

.fv-consultation-form .col-md-6,
.fv-consultation-form .col-12 {
    animation: fvFieldReveal 0.5s ease both;
}


.fv-consultation-form .col-md-6:nth-child(1) {
    animation-delay: 0.05s;
}

.fv-consultation-form .col-md-6:nth-child(2) {
    animation-delay: 0.10s;
}

.fv-consultation-form .col-md-6:nth-child(3) {
    animation-delay: 0.15s;
}

.fv-consultation-form .col-md-6:nth-child(4) {
    animation-delay: 0.20s;
}

.fv-consultation-form .col-12:nth-child(5) {
    animation-delay: 0.25s;
}

.fv-consultation-form .col-12:nth-child(6) {
    animation-delay: 0.30s;
}

.fv-consultation-form .col-12:nth-child(7) {
    animation-delay: 0.35s;
}


/* ---------------------------------------------------------
   MODAL ANIMATION
--------------------------------------------------------- */

@keyframes fvModalScale {

    0% {
        opacity: 0;
        transform: scale(0.94) translateY(15px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ---------------------------------------------------------
   FIELD ANIMATION
--------------------------------------------------------- */

@keyframes fvFieldReveal {

    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   DOT PULSE
--------------------------------------------------------- */

@keyframes fvPulseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.65;
        transform: scale(0.75);
    }
}


/* ---------------------------------------------------------
   MODAL POSITION
--------------------------------------------------------- */

#freeConsultationModal .modal-dialog {
    max-width: 650px;

    margin-top: 100px;
    margin-bottom: 30px;
}


/* ---------------------------------------------------------
   BACKDROP
--------------------------------------------------------- */

#freeConsultationModal + .modal-backdrop,
.modal-backdrop.show {
    opacity: 0.65;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

    #freeConsultationModal .modal-dialog {
        margin: 100px 10px 20px;

        max-width: none;
    }

    .fv-consultation-modal {
        border-radius: 16px;
    }

    .fv-consultation-modal-header {
        padding: 19px 20px 17px;
    }

    .fv-consultation-modal-header h4 {
        font-size: 20px;

        margin-right: 38px;
    }

    .fv-consultation-modal-header p {
        font-size: 11px;
    }

    .fv-consultation-modal-body {
        padding: 19px 18px 21px;
    }

    .fv-consultation-form .form-control {
        min-height: 40px;

        padding: 8px 11px;

        font-size: 11px;
    }

    .fv-consultation-form textarea.form-control {
        min-height: 65px;
    }

    .fv-consultation-submit {
        min-height: 43px;

        font-size: 12px;
    }
}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 400px) {

    #freeConsultationModal .modal-dialog {
        margin: 100px 10px 15px;
    }

    .fv-consultation-modal-header {
        padding: 16px 16px 14px;
    }

    .fv-consultation-modal-body {
        padding: 16px 15px 18px;
    }

    .fv-consultation-modal-header h4 {
        font-size: 18px;
    }

    .fv-consultation-close {
        width: 30px;
        height: 30px;

        right: 13px;
        top: 12px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .fv-consultation-modal,
    .fv-consultation-form .col-md-6,
    .fv-consultation-form .col-12,
    .fv-consultation-eyebrow::before {
        animation: none;
    }

    .fv-consultation-form .form-control,
    .fv-consultation-submit,
    .fv-consultation-close,
    .fv-select-arrow {
        transition: none;
    }
}

.fv-select-wrapper {
    position: relative;
}

.fv-select-wrapper .form-select {
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.fv-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 11px;
    color: #55B907;

    pointer-events: none;
}
/* =========================================
   NAVBAR
   ========================================= */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}
.navbar {
    min-height: 80px;
}
/* Sticky Navbar */
.futurevolt-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #ffffff;
}

/* Keep navbar above all page content */
.futurevolt-navbar nav {
    position: relative;
    z-index: 9999;
}
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 110px;
}


/* =========================================================
   1024px ONLY - NAVBAR FIX
========================================================= */

@media (min-width: 1024px) and (max-width: 1100px) {

    .futurevolt-navbar .navbar-nav .nav-link {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    .futurevolt-navbar .navbar-brand {
        margin-right: 12px !important;
    }

    .futurevolt-navbar .header-logo {
        width: 165px !important;
        max-height: 58px !important;
    }

    .futurevolt-navbar .futurevolt-whatsapp {
        margin-right: 8px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .futurevolt-navbar .futurevolt-quote {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

}
/* =========================================
   COUNTER FACTS
   ========================================= */

.counter-facts {
    background: linear-gradient(
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0.8)
    ),
    url("../img/breadcrumb.jpg");

    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
}


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

@media (max-width: 991.98px) {

    .navbar-brand {
        height: 55px;
        margin-right: 0;
    }

    .header-logo {
        width: 150px;
        height: auto;
        max-height: 50px;
    }

}
.navbar-light .navbar-brand img {
    max-height: 80px;
    transition: .5s;
}

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

@media (max-width: 575.98px) {

    .header-logo {
        width: 135px;
        max-height: 45px;
    }

}
/* =========================================
   OFFERING / CATEGORY IMAGES
   ========================================= */

/* Equal height for all offering images */
.service img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}
/* =========================================
   SOLAR SOLUTIONS - EQUAL IMAGE HEIGHT
   ========================================= */

.country-item .rounded.overflow-hidden {
    height: 260px;
}

.country-item .rounded.overflow-hidden img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile */
@media (max-width: 767.98px) {
    .country-item .rounded.overflow-hidden {
        height: 240px;
    }
}

/* =========================================
   CERTIFICATIONS
   ========================================= */

.certifications {
    /*background: #f8f9fa;*/
}

.certification-item {
    background: #ffffff;
    border-radius: 15px;
    transition: 0.5s;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    padding: 25px 15px !important;
}
.btn.btn-primary {
    background: #53b703 !important;
    color: var(--bs-white) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    transition: 0.5s;
}
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #53b703 !important;
}

.certification-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

.certification-icon {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10%;
    background: rgba(13, 110, 253, 0.08);
}

.certification-item h5 {
    font-size: 18px;
    font-weight: 600;
}

.certification-item p {
    font-size: 16px;
    line-height: 1.6;
}
/* =========================================
   ABOUT SECTION - MOBILE RESPONSIVE
   ========================================= */

@media (max-width: 767.98px) {

    /* Prevent horizontal page overflow */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Keep About section inside viewport */
    .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* About section heading */
    .sub-title {
        max-width: 100%;
        padding-right: 45px !important;
    }

    /* Keep decorative lines but bring them inside */
    .sub-title::before {
        width: 30px;
        right: 5px;
        margin-right: 0;
        margin-bottom: -5px;
    }

    .sub-title::after {
        width: 18px;
        right: 5px;
        margin-right: 0;
        margin-top: -4px;
    }

    /* Images should never exceed mobile width */
    .container-fluid img {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================
   SOLAR EMOTIONAL HERO
   ========================================= */

.solar-emotional-hero {
    position: relative;
    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #071f2f;
}


/* =========================================
   BACKGROUND VIDEO
   ========================================= */

.solar-emotional-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


/* =========================================
   VIDEO OVERLAY
   ========================================= */

.solar-emotional-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 24, 38, 0.82) 0%,
            rgba(3, 24, 38, 0.48) 45%,
            rgba(3, 24, 38, 0.72) 100%
        );

    z-index: 1;
}


/* =========================================
   HERO CONTAINER
   ========================================= */

.solar-emotional-hero .container {
    position: relative;

    z-index: 2;

    width: 100%;
}


/* =========================================
   HERO CONTENT AREA
   ========================================= */

.solar-emotional-content {
    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================
   CENTER CONTENT
   ========================================= */

.solar-hero-center {
    position: relative;

    z-index: 5;

    width: 520px;

    text-align: center;

    padding: 35px 30px;

    margin: 0 auto;

    border-radius: 24px;

    background: rgba(5, 27, 42, 0.35);

    backdrop-filter: blur(3px);
}


.solar-hero-eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.solar-hero-center h1 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 58px;

    line-height: 1.08;

    font-weight: 700;
}


.solar-hero-center h1 span {
    display: block;

    color: #0d6efd;
}


.solar-hero-center p {
    margin: 0 auto 25px;

    max-width: 500px;

    color: rgba(255, 255, 255, 0.94);

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================
   BEFORE / AFTER ARROW
   ========================================= */

.solar-transformation {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 28px;
}


.solar-transformation > span {
    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    padding: 7px 13px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 30px;

    background: rgba(0, 0, 0, 0.18);
}


.transformation-line {
    position: relative;

    width: 90px;

    height: 2px;

    background: rgba(255, 255, 255, 0.7);
}


.transformation-line i {
    position: absolute;

    right: -2px;

    top: 50%;

    transform: translateY(-50%);

    color: #ffffff;

    font-size: 15px;
}


/* =========================================
   CTA BUTTONS
   ========================================= */

.solar-hero-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


.solar-hero-actions .btn {
    font-size: 14px;

    font-weight: 600;

    transition: all 0.3s ease;
}


.solar-hero-actions .btn:hover {
    transform: translateY(-3px);
}


/* =========================================
   FAMILY IMAGES
   ========================================= */

.solar-family {
    position: absolute;

    bottom: 0;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 370px;

    pointer-events: none;
}


.solar-family img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

    filter: drop-shadow(
        0 15px 25px rgba(0, 0, 0, 0.35)
    );
}


/* =========================================
   BEFORE FAMILY
   ========================================= */

.solar-family-before {
    left: -20px;

    align-items: flex-start;
}


.solar-family-before img {
    filter:
        grayscale(15%)
        drop-shadow(
            0 15px 25px rgba(0, 0, 0, 0.4)
        );
}


/* =========================================
   AFTER FAMILY
   ========================================= */

.solar-family-after {
    right: -20px;

    align-items: flex-end;
}


/* =========================================
   FAMILY LABEL
   ========================================= */

.solar-family-label {
    position: absolute;

    bottom: 55px;

    width: 245px;

    padding: 15px 18px;

    border-radius: 14px;

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

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25);

    text-align: left;
}


.solar-family-before .solar-family-label {
    left: 20px;
}


.solar-family-after .solar-family-label {
    right: 20px;
}


.family-status {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

    color: #0d6efd;
}


.solar-family-label strong {
    display: block;

    color: #12384a;

    font-size: 15px;

    line-height: 1.3;

    margin-bottom: 3px;
}


.solar-family-label small {
    display: block;

    color: #6c757d;

    font-size: 11px;
}


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

@media (max-width: 1199px) {

    .solar-family {
        width: 300px;
    }

    .solar-family-before {
        left: -60px;
    }

    .solar-family-after {
        right: -60px;
    }

    .solar-hero-center {
        width: 470px;
    }

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .solar-emotional-hero {
        min-height: 850px;

        padding: 60px 0;
    }


    .solar-emotional-content {
        min-height: 850px;

        align-items: flex-start;

        padding-top: 50px;
    }


    .solar-hero-center {
        width: 100%;

        max-width: 600px;

        padding: 25px 20px;
    }


    .solar-hero-center h1 {
        font-size: 48px;
    }


    .solar-family {
        width: 280px;
    }


    .solar-family-before {
        left: -80px;
    }


    .solar-family-after {
        right: -80px;
    }


    .solar-family-label {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .solar-emotional-hero {
        min-height: 760px;

        padding: 40px 0;
    }


    .solar-emotional-content {
        min-height: 760px;

        padding-top: 20px;

        align-items: flex-start;
    }


    .solar-hero-center {
        padding: 20px 10px;

        background: transparent;

        backdrop-filter: none;
    }


    .solar-hero-eyebrow {
        font-size: 11px;

        letter-spacing: 1.5px;
    }


    .solar-hero-center h1 {
        font-size: 40px;
    }


    .solar-hero-center p {
        font-size: 15px;
    }


    .solar-family {
        width: 220px;

        bottom: -10px;
    }


    .solar-family-before {
        left: -70px;
    }


    .solar-family-after {
        right: -70px;
    }


    .solar-family-label {
        display: none;
    }


    .solar-transformation {
        margin-bottom: 20px;
    }


    .transformation-line {
        width: 55px;
    }


    .solar-hero-actions {
        flex-direction: column;

        align-items: center;
    }


    .solar-hero-actions .btn {
        width: 100%;

        max-width: 300px;
    }

}


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

@media (max-width: 480px) {

    .solar-emotional-hero {
        min-height: 700px;
    }


    .solar-emotional-content {
        min-height: 700px;
    }


    .solar-hero-center h1 {
        font-size: 34px;
    }


    .solar-family {
        width: 180px;
    }


    .solar-family-before {
        left: -65px;
    }


    .solar-family-after {
        right: -65px;
    }

}
/* =========================================
   FINANCES & CALCULATOR
   CLIENT GREEN THEME
   ========================================= */

.finance-section {
    position: relative;

    padding: 30px 0;

    overflow: hidden;

    /*background: #F8FCF5;*/
}





/* =========================================
   SECTION HEADING
   ========================================= */

.finance-heading {
    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 50px;
}


.finance-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #53b703;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.finance-heading h2 {
    margin: 0 0 15px;

    color: #17351F;

    font-size: 44px;

    line-height: 1.15;

    font-weight: 700;
}


.finance-heading h2 span {
    color: #53b703;
}


.finance-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: #0c0c0c;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================
   THREE COLUMN ROW
   ========================================= */

.finance-row {
    position: relative;

    z-index: 2;

    align-items: stretch;
}


/* =========================================
   COMMON CARD
   ========================================= */

.finance-card {
    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

    min-height: 510px;

    padding: 32px;

    overflow: hidden;

    border: 1px solid #DDEBD7;

    border-radius: 20px;

    background: #FFFFFF;

    color: #17351F;

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(23, 53, 31, 0.055);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.finance-card:hover {
    color: #17351F;

    text-decoration: none;

    transform: translateY(-8px);

    border-color: rgba(85, 185, 7, 0.35);

    box-shadow:
        0 22px 50px rgba(23, 53, 31, 0.11);
}


/* =========================================
   CARD TOP
   ========================================= */

.finance-card-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 24px;
}


/* =========================================
   ICON
   ========================================= */

.finance-icon {
    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 16px;

    background: #EEF9E8;

    color: #53b703;

    font-size: 23px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.finance-card:hover .finance-icon {
    background: #53b703;

    color: #FFFFFF;

    transform: translateY(-4px);
}


/* =========================================
   CARD NUMBER
   ========================================= */

.finance-number {
    color: #E1EED9;

    font-size: 50px;

    line-height: 1;

    font-weight: 800;

    transition: color 0.3s ease;
}


.finance-card:hover .finance-number {
    color: #D6EBCB;
}


/* =========================================
   LABEL
   ========================================= */

.finance-label {
    display: block;

    margin-bottom: 10px;

    color: #53b703;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================
   CARD HEADING
   ========================================= */

.finance-card h3 {
    margin: 0 0 15px;

    color: #17351F;

    font-size: 27px;

    line-height: 1.25;

    font-weight: 700;
}


.finance-card h3 span {
    display: block;

    color: #53b703;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.finance-description {
    margin: 0 0 25px;

    color: #0c0c0c;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================
   LOAN PROOF POINTS
   ========================================= */





.proof-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

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

    border-radius: 9px;

    background: #EEF9E8;

    color: #53b703;

    font-size: 14px;
}


.proof-content small {
    display: block;

    margin-bottom: 4px;

    color: #819088;

    font-size: 8px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.6px;
}


.proof-content strong {
    display: block;

    color: #17351F;

    font-size: 11px;

    line-height: 1.3;
}

.loan-proof-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.loan-proof {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 16px 18px;
    background: #fff;
}

.loan-proof .proof-content strong {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

/* =========================================
   SUBSIDY BOX
   ========================================= */

.subsidy-box {
    margin-top: auto;

    margin-bottom: 15px;

    overflow: hidden;

    border: 1px solid #DDEBD7;

    border-radius: 13px;

    background: #FFFFFF;
}


/* =========================================
   SUBSIDY ROW
   ========================================= */

.subsidy-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px 15px;

    border-bottom: 1px solid #EDF3E9;
}


.subsidy-row-left {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.subsidy-title {
    color: #17351F;

    font-size: 15px;

    font-weight: 700;
}


.subsidy-description {
    color: #819088;

    font-size: 10px;
}


.subsidy-value {
    color: #53b703;

    font-size: 15px;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================
   MAXIMUM SUBSIDY
   ========================================= */

.subsidy-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 15px;

    background: #EEF9E8;
}


.subsidy-total-content span {
    display: block;

    margin-bottom: 3px;

    color: #53b703;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.subsidy-total-content small {
    display: block;

    color: #50665B;

    font-size: 10px;
}


.subsidy-total > strong {
    color: #3F8F05;

    font-size: 23px;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================
   SUBSIDY NOTE
   ========================================= */

.subsidy-note {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin-bottom: 20px;

    color: #829088;

    font-size: 11px;

    line-height: 1.45;
}


.subsidy-note i {
    flex: 0 0 auto;

    margin-top: 1px;

    color: #53b703;
}


/* =========================================
   CALCULATOR CARD
   ========================================= */

.calculator-card {
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F5FAF2 100%
        );
}


/* =========================================
   CALCULATOR FORM
   ========================================= */

.calculator-card form {
    margin-top: auto;
}


.calculator-field {
    margin-bottom: 14px;
}


.calculator-field label {
    display: block;

    margin-bottom: 7px;

    color: #17351F;

    font-size: 16px;

    font-weight: 700;
}


/* =========================================
   INPUT WRAPPER
   ========================================= */

.input-wrapper {
    position: relative;
}


.input-wrapper > i {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 15px;

    color: #53b703;

    font-size: 14px;

    transform: translateY(-50%);

    pointer-events: none;
}


.input-wrapper .form-control,
.input-wrapper .form-select {
    width: 100%;

    height: 50px;

    padding: 0 14px 0 40px;

    border: 1px solid #DDEBD7;

    border-radius: 10px;

    background: #FFFFFF;

    color: #40534B;

    font-size: 16px;

    box-shadow: none;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.input-wrapper .form-control::placeholder {
    color: #9AA8A1;
}


.input-wrapper .form-control:focus,
.input-wrapper .form-select:focus {
    border-color: #53b703;

    box-shadow:
        0 0 0 3px rgba(85, 185, 7, 0.10);
}


.input-wrapper select {
    cursor: pointer;
}


/* =========================================
   INLINE VALIDATION
   ========================================= */

.field-error {
    min-height: 17px;

    padding-top: 5px;

    color: #DC3545;

    font-size: 10px;

    line-height: 1.4;
}


.calculator-field.has-error
.input-wrapper .form-control,

.calculator-field.has-error
.input-wrapper .form-select {
    border-color: #DC3545;
}


.calculator-field.has-success
.input-wrapper .form-control,

.calculator-field.has-success
.input-wrapper .form-select {
    border-color: #53b703;
}


/* =========================================
   CALCULATE BUTTON
   ========================================= */

.finance-calculate-btn {
    width: 100%;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    border: 0;

    border-radius: 10px;

    background: #53b703;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.finance-calculate-btn:hover {
    background: #3F8F05;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(85, 185, 7, 0.25);
}


.calculate-arrow {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.16);
}


.calculate-arrow i {
    transition: transform 0.3s ease;
}


.finance-calculate-btn:hover .calculate-arrow i {
    transform: translateX(4px);
}


/* =========================================
   CARD CTA
   ========================================= */

.finance-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-top: 20px;

    border-top: 1px solid #E6EFE2;

    color: #53b703;

    font-size: 15px;

    font-weight: 700;
}


.cta-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: #EEF9E8;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.finance-card:hover .cta-arrow {
    background: #53b703;

    color: #FFFFFF;

    transform: translateX(4px);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .finance-section {
        padding: 75px 0;
    }

    .finance-heading h2 {
        font-size: 38px;
    }

    .finance-card {
        min-height: 490px;
    }

}


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

@media (max-width: 767px) {

    .finance-section {
        padding: 30px 0;
    }

    .finance-heading {
        margin-bottom: 35px;
    }

    .finance-heading h2 {
        font-size: 32px;
    }

    .finance-heading p {
        font-size: 14px;
    }

    .finance-card {
        min-height: auto;

        padding: 27px;
    }

    .loan-proof-points {
        margin-top: 5px;
    }

}


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

@media (max-width: 480px) {

    .finance-heading h2 {
        font-size: 29px;
    }

    .finance-card h3 {
        font-size: 24px;
    }

    .loan-proof-points {
        grid-template-columns: 1fr;
    }

    .subsidy-total {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }

    .finance-card-top {
        margin-bottom: 20px;
    }

}

/* =========================================
   SECTION 3 — MONEY BACK GUARANTEE
   ========================================= */

.money-guarantee-section {
    position: relative;

    padding: 35px 0 40px;

    overflow: hidden;

    /*background: #F8FCF5;*/
}


/* =========================================
   MAIN GUARANTEE BAND
   ========================================= */

.money-guarantee {
    position: relative;

    overflow: hidden;

    padding: 50px 55px;

    border-radius: 24px;

    background:
        linear-gradient(
            115deg,
            #3F8F05 0%,
            #53b703 55%,
            #69C91A 100%
        );

    color: #FFFFFF;

    box-shadow:
        0 25px 55px rgba(63, 143, 5, 0.20);
}


/* =========================================
   DECORATIVE GLOW
   ========================================= */

.guarantee-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.guarantee-glow-one {
    width: 420px;
    height: 420px;

    top: -260px;
    right: -80px;

    background: rgba(255, 255, 255, 0.08);
}


.guarantee-glow-two {
    width: 280px;
    height: 280px;

    bottom: -210px;
    left: 25%;

    background: rgba(255, 255, 255, 0.06);
}


/* =========================================
   ICON AREA
   ========================================= */

.guarantee-icon-wrap {
    position: relative;

    width: 105px;
    height: 105px;

    display: flex;

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

    margin: 0 auto;
}


.guarantee-icon {
    width: 92px;
    height: 92px;

    display: flex;

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

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

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

    color: #FFFFFF;

    font-size: 42px;

    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, 0.05);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.money-guarantee:hover .guarantee-icon {
    transform: scale(1.06);

    background: rgba(255, 255, 255, 0.20);
}


/* =========================================
   CHECK BADGE
   ========================================= */

.guarantee-check {
    position: absolute;

    right: 0;
    bottom: 4px;

    width: 31px;
    height: 31px;

    display: flex;

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

    border: 3px solid #53b703;

    border-radius: 50%;

    background: #FFFFFF;

    color: #53b703;

    font-size: 11px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.15);
}


/* =========================================
   LABEL
   ========================================= */

.guarantee-label {
    display: inline-block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================
   HEADING
   ========================================= */

.money-guarantee h2 {
    margin: 0 0 10px;

    color: #FFFFFF;

    font-size: 39px;

    line-height: 1.15;

    font-weight: 700;
}


.money-guarantee h2 span {
    color: #FFFFFF;
}


/* =========================================
   INTRO
   ========================================= */

.guarantee-intro {
    max-width: 610px;

    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   SUPPORTING POINTS
   ========================================= */

.guarantee-points {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 22px;
}


.guarantee-point {
    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 15px;

    line-height: 1.4;
}


/* =========================================
   POINT ICON
   ========================================= */

.point-icon {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    display: flex;

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

    border-radius: 50%;

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

    color: #FFFFFF;

    font-size: 8px;
}


/* =========================================
   CTA AREA
   ========================================= */

.guarantee-action {
    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.guarantee-btn {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    min-width: 205px;

    padding: 7px 8px 7px 20px;

    border-radius: 50px;

    background: #FFFFFF;

    color: #3F8F05;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.guarantee-btn:hover {
    color: #3F8F05;

    text-decoration: none;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.18);
}


/* =========================================
   CTA ICON
   ========================================= */

.guarantee-btn-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex: 0 0 34px;

    border-radius: 50%;

    background: #53b703;

    color: #FFFFFF;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.guarantee-btn:hover .guarantee-btn-icon {
    background: #3F8F05;

    transform: translateX(3px);
}


/* =========================================
   CTA SUBTEXT
   ========================================= */

.guarantee-action small {
    margin-top: 10px;

    color: white;

    font-size: 15px;

    text-align: right;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .money-guarantee {
        padding: 45px 35px;
    }


    .guarantee-icon-wrap {
        margin-bottom: 25px;
    }


    .money-guarantee h2 {
        font-size: 34px;
    }


    .guarantee-action {
        align-items: flex-start;

        margin-top: 30px;
    }


    .guarantee-action small {
        text-align: left;
    }

}


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

@media (max-width: 767px) {

    .money-guarantee-section {
        padding: 25px 0 65px;
    }


    .money-guarantee {
        padding: 38px 25px;

        border-radius: 20px;
    }


    .guarantee-icon-wrap {
        margin: 0 0 25px;
    }


    .money-guarantee h2 {
        font-size: 31px;
    }


    .guarantee-intro {
        font-size: 14px;
    }


    .guarantee-points {
        flex-direction: column;

        gap: 10px;
    }


    .guarantee-action {
        margin-top: 30px;
    }


    .guarantee-btn {
        width: 100%;

        max-width: 280px;
    }

}


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

@media (max-width: 480px) {

    .money-guarantee {
        padding: 32px 20px;
    }


    .guarantee-icon {
        width: 82px;
        height: 82px;

        font-size: 36px;
    }


    .money-guarantee h2 {
        font-size: 28px;
    }

}
/* =========================================
   SECTION 4 — REFER & EARN
   ========================================= */

.refer-earn-section {
    position: relative;

    padding: 35px 0 95px;

    overflow: hidden;

    /*background: #F8FCF5;*/
}


/* =========================================
   MAIN WRAPPER
   ========================================= */

.refer-earn-wrapper {
    position: relative;

    overflow: hidden;

    padding: 65px 60px;

    border-radius: 26px;

    background:
        linear-gradient(
            115deg,
            #3F8F05 0%,
            #53b703 55%,
            #6AC91A 100%
        );

    box-shadow:
        0 25px 55px rgba(63, 143, 5, 0.20);
}


/* =========================================
   DECORATIVE CIRCLES
   ========================================= */

.refer-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.refer-decoration-one {
    width: 470px;
    height: 470px;

    top: -310px;
    right: -100px;

    background: rgba(255, 255, 255, 0.07);
}


.refer-decoration-two {
    width: 300px;
    height: 300px;

    bottom: -230px;
    left: 28%;

    background: rgba(255, 255, 255, 0.05);
}


/* =========================================
   CONTENT
   ========================================= */

.refer-content {
    position: relative;

    z-index: 2;

    padding-right: 45px;
}


/* =========================================
   EYEBROW
   ========================================= */

.refer-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================
   MAIN HEADING
   ========================================= */

.refer-content h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: 44px;

    line-height: 1.12;

    font-weight: 800;
}


.refer-content h2 span {
    display: block;

    color: #FFFFFF;
}


/* =========================================
   SECOND HEADING
   ========================================= */

.refer-content h3 {
    margin: 8px 0 18px;

    color: #FFFFFF;

    font-size: 25px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.refer-description {
    max-width: 620px;

    margin: 0 0 28px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   BENEFITS
   ========================================= */

.refer-benefits {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


.refer-benefit {
    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 190px;

    padding: 12px 15px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 12px;

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

    backdrop-filter: blur(5px);
}


/* =========================================
   BENEFIT ICON
   ========================================= */

.refer-benefit-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 10px;

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

    color: #FFFFFF;

    font-size: 14px;
}


.refer-benefit strong {
    display: block;

    margin-bottom: 3px;

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 700;
}


.refer-benefit small {
    display: block;

    color: white;

    font-size: 14px;
}


/* =========================================
   FORM CARD
   ========================================= */

.refer-form-card {
    position: relative;

    z-index: 3;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 20px;

    background: #FFFFFF;

    box-shadow:
        0 18px 40px rgba(23, 53, 31, 0.16);
}


/* =========================================
   FORM ICON
   ========================================= */

.refer-form-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 17px;

    border-radius: 14px;

    background: #EEF9E8;

    color: #53b703;

    font-size: 20px;
}


/* =========================================
   FORM HEADING
   ========================================= */

.refer-form-card h3 {
    margin: 0 0 6px;

    color: #17351F;

    font-size: 24px;

    line-height: 1.25;

    font-weight: 700;
}


.refer-form-card > p {
    margin: 0 0 23px;

    color: #0c0c0c;

    font-size: 14px;

    line-height: 1.5;
}


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

.refer-mobile-field {
    margin-bottom: 12px;
}


.refer-mobile-field label {
    display: block;

    margin-bottom: 8px;

    color: #17351F;

    font-size: 16px;

    font-weight: 700;
}


/* =========================================
   INPUT WRAPPER
   ========================================= */

.refer-input-wrapper {
    display: flex;

    align-items: center;

    height: 52px;

    overflow: hidden;

    border: 1px solid #DDEBD7;

    border-radius: 10px;

    background: #FFFFFF;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.refer-input-wrapper:focus-within {
    border-color: #53b703;

    box-shadow:
        0 0 0 3px rgba(85, 185, 7, 0.10);
}


/* =========================================
   COUNTRY CODE
   ========================================= */

.country-code {
    display: flex;

    align-items: center;

    height: 100%;

    padding: 0 13px;

    border-right: 1px solid #E5EEE0;

    color: #53b703;

    font-size: 14px;

    font-weight: 700;

    /*background: #F8FCF5;*/
}


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

.refer-mobile-input {
    width: 100%;

    height: 100%;

    padding: 0 14px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #17351F;

    font-size: 14px;
}


.refer-mobile-input::placeholder {
    color: #9AA8A1;
}


/* =========================================
   ERROR
   ========================================= */

.refer-error {
    min-height: 17px;

    padding-top: 5px;

    color: #DC3545;

    font-size: 10px;

    line-height: 1.4;
}


.refer-mobile-field.has-error
.refer-input-wrapper {
    border-color: #DC3545;
}


/* =========================================
   CONTINUE BUTTON
   ========================================= */

.refer-continue-btn {
    width: 100%;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 9px 0 19px;

    border: 0;

    border-radius: 10px;

    background: #53b703;

    color: #FFFFFF;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.refer-continue-btn:hover {
    background: #3F8F05;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(85, 185, 7, 0.25);
}


/* =========================================
   BUTTON ARROW
   ========================================= */

.refer-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.17);
}


.refer-arrow i {
    transition: transform 0.3s ease;
}


.refer-continue-btn:hover .refer-arrow i {
    transform: translateX(4px);
}


/* =========================================
   SECURE NOTE
   ========================================= */

.refer-secure-note {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 13px;

    color: #89968F;

    font-size: 14px;
}


.refer-secure-note i {
    color: #53b703;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .refer-earn-wrapper {
        padding: 50px 40px;
    }


    .refer-content {
        padding-right: 0;

        margin-bottom: 35px;
    }


    .refer-content h2 {
        font-size: 38px;
    }


    .refer-content h3 {
        font-size: 23px;
    }

}


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

@media (max-width: 767px) {

    .refer-earn-section {
        padding: 25px 0 65px;
    }


    .refer-earn-wrapper {
        padding: 38px 22px;

        border-radius: 20px;
    }


    .refer-content {
        margin-bottom: 30px;
    }


    .refer-content h2 {
        font-size: 32px;
    }


    .refer-content h3 {
        font-size: 21px;
    }


    .refer-description {
        font-size: 14px;
    }


    .refer-benefits {
        flex-direction: column;
    }


    .refer-benefit {
        width: 100%;
    }


    .refer-form-card {
        padding: 25px 20px;
    }

}


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

@media (max-width: 480px) {

    .refer-earn-wrapper {
        padding: 32px 18px;
    }


    .refer-content h2 {
        font-size: 28px;
    }


    .refer-content h3 {
        font-size: 19px;
    }


    .refer-form-card h3 {
        font-size: 22px;
    }

}
/* =========================================
   SECTION 5 — OFFERINGS
   ========================================= */

.offerings-section {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background: #FFFFFF;
}


/* =========================================
   SECTION HEADING
   ========================================= */

.offerings-heading {
    max-width: 760px;

    margin: 0 auto 50px;
}


.offerings-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #53b703;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.offerings-heading h2 {
    margin: 0 0 15px;

    color: #17351F;

    font-size: 44px;

    line-height: 1.15;

    font-weight: 700;
}


.offerings-heading h2 span {
    color: #53b703;
}


.offerings-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #0c0c0c;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================
   ROW
   ========================================= */

.offerings-row {
    align-items: stretch;
}


/* =========================================
   OFFERING CARD
   ========================================= */

.offering-card {
    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border: 1px solid #DDEBD7;

    border-radius: 20px;

    background: #FFFFFF;

    color: #17351F;

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(23, 53, 31, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.offering-card:hover {
    color: #17351F;

    text-decoration: none;

    transform: translateY(-8px);

    border-color: rgba(85, 185, 7, 0.40);

    box-shadow:
        0 22px 50px rgba(23, 53, 31, 0.12);
}


/* =========================================
   IMAGE
   ========================================= */

.offering-image {
    position: relative;

    height: 245px;

    overflow: hidden;

    background: #EAF5E5;
}


.offering-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.offering-card:hover .offering-image img {
    transform: scale(1.07);
}


/* =========================================
   IMAGE OVERLAY
   ========================================= */

.offering-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(23, 53, 31, 0.72) 0%,
            rgba(23, 53, 31, 0.10) 60%,
            rgba(23, 53, 31, 0.00) 100%
        );
}


/* =========================================
   NUMBER
   ========================================= */

.offering-number {
    position: absolute;

    top: 18px;
    right: 18px;

    color: white;

    font-size: 30px;

    line-height: 1;

    font-weight: 800;
}


/* =========================================
   IMAGE LABEL
   ========================================= */

.offering-image-label {
    position: absolute;

    left: 22px;
    bottom: 18px;

    padding: 7px 12px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 30px;

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

    color: #FFFFFF;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    backdrop-filter: blur(5px);
}


/* =========================================
   CONTENT
   ========================================= */

.offering-content {
    position: relative;

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 28px;
}


/* =========================================
   ICON
   ========================================= */

.offering-icon {
    width: 54px;
    height: 54px;

    display: flex;

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

    margin-top: -52px;

    margin-bottom: 18px;

    border: 4px solid #FFFFFF;

    border-radius: 15px;

    background: #53b703;

    color: #FFFFFF;

    font-size: 19px;

    box-shadow:
        0 8px 20px rgba(23, 53, 31, 0.12);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.offering-card:hover .offering-icon {
    transform: translateY(-4px);

    background: #3F8F05;
}


/* =========================================
   CARD TITLE
   ========================================= */

.offering-content h3 {
    margin: 0 0 9px;

    color: #17351F;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 700;
}


/* =========================================
   POSITIONING
   ========================================= */

.offering-positioning {
    min-height: 47px;

    margin: 0 0 18px;

    color: #0c0c0c;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================
   HIGHLIGHTS
   ========================================= */

.offering-highlights {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin: 0 0 25px;

    padding: 0;

    list-style: none;
}


.offering-highlights li {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: #506158;

    font-size: 11px;

    line-height: 1.5;
}


.offering-highlights li i {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    display: flex;

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

    margin-top: 1px;

    border-radius: 50%;

    background: #EEF9E8;

    color: #53b703;

    font-size: 7px;
}


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

.offering-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: auto;

    padding-top: 18px;

    border-top: 1px solid #E6EFE2;

    color: #53b703;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================
   CTA ARROW
   ========================================= */

.offering-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: #EEF9E8;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.offering-card:hover .offering-arrow {
    transform: translateX(4px);

    background: #53b703;

    color: #FFFFFF;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .offerings-section {
        padding: 75px 0;
    }


    .offerings-heading h2 {
        font-size: 38px;
    }


    .offering-image {
        height: 225px;
    }

}


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

@media (max-width: 767px) {

    .offerings-section {
        padding: 60px 0;
    }


    .offerings-heading {
        margin-bottom: 35px;
    }


    .offerings-heading h2 {
        font-size: 32px;
    }


    .offerings-heading p {
        font-size: 14px;
    }


    .offering-image {
        height: 235px;
    }


    .offering-content {
        padding: 25px;
    }

}


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

@media (max-width: 480px) {

    .offerings-heading h2 {
        font-size: 29px;
    }


    .offering-content h3 {
        font-size: 23px;
    }


    .offering-image {
        height: 210px;
    }

}
/* =========================================================
   FUTURE VOLT — SECTION 5.1 HERO
========================================================= */

:root {
    --fv-green: #1f7a45;
    --fv-green-dark: #145c33;
    --fv-green-light: #e9f7ee;
    --fv-white: #ffffff;
    --fv-black: #111111;
    --fv-border: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   HERO
========================================================= */

.fv-hero {
    position: relative;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
    background: #10271b;
}


/* =========================================================
   BACKGROUND
========================================================= */

.fv-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.fv-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 0.8s ease;
}

.fv-hero-video.is-loaded {
    opacity: 1;
}

.fv-hero-poster {
    position: absolute;
    inset: 0;

    background-image:
        url("../images/hero-poster.webp");

    background-size: cover;
    background-position: center;

    z-index: 0;

    transform: scale(1.02);
}


/* =========================================================
   OVERLAY
========================================================= */

.fv-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 24, 14, 0.88) 0%,
            rgba(6, 24, 14, 0.68) 38%,
            rgba(6, 24, 14, 0.40) 70%,
            rgba(6, 24, 14, 0.60) 100%
        );

    z-index: 2;
}

.fv-hero-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.28) 0%,
            transparent 30%,
            transparent 75%,
            rgba(0, 0, 0, 0.45) 100%
        );
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.fv-hero-container {
    position: relative;
    z-index: 5;

    width: min(1440px, calc(100% - 100px));

    margin: 0 auto;

    min-height: 100svh;

    display: grid;

    grid-template-columns:
        minmax(380px, 0.85fr)
        minmax(550px, 1.15fr);

    align-items: center;

    gap: 50px;

    padding-top: 230px;
    padding-bottom: 100px;
}


/* =========================================================
   HERO TEXT
========================================================= */

.fv-hero-content {
    max-width: 650px;
}

.fv-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 15px;

    margin-bottom: 22px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.08);
}

.fv-hero-eyebrow > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #79d99a;

    box-shadow:
        0 0 0 5px rgba(121, 217, 154, 0.12);
}

.fv-hero-title {
    margin: 0;

    color: var(--fv-white);

    font-size: clamp(48px, 5vw, 58px);

    line-height: 1.02;

    letter-spacing: -0.045em;

    font-weight: 700;
}

.fv-hero-title span {
    display: block;

    color: #7fdda1;
}

.fv-hero-subtitle {
    max-width: 570px;

    margin: 25px 0 32px;

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

    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   CTA BUTTONS
========================================================= */

.fv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.fv-btn {
    min-height: 54px;

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

    gap: 12px;

    padding: 0 23px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.fv-btn:hover {
    transform: translateY(-2px);
}

.fv-btn-primary {
    color: #ffffff;
    background: #53b703;
}

.fv-btn-primary:hover {
    background: var(--fv-green-dark);
}

.fv-btn-secondary {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.45);

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

    backdrop-filter: blur(8px);
}

.fv-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
}


/* =========================================================
   BEFORE / AFTER
========================================================= */

.fv-before-after {
    display: flex;

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

    gap: 12px;

    min-width: 0;
}


/* STORY CARD */

.fv-story-card {
    position: relative;

    width: 430px;

    padding: 18px 16px 20px;

    border: 1px solid var(--fv-border);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.14),
            rgba(255,255,255,0.045)
        );

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);

    animation: fvCardFloat 5s ease-in-out infinite;
}

.fv-after {
    animation-delay: -2.5s;
}

@keyframes fvCardFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* LABEL */

.fv-story-label {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

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

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.fv-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffb15c;
}

.fv-after .fv-status-dot {
    background: #72e49b;
}


/* CHARACTER */

.fv-character {
    height: 245px;

    display: flex;

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

.fv-animation {
    width: 100%;
    height: 100%;

    display: flex;

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

.fv-animation img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* BILL */

.fv-bill {
    padding-top: 12px;

    border-top:
        1px solid rgba(255,255,255,0.12);
}

.fv-bill-caption {
    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,0.58);

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.fv-bill-amount {
    display: block;

    color: #ff0000;

    font-size: 27px;

    line-height: 1.2;
}

.fv-after .fv-bill-amount {
    color: #86e3a5;
}


/* =========================================================
   CONNECTOR
========================================================= */

.fv-story-connector {
    width: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;
}

.fv-connector-line {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.55),
            transparent
        );
}

.fv-connector-badge {
    padding: 7px 10px;

    border-radius: 7px;

    background: var(--fv-green);

    color: #ffffff;

    text-align: center;

    line-height: 1.1;

    box-shadow:
        0 8px 25px rgba(31, 122, 69, 0.35);
}

.fv-connector-badge span {
    display: block;

    font-size: 8px;

    letter-spacing: 0.12em;

    opacity: 0.8;
}

.fv-connector-badge strong {
    display: block;

    margin-top: 2px;

    font-size: 9px;

    letter-spacing: 0.06em;
}

.fv-connector-arrow {
    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

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

    border: 1px solid rgba(255,255,255,0.22);

    animation: fvArrowMove 1.6s ease-in-out infinite;
}

@keyframes fvArrowMove {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}


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

.fv-countdown {
    position: absolute;

    top: 28px;
    right: 45px;

    z-index: 20;

    width: max-content;
    max-width: calc(100% - 30px);

    padding: 30px 30px;

    border-radius: 10px;

    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-sizing: border-box;
}

.fv-countdown-label {
    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;

    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;

    white-space: nowrap;
}

.fv-countdown-timer {
    display: flex;

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

    gap: 0;
}

.fv-time-box {
    min-width: 42px;

    text-align: center;
    flex: 0 0 auto;
}

.fv-time-box span {
    display: block;

    color: #ffffff;

    font-size: 18px;
    line-height: 1;
    font-weight: 700;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.fv-time-box small {
    display: block;

    margin-top: 5px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 7px;
    line-height: 1.2;

    text-transform: uppercase;
    white-space: nowrap;
}

.fv-time-separator {
    color: rgba(255, 255, 255, 0.5);

    font-size: 15px;
    line-height: 1;

    margin: 0 3px;
    padding-bottom: 10px;

    flex: 0 0 auto;
}


/* =========================================================
   LARGE DESKTOP SCREENS
   1440px and above
========================================================= */

@media (min-width: 1440px) {
    .fv-countdown {
        top: 100px;
        right: 55px;

        padding: 30px 34px;
    }

    .fv-countdown-label {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .fv-time-box { 
        min-width: 48px;
    }

    .fv-time-box span {
        font-size: 21px;
    }

    .fv-time-box small {
        font-size: 8px;
        margin-top: 6px;
    }

    .fv-time-separator {
        font-size: 17px;
        margin: 0 4px;
        padding-bottom: 11px;
    }
}


/* =========================================================
   LAPTOP / STANDARD DESKTOP
   1200px to 1439px
========================================================= */

@media (min-width: 1200px) and (max-width: 1439px) {
    .fv-countdown {
        top: 28px;
        right: 40px;

        padding: 27px 28px;
    }

    .fv-time-box {
        min-width: 40px;
    }

    .fv-time-box span {
        font-size: 18px;
    }
}


/* =========================================================
   SMALL LAPTOP / TABLET LANDSCAPE
   992px to 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {
    .fv-countdown {
        top: 22px;
        right: 25px;

        padding: 22px 22px;
    }

    .fv-countdown-label {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .fv-time-box {
        min-width: 35px;
    }

    .fv-time-box span {
        font-size: 16px;
    }

    .fv-time-box small {
        font-size: 6px;
        margin-top: 4px;
    }

    .fv-time-separator {
        font-size: 14px;
        margin: 0 2px;
        padding-bottom: 9px;
    }
}


/* =========================================================
   TABLET PORTRAIT
   768px to 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {
    .fv-countdown {
        top: 100px;
        right: 20px;

        padding: 18px 18px;

        border-radius: 9px;
    }

    .fv-countdown-label {
        font-size: 8px;
        margin-bottom: 7px;
        letter-spacing: 0.08em;
    }

    .fv-time-box {
        min-width: 32px;
    }

    .fv-time-box span {
        font-size: 15px;
    }

    .fv-time-box small {
        font-size: 6px;
        margin-top: 4px;
    }

    .fv-time-separator {
        font-size: 12px;
        margin: 0 2px;
        padding-bottom: 8px;
    }
}


/* =========================================================
   LARGE MOBILE
   576px to 767px
========================================================= */

@media (min-width: 576px) and (max-width: 767px) {
    .fv-countdown {
        top: 15px;
        right: 15px;

        padding: 15px 15px;

        border-radius: 8px;
    }

    .fv-countdown-label {
        font-size: 7px;
        margin-bottom: 7px;
        letter-spacing: 0.07em;
    }

    .fv-time-box {
        min-width: 28px;
    }

    .fv-time-box span {
        font-size: 14px;
    }

    .fv-time-box small {
        font-size: 6px;
        margin-top: 4px;
    }

    .fv-time-separator {
        font-size: 11px;
        margin: 0 1px;
        padding-bottom: 8px;
    }
}


/* =========================================================
   SMALL MOBILE
   375px to 575px
========================================================= */

@media (min-width: 375px) and (max-width: 575px) {
    .fv-countdown {
        top: 12px;
        right: 12px;

        padding: 12px 12px;

        border-radius: 8px;
    }

    .fv-countdown-label {
        font-size: 6px;
        margin-bottom: 6px;
        letter-spacing: 0.06em;
    }

    .fv-time-box {
        min-width: 25px;
    }

    .fv-time-box span {
        font-size: 12px;
    }

    .fv-time-box small {
        font-size: 5px;
        margin-top: 4px;
    }

    .fv-time-separator {
        font-size: 10px;
        margin: 0 1px;
        padding-bottom: 7px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   Below 375px
========================================================= */

@media (max-width: 374px) {
    .fv-countdown {
        top: 10px;
        right: 10px;

        padding: 10px 9px;

        border-radius: 7px;
    }

    .fv-countdown-label {
        font-size: 5px;
        margin-bottom: 5px;
        letter-spacing: 0.04em;
    }

    .fv-time-box {
        min-width: 22px;
    }

    .fv-time-box span {
        font-size: 11px;
    }

    .fv-time-box small {
        font-size: 5px;
        margin-top: 3px;
    }

    .fv-time-separator {
        font-size: 9px;
        margin: 0;
        padding-bottom: 6px;
    }
}


/* =========================================================
   MOBILE LANDSCAPE SAFETY
========================================================= */

@media (max-width: 767px) and (orientation: landscape) {
    .fv-countdown {
        top: 10px;
        right: 12px;

        padding: 10px 12px;
    }

    .fv-countdown-label {
        margin-bottom: 5px;
    }

    .fv-time-box span {
        font-size: 12px;
    }

    .fv-time-box small {
        font-size: 5px;
    }
}




/* =========================================================
   SCROLL INDICATOR
========================================================= */

.fv-scroll-indicator {
    position: absolute;

    bottom: 25px;
    left: 50%;

    z-index: 20;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,0.7);

    text-decoration: none;
}

.fv-scroll-text {
    font-size: 9px;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.fv-scroll-icon {
    width: 30px;
    height: 30px;

    display: flex;

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

    border:
        1px solid rgba(255,255,255,0.35);

    border-radius: 50%;

    animation: fvScroll 1.7s ease-in-out infinite;
}

@keyframes fvScroll {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}





/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .fv-hero-container {
        width: min(100% - 60px, 1100px);

        grid-template-columns:
            minmax(250px, 0.8fr)
            minmax(450px, 1.2fr);

        gap: 25px;
    }

    .fv-hero-title {
        font-size: clamp(42px, 5vw, 62px);
    }

    .fv-story-card {
        width: 205px;
    }

    .fv-character {
        height: 210px;
    }

    .fv-story-connector {
        width: 65px;
    }

    .fv-countdown {
        right: 25px;
    }
}


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

@media (max-width: 767px) {

    .fv-hero {
        min-height: auto;

        padding:
            95px 0
            75px;
    }


 

    .fv-hero-poster {
        background-position: center;
    }

    .fv-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(6,24,14,0.82),
                rgba(6,24,14,0.75)
            );
    }


    .fv-hero-container {
        width: calc(100% - 36px);

        min-height: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 35px;

        padding: 0;
    }


    /* Countdown */

    .fv-countdown {
        top: 18px;
        right: 18px;

        transform: scale(0.88);

        transform-origin: top right;
    }


    /* Text */

    .fv-hero-content {
        max-width: none;

        text-align: center;
    }

    .fv-hero-eyebrow {
        font-size: 9px;

        margin-bottom: 16px;
    }

    .fv-hero-title {
        font-size: clamp(38px, 11vw, 54px);

        letter-spacing: -0.04em;
    }

    .fv-hero-subtitle {
        margin:
            18px auto
            25px;

        max-width: 470px;

        font-size: 15px;

        line-height: 1.55;
    }


    /* Buttons */

    .fv-hero-actions {
        flex-direction: column;

        align-items: stretch;

        max-width: 390px;

        margin: 0 auto;
    }

    .fv-btn {
        width: 100%;
    }


    /* Before / After */

    .fv-before-after {
        flex-direction: column;

        gap: 13px;
    }

    .fv-story-card {
        width: min(100%, 300px);
    }

    .fv-character {
        height: 220px;
    }


    /* Connector becomes vertical */

    .fv-story-connector {
        width: auto;
        height: 65px;

        flex-direction: column;

        gap: 5px;
    }

    .fv-connector-line {
        width: 1px;
        height: 14px;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(255,255,255,0.55),
                transparent
            );
    }

    .fv-connector-arrow {
        transform: rotate(90deg);
    }

    @keyframes fvArrowMove {

        0%,
        100% {
            transform: rotate(90deg) translateX(0);
        }

        50% {
            transform: rotate(90deg) translateX(5px);
        }
    }


    /* Callback */

    .fv-callback-tab {
        top: auto;
        bottom: 22px;

        transform: none;

        border-radius: 0 9px 9px 0;

        padding:
            9px 11px
            9px 8px;
    }

    .fv-callback-icon {
        width: 30px;
        height: 30px;
    }

    .fv-callback-text {
        font-size: 9px;
    }


    /* Scroll */

    .fv-scroll-indicator {
        display: none;
    }


    /* Modal */

    .fv-callback-box {
        padding: 30px 22px;
    }

}
.text-secondary {
    color: #53b703!important;
}
.counter-facts .counter .counter-icon {
    position: relative;
    width: 120px;
    height: 100px;
    /* margin: 0 auto 10px; */
    border-radius: 10px 10px 0 0;
    transform: translateY(-20px);
    font-size: 50px;
    line-height: 90px;
    color: #53b703;
    background: rgba(1, 143, 252, 0.5);
    clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter-facts .counter .counter-value {
    font-size: 30px;
    font-weight: 700;
    display: block;
    color: #53b703;
}
/* =========================================================
   FUTURE VOLT — ALL SECTION TITLE ACCENTS
   BRAND GREEN: #53b703
========================================================= */

/* Section eyebrow / small heading */
.section-title .sub-title {
    color: #53b703 !important;
}

/* Highlighted part of every section heading */
.section-title h1 span {
    color: #53b703 !important;
}
.sub-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: #53b703;
}
/* Equal height for Future Volt Advantage cards */
.features .row > .col-md-6 {
    display: flex;
}

.features .feature-item {
    width: 100%;
    height: 100%;
}
/* =========================================================
   FUTURE VOLT — CONTACT SECTION
   BRAND GREEN: #53b703
========================================================= */

.contact-section {
    /*background: #F6FBEF;*/
}


/* ---------------------------------------------------------
   SECTION HEADING
--------------------------------------------------------- */

.contact-section .sub-title {
    color: #53b703 !important;
}

.contact-section .section-title h1 {
    color: #17351F;
}

.contact-section .section-title h1 span {
    color: #53b703;
}

.contact-section .section-title p {
    color: #0c0c0c;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   FORM / DETAILS BOX
--------------------------------------------------------- */

.contact-form-box,
.contact-details-box {
    height: 100%;

    padding: 40px;

    background: #FFFFFF;

    border: 1px solid #D8EAC9;

    border-radius: 16px;

    box-shadow: 0 10px 35px rgba(47, 104, 4, 0.08);
}


/* ---------------------------------------------------------
   BOX HEADING
--------------------------------------------------------- */

.contact-box-title {
    margin-bottom: 10px;

    color: #17351F;

    font-size: 25px;
    font-weight: 700;
}

.contact-box-text {
    margin-bottom: 15px;

    color: #0c0c0c;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   FORM INPUTS
--------------------------------------------------------- */

.contact-input {
    min-height: 50px;

    padding: 12px 18px;

    border: 1px solid #D8EAC9;

    border-radius: 8px;

    color: #17351F;

    background: #FFFFFF;

    box-shadow: none;
}

textarea.contact-input {
    min-height: 140px;

    resize: vertical;
}

.contact-input:focus {
    border-color: #53b703;

    box-shadow: 0 0 0 3px rgba(85, 185, 7, 0.10);
}

.contact-input::placeholder {
    color: #8A968D;
}


/* Select */
select.contact-input {
    cursor: pointer;
}


/* ---------------------------------------------------------
   SUBMIT BUTTON
--------------------------------------------------------- */

.contact-submit-btn {
    border: 0;

    background: #53b703;

    color: #FFFFFF;

    font-weight: 600;

    transition: all 0.3s ease;
}

.contact-submit-btn:hover {
    background: #3F8F05;

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   CONTACT DETAILS
--------------------------------------------------------- */

.contact-detail-item {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    margin-bottom: 22px;
}

.contact-detail-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 50%;

    background: #EAF7DE;

    color: #53b703;

    font-size: 18px;
}

label 
{
    color: #0c0c0c;
    font-weight: 500;
}

.contact-detail-item span {
    display: block;

    margin-bottom: 3px;

    color: #0c0c0c;

    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.contact-detail-item a {
    color: #17351F;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;
}

.contact-detail-item a:hover {
    color: #53b703;
}

.contact-detail-item p {
    color: #17351F;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;
}
.contact-detail-item p:hover {
    color: #53b703;
}
.g-4, .gy-4 {
    --bs-gutter-y: 1rem;
}
/* ---------------------------------------------------------
   SERVICE AREA
--------------------------------------------------------- */

.service-area-box {
    margin-top: 25px;
    padding: 20px;

    border-radius: 12px;

    background: #F6FBEF;

    border: 1px solid #D8EAC9;
}

.service-area-box h5 {
    margin-bottom: 10px;

    color: #17351F;

    font-weight: 700;
}

.service-area-box h5 i {
    color: #53b703;
}

.service-area-box p {
    margin-bottom: 15px;

    color: #0c0c0c;

    font-size: 14px;

    line-height: 1.6;
}

.service-area-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.service-area-list span {
    padding: 6px 12px;

    border-radius: 50px;

    background: #FFFFFF;

    border: 1px solid #D8EAC9;

    color: #3F8F05;

    font-size: 14px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   SOCIAL MEDIA
--------------------------------------------------------- */

.contact-social {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-top: 25px;
    padding-top: 22px;

    border-top: 1px solid #E4EDE0;
}

.contact-social > span {
    color: #17351F;

    font-weight: 600;
}

.social-icons {
    display: flex;

    gap: 8px;
}

.social-icons a {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #EAF7DE;

    color: #53b703;

    text-decoration: none;

    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: #53b703;

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   MAP
--------------------------------------------------------- */

.contact-map {
    overflow: hidden;

    border-radius: 16px;

    border: 1px solid #D8EAC9;

    background: #FFFFFF;

    box-shadow: 0 10px 35px rgba(47, 104, 4, 0.08);
}

.contact-map iframe {
    display: block;

    width: 100%;

    border: 0;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

    .contact-form-box,
    .contact-details-box {
        padding: 25px;
    }

    .contact-box-title {
        font-size: 22px;
    }

    .contact-map iframe {
        height: 320px;
    }

    .contact-social {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

}
/* =========================================================
   FUTURE VOLT CHATBOT
   BRAND GREEN: #53b703
========================================================= */

.fv-chatbot {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 99999;

    font-family: inherit;
}


/* =========================================================
   CHAT LAUNCHER
========================================================= */

.fv-chat-launcher {
    position: relative;

    width: 62px;
    height: 62px;

    border: 0;
    border-radius: 50%;

    background: #53b703;

    color: #FFFFFF;

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

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.fv-chat-launcher:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);
}

.fv-chat-icon,
.fv-chat-close-icon {
    font-size: 25px;

    transition: 0.25s ease;
}

.fv-chat-close-icon {
    display: none;
}

.fv-chatbot.open
.fv-chat-icon {
    display: none;
}

.fv-chatbot.open
.fv-chat-close-icon {
    display: block;
}


/* =========================================================
   NOTIFICATION
========================================================= */

.fv-chat-notification {
    position: absolute;

    top: -3px;
    right: -3px;

    width: 21px;
    height: 21px;

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

    border-radius: 50%;

    background: #FFFFFF;

    color: #53b703;

    font-size: 11px;

    font-weight: 700;

    border: 2px solid #53b703;
}

.fv-chatbot.open
.fv-chat-notification {
    display: none;
}


/* =========================================================
   GREETING BUBBLE
========================================================= */

.fv-chat-greeting {
    position: absolute;

    right: 75px;
    bottom: 8px;
    width: 110px;
    padding: 10px 20px;

    background: #FFFFFF;

    color: #26342A;

    border-radius: 12px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.14);

    font-size: 14px;

    line-height: 1.5;

    animation: fvChatGreeting 0.5s ease;
}

.fv-chat-greeting strong {
    color: #53b703;
}

.fv-greeting-close {
    position: absolute;

    top: 7px;
    right: 9px;

    border: 0;

    background: transparent;

    color: #777;

    font-size: 18px;

    cursor: pointer;
}

@keyframes fvChatGreeting {

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

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

}

.fv-chatbot.open
.fv-chat-greeting {
    display: none;
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.fv-chat-window {
    position: absolute;

    right: 0;
    bottom: 78px;

    width: 390px;
    max-width: calc(100vw - 30px);

    height: 600px;
    max-height: calc(100vh - 110px);

    background: #FFFFFF;

    border-radius: 18px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.20);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(15px)
        scale(0.98);

    transform-origin: bottom right;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.fv-chatbot.open
.fv-chat-window {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CHAT HEADER
========================================================= */

.fv-chat-header {
    flex-shrink: 0;

    padding: 15px 18px;

    background:
        linear-gradient(
            135deg,
            #53b703 0%,
            #3E9405 100%
        );

    color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.fv-chat-brand {
    display: flex;

    align-items: center;

    gap: 11px;
}

.fv-chat-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    display: flex;

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

    font-size: 17px;
}

.fv-chat-brand strong {
    display: block;

    font-size: 15px;
}

.fv-chat-brand small {
    display: block;

    margin-top: 2px;

    font-size: 11px;

    opacity: 0.85;
}

.fv-chat-header-actions {
    display: flex;

    align-items: center;

    gap: 6px;
}

.fv-chat-lang,
.fv-chat-minimize {
    width: 32px;
    height: 32px;

    border: 0;

    border-radius: 7px;

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

    color: #FFFFFF;

    cursor: pointer;
}

.fv-chat-lang {
    font-size: 10px;

    font-weight: 700;
}

.fv-chat-lang:hover,
.fv-chat-minimize:hover {
    background: rgba(255,255,255,0.22);
}


/* =========================================================
   MESSAGES
========================================================= */

.fv-chat-messages {
    flex: 1;

    overflow-y: auto;

    padding: 18px 15px;

    background: #F6F9F5;

    scroll-behavior: smooth;
}

.fv-chat-message {
    display: flex;

    gap: 8px;

    margin-bottom: 15px;
}

.fv-chat-message.user {
    justify-content: flex-end;
}

.fv-message-avatar {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    border-radius: 50%;

    background: #53b703;

    color: #FFFFFF;

    display: flex;

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

    font-size: 11px;
}

.fv-message-content {
    max-width: 82%;
}

.fv-message-bubble {
    padding: 11px 13px;

    border-radius: 13px 13px 13px 3px;

    background: #FFFFFF;

    color: #344238;

    font-size: 14px;

    line-height: 1.55;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.05);
}

.fv-chat-message.user
.fv-message-bubble {
    border-radius: 13px 13px 3px 13px;

    background: #53b703;

    color: #FFFFFF;
}


/* =========================================================
   QUICK OPTIONS
========================================================= */

.fv-quick-options {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    margin-top: 9px;
}

.fv-quick-options button {
    padding: 9px 8px;

    border: 1px solid #DDE8D8;

    border-radius: 8px;

    background: #FFFFFF;

    color: #3D4C42;

    font-size: 11px;

    text-align: left;

    cursor: pointer;

    transition: all 0.2s ease;
}

.fv-quick-options button i {
    margin-right: 5px;

    color: #53b703;
}

.fv-quick-options button:hover {
    border-color: #53b703;

    color: #53b703;

    background: #F3FAEF;
}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.fv-typing {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 12px 15px;

    background: #FFFFFF;

    border-radius: 13px 13px 13px 3px;
}

.fv-typing span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #53b703;

    animation: fvTyping 1.2s infinite;
}

.fv-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.fv-typing span:nth-child(3) {
    animation-delay: 0.30s;
}

@keyframes fvTyping {

    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }

}


/* =========================================================
   LEAD CAPTURE
========================================================= */

.fv-chat-lead {
    flex-shrink: 0;

    padding: 15px;

    background: #FFFFFF;

    border-top: 1px solid #E6ECE4;
}

.fv-lead-title {
    color: #26342A;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 4px;
}

.fv-chat-lead p {
    margin-bottom: 12px;

    color: #758178;

    font-size: 12px;

    line-height: 1.5;
}

.fv-chat-field {
    margin-bottom: 10px;
}

.fv-chat-field label {
    display: block;

    margin-bottom: 5px;

    color: #455249;

    font-size: 11px;

    font-weight: 600;
}

.fv-chat-field input {
    width: 100%;

    height: 42px;

    padding: 0 12px;

    border: 1px solid #DCE5D9;

    border-radius: 7px;

    outline: none;

    font-size: 14px;
}

.fv-chat-field input:focus {
    border-color: #53b703;

    box-shadow:
        0 0 0 3px rgba(85,185,7,0.10);
}

.fv-chat-error {
    display: block;

    margin-top: 4px;

    color: #D93025;

    font-size: 10px;
}

.fv-chat-consent {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin: 8px 0 12px;

    color: #69756D;

    font-size: 10px;

    line-height: 1.4;

    cursor: pointer;
}

.fv-chat-consent input {
    margin-top: 2px;

    accent-color: #53b703;
}

.fv-chat-submit {
    width: 100%;

    min-height: 42px;

    border: 0;

    border-radius: 7px;

    background: #53b703;

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.25s ease;
}

.fv-chat-submit:hover {
    background: #469D06;
}

.fv-chat-submit:disabled {
    opacity: 0.65;

    cursor: not-allowed;
}

.fv-honeypot {
    position: absolute !important;

    left: -9999px !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   INPUT
========================================================= */

.fv-chat-input-area {
    flex-shrink: 0;

    padding: 10px 12px 11px;

    background: #FFFFFF;

    border-top: 1px solid #E6ECE4;
}

.fv-chat-input-wrap {
    display: flex;

    align-items: center;

    gap: 7px;
}

.fv-chat-input-wrap input {
    flex: 1;

    height: 42px;

    padding: 0 12px;

    border: 1px solid #DCE5D9;

    border-radius: 21px;

    outline: none;

    font-size: 12px;
}

.fv-chat-input-wrap input:focus {
    border-color: #53b703;

    box-shadow:
        0 0 0 3px rgba(85,185,7,0.08);
}

.fv-chat-input-wrap button {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 0;

    border-radius: 50%;

    background: #53b703;

    color: #FFFFFF;

    cursor: pointer;
}

.fv-chat-input-wrap button:hover {
    background: #469D06;
}


/* =========================================================
   CHAT FOOTER
========================================================= */

.fv-chat-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 8px;

    font-size: 9px;

    color: #A0AAA3;
}

.fv-chat-footer button {
    padding: 0;

    border: 0;

    background: transparent;

    color: #53b703;

    font-size: 10px;

    cursor: pointer;

    font-weight: 600;
}

.fv-chat-footer button i {
    margin-right: 3px;
}


/* =========================================================
   SUCCESS
========================================================= */

.fv-chat-success {
    text-align: center;

    padding: 12px 5px;
}

.fv-chat-success-icon {
    width: 45px;
    height: 45px;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: rgba(85,185,7,0.12);

    color: #53b703;

    display: flex;

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

    font-size: 20px;
}

.fv-chat-success h4 {
    margin-bottom: 5px;

    color: #26342A;

    font-size: 15px;
}

.fv-chat-success p {
    margin: 0;

    color: #748078;

    font-size: 11px;

    line-height: 1.5;
}


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

@media (max-width: 575px) {

    .fv-chatbot {
        right: 14px;
        bottom: 14px;
    }

    .fv-chat-window {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        max-width: none;

        height: 100%;
        max-height: none;

        border-radius: 0;

        transform:
            translateY(20px);
    }

    .fv-chatbot.open
    .fv-chat-window {

        transform:
            translateY(0);
    }

    .fv-chat-launcher {
        width: 58px;
        height: 58px;
    }

    .fv-chat-greeting {
        right: 68px;

        bottom: 4px;

        width: 200px;
    }

}

/* =========================================================
   FUTURE VOLT CHATBOT - MOBILE OVERLAP FIX
   ========================================================= */

@media (max-width: 575.98px) {

    /* Chat window */
    .fv-chat-widget,
    .fv-chat-container {
        max-width: calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
    }

    /* Input area */
    .fv-chat-input-area {
        position: relative !important;
        padding: 10px 12px !important;
        padding-right: 12px !important;
        z-index: 5 !important;
    }

    /* Input itself */
    .fv-chat-input-area input,
    .fv-chat-input-area textarea {
        width: 100% !important;
        padding-right: 48px !important;
        box-sizing: border-box !important;
    }

    /* Send button - keep it above everything */
    .fv-chat-input-area button,
    .fv-chat-send,
    .fv-chat-send-btn {
        position: relative !important;
        z-index: 20 !important;
    }

    /*
     * When chatbot is OPEN:
     * move the floating launcher away from
     * the input/send button area.
     */
    .fv-chat-launcher[aria-expanded="true"] {
        bottom: auto !important;
        top: -60px !important;
        right: -10px !important;
        z-index: 30 !important;
    }

    /* Prevent launcher from covering the input */
    .fv-chat-launcher {
        z-index: 30 !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .fv-chat-widget,
    .fv-chat-container {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }

    .fv-chat-input-area {
        padding: 8px 10px !important;
    }

    .fv-chat-launcher[aria-expanded="true"] {
        top: -54px !important;
        right: 8px !important;
    }
}

/* =========================================
   FUTURE VOLT - DARK FOOTER
   Brand Green: #53b703
   ========================================= */

.footer {
    background: #0B1608 !important;
    color: #ffffff;
}

.footer .footer-item h4 {
    color: #53b703 !important;
}

.footer .footer-item p,
.footer .footer-item a {
    color: #d8e2d5 !important;
}

.footer .footer-item a {
    transition: all 0.3s ease;
}

.footer .footer-item a:hover {
    color: #53b703 !important;
}

.footer .footer-item a i {
    color: #53b703;
}

/* Office address label */
.footer .footer-item h6 {
    color: #53b703 !important;
}

/* Copyright */
.copyright {
    background: #050A04 !important;
    border-top: 1px solid rgba(85, 185, 7, 0.18);
}

.copyright a {
    color: #53b703 !important;
    border-color: #53b703 !important;
}

.copyright a:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Copyright icon */
.copyright i {
    color: #53b703 !important;
}
/* =========================================================
   FUTURE VOLT HEADER
   Brand Colour: #53b703
   ========================================================= */


/* =========================
   TOPBAR
   ========================= */

.futurevolt-topbar {
    background: #071006 !important;
    border-bottom: 1px solid rgba(85, 185, 7, 0.25);
}

.futurevolt-topbar .topbar-link {
    color: #dce8d8 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.futurevolt-topbar .topbar-link i {
    color: #53b703 !important;
}

.futurevolt-topbar .topbar-link:hover {
    color: #53b703 !important;
}


/* Social Icons */

.futurevolt-topbar .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.futurevolt-topbar .btn-outline-light i {
    color: #ffffff !important;
}

.futurevolt-topbar .btn-outline-light:hover {
    background: #53b703 !important;
    border-color: #53b703 !important;
    color: #ffffff !important;
}

.futurevolt-topbar .btn-outline-light:hover i {
    color: #ffffff !important;
}


/* =========================
   MAIN NAVBAR
   ========================= */

.futurevolt-navbar {
    background: #53b703 !important;
}

.futurevolt-navbar .navbar {
    background: #53b703 !important;
}


/* Navigation Links */

.futurevolt-navbar .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    transition: all 0.3s ease;
}


/* Hover */

.futurevolt-navbar .navbar-nav .nav-link:hover {
    color: #53b703 !important;
}


/* Active */

.futurevolt-navbar .navbar-nav .nav-link.active {
    color: #53b703 !important;
    font-weight: 600;
}


/* Dropdown arrow */

.futurevolt-navbar .dropdown-toggle::after {
    color: #53b703;
}


/* Dropdown */

.futurevolt-navbar .dropdown-menu {
    background: #ffffff !important;
    border: none;
    border-top: 3px solid #53b703;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.futurevolt-navbar .dropdown-item {
    color: #1b2a18 !important;
    transition: all 0.3s ease;
}

.futurevolt-navbar .dropdown-item:hover {
    background: #53b703 !important;
    color: #ffffff !important;
}


/* =========================
   SEARCH BUTTON
   ========================= */

.futurevolt-search {
    background: #ffffff !important;
    color: #53b703 !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

.futurevolt-search:hover {
    background: #123005 !important;
    color: #ffffff !important;
    border-color: #123005 !important;
}


/* =========================
   GET A QUOTE BUTTON
   ========================= */

.futurevolt-quote {
    background: #123005 !important;
    color: #ffffff !important;
    border: 2px solid #123005 !important;
    transition: all 0.3s ease;
}

.futurevolt-quote:hover {
    background: #ffffff !important;
    color: #123005 !important;
    border-color: #ffffff !important;
}


/* =========================
   MOBILE MENU BUTTON
   ========================= */

.futurevolt-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff !important;
}

.futurevolt-navbar .navbar-toggler:focus {
    box-shadow: none;
}

.futurevolt-navbar .navbar-toggler .fa {
    color: #000 !important;
}



/* =========================
   FUTURE VOLT HEADER LOGO
   ========================= */

.futurevolt-navbar .navbar-brand {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 5px 12px !important;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.futurevolt-navbar .header-logo {
    display: block;
    height: 55px;
    width: 100%;
    max-width: 250px;
    object-fit: contain;
    border-radius: 6px;
}

.futurevolt-navbar .navbar-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
@media (max-width: 991.98px) {

    .futurevolt-navbar .navbar-brand {
        padding: 4px 9px !important;
        border-radius: 8px;
    }

    .futurevolt-navbar .header-logo {
        height: 42px;
        max-width: 160px;
        border-radius: 5px;
    }

}
.text-primary {
    color: #53b703 !important;
}
.fv-callback-tab {
    position: fixed;

    left: 0;
    top: 50%;

    z-index: 10000;

    transform:
        translateY(-50%)
        translateX(-1px);


}
/* =========================================================
   FUTUREVOLT
   REQUEST CALLBACK — COMPLETE SECTION
   ========================================================= */


/* =========================================================
   1. FIXED  CALLBACK TRIGGER
   ========================================================= */
/* ===== Callback widget wrapper — bottom-left, pinned to viewport ===== */
.fv-callback-widget {
    position: fixed !important;
    left: 25px;
    bottom: 25px;
    z-index: 1050; /* raised above navbar/other fixed elements */
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== Round launcher button (now first/left) ===== */
.fv-callback-trigger {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 50%;

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

    background: #53b703;
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.fv-callback-trigger i {
    font-size: 22px;
}

.fv-callback-trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.fv-callback-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(40,167,69,0.6);
    animation: fvCallbackPulse 2s infinite;
}

@keyframes fvCallbackPulse {
    0%   { box-shadow: 0 0 0 0 rgba(40,167,69,0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(40,167,69,0); }
    100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}

/* ===== Greeting bubble — now second/right, tail points left at button ===== */
.fv-callback-greeting {
    position: relative;
    background: #fff;
    color: #1a1a1a;
    padding: 12px 34px 12px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

.fv-callback-greeting strong {
    color: #28a745;
}

.fv-greeting-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
}

.fv-greeting-close:hover {
    color: #333;
}

/* Tail now points LEFT toward the button */
.fv-callback-greeting::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #fff;
}

@media (max-width: 480px) {
    .fv-callback-widget {
        left: 15px;
        bottom: 15px;
        gap: 8px;
    }

    .fv-callback-greeting {
        font-size: 12px;
        padding: 10px 28px 10px 12px;
    }
}
/* =========================================================
   2. CALLBACK MODAL OVERLAY
   ========================================================= */

.fv-callback-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

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

    width: 100%;
    height: 100%;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* Open modal */
.fv-callback-modal.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   3. MODAL BACKDROP
   ========================================================= */

.fv-modal-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    cursor: pointer;
}


/* =========================================================
   4. CALLBACK MODAL BOX
   ========================================================= */

.fv-callback-box {
    position: relative;
    z-index: 1;

    width: min(440px, 100%);
    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 38px;

    border: 1px solid rgba(85, 185, 7, 0.12);
    border-radius: 24px;

    background: #FFFFFF;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.20);

    transform: translateY(20px) scale(0.98);

    transition:
        transform 0.3s ease;
}


/* Modal open animation */
.fv-callback-modal.is-open .fv-callback-box {
    transform: translateY(0) scale(1);
}


/* =========================================================
   5. CLOSE BUTTON
   ========================================================= */

.fv-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;

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

    width: 34px;
    height: 34px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #F1F8ED;
    color: #3F8F05;

    font-size: 16px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.fv-modal-close:hover {
    background: #53b703;
    color: #FFFFFF;

    transform: rotate(90deg);
}


.fv-modal-close:focus-visible {
    outline: 3px solid rgba(85, 185, 7, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   6. MODAL ICON
   ========================================================= */

.fv-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 20px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #EEF9E8 0%,
        #DDF2D2 100%
    );

    color: #53b703;

    font-size: 25px;
}


/* =========================================================
   7. MODAL HEADING
   ========================================================= */

.fv-callback-box h3 {
    margin: 0 0 10px;

    color: #17351F;

    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;
}


/* =========================================================
   8. MODAL DESCRIPTION
   ========================================================= */

.fv-callback-box > p {
    margin: 0 0 25px;

    color: #0c0c0c;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================================
   9. CALLBACK FORM
   ========================================================= */

.fv-callback-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* Form group */
.fv-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Labels */
.fv-form-group label {
    display: block;

    margin: 0;

    color: #17351F;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}


/* Inputs */
.fv-form-group input {
    display: block;

    width: 100%;
    height: 52px;

    padding: 0 15px;

    border: 1px solid #DDEBD7;
    border-radius: 10px;

    outline: none;

    background: #FFFFFF;
    color: #17351F;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;

    box-sizing: border-box;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* Placeholder */
.fv-form-group input::placeholder {
    color: #9AA8A1;
    opacity: 1;
}


/* Input focus */
.fv-form-group input:focus {
    border-color: #53b703;

    background: #FFFFFF;

    box-shadow:
        0 0 0 3px rgba(85, 185, 7, 0.10);
}


/* =========================================================
   10. SUBMIT BUTTON
   ========================================================= */

.fv-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-height: 52px;

    margin-top: 5px;
    padding: 14px 20px;

    border: none;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #53b703 0%,
        #3F8F05 100%
    );

    color: #FFFFFF;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.fv-submit-btn:hover {
    background: linear-gradient(
        135deg,
        #69C91A 0%,
        #3F8F05 100%
    );

    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(63, 143, 5, 0.22);
}


.fv-submit-btn:focus-visible {
    outline: 3px solid rgba(85, 185, 7, 0.25);
    outline-offset: 3px;
}


.fv-submit-btn i {
    font-size: 14px;

    transition:
        transform 0.3s ease;
}


.fv-submit-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   11. TABLET RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .fv-callback-trigger {
        width: 65px;
        height: 65px;
    }

    .fv-callback-trigger span {
        font-size: 10px;
    }

    .fv-callback-box {
        padding: 32px;
    }

}


/* =========================================================
   12. MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 575.98px) {

    /* Fixed vertical tab */
    .fv-callback-trigger {
        width: 58px;
        height: 58px;

        padding: 10px 7px;
        gap: 8px;

       /* border-radius: 0 10px 10px 0;*/
    }

    .fv-callback-trigger i {
        font-size: 15px;
    }

    .fv-callback-trigger span {
        font-size: 9px;
    }

    .fv-callback-trigger:hover {
        width: 42px;
    }


    /* Modal */
    .fv-callback-modal {
        align-items: center;

        padding: 15px;
    }

    .fv-callback-box {
        width: 100%;
        max-width: 390px;

        max-height: calc(100vh - 30px);

        padding: 30px 22px;

        border-radius: 20px;
    }


    /* Icon */
    .fv-modal-icon {
        width: 56px;
        height: 56px;

        margin-bottom: 17px;

        font-size: 22px;
    }


    /* Heading */
    .fv-callback-box h3 {
        font-size: 24px;
    }


    /* Description */
    .fv-callback-box > p {
        margin-bottom: 22px;

        font-size: 14px;
    }


    /* Form */
    .fv-callback-form {
        gap: 16px;
    }


    /* Inputs */
    .fv-form-group input {
        height: 50px;
    }


    /* Submit */
    .fv-submit-btn {
        min-height: 50px;
    }

}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-callback-trigger,
    .fv-callback-trigger i,
    .fv-callback-modal,
    .fv-callback-box,
    .fv-modal-close,
    .fv-submit-btn,
    .fv-submit-btn i {
        transition: none;
    }

}
.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.pt-5 {
    padding-top: 1rem !important;
}

/* =========================================
   FUTURE VOLT SEARCH MODAL
   TRANSPARENT BACKGROUND
========================================= */

/* Modal layering */
#searchModal {
    z-index: 99999 !important;
}

/* Full-screen modal */
#searchModal .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Transparent modal content */
#searchModal .modal-content.fv-search-modal {
    position: relative !important;

    width: 100% !important;
    min-height: 100vh !important;

    border: 0 !important;
    border-radius: 0 !important;

    /* IMPORTANT: transparent background */
    background: transparent !important;

    box-shadow: none !important;
}

/* Transparent modal body */
#searchModal .modal-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 100vh !important;
    padding: 40px 20px !important;

    background: transparent !important;
}

/* Dark transparent overlay behind modal */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.45) !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

/* =========================================
   TOP-RIGHT CLOSE BUTTON
========================================= */

#searchModal .fv-search-close {
    position: absolute !important;
    top: 25px !important;
    right: 30px !important;
    z-index: 100000 !important;

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

    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #55b907 !important;
    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
}

#searchModal .fv-search-close span {
    display: block !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

#searchModal .fv-search-close:hover {
    background: #111111 !important;
    color: #ffffff !important;
    transform: rotate(90deg);
}

/* =========================================
   SEARCH CONTENT
========================================= */

#searchModal .fv-search-container {
    width: min(900px, 90%) !important;
    text-align: center !important;
}

#searchModal .fv-search-title {
    margin: 0 0 28px !important;

    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 700 !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65) !important;
}

/* =========================================
   SEARCH BOX
========================================= */

#searchModal .fv-search-box {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 66px !important;

    overflow: hidden !important;

    border: 2px solid #55b907 !important;
    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25) !important;
}

/* Search input */
#searchModal .fv-search-input {
    flex: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;

    padding: 0 105px 0 24px !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: #ffffff !important;
    color: #222222 !important;

    font-size: 18px !important;
}

#searchModal .fv-search-input::placeholder {
    color: #888888 !important;
}

/* Clear X inside input */
#searchModal .fv-search-clear {
    position: absolute !important;
    top: 50% !important;
    right: 78px !important;
    z-index: 2 !important;

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

    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    color: #2865a8 !important;

    font-size: 28px !important;
    line-height: 1 !important;

    transform: translateY(-50%) !important;
    cursor: pointer !important;
}

/* Search button */
#searchModal .fv-search-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 76px !important;
    min-width: 76px !important;
    height: 66px !important;

    border: 0 !important;

    background: linear-gradient(135deg, #55b907, #087f3f) !important;
    color: #ffffff !important;

    font-size: 23px !important;
    cursor: pointer !important;

    transition: all 0.3s ease !important;
}

#searchModal .fv-search-submit:hover {
    background: linear-gradient(135deg, #087f3f, #55b907) !important;
}

/* =========================================
   BOTTOM CLOSE BUTTON
========================================= */

#searchModal .fv-search-bottom-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 28px !important;
    padding: 12px 28px !important;

    border: 2px solid #55b907 !important;
    border-radius: 30px !important;

    background: rgba(255, 255, 255, 0.95) !important;
    color: #087f3f !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#searchModal .fv-search-bottom-close:hover {
    background: #55b907 !important;
    color: #ffffff !important;
}

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

@media (max-width: 767px) {

    #searchModal .fv-search-close {
        top: 18px !important;
        right: 18px !important;

        width: 44px !important;
        height: 44px !important;

        font-size: 31px !important;
    }

    #searchModal .modal-body {
        padding: 30px 15px !important;
    }

    #searchModal .fv-search-container {
        width: 94% !important;
    }

    #searchModal .fv-search-title {
        font-size: 23px !important;
        margin-bottom: 22px !important;
    }

    #searchModal .fv-search-box {
        min-height: 54px !important;
        border-radius: 10px !important;
    }

    #searchModal .fv-search-input {
        height: 52px !important;
        padding: 0 85px 0 15px !important;
        font-size: 15px !important;
    }

    #searchModal .fv-search-clear {
        right: 60px !important;
        font-size: 24px !important;
    }

    #searchModal .fv-search-submit {
        width: 58px !important;
        min-width: 58px !important;
        height: 54px !important;
        font-size: 19px !important;
    }

    #searchModal .fv-search-bottom-close {
        margin-top: 22px !important;
        padding: 10px 22px !important;
        font-size: 14px !important;
    }
}
/* =========================================
   FUTUREVOLT NAVBAR - FIXED AND SCROLLABLE
========================================= */

.futurevolt-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;

    /* Transparent navbar over hero */
    background: rgba(255, 255, 255, 0.20) !important;
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* Inner navbar must remain transparent */
.futurevolt-navbar .navbar {
    background: transparent !important;
    box-shadow: none !important;
}

/* Navbar after scrolling below hero */
.futurevolt-navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Menu text */
.futurevolt-navbar .nav-link {
    color: #ffffff !important;
}

/* Dark text after scrolling onto light sections */
.futurevolt-navbar.navbar-scrolled .nav-link {
    color: #17351f !important;
}

/* Dropdown arrow */
.futurevolt-navbar .nav-link .dropdown-toggle {
    color: inherit !important;
}

/* Search button */
.futurevolt-navbar .futurevolt-search {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Mobile menu */
@media (max-width: 991.98px) {
    .futurevolt-navbar .navbar-collapse {
        background: rgba(0, 0, 0, 0.85) !important;
        padding: 15px !important;
        border-radius: 12px;
    }

    .futurevolt-navbar.navbar-scrolled .navbar-collapse {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .futurevolt-navbar.navbar-scrolled .navbar-collapse .nav-link {
        color: #17351f !important;
    }
}
/* =========================================
   FUTUREVOLT COUNTDOWN - ALL SCREEN SIZES
========================================= */

/* Countdown parent */
.fv-hero {
    position: relative;
}

/* Desktop countdown */
.fv-countdown {
    position: absolute;
    top: 105px;
    right: 4%;
    z-index: 20;

    width: 320px;
    max-width: calc(100% - 40px);
    padding: 15px 20px;

    background: rgba(35, 35, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;

    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
}

/* Countdown heading */
.fv-countdown-label {
    display: block;
    margin-bottom: 14px;

    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Timer row */
.fv-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* Individual time box */
.fv-time-box {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Number */
.fv-time-box span {
    display: block;
    color: #ffffff;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* Label below number */
.fv-time-box small {
    display: block;
    margin-top: 8px;

    color: rgba(255, 255, 255, 0.58);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Separators */
.fv-time-separator {
    flex: 0 0 auto;
    margin-top: -14px;

    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    font-weight: 700;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199.98px) {
    .fv-countdown {
        top: 95px;
        right: 3%;
        width: 325px;
        padding: 20px 16px;
    }

    .fv-countdown-timer {
        gap: 8px;
    }

    .fv-time-box span {
        font-size: 24px;
    }
}


/* =========================================
   SMALL TABLET / MOBILE LANDSCAPE
========================================= */

@media (max-width: 991.98px) {
    .fv-countdown {
        top: 95px;
        right: 20px;
        width: 325px;
        padding: 15px 15px;
    }

    .fv-countdown-label {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .fv-time-box span {
        font-size: 23px;
    }

    .fv-time-box small {
        margin-top: 6px;
        font-size: 8px;
    }

    .fv-time-separator {
        font-size: 18px;
    }
}


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

@media (max-width: 767.98px) {
    .fv-countdown {
        top: 140px;
        left: 50%;
        right: auto;
        width: calc(100% - 100px);
        max-width: 350px;
        transform: translateX(-50%);
        padding: 16px 12px;
        border-radius: 12px;
    }

    .fv-countdown-label {
        margin-bottom: 12px;
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .fv-countdown-timer {
        gap: 5px;
    }

    .fv-time-box span {
        font-size: clamp(19px, 6vw, 25px);
    }

    .fv-time-box small {
        margin-top: 6px;
        font-size: 7px;
    }

    .fv-time-separator {
        margin-top: -12px;
        font-size: 16px;
    }

    /* Prevent hero content from hiding behind countdown */
    .fv-hero-container {
        padding-top: 190px !important;
    }
}


/* =========================================
   VERY SMALL MOBILE - 320px TO 375px
========================================= */

@media (max-width: 375px) {
    .fv-countdown {
        top: 140px;
        width: calc(100% - 100px);
        padding: 14px 8px;
    }

    .fv-countdown-label {
        margin-bottom: 10px;
        font-size: 8px;
    }

    .fv-countdown-timer {
        gap: 3px;
    }

    .fv-time-box span {
        font-size: 18px;
    }

    .fv-time-box small {
        font-size: 6px;
    }

    .fv-time-separator {
        font-size: 14px;
    }

    .fv-hero-container {
        padding-top: 180px !important;
    }
}
/* =========================================================
   HERO COUNTDOWN
   SAME STYLE AS SUBSIDY COUNTDOWN
   POSITION REMAINS UNCHANGED
   ========================================================= */

.fv-hero .fv-countdown {
    /* KEEP YOUR EXISTING POSITION */
    position: absolute;

    /* visual styling only */
    padding: 14px 18px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;

    background: rgba(7, 31, 47, 0.55);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


/* =========================================================
   COUNTDOWN HOVER
   ========================================================= */

.fv-hero .fv-countdown:hover {
    transform: translateY(-4px);

    border-color: rgba(85, 185, 7, 0.55);

    background: rgba(7, 31, 47, 0.68);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(85, 185, 7, 0.12);
}


/* =========================================================
   LABEL
   ========================================================= */

.fv-hero .fv-countdown-label {
    display: block;

    margin-bottom: 10px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 11px;
    line-height: 1.4;

    font-weight: 600;
    letter-spacing: 0.7px;

    text-transform: uppercase;

    transition: color 0.3s ease;
}


.fv-hero .fv-countdown:hover .fv-countdown-label {
    color: #ffffff;
}


/* =========================================================
   TIMER
   ========================================================= */

.fv-hero .fv-countdown-timer {
    display: flex;

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

    gap: 7px;
}


/* =========================================================
   TIME BOX
   ========================================================= */

.fv-hero .fv-time-box {
    width: 58px;
    min-width: 58px;
    height: 62px;

    display: flex;

    flex-direction: column;

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

    padding: 6px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 11px;

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

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Individual box hover */

.fv-hero .fv-time-box:hover {
    transform: translateY(-5px) scale(1.04);

    border-color: rgba(85, 185, 7, 0.75);

    background: rgba(85, 185, 7, 0.14);

    box-shadow:
        0 8px 20px rgba(85, 185, 7, 0.18);
}


/* =========================================================
   NUMBER
   ========================================================= */

.fv-hero .fv-time-box span {
    display: block;

    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    font-weight: 700;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.fv-hero .fv-time-box:hover span {
    color: #8BE83B;

    transform: scale(1.08);
}


/* =========================================================
   DAYS / HRS / MIN / SEC
   ========================================================= */

.fv-hero .fv-time-box small {
    display: block;

    margin-top: 6px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 8px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    transition: color 0.3s ease;
}


.fv-hero .fv-time-box:hover small {
    color: rgba(255, 255, 255, 0.95);
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.fv-hero .fv-time-separator {
    color: rgba(255, 255, 255, 0.65);

    font-size: 20px;
    line-height: 1;

    font-weight: 600;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.fv-hero .fv-countdown:hover .fv-time-separator {
    color: #55B907;
}


/* =========================================================
   MOBILE
   POSITION IS NOT CHANGED
   ========================================================= */

@media (max-width: 767px) {

    .fv-hero .fv-countdown {
        padding: 10px 12px;

        border-radius: 13px;
    }

    .fv-hero .fv-countdown-label {
        font-size: 9px;

        margin-bottom: 7px;
    }

    .fv-hero .fv-countdown-timer {
        gap: 4px;
    }

    .fv-hero .fv-time-box {
        width: 45px;
        min-width: 45px;
        height: 50px;

        border-radius: 8px;
    }

    .fv-hero .fv-time-box span {
        font-size: 17px;
    }

    .fv-hero .fv-time-box small {
        margin-top: 4px;

        font-size: 7px;
    }

    .fv-hero .fv-time-separator {
        font-size: 16px;
    }

    .fv-hero .fv-countdown:hover {
        transform: none;
    }

}


@media (max-width: 480px) {

    .fv-hero .fv-countdown {
        padding: 8px 9px;
    }

    .fv-hero .fv-time-box {
        width: 39px;
        min-width: 39px;
        height: 45px;
    }

    .fv-hero .fv-time-box span {
        font-size: 15px;
    }

    .fv-hero .fv-time-box small {
        font-size: 6px;
        letter-spacing: 0.5px;
    }

    .fv-hero .fv-time-separator {
        font-size: 14px;
    }

}

/* =========================================================
   Future Volt Residential Page
   Based on the existing index.php design system
========================================================= */

:root {
    --res-green: #55B907;
    --res-dark-green: #2e7608;
    --res-blue: #0879c9;
    --res-dark: #14251a;
    --res-text: #0c0c0c;
    --res-light: #f4faef;
    --res-border: #e4eee0;
}

/* General */

.residential-page,
.residential-page * {
    box-sizing: border-box;
}

.residential-section-description {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.8;
    color: #0c0c0c;
        font-size: 18px;
}

/* =========================================================
   Hero
========================================================= */

.residential-hero-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    padding: 100px 0;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 28, 12, 0.92) 0%,
            rgba(5, 28, 12, 0.75) 45%,
            rgba(5, 28, 12, 0.2) 100%
        ),
        url("../img/residential.jpg") center center / cover no-repeat;
}

.residential-hero-content {
    max-width: 720px;
}

.residential-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #b5ee8a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.residential-eyebrow span {
    display: inline-block;
    width: 35px;
    height: 3px;
    border-radius: 10px;
    background: var(--res-green);
}

.residential-hero-title {
    margin-bottom: 25px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1.12;
    font-weight: 700;
}

.residential-hero-title span {
    color: #9be66d;
}

.residential-hero-description {
    max-width: 620px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.8;
}

.residential-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Existing fv buttons may already be defined in my_styles.css.
   These declarations provide a safe page-level fallback. */

.residential-hero-buttons .fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.residential-hero-buttons .fv-btn-primary {
    color: #ffffff;
    background: var(--res-green);
    border: 1px solid var(--res-green);
}

.residential-hero-buttons .fv-btn-primary:hover {
    color: #ffffff;
    background: var(--res-dark-green);
    border-color: var(--res-dark-green);
    transform: translateY(-2px);
}

.residential-hero-buttons .fv-btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.residential-hero-buttons .fv-btn-secondary:hover {
    color: var(--res-dark);
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* =========================================================
   Introduction
========================================================= */

.residential-introduction-section {
    padding: 45px 0;
    background: #ffffff;
}

.residential-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #edf7e8;
}

.residential-image-card img {
    width: 100%;
    min-height: 430px;
    object-fit: cover;
    border-radius: 22px;
}

.residential-image-badge {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    color: #ffffff;
    background: rgba(20, 37, 26, 0.88);
    backdrop-filter: blur(8px);
}

.residential-image-badge > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--res-green);
    font-size: 20px;
}

.residential-image-badge strong,
.residential-image-badge small {
    display: block;
}

.residential-image-badge strong {
    margin-bottom: 3px;
    font-size: 16px;
}

.residential-image-badge small {
    color: rgba(255, 255, 255);
    font-size: 12px;
}

.residential-content-block p {
    color: #0c0c0c;
    line-height: 1.85;
}

.residential-content-block .section-title h1 span,
.residential-benefits-section .section-title h1 span,
.residential-system-section .section-title h1 span,
.residential-solutions-section .section-title h1 span,
.residential-savings-section .section-title h1 span,
.residential-process-section .section-title h1 span,
.residential-advantage-section .section-title h1 span,
.residential-faq-section .section-title h1 span {
    color: var(--res-green);
}

.residential-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--res-dark);
    font-size: 14px;
    font-weight: 600;
}

.residential-check-item i {
    color: var(--res-green);
    font-size: 17px;
}

/* =========================================================
   Benefits
========================================================= */

.residential-benefits-section {
    padding: 45px 0 !important;
    background: var(--res-light);
}

.residential-benefit-card {
    height: 100%;
    padding: 32px 27px;
    border: 1px solid var(--res-border);
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.residential-benefit-card:hover {
    border-color: rgba(85, 185, 7, 0.5);
    box-shadow: 0 15px 35px rgba(24, 70, 23, 0.08);
    transform: translateY(-5px);
}

.residential-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 15px;
    color: var(--res-green);
    background: #edf9e6;
    font-size: 27px;
}

.residential-benefit-card h4 {
    margin-bottom: 13px;
    color: var(--res-dark);
    font-size: 21px;
}

.residential-benefit-card p {
    margin-bottom: 0;
    color: #0c0c0c;
    font-size: 17px;
    line-height: 1.75;
}

/* =========================================================
   How Solar Works
========================================================= */

.residential-how-section {
    padding: 45px 0;
    background: #ffffff;
}

.residential-working-step {
    position: relative;
    display: flex;
    gap: 18px;
    margin-bottom: 27px;
}

.residential-working-step:last-child {
    margin-bottom: 0;
}

.residential-step-number {
    position: relative;
    z-index: 1;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--res-green), var(--res-blue));
    font-size: 14px;
    font-weight: 700;
}

.residential-working-step:not(:last-child)::after {
    position: absolute;
    top: 52px;
    left: 25px;
    width: 2px;
    height: calc(100% - 25px);
    background: #dcebd5;
    content: "";
}

.residential-step-content h4 {
    margin-bottom: 8px;
    color: var(--res-dark);
    font-size: 20px;
}

.residential-step-content p {
    margin-bottom: 0;
    color: #0c0c0c;
    font-size: 17px;
    line-height: 1.75;
}

.residential-working-image {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.residential-working-image img {
    width: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 22px;
}

.residential-working-overlay {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(20, 37, 26, 0.87);
}

.residential-working-overlay i {
    color: #9be66d;
    font-size: 25px;
}

.residential-working-overlay span {
    font-size: 15px;
    font-weight: 600;
}

/* =========================================================
   System Types
========================================================= */

.residential-system-section {
    padding: 45px 0;
    background: var(--res-light);
}

.residential-system-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--res-border);
    border-radius: 18px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.residential-system-card:hover {
    box-shadow: 0 15px 35px rgba(24, 70, 23, 0.09);
    transform: translateY(-5px);
}

.residential-system-card-header {
    padding: 32px 27px 25px;
    background: linear-gradient(135deg, #f0fae9, #eef8ff);
}

.residential-system-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--res-green), var(--res-blue));
    font-size: 27px;
}

.residential-system-card-header h3 {
    margin-bottom: 12px;
    color: var(--res-dark);
    font-size: 24px;
}

.residential-system-card-header p {
    margin-bottom: 0;
    color: var(--res-text);
    font-size: 17px;
    line-height: 1.75;
}

.residential-system-card-body {
    padding: 25px 27px 30px;
}

.residential-system-card-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.residential-system-card-body li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 24px;
    color: var(--res-text);
    font-size: 16px;
    line-height: 1.55;
}

.residential-system-card-body li:last-child {
    margin-bottom: 0;
}

.residential-system-card-body li::before {
    position: absolute;
    top: 2px;
    left: 0;
    color: var(--res-green);
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   Residential Solutions
========================================================= */

.residential-solutions-section {
    padding: 30px 0;
    background: #ffffff;
}

.residential-solution-card {
    position: relative;
    height: 100%;
    min-height: 280px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--res-dark);
}

.residential-solution-card img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    opacity: 0.7;
    transition: all 0.4s ease;
}

.residential-solution-card:hover img {
    opacity: 0.42;
    transform: scale(1.06);
}

.residential-solution-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(4, 20, 8, 0.92) 100%
    );
}

.residential-solution-content h4 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 22px;
}

.residential-solution-content p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   Savings and Finance
========================================================= */

.residential-savings-section {
    padding: 45px 0;
    background: var(--res-light);
}

.residential-finance-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 32px 28px;
    overflow: hidden;
    border: 1px solid var(--res-border);
    border-radius: 18px;
    color: var(--res-text);
    background: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.residential-finance-card:hover {
    color: var(--res-text);
    border-color: rgba(85, 185, 7, 0.45);
    box-shadow: 0 15px 35px rgba(24, 70, 23, 0.08);
    transform: translateY(-5px);
}

.residential-finance-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border-radius: 15px;
    color: var(--res-green);
    background: #edf9e6;
    font-size: 25px;
}

.residential-finance-number {
    position: absolute;
    top: 30px;
    right: 28px;
    color: #d9e8d1;
    font-size: 38px;
    font-weight: 700;
}

.residential-finance-card h3 {
    margin-bottom: 13px;
    color: var(--res-dark);
    font-size: 25px;
}

.residential-finance-card p {
    margin-bottom: 25px;
    color: var(--res-text);
    font-size: 17px;
    line-height: 1.75;
}

.residential-finance-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--res-green);
    font-size: 14px;
    font-weight: 700;
}

.residential-finance-link i {
    transition: transform 0.3s ease;
}

.residential-finance-card:hover .residential-finance-link i {
    transform: translateX(5px);
}

.residential-finance-note {
    padding: 16px 20px;
    border-left: 4px solid var(--res-green);
    border-radius: 8px;
    color: var(--res-text);
    background: rgba(85, 185, 7, 0.08);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   Installation Process
========================================================= */

.residential-process-section {
    padding: 40px 0;
    background: #ffffff;
}

.residential-process-card {
    position: relative;
    height: 100%;
    padding: 16px 17px;
    border: 1px solid var(--res-border);
    border-radius: 17px;
    background: #ffffff;
    text-align: center;
    transition: all 0.3s ease;
}

.residential-process-card:hover {
    box-shadow: 0 15px 30px rgba(24, 70, 23, 0.07);
    transform: translateY(-5px);
}

.residential-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--res-green), var(--res-blue));
    font-size: 25px;
}

.residential-process-number {
    display: block;
    margin-bottom: 10px;
    color: var(--res-green);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.residential-process-card h4 {
    margin-bottom: 12px;
    color: var(--res-dark);
    font-size: 19px;
}

.residential-process-card p {
    margin-bottom: 0;
    color: var(--res-text);
    font-size: 16px;
    line-height: 1.5;
}

/* =========================================================
   Future Volt Advantage
========================================================= */

.residential-advantage-section {
    padding: 100px 0;
    background: var(--res-light);
}

.residential-advantage-image {
    overflow: hidden;
    border-radius: 22px;
}

.residential-advantage-image img {
    width: 100%;
    min-height: 470px;
    object-fit: cover;
    border-radius: 22px;
}

.residential-advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.residential-advantage-item:last-child {
    margin-bottom: 0;
}

.residential-advantage-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    color: var(--res-green);
    background: #e6f6dc;
    font-size: 16px;
}

.residential-advantage-item h4 {
    margin-bottom: 7px;
    color: var(--res-dark);
    font-size: 19px;
}

.residential-advantage-item p {
    margin-bottom: 0;
    color: var(--res-text);
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   FAQ
========================================================= */

.residential-faq-section {
    padding: 40px 0;
    background: #ffffff;
}

.residential-faq-section .accordion-item {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--res-border);
    border-radius: 12px !important;
    background: #ffffff;
}

.residential-faq-section .accordion-button {
    padding: 21px 24px;
    color: var(--res-dark);
    background: #ffffff;
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
}

.residential-faq-section .accordion-button:not(.collapsed) {
    color: var(--res-dark-green);
    background: #f2faed;
}

.residential-faq-section .accordion-body {
    padding: 0 24px 15px;
    color: black;
    font-size: 16px;
    line-height: 1.5;
}

/* =========================================================
   Consultation
========================================================= */

.residential-consultation-section {
    padding: 0 0 40px;
    background: #ffffff;
}

.residential-consultation-box {
    padding: 60px 50px;
    overflow: hidden;
    border-radius: 22px;
    background:
        linear-gradient(
            100deg,
            rgba(5, 45, 15, 0.96),
            rgba(8, 101, 153, 0.9)
        ),
        url("../img/residential.jpg") center center / cover no-repeat;
}

.residential-consultation-box .sub-title {
    color: #b5ee8a !important;
}

.residential-consultation-box .fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 13px 26px;
    border-radius: 50px;
    color: #ffffff;
    background: var(--res-green);
    border: 1px solid var(--res-green);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.residential-consultation-box .fv-btn:hover {
    color: #ffffff;
    background: var(--res-dark-green);
    border-color: var(--res-dark-green);
    transform: translateY(-2px);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 991.98px) {

    .residential-hero-section {
        min-height: 560px;
        padding: 90px 0;
    }

    .residential-introduction-section,
    .residential-benefits-section,
    .residential-how-section,
    .residential-system-section,
    .residential-solutions-section,
    .residential-savings-section,
    .residential-process-section,
    .residential-advantage-section,
    .residential-faq-section {
        padding: 75px 0;
    }

    .residential-working-image {
        margin-top: 20px;
    }

    .residential-advantage-image {
        margin-bottom: 20px;
    }

    .residential-consultation-box {
        padding: 45px 35px;
    }

}

@media (max-width: 767.98px) {

    .residential-hero-section {
        min-height: 570px;
        padding: 75px 0;
        background-position: 65% center;
    }

    .residential-hero-description {
        font-size: 16px;
    }

    .residential-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .residential-hero-buttons .fv-btn {
        min-height: 48px;
        padding: 11px 21px;
    }

    .residential-introduction-section,
    .residential-benefits-section,
    .residential-how-section,
    .residential-system-section,
    .residential-solutions-section,
    .residential-savings-section,
    .residential-process-section,
    .residential-advantage-section,
    .residential-faq-section {
        padding: 60px 0;
    }

    .residential-image-card img,
    .residential-working-image img,
    .residential-advantage-image img {
        min-height: 300px;
    }

    .residential-image-badge {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 14px;
    }

    .residential-image-badge > i {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .residential-image-badge strong {
        font-size: 14px;
    }

    .residential-image-badge small {
        font-size: 11px;
    }

    .residential-consultation-section {
        padding-bottom: 60px;
    }

    .residential-consultation-box {
        padding: 40px 25px;
        text-align: center;
    }

    .residential-consultation-box .section-title {
        text-align: center !important;
    }

}

@media (max-width: 575.98px) {

    .residential-hero-title {
        font-size: 35px;
    }

    .residential-eyebrow {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .residential-section-description {
        font-size: 14px;
    }

    .residential-benefit-card, 
    .residential-system-card-header,
    .residential-system-card-body,
    .residential-finance-card {
        padding: 25px 21px;
    }

    .residential-finance-number {
        top: 24px;
        right: 21px;
    }

    .residential-faq-section .accordion-button {
        padding: 18px;
        font-size: 15px;
    }

    .residential-faq-section .accordion-body {
        padding: 0 18px 18px;
        font-size: 14px;
    }

}
/* =========================================================
   RESIDENTIAL SOLAR SYSTEM COMPARISON
   FutureVolt Green Theme
========================================================= */

.residential-comparison-section {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fcf5 48%,
            #ffffff 100%
        );
}


/* =========================================================
   SECTION HEADING
========================================================= */

.residential-comparison-heading {
    max-width: 850px;
    margin: 0 auto 22px;
}

.residential-comparison-heading .sub-style {
    margin-bottom: 15px;
}

.residential-comparison-heading .sub-title {
    color: #53b703 !important;
}

.residential-comparison-heading h1 {
    color: #17351F;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 18px;
}

.residential-comparison-heading h1 span {
    display: inline;
    color: #53b703;
}

.residential-comparison-intro {
    max-width: 700px;
    margin: 0 auto;
    color: #0c0e0c;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   RESIDENTIAL PREFERENCE BANNER
========================================================= */

.residential-preference-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    /*max-width: 1050px;*/ 
    margin: 0 auto 35px;
    padding: 25px 30px;
    border: 1px solid #cce8bb;
    border-left: 5px solid #53b703;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #f4fbea 0%,
            #ffffff 100%
        );
    box-shadow:
        0 10px 30px rgba(23, 53, 31, 0.045);
    overflow: hidden;
}

.residential-preference-banner::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    background: rgba(85, 185, 7, 0.06);
    pointer-events: none;
}

.residential-preference-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #53b703;
    color: #ffffff;
    font-size: 23px;
    box-shadow:
        0 8px 20px rgba(83, 183, 3, 0.18);
}

.residential-preference-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.residential-preference-label {
    display: block;
    margin-bottom: 6px;
    color: #53b703;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.residential-preference-content h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: #17351F;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.residential-preference-content h3 i {
    color: #53b703;
    font-size: 19px;
}

.residential-preference-content p {
    max-width: 850px;
    margin: 0 0 10px;
    color: #0c0c0c;
    font-size: 16px;
    line-height: 1.7;
}

.residential-preference-content small {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #0c0c0c;
    font-size: 15px;
    line-height: 1.6;
}

.residential-preference-content small i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #53b703;
}


/* =========================================================
   TABLE OUTER WRAPPER
========================================================= */

.residential-comparison-table-wrapper {
    width: 100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #DDEBD7;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 15px 45px rgba(23, 53, 31, 0.065);
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   COMPARISON TABLE
========================================================= */

.residential-comparison-table {
    width: 100%;
    min-width: 950px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #40534B;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.residential-comparison-table thead th {
    position: relative;
    padding: 28px 18px 25px;
    border-bottom: 1px solid #DDEBD7;
    background: #ffffff;
    color: #17351F;
    text-align: center;
    vertical-align: middle;
}

.residential-comparison-table thead th:first-child {
    width: 22%;
    background: #f8fcf5;
    text-align: left;
}

.residential-comparison-table thead th:not(:first-child) {
    width: 26%;
}

.residential-comparison-table thead th:nth-child(2) {
    background:
        linear-gradient(
            180deg,
            #f1faea 0%,
            #ffffff 100%
        );
}

.residential-comparison-table thead th:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #53b703;
}

.comparison-header-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #EEF9E8;
    color: #53b703;
    font-size: 21px;
    transition: all 0.3s ease;
}

.residential-comparison-table thead th:nth-child(2) .comparison-header-icon {
    background: #53b703;
    color: #ffffff;
}

.comparison-system-title {
    color: #17351F;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}

.comparison-recommended-badge,
.comparison-backup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 700;
}

.comparison-recommended-badge {
    border: 1px solid #b9dfa2;
    background: #EEF9E8;
    color: #3F8F05;
}

.comparison-backup-badge {
    border: 1px solid #d9e7d1;
    background: #f7faf5;
    color: #0c0c0c;
}

.comparison-recommended-badge i,
.comparison-backup-badge i {
    font-size: 9px;
}


/* =========================================================
   TABLE BODY CELLS
========================================================= */

.residential-comparison-table tbody th,
.residential-comparison-table tbody td {
    padding: 18px 18px;
    border-bottom: 1px solid #edf3e9;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.65;
}

.residential-comparison-table tbody th {
    width: 22%;
    background: #f8fcf5;
    color: black;
    font-size: 19px;
    font-weight: 700;
    text-align: left;
}

.residential-comparison-table tbody td {
    width: 26%;
    color: black;
    font-weight: 400;
    text-align: left;
    background: #ffffff;
    font-size: 16px;
}

.residential-comparison-table tbody td:nth-child(3) {
    background: #fcfefb;
}

.residential-comparison-table tbody td:nth-child(2) {
    background:
        linear-gradient(
            90deg,
            rgba(238, 249, 232, 0.40),
            rgba(255, 255, 255, 0.90)
        );
}

.residential-comparison-table tbody tr:last-child th,
.residential-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.residential-comparison-table tbody td strong {
    color: #17351F;
    font-weight: 700;
}


/* =========================================================
   HIGHLIGHT ROWS
========================================================= */

.residential-comparison-table .comparison-highlight-row th,
.residential-comparison-table .comparison-highlight-row td {
    background: #f8fcf5;
}

.residential-comparison-table .comparison-highlight-row td:nth-child(2) {
    background: #f1f9ec;
}

.residential-comparison-table .comparison-best-suited-row th {
    color: #3F8F05;
    background: #f1f9ec;
}

.residential-comparison-table .comparison-best-suited-row td:nth-child(2) {
    background: #eaf7e3;
}

.residential-comparison-table .comparison-best-suited-row td {
    background: #fbfef9;
}


/* =========================================================
   STATUS LABELS
========================================================= */

.comparison-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
}

.comparison-status i {
    font-size: 11px;
}

.comparison-status-yes {
    color: #3F8F05;
}

.comparison-status-no {
    color: #819088;
}


/* =========================================================
   COST LABELS
========================================================= */

.comparison-cost {
    display: inline-block;
    color: #50665B;
    font-size: 14px;
    font-weight: 700;
}

.comparison-cost-low {
    color: #3F8F05;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.residential-comparison-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
   /* max-width: 1050px;*/
    margin: 28px auto 0;
    padding: 22px 25px;
    border: 1px solid #DDEBD7;
    border-radius: 16px;
    background: #ffffff;
}

.residential-comparison-note-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #EEF9E8;
    color: #53b703;
    font-size: 18px;
}

.residential-comparison-note strong {
    display: block;
    margin-bottom: 6px;
    color: #17351F;
    font-size: 20px;
    font-weight: 700;
}

.residential-comparison-note p {
    margin: 0;
    color: black;
    font-size: 15px;
    line-height: 1.5;
}


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

.residential-comparison-cta {
    max-width: 1000px;
    margin: 42px auto 0;
}

.residential-comparison-cta h4 {
    margin-bottom: 8px;
    color: #17351F;
    font-size: 24px;
    font-weight: 700;
}

.residential-comparison-cta p {
    margin-bottom: 15px;
    color: #0c0c0c;
    font-size: 17px;
    line-height: 1.7;
}

.residential-comparison-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 25px;
    border: 1px solid #53b703;
    border-radius: 10px;
    background: #53b703;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.residential-comparison-btn:hover {
    background: #3F8F05;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow:
        0 10px 25px rgba(83, 183, 3, 0.20);
}

.residential-comparison-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.residential-comparison-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

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

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

.residential-preference-banner,
.residential-comparison-table-wrapper,
.residential-comparison-note,
.residential-comparison-cta {
    animation: residentialComparisonFadeUp 0.7s ease both;
}

.residential-comparison-table-wrapper {
    animation-delay: 0.1s;
}

.residential-comparison-note {
    animation-delay: 0.2s;
}

.residential-comparison-cta {
    animation-delay: 0.3s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .residential-comparison-section {
        padding: 75px 0;
    }

    .residential-comparison-heading h1 {
        font-size: 36px;
    }

    .residential-preference-banner {
        padding: 23px;
    }

    .residential-comparison-table {
        min-width: 900px;
    }

    .residential-comparison-table thead th {
        padding: 24px 14px;
    }

    .residential-comparison-table tbody th,
    .residential-comparison-table tbody td {
        padding: 16px 14px;
    }

}


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

@media (max-width: 767.98px) {

    .residential-comparison-section {
        padding: 60px 0;
    }

    .residential-comparison-heading {
        margin-bottom: 30px;
    }

    .residential-comparison-heading h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .residential-comparison-intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .residential-preference-banner {
        flex-direction: column;
        gap: 15px;
        padding: 22px 20px;
        margin-bottom: 25px;
    }

    .residential-preference-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 20px;
    }

    .residential-preference-content h3 {
        font-size: 21px;
    }

    .residential-preference-content p {
        font-size: 14px;
    }

    .residential-preference-content small {
        font-size: 10px;
    }

    .residential-comparison-table-wrapper {
        border-radius: 14px;
    }

    .residential-comparison-table {
        min-width: 850px;
    }

    .residential-comparison-table thead th {
        padding: 22px 12px;
    }

    .residential-comparison-table tbody th,
    .residential-comparison-table tbody td {
        padding: 15px 12px;
        font-size: 11px;
    }

    .residential-comparison-table tbody th {
        font-size: 11px;
    }

    .comparison-system-title {
        font-size: 17px;
    }

    .comparison-header-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .comparison-recommended-badge,
    .comparison-backup-badge {
        font-size: 8px;
        padding: 5px 7px;
    }

    .comparison-status {
        font-size: 10px;
    }

    .residential-comparison-note {
        gap: 12px;
        padding: 18px;
        margin-top: 22px;
    }

    .residential-comparison-note-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .residential-comparison-note strong {
        font-size: 14px;
    }

    .residential-comparison-note p {
        font-size: 11px;
    }

    .residential-comparison-cta {
        margin-top: 32px;
    }

    .residential-comparison-cta h4 {
        font-size: 20px;
    }

    .residential-comparison-cta p {
        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .residential-comparison-heading h1 {
        font-size: 27px;
    }

    .residential-preference-content h3 {
        font-size: 19px;
    }

    .residential-comparison-table {
        min-width: 820px;
    }

    .residential-comparison-table thead th {
        padding: 20px 10px;
    }

    .residential-comparison-table tbody th,
    .residential-comparison-table tbody td {
        padding: 14px 10px;
        font-size: 10px;
    }

    .comparison-system-title {
        font-size: 15px;
    }

    .comparison-header-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .comparison-recommended-badge,
    .comparison-backup-badge {
        font-size: 7px;
    }

    .residential-comparison-note {
        align-items: flex-start;
    }

    .residential-comparison-btn {
        width: 100%;
        padding: 13px 18px;
    }

}




/* =========================================================
   Future Volt Commercial Page
   Matches the Residential CSS Design System
========================================================= */

:root {
    --com-green: #55B907;
    --com-dark-green: #2e7608;
    --com-blue: #0879c9;
    --com-dark: #14251a;
    --com-text: #5f6b63;
    --com-light: #f4faef;
    --com-border: #e4eee0;
}

/* ---------------------------------------------------------
   General
--------------------------------------------------------- */

.commercial-page,
.commercial-page * {
    box-sizing: border-box;
}

.commercial-section-description {
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
    color: black;
    line-height: 1.4;
    font-size:17px;
}

/* Section heading green highlight */
.commercial-content-block .section-title h1 span,
.commercial-benefits-section .section-title h1 span,
.commercial-system-section .section-title h1 span,
.commercial-solutions-section .section-title h1 span,
.commercial-process-section .section-title h1 span,
.commercial-advantage-section .section-title h1 span,
.commercial-faq-section .section-title h1 span {
    color: var(--com-green);
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */

.commercial-hero-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    padding: 100px 0;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 28, 12, 0.92) 0%,
            rgba(5, 28, 12, 0.75) 45%,
            rgba(5, 28, 12, 0.2) 100%
        ),
        url("../img/commercial.jpg") center center / cover no-repeat;
}

.commercial-hero-content {
    max-width: 720px;
}

.commercial-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #b5ee8a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.commercial-eyebrow::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 3px;
    border-radius: 10px;
    background: var(--com-green);
}

.commercial-hero-title {
    margin-bottom: 25px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1.12;
    font-weight: 700;
}

.commercial-hero-title span {
    color: #9be66d;
}

.commercial-hero-description {
    max-width: 620px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.8;
}

.commercial-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Hero buttons */
.commercial-hero-buttons .fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.commercial-hero-buttons .fv-btn-primary {
    color: #ffffff;
    background: var(--com-green);
    border: 1px solid var(--com-green);
}

.commercial-hero-buttons .fv-btn-primary:hover {
    color: #ffffff;
    background: var(--com-dark-green);
    border-color: var(--com-dark-green);
    transform: translateY(-2px);
}

.commercial-hero-buttons .fv-btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.commercial-hero-buttons .fv-btn-secondary:hover {
    color: var(--com-dark);
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Introduction
--------------------------------------------------------- */

.commercial-introduction-section {
    padding: 40px 0;
    background: #ffffff;
}

.commercial-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #edf7e8;
}

.commercial-image-card img {
    width: 100%;
    min-height: 430px;
    object-fit: cover;
    border-radius: 22px;
}

.commercial-image-badge {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    color: #ffffff;
    background: rgba(20, 37, 26, 0.88);
    backdrop-filter: blur(8px);
}

.commercial-image-badge > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--com-green);
    font-size: 20px;
}

.commercial-image-badge strong,
.commercial-image-badge small {
    display: block;
}

.commercial-image-badge strong {
    margin-bottom: 3px;
    font-size: 16px;
}

.commercial-image-badge small {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

.commercial-content-block p {
    color: black;
    line-height: 1.4;
}

.commercial-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--com-dark);
    font-size: 14px;
    font-weight: 600;
}

.commercial-check-item i {
    color: var(--com-green);
    font-size: 17px;
}

/* ---------------------------------------------------------
   Benefits
--------------------------------------------------------- */

.commercial-benefits-section {
    padding: 40px 0;
    background: var(--com-light);
}

.commercial-benefit-card {
    height: 100%;
    padding: 32px 27px;
    border: 1px solid var(--com-border);
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.commercial-benefit-card:hover {
    border-color: rgba(85, 185, 7, 0.5);
    box-shadow: 0 15px 35px rgba(24, 70, 23, 0.08);
    transform: translateY(-5px);
}

.commercial-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 15px;
    color: var(--com-green);
    background: #edf9e6;
    font-size: 27px;
}

.commercial-benefit-card h4,
.commercial-benefit-card h3 {
    margin-bottom: 13px;
    color: black;
    font-size: 21px;
}

.commercial-benefit-card p {
    margin-bottom: 0;
    color: black;
    font-size: 16px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   How Solar Works
--------------------------------------------------------- */

.commercial-how-section {
    padding: 40px 0;
    background: #ffffff;
}

.commercial-working-step {
    position: relative;
    display: flex;
    gap: 18px;
    margin-bottom: 27px;
}

.commercial-working-step:last-child {
    margin-bottom: 0;
}

.commercial-step-number {
    position: relative;
    z-index: 1;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--com-green),
        var(--com-blue)
    );
    font-size: 14px;
    font-weight: 700;
}

.commercial-working-step:not(:last-child)::after {
    position: absolute;
    top: 52px;
    left: 25px;
    width: 2px;
    height: calc(100% - 25px);
    background: #dcebd5;
    content: "";
}

.commercial-step-content h4,
.commercial-step-content h3 {
    margin-bottom: 8px;
    color: var(--com-dark);
    font-size: 20px;
}

.commercial-step-content p {
    margin-bottom: 0;
    color: black;
    font-size: 16px;
    line-height: 1.75;
}

.commercial-working-image {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.commercial-working-image img {
    width: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 22px;
}

.commercial-working-overlay {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(20, 37, 26, 0.87);
}

.commercial-working-overlay i {
    color: #9be66d;
    font-size: 25px;
}

.commercial-working-overlay span {
    font-size: 15px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   System Types
--------------------------------------------------------- */

.commercial-system-section {
    padding: 40px 0;
    background: var(--com-light);
}

.commercial-system-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--com-border);
    border-radius: 18px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.commercial-system-card:hover {
    box-shadow: 0 15px 35px rgba(24, 70, 23, 0.09);
    transform: translateY(-5px);
}

.commercial-system-card-header {
    padding: 32px 27px 25px;
    background: linear-gradient(
        135deg,
        #f0fae9,
        #eef8ff
    );
}

.commercial-system-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--com-green),
        var(--com-blue)
    );
    font-size: 27px;
}

.commercial-system-card-header h3,
.commercial-system-card-header h4 {
    margin-bottom: 12px;
    color: var(--com-dark);
    font-size: 24px;
}

.commercial-system-card-header p {
    margin-bottom: 0;
    color: var(--com-text);
    font-size: 15px;
    line-height: 1.75;
}

.commercial-system-card-body {
    padding: 25px 27px 30px;
}

.commercial-system-card-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.commercial-system-card-body li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 24px;
    color: var(--com-text);
    font-size: 14px;
    line-height: 1.55;
}

.commercial-system-card-body li:last-child {
    margin-bottom: 0;
}

.commercial-system-card-body li::before {
    position: absolute;
    top: 2px;
    left: 0;
    color: var(--com-green);
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
}

/* ---------------------------------------------------------
   Commercial Solutions
--------------------------------------------------------- */

.commercial-solutions-section {
    padding: 30px 0;
    background: #ffffff;
}

.commercial-solution-card {
    position: relative;
    height: 100%;
    min-height: 280px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--com-dark);
}

.commercial-solution-card img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    opacity: 0.7;
    transition: all 0.4s ease;
}

.commercial-solution-card:hover img {
    opacity: 0.42;
    transform: scale(1.06);
}

.commercial-solution-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(4, 20, 8, 0.92) 100%
    );
}

.commercial-solution-content h4,
.commercial-solution-content h3 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 22px;
}

.commercial-solution-content p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   Installation Process
--------------------------------------------------------- */

.commercial-process-section {
    padding: 40px 0;
    background: #ffffff;
}

.commercial-process-card {
    position: relative;
    height: 100%;
    padding: 17px 15px;
    border: 1px solid var(--com-border);
    border-radius: 17px;
    background: #ffffff;
    text-align: center;
    transition: all 0.3s ease;
}

.commercial-process-card:hover {
    box-shadow: 0 15px 30px rgba(24, 70, 23, 0.07);
    transform: translateY(-5px);
}

.commercial-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--com-green),
        var(--com-blue)
    );
    font-size: 25px;
}

.commercial-process-number {
    display: block;
    margin-bottom: 10px;
    color: var(--com-green);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.commercial-process-card h4,
.commercial-process-card h3 {
    margin-bottom: 12px;
    color: var(--com-dark);
    font-size: 19px;
}

.commercial-process-card p {
    margin-bottom: 0;
    color: black;
    font-size: 16px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   Future Volt Advantage
--------------------------------------------------------- */

.commercial-advantage-section {
    padding: 40px 0;
    background: var(--com-light);
}

.commercial-advantage-image {
    overflow: hidden;
    border-radius: 22px;
}

.commercial-advantage-image img {
    width: 100%;
    min-height: 470px;
    object-fit: cover;
    border-radius: 22px;
}

.commercial-advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.commercial-advantage-item:last-child {
    margin-bottom: 0;
}

.commercial-advantage-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    color: var(--com-green);
    background: #e6f6dc;
    font-size: 16px;
}

.commercial-advantage-item h4,
.commercial-advantage-item h3 {
    margin-bottom: 7px;
    color: var(--com-dark);
    font-size: 19px;
}

.commercial-advantage-item p {
    margin-bottom: 0;
    color: black;
    font-size: 15px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.commercial-faq-section {
    padding: 40px 0;
    background: #ffffff;
}

.commercial-faq-section .accordion-item {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--com-border);
    border-radius: 12px !important;
    background: #ffffff;
}

.commercial-faq-section .accordion-button {
    padding: 21px 24px;
    color: var(--com-dark);
    background: #ffffff;
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
}

.commercial-faq-section .accordion-button:not(.collapsed) {
    color: var(--com-dark-green);
    background: #f2faed;
}

.commercial-faq-section .accordion-button:focus {
    box-shadow: none;
}

.commercial-faq-section .accordion-body {
    padding: 0 21px 13px;
    color: black;
    font-size: 17px;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   Consultation
--------------------------------------------------------- */

.commercial-consultation-section {
    padding: 0 0 100px;
    background: #ffffff;
}

.commercial-consultation-wrapper {
    padding: 60px 50px;
    overflow: hidden;
    border-radius: 22px;
    background:
        linear-gradient(
            100deg,
            rgba(5, 45, 15, 0.96),
            rgba(8, 101, 153, 0.9)
        ),
        url("../img/commercial.jpg") center center / cover no-repeat;
}

.commercial-consultation-wrapper .sub-title,
.commercial-consultation-wrapper .sub-style {
    color: #b5ee8a !important;
}

.commercial-consultation-wrapper .section-title h1,
.commercial-consultation-wrapper .section-title h2,
.commercial-consultation-wrapper p {
    color: #ffffff;
}

.commercial-consultation-wrapper .fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 13px 26px;
    border-radius: 50px;
    color: #ffffff;
    background: var(--com-green);
    border: 1px solid var(--com-green);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.commercial-consultation-wrapper .fv-btn:hover {
    color: #ffffff;
    background: var(--com-dark-green);
    border-color: var(--com-dark-green);
    transform: translateY(-2px);
}

/* Form styling if present */
.commercial-enquiry-form .form-control,
.commercial-enquiry-form .form-select {
    border: 1px solid var(--com-border);
    border-radius: 8px;
}

.commercial-enquiry-form .form-control:focus,
.commercial-enquiry-form .form-select:focus {
    border-color: var(--com-green);
    box-shadow: 0 0 0 0.2rem rgba(85, 185, 7, 0.15);
}

.commercial-enquiry-form .btn-primary {
    color: #ffffff;
    background: var(--com-green);
    border-color: var(--com-green);
}

.commercial-enquiry-form .btn-primary:hover {
    color: #ffffff;
    background: var(--com-dark-green);
    border-color: var(--com-dark-green);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 991.98px) {
    .commercial-hero-section {
        min-height: 560px;
        padding: 90px 0;
    }

    .commercial-introduction-section,
    .commercial-benefits-section,
    .commercial-how-section,
    .commercial-system-section,
    .commercial-solutions-section,
    .commercial-process-section,
    .commercial-advantage-section,
    .commercial-faq-section {
        padding: 30px 0;
    }

    .commercial-working-image {
        margin-top: 20px;
    }

    .commercial-advantage-image {
        margin-bottom: 20px;
    }

    .commercial-consultation-wrapper {
        padding: 45px 35px;
    }
}

@media (max-width: 767.98px) {
    .commercial-hero-section {
        min-height: 570px;
        padding: 75px 0;
        background-position: 65% center;
    }

    .commercial-hero-description {
        font-size: 16px;
    }

    .commercial-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .commercial-hero-buttons .fv-btn {
        min-height: 48px;
        padding: 11px 21px;
    }

    .commercial-introduction-section,
    .commercial-benefits-section,
    .commercial-how-section,
    .commercial-system-section,
    .commercial-solutions-section,
    .commercial-process-section,
    .commercial-advantage-section,
    .commercial-faq-section {
        padding: 60px 0;
    }

    .commercial-image-card img,
    .commercial-working-image img,
    .commercial-advantage-image img {
        min-height: 300px;
    }

    .commercial-image-badge {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 14px;
    }

    .commercial-image-badge > i {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .commercial-image-badge strong {
        font-size: 14px;
    }

    .commercial-image-badge small {
        font-size: 11px;
    }

    .commercial-consultation-section {
        padding-bottom: 60px;
    }

    .commercial-consultation-wrapper {
        padding: 40px 25px;
        text-align: center;
    }

    .commercial-consultation-wrapper .section-title {
        text-align: center !important;
    }
}

@media (max-width: 575.98px) {
    .commercial-hero-title {
        font-size: 35px;
    }

    .commercial-eyebrow {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .commercial-section-description {
        font-size: 14px;
    }

    .commercial-benefit-card,
    .commercial-system-card-header,
    .commercial-system-card-body,
    .commercial-process-card {
        padding: 25px 21px;
    }

    .commercial-faq-section .accordion-button {
        padding: 18px;
        font-size: 15px;
    }

    .commercial-faq-section .accordion-body {
        padding: 0 18px 18px;
        font-size: 14px;
    }
}
/* =====================================================
   COMMERCIAL SOLAR SYSTEM COMPARISON
===================================================== */

.commercial-comparison-section {
    position: relative;
    padding: 30px 0 20px;
    overflow: hidden;
    background: #ffffff;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.commercial-comparison-heading {
    max-width: 850px;
    margin: 0 auto 40px;
}

.commercial-comparison-heading .sub-title {
    color: #53b703 !important;
}

.commercial-comparison-heading h1 {
    color: #17351F;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
}

.commercial-comparison-heading h1 span {
    color: #53b703;
}

.commercial-comparison-intro {
    max-width: 1000px;
    margin: 0 auto;
    color: #0c0c0c;
    font-size: 16px;
    line-height: 1.4;
}


/* =====================================================
   COMMERCIAL RECOMMENDATION BANNER
===================================================== */

.commercial-preference-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 35px;
    padding: 28px 32px;
    border: 1px solid #DDEBD7;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #F4FBEF 0%,
            #F8FCF5 55%,
            #EEF8FF 100%
        );
    box-shadow:
        0 12px 35px rgba(23, 53, 31, 0.045);
    overflow: hidden;
}

.commercial-preference-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background:
        linear-gradient(
            180deg,
            #53b703,
            #0d6efd
        );
}

.commercial-preference-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #53b703,
            #0d6efd
        );
    color: #ffffff;
    font-size: 25px;
    box-shadow:
        0 8px 20px rgba(85, 183, 3, 0.18);
}

.commercial-preference-content {
    flex: 1;
    min-width: 0;
}

.commercial-preference-label {
    display: block;
    margin-bottom: 8px;
    color: #53b703;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.commercial-preference-content h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    color: #17351F;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
}

.commercial-preference-content h3 > i {
    color: #53b703;
    font-size: 22px;
}

.commercial-recommendation-divider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #EAF6E2;
    color: #3F8F05;
    font-size: 18px;
    font-weight: 700;
}

.commercial-preference-content p {
    max-width: 1000px;
    margin: 0 0 12px;
    color: black;
    font-size: 16px;
    line-height: 1.4;
}

.commercial-preference-content small {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: black;
    font-size: 15px;
    line-height: 1.5;
}

.commercial-preference-content small i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #53b703;
}


/* =====================================================
   COMPARISON TABLE WRAPPER
===================================================== */

.commercial-comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 35px;
    border: 1px solid #DDEBD7;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 12px 35px rgba(23, 53, 31, 0.045);
    -webkit-overflow-scrolling: touch;
}


/* =====================================================
   COMPARISON TABLE
===================================================== */

.commercial-comparison-table {
    width: 100%;
    min-width: 1050px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    color: #40534B;
    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   TABLE HEADER
===================================================== */

.commercial-comparison-table thead th {
    position: relative;
    vertical-align: top;
    padding: 28px 20px 25px;
    border-bottom: 1px solid #DDEBD7;
    background: #F8FCF5;
    text-align: center;
}

.commercial-comparison-table thead th:first-child {
    border-top-left-radius: 18px;
}

.commercial-comparison-table thead th:last-child {
    border-top-right-radius: 18px;
}

.commercial-comparison-table .comparison-feature-column {
    width: 220px;
    min-width: 220px;
    padding: 28px 22px;
    background: #F5FAF2;
    color: black;
    font-size: 18px;
    font-weight: 800;
    text-align: left;
}


/* =====================================================
   SYSTEM HEADER COLUMNS
===================================================== */

.commercial-comparison-table .comparison-system-column {
    width: 275px;
    min-width: 275px;
    background: #ffffff;
    transition: background 0.3s ease;
}

.commercial-comparison-table .comparison-system-column.comparison-on-grid {
    background:
        linear-gradient(
            180deg,
            #EEF9E8 0%,
            #FFFFFF 100%
        );
    border-top: 4px solid #53b703;
}

.commercial-comparison-table .comparison-system-column.comparison-hybrid {
    background:
        linear-gradient(
            180deg,
            #EEF8FF 0%,
            #FFFFFF 100%
        );
    border-top: 4px solid #0d6efd;
}

.comparison-header-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: #EEF9E8;
    color: #53b703;
    font-size: 25px;
}

.comparison-system-column:not(.comparison-on-grid):not(.comparison-hybrid)
.comparison-header-icon {
    background: #F1F3F5;
    color: #0c0c0c;
}

.comparison-system-column.comparison-hybrid .comparison-header-icon {
    background: #EAF4FF;
    color: #0d6efd;
}

.comparison-system-title {
    margin-bottom: 12px;
    color: #17351F;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
}


/* =====================================================
   RECOMMENDATION BADGES
===================================================== */

.comparison-recommended-badge,
.comparison-backup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    max-width: 235px;
    padding: 6px 11px;
    border-radius: 30px;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
}

.comparison-recommended-badge {
    border: 1px solid rgba(85, 183, 3, 0.25);
    background: #EAF6E2;
    color: #3F8F05;
}

.comparison-backup-badge {
    border: 1px solid rgba(13, 110, 253, 0.18);
    background: #EAF4FF;
    color: #0d6efd;
}

.comparison-recommended-badge i,
.comparison-backup-badge i {
    font-size: 10px;
}


/* =====================================================
   TABLE BODY
===================================================== */

.commercial-comparison-table tbody th,
.commercial-comparison-table tbody td {
    padding: 20px 20px;
    border-bottom: 1px solid #EDF3E9;
    vertical-align: middle;
}

.commercial-comparison-table tbody th {
    width: 220px;
    min-width: 220px;
    background: #FBFDF9;
    color: black;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    text-align: left;
}

.commercial-comparison-table tbody td {
    width: 275px;
    min-width: 275px;
    background: #ffffff;
    color: black;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
}

.commercial-comparison-table tbody td strong {
    color: #17351F;
    font-weight: 700;
}

.commercial-comparison-table tbody tr:last-child th,
.commercial-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.commercial-comparison-table tbody tr:hover th,
.commercial-comparison-table tbody tr:hover td {
    background: #FAFDF8;
}


/* =====================================================
   HIGHLIGHTED ROWS
===================================================== */

.commercial-comparison-table .comparison-highlight-row th,
.commercial-comparison-table .comparison-highlight-row td {
    background: #FFFDF4;
}

.commercial-comparison-table .comparison-highlight-row th {
    color: #6B5A19;
}

.commercial-comparison-table .comparison-best-suited-row th,
.commercial-comparison-table .comparison-best-suited-row td {
    background:
        linear-gradient(
            90deg,
            #F5FAF2 0%,
            #FFFFFF 100%
        );
}

.commercial-comparison-table .comparison-best-suited-row th {
    color: #3F8F05;
}


/* =====================================================
   STATUS LABELS
===================================================== */

.comparison-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.comparison-status i {
    font-size: 11px;
}

.comparison-status-yes {
    color: #3F8F05;
}

.comparison-status-no {
    color: #A56A00;
}


/* =====================================================
   COST LABELS
===================================================== */

.comparison-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 30px;
    background: #F1F3F5;
    color: #0c0c0c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.comparison-cost-low {
    background: #EAF6E2;
    color: #3F8F05;
}

.comparison-cost-high {
    background: #EAF4FF;
    color: #0d6efd;
}


/* =====================================================
   BOTTOM GUIDANCE NOTE
===================================================== */

.commercial-comparison-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 35px;
    padding: 25px 28px;
    border: 1px solid #DDEBD7;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #F8FCF5,
            #FFFFFF
        );
}

.commercial-comparison-note-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #EEF9E8;
    color: #53b703;
    font-size: 21px;
}

.commercial-comparison-note strong {
    display: block;
    margin-bottom: 8px;
    color: #17351F;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;
}

.commercial-comparison-note p {
    margin: 0;
    color: black;
    font-size: 16px;
    line-height: 1.7;
}


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

.commercial-comparison-cta {
    padding-top: 5px;
}

.commercial-comparison-cta h4 {
    margin: 0 0 10px;
    color: #17351F;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.commercial-comparison-cta p {
    max-width: 1500px;
    margin: 0 auto 12px;
    color: black;
    font-size: 17px;
    line-height: 1.7;
}

.commercial-comparison-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 24px;
    border-radius: 50px;
    background: #53b703;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    box-shadow:
        0 10px 25px rgba(85, 183, 3, 0.18);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.commercial-comparison-btn:hover {
    background: #3F8F05;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow:
        0 15px 30px rgba(85, 183, 3, 0.25);
}

.commercial-comparison-btn i {
    transition: transform 0.3s ease;
}

.commercial-comparison-btn:hover i {
    transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991.98px) {

    .commercial-comparison-section {
        padding: 70px 0 75px;
    }

    .commercial-comparison-heading h1 {
        font-size: 38px;
    }

    .commercial-preference-banner {
        padding: 25px;
    }

    .commercial-comparison-table {
        min-width: 1000px;
    }

}


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

@media (max-width: 767.98px) {

    .commercial-comparison-section {
        padding: 60px 0 65px;
    }

    .commercial-comparison-heading {
        margin-bottom: 35px;
    }

    .commercial-comparison-heading h1 {
        font-size: 32px;
    }

    .commercial-comparison-intro {
        font-size: 14px;
    }

    .commercial-preference-banner {
        flex-direction: column;
        gap: 18px;
        padding: 25px 22px;
        margin-bottom: 28px;
    }

    .commercial-preference-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 22px;
    }

    .commercial-preference-content h3 {
        font-size: 23px;
    }

    .commercial-preference-content p {
        font-size: 14px;
    }

    .commercial-preference-content small {
        font-size: 10px;
    }

    .commercial-comparison-table-wrapper {
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .commercial-comparison-table {
        min-width: 1000px;
        font-size: 12px;
    }

    .commercial-comparison-table thead th {
        padding: 24px 15px 22px;
    }

    .commercial-comparison-table tbody th,
    .commercial-comparison-table tbody td {
        padding: 18px 15px;
    }

    .commercial-comparison-note {
        gap: 14px;
        padding: 22px 20px;
    }

    .commercial-comparison-note-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 18px;
    }

    .commercial-comparison-note strong {
        font-size: 14px;
    }

    .commercial-comparison-note p {
        font-size: 12px;
    }

    .commercial-comparison-cta h4 {
        font-size: 22px;
    }

    .commercial-comparison-cta p {
        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .commercial-comparison-heading h1 {
        font-size: 29px;
    }

    .commercial-preference-banner {
        padding: 22px 18px;
    }

    .commercial-preference-content h3 {
        font-size: 21px;
        gap: 7px;
    }

    .commercial-preference-content h3 > i {
        font-size: 18px;
    }

    .commercial-recommendation-divider {
        width: 22px;
        height: 22px;
        font-size: 15px;
    }

    .commercial-comparison-note {
        align-items: flex-start;
    }

    .commercial-comparison-note-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
        font-size: 16px;
    }

    .commercial-comparison-cta h4 {
        font-size: 20px;
    }

}
/* =========================================================
   FUTURE VOLT — INDUSTRIAL SOLAR PAGE
   Common green theme
========================================================= */

:root {
    --industrial-green: #53b703;
    --industrial-green-dark: #3f8f05;
    --industrial-green-light: #eef9e8;
    --industrial-bg: #f8fcf5;
    --industrial-heading: #17351f;
    --industrial-text: #0c0c0c;
    --industrial-border: #ddebd7;
    --industrial-white: #ffffff;
}


/* =========================================================
   COMMON INDUSTRIAL SECTIONS
========================================================= */

.industrial-introduction-section,
.industrial-benefits-section,
.industrial-how-section,
.industrial-system-section,
.industrial-solutions-section,
.industrial-savings-section,
.industrial-process-section,
.industrial-advantage-section,
.industrial-faq-section,
.industrial-consultation-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.industrial-hero-section {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8, 34, 22, 0.95) 0%,
            rgba(8, 34, 22, 0.82) 42%,
            rgba(8, 34, 22, 0.38) 100%
        ),
        url("../img/industrial.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.industrial-hero-section .container {
    position: relative;
    z-index: 2;
}

.industrial-hero-content {
    max-width: 700px;
    padding: 70px 0;
}

.industrial-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.industrial-eyebrow span {
    width: 38px;
    height: 3px;
    display: inline-block;
    border-radius: 20px;
    background: var(--industrial-green);
}

.industrial-hero-title {
    margin: 0 0 22px;

    color: #ffffff;
    font-size: 58px;
    line-height: 1.12;
    font-weight: 700;
}

.industrial-hero-title span {
    display: block;
    color: #8bdd4b;
}

.industrial-hero-description {
    max-width: 620px;
    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.92);
    font-size: 17px;
    line-height: 1.8;
}

.industrial-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   COMMON BUTTONS
========================================================= */

.industrial-hero-buttons .fv-btn,
.industrial-consultation-section .fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 25px;

    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

.industrial-hero-buttons .fv-btn-primary,
.industrial-consultation-section .fv-btn-primary {
    background: linear-gradient(
        135deg,
        #53b703,
        #1d8fbd
    );

    color: #ffffff;
    border: 1px solid transparent;
}

.industrial-hero-buttons .fv-btn-primary:hover,
.industrial-consultation-section .fv-btn-primary:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(83, 183, 3, 0.25);
}

.industrial-hero-buttons .fv-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.industrial-hero-buttons .fv-btn-secondary:hover {
    background: #ffffff;
    color: var(--industrial-heading);
    transform: translateY(-3px);
}


/* =========================================================
   INTRODUCTION
========================================================= */

.industrial-introduction-section {
    padding: 40px 0;
    background: #ffffff;
}

.industrial-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--industrial-green-light);
    box-shadow: 0 15px 40px rgba(23, 53, 31, 0.08);
}

.industrial-image-card > img {
    width: 100%;
    height: 470px;
    display: block;
    object-fit: cover;
}

.industrial-image-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;

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

    max-width: calc(100% - 50px);
    padding: 16px 20px;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.industrial-image-badge > i {
    width: 46px;
    height: 46px;

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

    flex: 0 0 46px;

    border-radius: 12px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);
    font-size: 20px;
}

.industrial-image-badge strong {
    display: block;
    margin-bottom: 3px;

    color: var(--industrial-heading);
    font-size: 14px;
    font-weight: 700;
}

.industrial-image-badge small {
    display: block;
    color: var(--industrial-text);
    font-size: 11px;
}

.industrial-content-block p {
    color: black;
    font-size: 16px;
    line-height: 1.4;
}

.industrial-content-block .section-title h1,
.industrial-how-section .section-title h1,
.industrial-advantage-section .section-title h1 {
    color: var(--industrial-heading);
    font-weight: 700;
}

.industrial-content-block .section-title h1 span,
.industrial-how-section .section-title h1 span,
.industrial-advantage-section .section-title h1 span {
    color: var(--industrial-green);
}

.industrial-check-item {
    display: flex;
    align-items: center;
    gap: 10px;

    color: black;
    font-size: 16px;
    line-height: 1.5;
}

.industrial-check-item i {
    color: var(--industrial-green);
    font-size: 17px;
}


/* =========================================================
   BENEFITS
========================================================= */

.industrial-benefits-section {
    padding: 40px 0;
    background: var(--industrial-bg);
}

.industrial-section-description {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;

    color: var(--industrial-text);
    font-size: 16px;
    line-height: 1.5;
}

.industrial-benefit-card {
    height: 100%;
    min-height: 250px;

    padding: 32px 28px;

    border: 1px solid var(--industrial-border);
    border-radius: 18px;
    background: #ffffff;

    box-shadow: 0 10px 30px rgba(23, 53, 31, 0.04);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.industrial-benefit-card:hover {
    transform: translateY(-8px);
    border-color: rgba(83, 183, 3, 0.45);
    box-shadow: 0 20px 45px rgba(23, 53, 31, 0.10);
}

.industrial-benefit-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 22px;

    border-radius: 16px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);

    font-size: 24px;

    transition: all 0.3s ease;
}

.industrial-benefit-card:hover .industrial-benefit-icon {
    background: var(--industrial-green);
    color: #ffffff;
    transform: translateY(-4px);
}

.industrial-benefit-card h4 {
    margin: 0 0 12px;

    color: var(--industrial-heading);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.industrial-benefit-card p {
    margin: 0;

    color: black;
    font-size: 16px;
    line-height: 1.4;
}


/* =========================================================
   HOW SOLAR WORKS
========================================================= */

.industrial-how-section {
    padding: 40px 0;
    background: #ffffff;
}

.industrial-how-section > .container {
    position: relative;
    z-index: 1;
}

.industrial-how-section .section-title {
    margin-bottom: 25px;
}

.industrial-how-section > .container > .row > .col-lg-6:first-child > p {
    color: var(--industrial-text);
    font-size: 16px;
    line-height: 1.4;
}

.industrial-working-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 25px;
}

.industrial-step-number {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 14px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);

    font-size: 14px;
    font-weight: 800;
}

.industrial-step-content h4 {
    margin: 0 0 7px;

    color: var(--industrial-heading);
    font-size: 18px;
    font-weight: 700;
}

.industrial-step-content p {
    margin: 0;

    color: var(--industrial-text);
    font-size: 15px;
    line-height: 1.4;
}

.industrial-working-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--industrial-green-light);
    box-shadow: 0 15px 40px rgba(23, 53, 31, 0.08);
}

.industrial-working-image > img {
    width: 100%;
    height: 500px;
    display: block;
    object-fit: cover;
}

.industrial-working-overlay {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;

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

    padding: 16px 20px;

    border-radius: 14px;
    background: rgba(23, 53, 31, 0.88);
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
}

.industrial-working-overlay i {
    color: #8bdd4b;
    font-size: 22px;
}


/* =========================================================
   SYSTEM TYPES
========================================================= */

.industrial-system-section {
    padding: 40px 0;
    background: var(--industrial-bg);
}

.industrial-system-card {
    height: 100%;
    overflow: hidden;

    border: 1px solid var(--industrial-border);
    border-radius: 20px;
    background: #ffffff;

    box-shadow: 0 10px 30px rgba(23, 53, 31, 0.04);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.industrial-system-card:hover {
    transform: translateY(-8px);
    border-color: rgba(83, 183, 3, 0.45);
    box-shadow: 0 20px 45px rgba(23, 53, 31, 0.10);
}

.industrial-system-card-header {
    padding: 26px 20px 2px;
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f5faf2 100%
    );
}

.industrial-system-icon {
    width: 60px;
    height: 60px;

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

    margin-bottom: 22px;

    border-radius: 16px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);

    font-size: 23px;
}

.industrial-system-card h3 {
    margin: 0 0 12px;

    color: var(--industrial-heading);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
}

.industrial-system-card-header p {
    min-height: 70px;
    margin: 0;

    color: var(--industrial-text);
    font-size: 16px;
    line-height: 1.5;
}

.industrial-system-card-body {
    padding: 25px 28px 30px;
    border-top: 1px solid #edf3e9;
}

.industrial-system-card-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.industrial-system-card-body li {
    position: relative;

    padding-left: 25px;
    margin-bottom: 9px;

    color: black;
    font-size: 16px;
    line-height: 1.5;
}

.industrial-system-card-body li:last-child {
    margin-bottom: 0;
}

.industrial-system-card-body li::before {
    content: "\f058";
    position: absolute;
    left: 0;
    top: 1px;

    color: var(--industrial-green);

    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
}


/* =========================================================
   INDUSTRIAL SOLUTIONS / APPLICATIONS
========================================================= */

.industrial-solutions-section {
    padding: 30px 0;
    background: #ffffff;
}

.industrial-solution-card {
    position: relative;
    height: 100%;
    overflow: hidden;

    border-radius: 18px;
    background: #ffffff;

    box-shadow: 0 10px 30px rgba(23, 53, 31, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.industrial-solution-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(23, 53, 31, 0.13);
}

.industrial-solution-card > img {
    width: 100%;
    height: 245px;

    display: block;
    object-fit: cover;

    transition: transform 0.6s ease;
}

.industrial-solution-card:hover > img {
    transform: scale(1.06);
}

.industrial-solution-content {
    min-height: 170px;
    padding: 25px 28px;
    background: #ffffff;
}

.industrial-solution-content h4 {
    margin: 0 0 12px;

    color: var(--industrial-heading);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.industrial-solution-content p {
    margin: 0;

    color: var(--industrial-text);
    font-size: 15px;
    line-height: 1.4;
}


/* =========================================================
   FINANCE AND SAVINGS
========================================================= */

.industrial-savings-section {
    padding: 40px 0;
    background: var(--industrial-bg);
}

.industrial-finance-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 390px;

    padding: 32px;

    overflow: hidden;

    border: 1px solid var(--industrial-border);
    border-radius: 20px;
    background: #ffffff;
    color: var(--industrial-heading);
    text-decoration: none;

    box-shadow: 0 12px 35px rgba(23, 53, 31, 0.055);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.industrial-finance-card:hover {
    color: var(--industrial-heading);
    text-decoration: none;
    transform: translateY(-8px);
    border-color: rgba(83, 183, 3, 0.40);
    box-shadow: 0 22px 50px rgba(23, 53, 31, 0.11);
}

.industrial-finance-icon {
    width: 60px;
    height: 60px;

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

    margin-bottom: 25px;

    border-radius: 16px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);

    font-size: 23px;

    transition: all 0.3s ease;
}

.industrial-finance-card:hover .industrial-finance-icon {
    background: var(--industrial-green);
    color: #ffffff;
    transform: translateY(-4px);
}

.industrial-finance-number {
    position: absolute;
    top: 28px;
    right: 28px;

    color: #e1eed9;
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
}

.industrial-finance-card h3 {
    margin: 0 0 15px;

    color: var(--industrial-heading);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
}

.industrial-finance-card p {
    margin: 0 0 25px;

    color: var(--industrial-text);
    font-size: 14px;
    line-height: 1.7;
}

.industrial-finance-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: auto;
    padding-top: 18px;

    border-top: 1px solid #e6efe2;

    color: var(--industrial-green);
    font-size: 12px;
    font-weight: 700;
}

.industrial-finance-link i {
    width: 34px;
    height: 34px;

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

    border-radius: 50%;
    background: var(--industrial-green-light);

    transition: all 0.3s ease;
}

.industrial-finance-card:hover .industrial-finance-link i {
    background: var(--industrial-green);
    color: #ffffff;
    transform: translateX(4px);
}

.industrial-finance-note {
    padding: 16px 20px;

    border-left: 3px solid var(--industrial-green);
    border-radius: 8px;

    background: #ffffff;
    color: black;

    font-size: 16px;
    line-height: 1.4;
}


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

.industrial-process-section {
    padding: 40px 0;
    background: #ffffff;
}

.industrial-process-card {
    position: relative;

    height: 100%;
    min-height: 285px;

    padding: 20px 16px;

    border: 1px solid var(--industrial-border);
    border-radius: 18px;
    background: #ffffff;

    box-shadow: 0 10px 30px rgba(23, 53, 31, 0.04);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.industrial-process-card:hover {
    transform: translateY(-8px);
    border-color: rgba(83, 183, 3, 0.45);
    box-shadow: 0 20px 45px rgba(23, 53, 31, 0.10);
}

.industrial-process-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 22px;

    border-radius: 15px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);

    font-size: 22px;
}

.industrial-process-number {
    position: absolute;
    top: 25px;
    right: 25px;

    color: #e1eed9;
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
}

.industrial-process-card h4 {
    margin: 0 0 12px;

    color: var(--industrial-heading);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.industrial-process-card p {
    margin: 0;

    color: var(--industrial-text);
    font-size: 16px;
    line-height: 1.4;
}


/* =========================================================
   ADVANTAGE
========================================================= */

.industrial-advantage-section {
    padding: 40px 0;
    background: var(--industrial-bg);
}

.industrial-advantage-image {
    overflow: hidden;
    border-radius: 24px;
    background: var(--industrial-green-light);
    box-shadow: 0 15px 40px rgba(23, 53, 31, 0.08);
}

.industrial-advantage-image img {
    width: 100%;
    height: 520px;
    display: block;
    object-fit: cover;
}

.industrial-advantage-section .section-title h1 {
    font-size: 42px;
    line-height: 1.2;
}

.industrial-advantage-section > .container > .row > .col-lg-6:last-child > p {
    color: var(--industrial-text);
    font-size: 16px;
    line-height: 1.4;
}

.industrial-advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    margin-bottom: 25px;
}

.industrial-advantage-icon {
    width: 38px;
    height: 38px;

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

    flex: 0 0 38px;

    border-radius: 11px;
    background: var(--industrial-green-light);
    color: var(--industrial-green);

    font-size: 14px;
}

.industrial-advantage-item h4 {
    margin: 0 0 6px;

    color: var(--industrial-heading);
    font-size: 18px;
    font-weight: 700;
}

.industrial-advantage-item p {
    margin: 0;

    color: var(--industrial-text);
    font-size: 16px;
    line-height: 1.4;
}


/* =========================================================
   FAQ
========================================================= */

.industrial-faq-section {
    padding: 40px 0;
    background: #ffffff;
}

.industrial-faq-section .accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.industrial-faq-section .accordion-item {
    overflow: hidden;

    border: 1px solid var(--industrial-border);
    border-radius: 12px;
    background: #ffffff;

    box-shadow: 0 5px 20px rgba(23, 53, 31, 0.03);
}

.industrial-faq-section .accordion-button {
    padding: 20px 24px;

    color: var(--industrial-heading);
    background: #ffffff;

    font-size: 15px;
    font-weight: 600;

    box-shadow: none;
}

.industrial-faq-section .accordion-button:not(.collapsed) {
    color: var(--industrial-green-dark);
    background: var(--industrial-green-light);
    box-shadow: none;
}

.industrial-faq-section .accordion-button:focus {
    box-shadow: none;
}

.industrial-faq-section .accordion-button::after {
    background-size: 14px;
}

.industrial-faq-section .accordion-body {
    padding: 9px 20px;

    color: var(--industrial-text);
    background: #ffffff;

    font-size: 16px;
    line-height: 1.4;
}


/* =========================================================
   CONSULTATION CTA
========================================================= */

.industrial-consultation-section {
    padding: 0 0 40px;
    background: #ffffff;
}

.industrial-consultation-box {
    position: relative;
    overflow: hidden;

    padding: 55px 50px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #17351f 0%,
            #246b39 55%,
            #1d8fbd 100%
        );

    box-shadow: 0 20px 50px rgba(23, 53, 31, 0.12);
}

.industrial-consultation-box::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;

    right: -100px;
    bottom: -160px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.industrial-consultation-box .section-title {
    position: relative;
    z-index: 1;
}

.industrial-consultation-box .section-title h1 {
    font-size: 38px;
    line-height: 1.2;
}

.industrial-consultation-box .section-title p {
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .industrial-hero-section {
        min-height: 600px;
    }

    .industrial-hero-title {
        font-size: 48px;
    }

    .industrial-hero-content {
        padding: 60px 0;
    }

    .industrial-introduction-section,
    .industrial-benefits-section,
    .industrial-how-section,
    .industrial-system-section,
    .industrial-solutions-section,
    .industrial-savings-section,
    .industrial-process-section,
    .industrial-advantage-section,
    .industrial-faq-section {
        padding: 30px 0;
    }

    .industrial-image-card > img {
        height: 400px;
    }

    .industrial-working-image > img {
        height: 430px;
    }

    .industrial-advantage-image img {
        height: 430px;
    }

    .industrial-advantage-section .section-title h1 {
        font-size: 36px;
    }

    .industrial-consultation-box {
        padding: 45px 35px;
    }

    .industrial-consultation-box .section-title h1 {
        font-size: 32px;
    }

}


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

@media (max-width: 767.98px) {

    .industrial-hero-section {
        min-height: 650px;
        background-position: 65% center;
    }

    .industrial-hero-content {
        padding: 55px 0;
    }

    .industrial-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .industrial-hero-title {
        font-size: 38px;
        line-height: 1.15;
    }

    .industrial-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .industrial-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .industrial-hero-buttons .fv-btn {
        width: 100%;
        max-width: 300px;
    }

    .industrial-introduction-section,
    .industrial-benefits-section,
    .industrial-how-section,
    .industrial-system-section,
    .industrial-solutions-section,
    .industrial-savings-section,
    .industrial-process-section,
    .industrial-advantage-section,
    .industrial-faq-section {
        padding: 30px 0;
    }

    .industrial-image-card > img {
        height: 320px;
    }

    .industrial-image-badge {
        left: 15px;
        right: 15px;
        bottom: 15px;
        max-width: none;
        padding: 13px 15px;
    }

    .industrial-image-badge > i {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 17px;
    }

    .industrial-image-badge strong {
        font-size: 12px;
    }

    .industrial-image-badge small {
        font-size: 10px;
    }

    .industrial-benefit-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .industrial-benefit-card h4 {
        font-size: 20px;
    }

    .industrial-working-image {
        margin-top: 20px;
    }

    .industrial-working-image > img {
        height: 330px;
    }

    .industrial-working-overlay {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 13px 15px;
        font-size: 11px;
    }

    .industrial-system-card-header {
        padding: 28px 24px 22px;
    }

    .industrial-system-card-body {
        padding: 22px 24px 28px;
    }

    .industrial-system-card h3 {
        font-size: 22px;
    }

    .industrial-system-card-header p {
        min-height: auto;
    }

    .industrial-solution-card > img {
        height: 230px;
    }

    .industrial-solution-content {
        min-height: auto;
        padding: 24px;
    }

    .industrial-finance-card {
        min-height: 350px;
        padding: 28px 24px;
    }

    .industrial-process-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .industrial-advantage-image img {
        height: 340px;
    }

    .industrial-advantage-section .section-title h1 {
        font-size: 32px;
    }

    .industrial-faq-section .accordion-button {
        padding: 17px 18px;
        font-size: 14px;
    }

    .industrial-faq-section .accordion-body {
        padding: 18px;
        font-size: 12px;
    }

    .industrial-consultation-section {
        padding-bottom: 60px;
    }

    .industrial-consultation-box {
        padding: 35px 24px;
        border-radius: 18px;
    }

    .industrial-consultation-box .section-title h1 {
        font-size: 29px;
    }

    .industrial-consultation-box .section-title p {
        font-size: 14px;
    }

    .industrial-consultation-box .text-lg-end {
        text-align: left !important;
    }

}


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

@media (max-width: 480px) {

    .industrial-hero-section {
        min-height: 680px;
    }

    .industrial-hero-title {
        font-size: 32px;
    }

    .industrial-hero-description {
        font-size: 14px;
    }

    .industrial-hero-buttons .fv-btn {
        font-size: 12px;
        padding: 12px 20px;
    }

    .industrial-image-card > img {
        height: 280px;
    }

    .industrial-working-image > img {
        height: 280px;
    }

    .industrial-advantage-image img {
        height: 280px;
    }

    .industrial-benefit-card h4 {
        font-size: 19px;
    }

    .industrial-solution-card > img {
        height: 210px;
    }

    .industrial-finance-card h3 {
        font-size: 23px;
    }

    .industrial-consultation-box .section-title h1 {
        font-size: 26px;
    }

}

/* =========================================================
   INDUSTRIAL SOLAR COMPARISON SECTION
   Uses the same visual language as residential comparison
========================================================= */

.industrial-comparison-section {
    position: relative;
}


/* ---------------------------------------------------------
   Industrial Heading
--------------------------------------------------------- */

.industrial-comparison-heading {
    position: relative;
    z-index: 1;
}

.industrial-comparison-intro {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   Industrial Recommendation Banner
--------------------------------------------------------- */

.industrial-preference-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin: 35px auto 35px;
    padding: 25px 28px;
    /*max-width: 1100px;*/
    background: linear-gradient(
        135deg,
        rgba(85, 185, 7, 0.10),
        rgba(85, 185, 7, 0.035)
    );
    border: 1px solid rgba(85, 185, 7, 0.28);
    border-left: 5px solid #55b907;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(31, 80, 25, 0.06);
    overflow: hidden;
}

.industrial-preference-banner::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    background: rgba(85, 185, 7, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.industrial-preference-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #55b907, #2f8500);
    border-radius: 14px;
    font-size: 25px;
    box-shadow: 0 8px 18px rgba(85, 185, 7, 0.20);
}

.industrial-preference-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

.industrial-preference-label {
    display: inline-block;
    margin-bottom: 7px;
    color: #4a9908;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.5;
}

.industrial-preference-content h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 10px;
    color: #17351f;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
}

.industrial-preference-content h3 i {
    color: #55b907;
    font-size: 22px;
}

.industrial-preference-content p {
    max-width: 900px;
    margin: 0 0 12px;
    color: black;
    font-size: 16px;
    line-height: 1.8;
}

.industrial-preference-content small {
    display: block;
    color: #0c0c0c;
    font-size: 16px;
    line-height: 1.5;
}

.industrial-preference-content small i {
    margin-right: 5px;
    color: #55b907;
}


/* ---------------------------------------------------------
   Industrial Table Wrapper
--------------------------------------------------------- */

.industrial-comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------
   Industrial Table
--------------------------------------------------------- */

.industrial-comparison-table {
    min-width: 1120px;
}


/* ---------------------------------------------------------
   Recommended On-Grid Column
--------------------------------------------------------- */

.industrial-comparison-table th.industrial-recommended-system {
    background: linear-gradient(
        180deg,
        rgba(85, 185, 7, 0.16),
        rgba(85, 185, 7, 0.07)
    );
    border-top: 4px solid #55b907;
    box-shadow: inset 0 0 0 1px rgba(85, 185, 7, 0.16);
}

.industrial-comparison-table th.industrial-recommended-system
.comparison-header-icon {
    background: linear-gradient(135deg, #55b907, #378d03);
    color: #ffffff;
}

.industrial-comparison-table th.industrial-recommended-system
.comparison-system-title {
    color: #286e00;
}


/* ---------------------------------------------------------
   Recommended Hybrid Column
--------------------------------------------------------- */

.industrial-comparison-table th.industrial-backup-system {
    background: linear-gradient(
        180deg,
        rgba(13, 110, 253, 0.12),
        rgba(13, 110, 253, 0.045)
    );
    border-top: 4px solid #0d6efd;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.14);
}

.industrial-comparison-table th.industrial-backup-system
.comparison-header-icon {
    background: linear-gradient(135deg, #0d6efd, #084298);
    color: #ffffff;
}

.industrial-comparison-table th.industrial-backup-system
.comparison-system-title {
    color: #084298;
}


/* ---------------------------------------------------------
   Industrial Badges
--------------------------------------------------------- */

.industrial-comparison-table
.comparison-recommended-badge {
    background: #55b907;
    color: #ffffff;
    border-color: #55b907;
}

.industrial-comparison-table
.comparison-backup-badge {
    background: #eaf3ff;
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.25);
}


/* ---------------------------------------------------------
   Industrial Highlight Rows
--------------------------------------------------------- */

.industrial-comparison-table .comparison-highlight-row td {
    background: rgba(85, 185, 7, 0.035);
}

.industrial-comparison-table .comparison-best-suited-row td {
    background: rgba(85, 185, 7, 0.055);
}


/* ---------------------------------------------------------
   Industrial Cost Labels
--------------------------------------------------------- */

.industrial-comparison-table .low-cost {
    color: #3e8d06;
    font-weight: 800;
}

.industrial-comparison-table .high-cost {
    color: #b36b00;
    font-weight: 800;
}


/* ---------------------------------------------------------
   Industrial Note
--------------------------------------------------------- */

.industrial-comparison-note {
    margin-top: 30px;
}

.industrial-comparison-note-icon {
    background: linear-gradient(135deg, #55b907, #378d03);
    color: #ffffff;
}


/* ---------------------------------------------------------
   Industrial CTA
--------------------------------------------------------- */

.industrial-comparison-cta {
    margin-top: 35px;
}

.industrial-comparison-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


/* ---------------------------------------------------------
   Responsive Design
--------------------------------------------------------- */

@media (max-width: 991.98px) {

    .industrial-preference-banner {
        padding: 23px;
    }

    .industrial-preference-content h3 {
        font-size: 23px;
    }

    .industrial-preference-content p {
        font-size: 14px;
    }

}


@media (max-width: 767.98px) {

    .industrial-preference-banner {
        flex-direction: column;
        gap: 16px;
        padding: 22px 20px;
        border-left-width: 4px;
    }

    .industrial-preference-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 22px;
    }

    .industrial-preference-label {
        font-size: 11px;
        letter-spacing: 0.7px;
    }

    .industrial-preference-content h3 {
        font-size: 21px;
    }

    .industrial-preference-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .industrial-preference-content small {
        font-size: 12px;
    }

    .industrial-comparison-table {
        min-width: 1050px;
    }

}


@media (max-width: 480px) {

    .industrial-preference-banner {
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 20px 17px;
    }

    .industrial-preference-content h3 {
        font-size: 19px;
    }

    .industrial-preference-content p {
        font-size: 14px;
    }

    .industrial-preference-content small {
        font-size: 11px;
    }

}


/* =========================================================
   FUTURE VOLT SOLAR CALCULATOR
   Uses Existing Future Volt Green + Blue Theme
========================================================= */

:root {
    --fv-green: #53b703;
    --fv-green-dark: #378900;
    --fv-green-light: #eff9e9;

    --fv-blue: #0879c9;
    --fv-blue-dark: #075b98;
    --fv-blue-light: #eef7ff;

    --fv-dark: #17351f;
    --fv-text: #526158;
    --fv-muted: #748078;

    --fv-border: #dcebd6;
    --fv-background: #f8fbf6;
    --fv-white: #ffffff;

    --fv-gradient: linear-gradient(
        135deg,
        #53b703 0%,
        #0879c9 100%
    );
}


/* =========================================================
   GENERAL PAGE
========================================================= */

.fv-solar-calculator-page {
    width: 100%;
    min-height: 100vh;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbf6 48%,
            #ffffff 100%
        );
    color: var(--fv-dark);
    overflow: hidden;
}

.fv-solar-calculator-page *,
.fv-solar-calculator-page *::before,
.fv-solar-calculator-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADING SECTION
========================================================= */

.fv-calculator-heading-section {
    padding: 30px 0 35px;
    background: #ffffff;
}

.fv-calculator-heading {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.fv-calculator-heading-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;

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

    border-radius: 16px;
    background: var(--fv-gradient);
    color: #ffffff;

    font-size: 24px;
    box-shadow: 0 12px 25px rgba(83, 183, 3, 0.18);
}

.fv-calculator-heading h1 {
    margin: 0 0 16px;

    color: var(--fv-dark);
    font-family: "Poppins", sans-serif;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.2;
}

.fv-calculator-heading h1 span {
    color: var(--fv-green);
}

.fv-calculator-heading p {
    max-width: 680px;
    margin: 0 auto;

    color: var(--fv-text);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MAIN CALCULATOR SECTION
========================================================= */

.fv-calculator-section {
    padding: 20px 0 20px;
}

.fv-calculator-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* =========================================================
   INPUT CARD
========================================================= */

.fv-input-card {
    position: relative;

    padding: 34px;
    border: 1px solid var(--fv-border);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f2f8ff 0%,
            #f8fbff 48%,
            #f2faed 100%
        );

    box-shadow: 0 15px 45px rgba(23, 53, 31, 0.06);
}

.fv-input-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 32px;
}

.fv-small-label {
    display: inline-block;
    margin-bottom: 10px;

    color: var(--fv-blue);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.fv-input-card-header h2 {
    max-width: 430px;
    margin: 0;

    color: var(--fv-dark);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.25;
}

.fv-input-card-icon {
    flex: 0 0 auto;

    width: 58px;
    height: 58px;

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

    border-radius: 17px;
    background: var(--fv-gradient);
    color: #ffffff;

    font-size: 25px;
    box-shadow: 0 12px 25px rgba(8, 121, 201, 0.15);
}


/* =========================================================
   FORM GROUPS
========================================================= */

.fv-form-group {
    margin-bottom: 10px;
}

.fv-form-group label {
    display: block;
    margin-bottom: 10px;

    color: var(--fv-dark);
    font-size: 16px;
    font-weight: 600;
}

.fv-input-wrapper {
    position: relative;
}

.fv-input-wrapper > i {
    position: absolute;
    top: 50%;
    left: 17px;
    z-index: 2;

    transform: translateY(-50%);

    color: var(--fv-green);
    font-size: 15px;
}

.fv-input-wrapper input {
    width: 100%;
    height: 53px;

    padding: 0 18px 0 47px;

    border: 1px solid #d7e5d2;
    border-radius: 11px;

    background: #ffffff;
    color: var(--fv-dark);

    font-family: "Poppins", sans-serif;
    font-size: 14px;

    outline: none;
    transition: 0.3s ease;
}

.fv-input-wrapper input:focus {
    border-color: var(--fv-green);
    box-shadow: 0 0 0 4px rgba(83, 183, 3, 0.10);
}

.fv-input-help {
    display: block;
    margin-top: 8px;

    color: var(--fv-muted);
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   BILL SLIDER
========================================================= */

.fv-bill-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fv-bill-label-row label {
    margin-bottom: 0;
}

.fv-bill-label-row i {
    color: #8b9890;
    font-size: 14px;
}

.fv-slider-range-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 13px 0 12px;

    color: var(--fv-text);
    font-size: 16px;
    font-weight: 500;
}

.fv-slider-wrapper {
    position: relative;
    padding: 0 10px 58px;
}

.fv-slider-wrapper input[type="range"] {
    --slider-progress: 0%;

    width: 100%;
    height: 8px;

    display: block;
    margin: 0;

    border-radius: 20px;
    outline: none;

    background:
        linear-gradient(
            to right,
            var(--fv-blue) 0%,
            var(--fv-blue) var(--slider-progress),
            #d9e0e4 var(--slider-progress),
            #d9e0e4 100%
        );

    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.fv-slider-wrapper input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 20px;
    background: transparent;
}

.fv-slider-wrapper input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 20px;
    background: transparent;
}

.fv-slider-wrapper input[type="range"]::-webkit-slider-thumb {
    width: 27px;
    height: 27px;

    margin-top: -9px;

    border: 5px solid #ffffff;
    border-radius: 50%;

    background: var(--fv-blue);
    box-shadow: 0 2px 8px rgba(8, 121, 201, 0.25);

    appearance: none;
    -webkit-appearance: none;
}

.fv-slider-wrapper input[type="range"]::-moz-range-thumb {
    width: 27px;
    height: 27px;

    border: 5px solid #ffffff;
    border-radius: 50%;

    background: var(--fv-blue);
    box-shadow: 0 2px 8px rgba(8, 121, 201, 0.25);

    cursor: pointer;
}

.fv-slider-value {
    position: absolute;
    top: 27px;
    right: 0;

    min-width: 78px;
    padding: 9px 12px;

    border-radius: 6px;
    background: #172c5c;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    text-align: center;

    box-shadow: 0 6px 15px rgba(23, 44, 92, 0.16);
}

.fv-slider-value::before {
    content: "";

    position: absolute;
    top: -6px;
    right: 25px;

    width: 12px;
    height: 12px;

    background: #172c5c;
    transform: rotate(45deg);
}


/* =========================================================
   CALCULATE BUTTON
========================================================= */

.fv-calculator-button {
    width: 100%;
    min-height: 56px;

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

    padding: 14px 20px 14px 24px;

    border: 0;
    border-radius: 50px;

    background: var(--fv-gradient);
    color: #ffffff;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    box-shadow: 0 12px 25px rgba(83, 183, 3, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.fv-calculator-button i {
    width: 34px;
    height: 34px;

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

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);

    transition: transform 0.3s ease;
}

.fv-calculator-button:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 17px 32px rgba(83, 183, 3, 0.25);
}

.fv-calculator-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TRUST CARD
========================================================= */

.fv-trust-card {
    overflow: hidden;

    border: 1px solid var(--fv-border);
    border-radius: 20px;

    background: #ffffff;
    box-shadow: 0 12px 35px rgba(23, 53, 31, 0.045);
}

.fv-trust-card-top {
    padding: 10px 25px 10px;
    background: #f2f7ff;
    text-align: center;
}

.fv-trust-card-top h3 {
    max-width: 520px;
    margin: 0 auto 8px;

    color: var(--fv-dark);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
}

.fv-trust-card-top h3 strong {
    font-weight: 700;
}

.fv-trust-card-top p {
    margin: 0;

    color: var(--fv-blue);
    font-size: 14px;
    font-weight: 600;
}

.fv-trust-card-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    padding: 10px 25px;
}

.fv-trust-avatars {
    display: flex;
    align-items: center;
}

.fv-avatar {
    width: 50px;
    height: 50px;

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

    margin-left: -8px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #dff4ff,
        #d9f5c9
    );

    color: var(--fv-blue);
    font-size: 18px;
}

.fv-avatar:first-child {
    margin-left: 0;
}

.fv-trust-rating {
    min-width: 210px;
}

.fv-stars {
    margin-bottom: 5px;

    color: #f5ad00;
    font-size: 19px;
    letter-spacing: 2px;
}

.fv-trust-rating strong {
    display: block;

    color: var(--fv-dark);
    font-size: 16px;
}

.fv-trust-rating small {
    display: block;
    margin-top: 3px;

    color: var(--fv-muted);
    font-size: 14px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.fv-calculator-description {
    padding: 10px 12px 0;
}

.fv-description-label {
    display: inline-block;
    margin-bottom: 12px;

    color: var(--fv-green);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.fv-calculator-description h2 {
    margin: 0 0 8px;

    color: var(--fv-dark);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

.fv-calculator-description h2 span {
    color: var(--fv-green);
}

.fv-calculator-description p {
    margin-bottom: 10px;

    color: #000;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   RESULTS PANEL
========================================================= */

.fv-results-panel {
    position: sticky;
    top: 105px;

    padding: 34px;

    border: 1px solid #d9e5f2;
    border-radius: 22px;

    background: #ffffff;
    box-shadow: 0 15px 45px rgba(23, 53, 31, 0.055);
}

.fv-result-section {
    margin-bottom: 15px;
}

.fv-result-section:last-child {
    margin-bottom: 0;
}

.fv-result-title {
    margin: 0 0 18px;

    color: var(--fv-dark);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}


/* =========================================================
   SYSTEM SIZE CARD
========================================================= */

.fv-system-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 15px 18px;

    border: 1px solid #d7e4f0;
    border-radius: 13px;

    background: #ffffff;
}

.fv-system-item {
    min-width: 0;

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

    text-align: center;
}

.fv-result-icon {
    margin-bottom: 8px;

    color: #6a728b;
    font-size: 20px;
}

.fv-result-label {
    margin-bottom: 8px;

    color: #0c0c0c;
    font-size: 16px;
    font-weight: 500;
}

.fv-system-item strong {
    color: #172c5c;
    font-size: 18px;
    font-weight: 700;
}

.fv-system-divider {
    width: 1px;
    height: 54px;
    background: #d7e4f0;
}

.fv-consult-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    padding: 12px 15px;

    border-radius: 0 0 12px 12px;
    background: #f4f8f8;

    text-align: center;
}

.fv-consult-note strong {
    color: var(--fv-dark);
    font-size: 16px;
    font-weight: 600;
}

.fv-consult-note span {
    color: #0c0c0c;
    font-size: 14px;
}

.fv-consult-note a {
    color: var(--fv-blue);
    font-weight: 600;
    text-decoration: underline;
}


/* =========================================================
   SAVINGS CARD
========================================================= */

.fv-savings-card {
    overflow: hidden;

    border: 1px solid #d7e4f0;
    border-radius: 13px;

    background: #ffffff;
}

.fv-savings-caption {
    margin: 0;
    padding: 15px 15px 12px;

    color: var(--fv-dark);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.fv-savings-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;

    padding: 0 15px 18px;
}

.fv-savings-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    text-align: center;
}

.fv-savings-item span {
    color: #0c0c0c;
    font-size: 15px;
}

.fv-savings-item strong {
    color: #172c5c;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.fv-savings-divider {
    width: 1px;
    height: 42px;
    background: #d7e4f0;
}

.fv-guarantee-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    padding: 13px 15px;

    background:
        linear-gradient(
            90deg,
            #fffdf1,
            #f2f4ff
        );

    color: #0c0c0c;
    font-size: 16px;
    text-align: center;
}

.fv-guarantee-box strong {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--fv-blue);
    font-size: 17px;
}

.fv-guarantee-box strong i {
    color: var(--fv-blue);
}


/* =========================================================
   ENVIRONMENT CARD
========================================================= */

.fv-environment-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;

    padding: 18px 15px;

    border: 1px solid #d7e4f0;
    border-radius: 13px;

    background: #ffffff;
}

.fv-environment-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    text-align: center;
}

.fv-environment-icon {
    color: #68728b;
    font-size: 20px;
}

.fv-environment-item span {
    color: #0c0c0c;
    font-size: 16px;
}

.fv-environment-item strong {
    color: #172c5c;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.fv-environment-divider {
    width: 1px;
    height: 48px;
    background: #d7e4f0;
}

.fv-disclaimer {
    margin-top: 12px;
    padding: 12px 14px;

    border-radius: 8px;
    background: #f4f7fb;
}

.fv-disclaimer small {
    display: block;

    color: #000;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   BOTTOM CONSULTATION BAR
========================================================= */

.fv-calculator-bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;

    padding: 14px 0;

    background:
        linear-gradient(
            90deg,
            #edf0ff 0%,
            #f0f2ff 100%
        );

    box-shadow: 0 -5px 20px rgba(23, 53, 31, 0.06);
}

.fv-bottom-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.fv-bottom-bar-text {
    display: flex;
    flex-direction: column;
    gap: 3px;

    color: #172c5c;
    font-size: 14px;
    line-height: 1.5;
}

.fv-bottom-bar-text strong {
    font-weight: 700;
}

.fv-bottom-bar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 46px;
    padding: 12px 25px;

    border-radius: 50px;
    background: #111735;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

    transition: 0.3s ease;
}

.fv-bottom-bar-button:hover {
    background: var(--fv-gradient);
    color: #ffffff;
    transform: translateY(-2px);
}

.fv-bottom-bar-button i {
    font-size: 12px;
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 1200px) {

    .fv-calculator-section .container {
        max-width: 1240px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .fv-calculator-heading-section {
        padding: 55px 0 25px;
    }

    .fv-calculator-section {
        padding-top: 15px;
        padding-bottom: 145px;
    }

    .fv-results-panel {
        position: relative;
        top: auto;
    }

    .fv-input-card,
    .fv-results-panel {
        padding: 28px;
    }

    .fv-calculator-description {
        padding-left: 0;
        padding-right: 0;
    }

}


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

@media (max-width: 767.98px) {

    .fv-calculator-heading-section {
        padding: 42px 0 20px;
    }

    .fv-calculator-heading h1 {
        font-size: 32px;
    }

    .fv-calculator-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .fv-calculator-section {
        padding-top: 10px;
        padding-bottom: 170px;
    }

    .fv-input-card,
    .fv-results-panel {
        padding: 22px 18px;
        border-radius: 17px;
    }

    .fv-input-card-header {
        margin-bottom: 25px;
    }

    .fv-input-card-header h2 {
        font-size: 24px;
    }

    .fv-input-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 20px;
    }

    .fv-trust-card-bottom {
        flex-direction: column;
        gap: 13px;
        padding: 18px;
    }

    .fv-trust-rating {
        min-width: 0;
        text-align: center;
    }

    .fv-trust-avatars {
        justify-content: center;
    }

    .fv-calculator-description h2 {
        font-size: 24px;
    }

    .fv-result-title {
        font-size: 19px;
    }

    .fv-system-card {
        padding: 13px 8px;
    }

    .fv-system-item strong {
        font-size: 16px;
    }

    .fv-result-label {
        font-size: 11px;
    }

    .fv-savings-grid {
        padding-left: 8px;
        padding-right: 8px;
    }

    .fv-savings-item strong {
        font-size: 14px;
    }

    .fv-savings-item span {
        font-size: 10px;
    }

    .fv-environment-card {
        padding: 17px 7px;
    }

    .fv-environment-item strong {
        font-size: 14px;
    }

    .fv-environment-item span {
        font-size: 10px;
    }

    .fv-environment-icon {
        font-size: 14px;
    }

    .fv-bottom-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fv-bottom-bar-text {
        align-items: center;
        font-size: 11px;
        text-align: center;
    }

    .fv-bottom-bar-button {
        width: 100%;
        min-height: 43px;
    }

}


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

@media (max-width: 480px) {

    .fv-calculator-heading h1 {
        font-size: 28px;
    }

    .fv-calculator-heading-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .fv-input-card-header {
        align-items: center;
    }

    .fv-input-card-header h2 {
        font-size: 21px;
    }

    .fv-small-label {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .fv-slider-value {
        right: -2px;
    }

    .fv-system-card {
        grid-template-columns: 1fr auto 1fr;
    }

    .fv-system-item strong {
        font-size: 14px;
    }

    .fv-savings-item strong {
        font-size: 12px;
    }

    .fv-savings-item span {
        font-size: 9px;
    }

    .fv-environment-item strong {
        font-size: 12px;
    }

    .fv-environment-item span {
        font-size: 9px;
    }

    .fv-result-title {
        font-size: 18px;
    }

}
/* =========================================================
   BREADCRUMB SECTION
========================================================= */

.fv-breadcrumb-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            120deg,
            #102b1b 0%,
            #173f2a 48%,
            #075b8e 100%
        );

    isolation: isolate;
}

/* Decorative solar-style background shapes */

.fv-breadcrumb-section::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -80px;

    width: 330px;
    height: 330px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(255, 255, 255, 0.025),
        0 0 0 70px rgba(255, 255, 255, 0.025);

    pointer-events: none;
}

.fv-breadcrumb-section::after {
    content: "";

    position: absolute;
    bottom: -160px;
    left: -90px;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(83, 183, 3, 0.22);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(83, 183, 3, 0.035),
        0 0 0 70px rgba(83, 183, 3, 0.025);

    pointer-events: none;
}

.fv-breadcrumb-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 20px;
}

.fv-breadcrumb-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;

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

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(83, 183, 3, 0.95),
            rgba(8, 121, 201, 0.95)
        );

    color: #ffffff;
    font-size: 25px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15);
}

.fv-breadcrumb-text h1 {
    margin: 0 0 12px;

    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.2;
}

.fv-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.fv-breadcrumb-list li {
    color: white;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.fv-breadcrumb-list li a {
    color: #b8e99a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.fv-breadcrumb-list li a:hover {
    color: #ffffff;
}

.fv-breadcrumb-list .fv-breadcrumb-separator {
    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
}

.fv-breadcrumb-list .active {
    color: #ffffff;
    font-weight: 600;
}


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

@media (max-width: 767.98px) {

    .fv-breadcrumb-section {
        padding: 35px 0;
    }

    .fv-breadcrumb-content {
        gap: 14px;
    }

    .fv-breadcrumb-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;

        border-radius: 14px;
        font-size: 20px;
    }

    .fv-breadcrumb-text h1 {
        margin-bottom: 9px;
        font-size: 25px;
    }

    .fv-breadcrumb-list {
        gap: 9px;
    }

    .fv-breadcrumb-list li {
        font-size: 11px;
    }

}

@media (max-width: 420px) {

    .fv-breadcrumb-section {
        padding: 30px 0;
    }

    .fv-breadcrumb-content {
        align-items: flex-start;
    }

    .fv-breadcrumb-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;

        border-radius: 12px;
        font-size: 17px;
    }

    .fv-breadcrumb-text h1 {
        font-size: 22px;
    }

}

/* =========================================================
   FUTURE VOLT - SOLAR SUBSIDY PAGE
   Green Solar Theme | Responsive | Animated
   ========================================================= */

:root {
    --fv-green: #53b703;
    --fv-green-dark: #3f8f05;
    --fv-green-light: #eef9e8;
    --fv-green-pale: #f7fcf3;
    --fv-navy: #17351f;
    --fv-text: #40534b;
    --fv-muted: #0c0c0c;
    --fv-border: #ddebd7;
    --fv-white: #ffffff;
}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.fv-subsidy-section {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
    background: #ffffff;
}

.fv-subsidy-section.bg-light {
    background: #f7fbf5 !important;
}

.fv-subsidy-section::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -150px;
    right: -100px;
    border: 1px solid rgba(83, 183, 3, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.fv-subsidy-section > .container {
    position: relative;
    z-index: 1;
}


/* =========================================================
   BREADCRUMB
   Keeps its own background
   ========================================================= */

.fv-subsidy-breadcrumb {
    position: relative;
    padding: 95px 0 85px;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            100deg,
            rgba(7, 36, 25, 0.94),
            rgba(22, 77, 39, 0.86)
        ),
        url("../img/breadcrumb.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fv-subsidy-breadcrumb::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -250px;
    right: -100px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255, 255, 255, 0.025),
        0 0 0 70px rgba(255, 255, 255, 0.018);
    pointer-events: none;
}

.fv-subsidy-breadcrumb::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    bottom: -210px;
    left: -100px;
    border: 1px solid rgba(139, 220, 75, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.fv-subsidy-breadcrumb .container {
    position: relative;
    z-index: 2;
}

.fv-subsidy-breadcrumb-content {
    display: flex;
    align-items: center;
    gap: 22px;
}

.fv-subsidy-breadcrumb-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;

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

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #b8f27e;
    font-size: 28px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);

    animation: fvSubsidyIconFloat 4s ease-in-out infinite;
}

.fv-subsidy-breadcrumb h1 {
    margin: 0 0 12px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
}

.fv-subsidy-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.fv-subsidy-breadcrumb-list li {
    color: rgba(255, 255, 255, 0.68);
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.fv-subsidy-breadcrumb-list li a {
    color: #c4f39b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.fv-subsidy-breadcrumb-list li a:hover {
    color: #ffffff;
}

.fv-subsidy-breadcrumb-list .separator {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
}

.fv-subsidy-breadcrumb-list .active {
    color: rgba(255, 255, 255, 0.90);
}


/* =========================================================
   HERO
   ========================================================= */

.fv-subsidy-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(83, 183, 3, 0.10),
            transparent 28%
        ),
        linear-gradient(135deg, #f8fcf5 0%, #ffffff 60%, #f1f9ec 100%);
}

.fv-subsidy-hero::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -180px;
    top: -220px;
    border: 1px solid rgba(83, 183, 3, 0.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(83, 183, 3, 0.025),
        0 0 0 70px rgba(83, 183, 3, 0.018);
    pointer-events: none;
}

.fv-subsidy-hero .container {
    position: relative;
    z-index: 2;
}

.fv-subsidy-hero-content {
    max-width: 650px;
    padding: 40px 0;
    animation: fvSubsidyFadeUp 0.8s ease both;
}

.fv-subsidy-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 22px;
    padding: 9px 16px;

    border: 1px solid rgba(83, 183, 3, 0.20);
    border-radius: 50px;
    background: #eef9e8;
    color: var(--fv-green-dark);

    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.fv-subsidy-hero-badge i {
    color: var(--fv-green);
    font-size: 14px;
}

.fv-subsidy-hero h2 {
    margin: 0 0 22px;
    color: var(--fv-navy);
    font-family: "Poppins", sans-serif;
    font-size: clamp(36px, 4.3vw, 60px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.fv-subsidy-hero h2 span {
    display: block;
    color: var(--fv-green);
    background: linear-gradient(
        90deg,
        #3f8f05,
        #53b703,
        #76c93c
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fv-subsidy-hero-description {
    max-width: 580px;
    margin: 0 0 30px;
    color: var(--fv-muted);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.fv-subsidy-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 24px;
}

.fv-subsidy-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 52px;
    padding: 13px 23px;

    overflow: hidden;
    border: 1px solid var(--fv-green);
    border-radius: 10px;

    background: var(--fv-green);
    color: #ffffff !important;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;

    box-shadow: 0 8px 22px rgba(83, 183, 3, 0.16);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.fv-subsidy-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.fv-subsidy-button:hover {
    transform: translateY(-4px);
    background: var(--fv-green-dark);
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(83, 183, 3, 0.25);
}

.fv-subsidy-button:hover::before {
    left: 130%;
}

.fv-subsidy-button i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.fv-subsidy-button:hover i {
    transform: translateX(4px);
}

.fv-subsidy-button.light {
    border-color: #d5e7cd;
    background: #ffffff;
    color: var(--fv-green-dark) !important;
    box-shadow: 0 8px 22px rgba(23, 53, 31, 0.06);
}

.fv-subsidy-button.light:hover {
    border-color: var(--fv-green);
    background: var(--fv-green-light);
    color: var(--fv-green-dark) !important;
    box-shadow: 0 12px 25px rgba(83, 183, 3, 0.12);
}

.fv-subsidy-hero-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    max-width: 550px;
    color: #000;
    font-size: 14px;
    line-height: 1.6;
}

.fv-subsidy-hero-note i {
    margin-top: 3px;
    color: var(--fv-green);
}


/* =========================================================
   HERO VISUAL - HOUSE / SOLAR ILLUSTRATION
   ========================================================= */

.fv-subsidy-hero-visual {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    animation: fvSubsidyFadeIn 1s ease 0.2s both;
}

.fv-subsidy-hero-visual::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(83, 183, 3, 0.07);
    filter: blur(2px);
    z-index: -2;
}

.fv-subsidy-hero-visual::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px dashed rgba(83, 183, 3, 0.20);
    border-radius: 50%;
    animation: fvSubsidyRotate 24s linear infinite;
    z-index: -1;
}

.fv-subsidy-sun {
    position: absolute;
    top: 35px;
    right: 55px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f7d66b, #f0b83d);
    box-shadow:
        0 0 0 12px rgba(240, 184, 61, 0.10),
        0 0 0 24px rgba(240, 184, 61, 0.05);
    animation: fvSubsidySunPulse 4s ease-in-out infinite;
}

.fv-subsidy-sun::before,
.fv-subsidy-sun::after {
    content: "";
    position: absolute;
    inset: -14px;
    border: 2px dotted rgba(240, 184, 61, 0.45);
    border-radius: 50%;
}

.fv-subsidy-sun::after {
    inset: -24px;
    border-color: rgba(240, 184, 61, 0.18);
}

.fv-subsidy-house {
    position: relative;
    width: 350px;
    height: 300px;
    margin-top: 70px;
}

.fv-subsidy-panel-roof {
    position: absolute;
    top: 28px;
    left: 12px;
    width: 326px;
    height: 112px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.16) 0,
            rgba(255, 255, 255, 0.16) 2px,
            transparent 2px,
            transparent 52px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.14) 0,
            rgba(255, 255, 255, 0.14) 2px,
            transparent 2px,
            transparent 27px
        ),
        linear-gradient(135deg, #1d5360, #153c4c);

    clip-path: polygon(8% 0, 100% 0, 88% 100%, 0 100%);
    border: 4px solid #173d4b;
    transform: perspective(500px) rotateX(5deg) rotateZ(-3deg);
    box-shadow: 0 15px 25px rgba(23, 53, 31, 0.15);
    z-index: 3;
}

.fv-subsidy-panel-roof::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            transparent 45%
        );
}

.fv-subsidy-house-body {
    position: absolute;
    left: 45px;
    bottom: 28px;
    width: 260px;
    height: 190px;
    border: 3px solid #d9e7d2;
    border-radius: 4px;
    background: linear-gradient(145deg, #ffffff, #eef7e9);
    box-shadow: 0 18px 30px rgba(23, 53, 31, 0.10);
    z-index: 2;
}

.fv-subsidy-window {
    position: absolute;
    top: 48px;
    width: 52px;
    height: 58px;
    border: 5px solid #ffffff;
    background:
        linear-gradient(
            90deg,
            transparent 47%,
            #ffffff 47%,
            #ffffff 53%,
            transparent 53%
        ),
        linear-gradient(
            0deg,
            transparent 47%,
            #ffffff 47%,
            #ffffff 53%,
            transparent 53%
        ),
        linear-gradient(135deg, #78c8d2, #287e93);
    box-shadow: 0 3px 10px rgba(23, 53, 31, 0.08);
}

.fv-subsidy-window.left {
    left: 25px;
}

.fv-subsidy-window.right {
    right: 25px;
}

.fv-subsidy-door {
    position: absolute;
    bottom: 0;
    left: 105px;
    width: 55px;
    height: 105px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #b4d68f, #8fbd6b);
    border: 3px solid #ffffff;
}

.fv-subsidy-door::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #548d2b;
}

.fv-subsidy-ground {
    position: absolute;
    bottom: 5px;
    left: -5px;
    width: 360px;
    height: 28px;
    border-radius: 50%;
    background: #d9edca;
    z-index: 1;
}

.fv-subsidy-leaf {
    position: absolute;
    bottom: 26px;
    width: 42px;
    height: 70px;
    border-radius: 100% 0 100% 0;
    background: linear-gradient(145deg, #86ca4d, #3f8f05);
    z-index: 4;
}

.fv-subsidy-leaf::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 80px;
    bottom: -15px;
    left: 50%;
    background: #6c9d48;
    transform: rotate(25deg);
    transform-origin: bottom;
}

.fv-subsidy-leaf.left {
    left: 5px;
    transform: rotate(-20deg);
}

.fv-subsidy-leaf.right {
    right: 5px;
    transform: rotate(20deg) scaleX(-1);
}


/* =========================================================
   STATS
   ========================================================= */

.fv-subsidy-stats {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    padding: 0 0 25px;
    background: #ffffff;
}

.fv-subsidy-stats-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;

    border: 1px solid #e1eddc;
    border-radius: 18px;
    background: #ffffff;

    box-shadow: 0 15px 40px rgba(23, 53, 31, 0.07);
    overflow: hidden;
}

.fv-subsidy-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 28px 25px;
}

.fv-subsidy-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    background: #e6efe1;
}

.fv-subsidy-stat-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;

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

    border-radius: 14px;
    background: var(--fv-green-light);
    color: var(--fv-green);
    font-size: 20px;

    transition: all 0.3s ease;
}

.fv-subsidy-stat:hover .fv-subsidy-stat-icon {
    background: var(--fv-green);
    color: #ffffff;
    transform: rotate(-5deg) scale(1.05);
}

.fv-subsidy-stat strong {
    display: block;
    margin-bottom: 4px;
    color: var(--fv-navy);
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.fv-subsidy-stat span {
    display: block;
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.fv-subsidy-section-heading {
    max-width: 1000px;
    margin: 0 auto 20px;
    text-align: center;
}

.fv-subsidy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 13px;
    color: var(--fv-green);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fv-subsidy-eyebrow::before,
.fv-subsidy-eyebrow::after {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 5px;
    background: var(--fv-green);
}

.fv-subsidy-section-heading h2 {
    margin: 0 0 15px;
    color: var(--fv-navy);
    font-family: "Poppins", sans-serif;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px;
}

.fv-subsidy-section-heading h2 span {
    color: var(--fv-green);
}

.fv-subsidy-section-heading p {
    max-width: 1500px;
    margin: 0 auto;
    color: var(--fv-muted);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   INFORMATION CARD
   ========================================================= */

.fv-subsidy-info-card {
    height: 100%;
    padding: 38px;

    border: 1px solid var(--fv-border);
    border-radius: 18px;
    background: #ffffff;

    box-shadow: 0 10px 35px rgba(23, 53, 31, 0.045);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.fv-subsidy-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(23, 53, 31, 0.08);
}

.fv-subsidy-info-card h3 {
    margin: 0 0 20px;
    color: var(--fv-navy);
    font-family: "Poppins", sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.3;
}

.fv-subsidy-info-card h3 span {
    color: var(--fv-green);
}

.fv-subsidy-info-card p {
    margin: 0 0 17px;
    color: var(--fv-muted);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.fv-subsidy-check-list {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin: 25px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #edf3e9;
    list-style: none;
}

.fv-subsidy-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #000;
    font-size: 16px;
    line-height: 1.6;
}

.fv-subsidy-check-list li i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--fv-green);
    font-size: 14px;
}


/* =========================================================
   HIGHLIGHT CARD
   ========================================================= */

.fv-subsidy-highlight-card {
    position: relative;
    height: 100%;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 38px;
    overflow: hidden;

    border-radius: 18px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, 0.20),
            transparent 35%
        ),
        linear-gradient(145deg, #3f8f05, #53b703);

    color: #ffffff;
    box-shadow: 0 15px 35px rgba(83, 183, 3, 0.16);
}

.fv-subsidy-highlight-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -100px;
    right: -90px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    box-shadow:
        0 0 0 25px rgba(255, 255, 255, 0.04),
        0 0 0 50px rgba(255, 255, 255, 0.03);
}

.fv-subsidy-highlight-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -50px;
    left: -40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}

.fv-subsidy-highlight-card > * {
    position: relative;
    z-index: 1;
}

.fv-subsidy-highlight-card .icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 23px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 25px;

    animation: fvSubsidyIconFloat 4s ease-in-out infinite;
}

.fv-subsidy-highlight-card h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.fv-subsidy-highlight-card p {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.75;
}

.fv-subsidy-highlight-amount {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);

    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
}

.fv-subsidy-highlight-amount small {
    color: rgba(255, 255, 255, 0.72);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* =========================================================
   SUBSIDY BENEFITS
   ========================================================= */

.fv-subsidy-benefits-heading {

    margin-top: 58px;
    margin-bottom: 28px;

    text-align: center;

}


/* Small label */

.fv-subsidy-benefits-label {

    display: flex;

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

    gap: 10px;

    margin-bottom: 12px;

    color: #53B703;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


.fv-subsidy-benefits-label span {

    width: 28px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #53B703
        );

}


.fv-subsidy-benefits-label span:last-child {

    background:
        linear-gradient(
            90deg,
            #53B703,
            transparent
        );

}


/* Benefits heading */

.fv-subsidy-benefits-heading h3 {

    margin: 0;

    color: #17351F;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 24px;

    line-height: 1.4;

    font-weight: 700;

}


.fv-subsidy-benefits-heading h3 span {

    color: #53B703;

}


/* =========================================================
   BENEFIT GRID
   ========================================================= */

.fv-subsidy-benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 15px;

}


/* =========================================================
   BENEFIT CARD
   ========================================================= */

.fv-subsidy-benefit-card {

    position: relative;

    min-height: 225px;

    padding: 22px 18px 20px;

    border:
        1px solid rgba(83,183,3,.12);

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fcf5
        );

    box-shadow:
        0 8px 25px rgba(23,53,31,.045);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .35s ease;

}


/* Top green line */

.fv-subsidy-benefit-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #53B703,
            #A8E879
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .45s ease;

}


/* Background glow */

.fv-subsidy-benefit-card::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -75px;
    bottom: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(83,183,3,.10),
            transparent 68%
        );

    transition:
        transform .55s ease;

    pointer-events: none;

}


/* Hover */

.fv-subsidy-benefit-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(83,183,3,.30);

    box-shadow:
        0 20px 42px rgba(23,53,31,.10);

}


.fv-subsidy-benefit-card:hover::before {

    transform:
        scaleX(1);

}


.fv-subsidy-benefit-card:hover::after {

    transform:
        scale(1.8);

}


/* =========================================================
   BENEFIT ICON
   ========================================================= */

.fv-subsidy-benefit-icon {

    position: relative;

    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 18px;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #EEF9E8,
            #E2F5D7
        );

    color:
        #53B703;

    font-size:
        20px;

    box-shadow:
        0 6px 16px rgba(83,183,3,.08);

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;

}


.fv-subsidy-benefit-card:hover
.fv-subsidy-benefit-icon {

    background:
        linear-gradient(
            135deg,
            #53B703,
            #3F8F05
        );

    color:
        #ffffff;

    transform:
        translateY(-4px)
        rotate(-5deg);

    box-shadow:
        0 10px 25px rgba(83,183,3,.22);

}


/* =========================================================
   NUMBER
   ========================================================= */

.fv-subsidy-benefit-number {

    position: absolute;

    top: 20px;
    right: 17px;

    color:
        rgba(83,183,3,.15);

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        26px;

    font-weight:
        800;

    line-height:
        1;

    transition:
        color .35s ease,
        transform .35s ease;

}


.fv-subsidy-benefit-card:hover
.fv-subsidy-benefit-number {

    color:
        rgba(83,183,3,.28);

    transform:
        translateY(-3px);

}


/* =========================================================
   TITLE
   ========================================================= */

.fv-subsidy-benefit-card h4 {

    position: relative;

    margin:
        0 0 9px;

    color:
        #17351F;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.4;

    transition:
        color .3s ease;

}


.fv-subsidy-benefit-card:hover h4 {

    color:
        #53B703;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.fv-subsidy-benefit-card p {

    position: relative;

    margin:
        0;

    color:
        #000;

    font-size:
        16px;

    line-height:
        1.5;

}


/* =========================================================
   ICON FLOAT ANIMATION
   ========================================================= */

.fv-subsidy-benefit-card:nth-child(1)
.fv-subsidy-benefit-icon {

    animation:
        fvBenefitFloat 4s ease-in-out infinite;

}


.fv-subsidy-benefit-card:nth-child(2)
.fv-subsidy-benefit-icon {

    animation:
        fvBenefitFloat 4.5s .3s ease-in-out infinite;

}


.fv-subsidy-benefit-card:nth-child(3)
.fv-subsidy-benefit-icon {

    animation:
        fvBenefitFloat 5s .5s ease-in-out infinite;

}


.fv-subsidy-benefit-card:nth-child(4)
.fv-subsidy-benefit-icon {

    animation:
        fvBenefitFloat 4.3s .2s ease-in-out infinite;

}


.fv-subsidy-benefit-card:nth-child(5)
.fv-subsidy-benefit-icon {

    animation:
        fvBenefitFloat 4.7s .6s ease-in-out infinite;

}


@keyframes fvBenefitFloat {

    0%, 100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-4px);

    }

}


/* =========================================================
   SUBTLE CARD ENTRY
   ========================================================= */

.fv-subsidy-benefit-card {

    animation:
        fvBenefitCardIn .7s cubic-bezier(.2,.8,.2,1) both;

}


.fv-subsidy-benefit-card:nth-child(1) {
    animation-delay: .05s;
}

.fv-subsidy-benefit-card:nth-child(2) {
    animation-delay: .12s;
}

.fv-subsidy-benefit-card:nth-child(3) {
    animation-delay: .19s;
}

.fv-subsidy-benefit-card:nth-child(4) {
    animation-delay: .26s;
}

.fv-subsidy-benefit-card:nth-child(5) {
    animation-delay: .33s;
}


@keyframes fvBenefitCardIn {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .fv-subsidy-benefits-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


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

@media (max-width: 767.98px) {

    .fv-subsidy-benefits-heading {

        margin-top:
            42px;

        margin-bottom:
            22px;

    }

    .fv-subsidy-benefits-heading h3 {

        font-size:
            21px;

    }

    .fv-subsidy-benefits-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            12px;

    }

    .fv-subsidy-benefit-card {

        min-height:
            205px;

        padding:
            18px 15px;

    }

    .fv-subsidy-benefit-icon {

        width:
            45px;

        height:
            45px;

        margin-bottom:
            14px;

        font-size:
            17px;

    }

    .fv-subsidy-benefit-number {

        top:
            17px;

        right:
            13px;

        font-size:
            21px;

    }

    .fv-subsidy-benefit-card h4 {

        font-size:
            13px;

    }

    .fv-subsidy-benefit-card p {

        font-size:
            10.5px;

    }

}


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

@media (max-width: 480px) {

    .fv-subsidy-benefits-grid {

        grid-template-columns:
            1fr;

    }

    .fv-subsidy-benefit-card {

        min-height:
            auto;

    }

}
/* =========================================================
   SUBSIDY TABLE
   ========================================================= */

.fv-subsidy-table-wrapper {
    overflow: hidden;
    border: 1px solid var(--fv-border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(23, 53, 31, 0.055);
}

.fv-subsidy-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 24px 30px;
    background: linear-gradient(135deg, #17351f, #285b32);
}

.fv-subsidy-table-header h3 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.fv-subsidy-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-family: "Open Sans", sans-serif;
}

.fv-subsidy-table thead th {
    padding: 17px 30px;
    border-bottom: 1px solid #e5efe0;
    background: #f5faf2;
    color: #607363;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-align: left;
    text-transform: uppercase;
}

.fv-subsidy-table tbody td {
    padding: 19px 30px;
    border-bottom: 1px solid #edf3e9;
    color: #40534b;
    font-size: 16px;
    vertical-align: middle;
}

.fv-subsidy-table tbody tr:last-child td {
    border-bottom: 0;
}

.fv-subsidy-table tbody tr {
    transition: background 0.25s ease;
}

.fv-subsidy-table tbody tr:hover {
    background: #fbfef9;
}

.fv-subsidy-table tbody td strong {
    color: var(--fv-green-dark);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.fv-subsidy-table tbody tr.recommended-row {
    background: #f1faeb;
}

.fv-subsidy-table tbody tr.recommended-row td:first-child {
    color: var(--fv-green-dark);
    font-weight: 700;
}

.fv-subsidy-table-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    background: #dff2d2;
    color: #3f8f05;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
}

.fv-subsidy-table-note {
    margin: 0;
    padding: 18px 30px;
    border-top: 1px solid #edf3e9;
    background: #fbfdf9;
    color: #000;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   CALCULATOR
   ========================================================= */

/* =========================================================
   FUTUREVOLT - SUBSIDY CALCULATOR
   ========================================================= */

.fv-subsidy-calculator-section {
    padding: 50px 0;
}


/* MAIN CALCULATOR
--------------------------------------------------------- */

.fv-subsidy-calculator {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
    min-height: 650px;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(83, 183, 3, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #101914 0%,
            #122018 55%,
            #0b120e 100%
        );
    box-shadow:
        0 30px 70px rgba(23, 53, 31, 0.20);
}


/* =========================================================
   LEFT
   ========================================================= */

.fv-subsidy-calc-left {
    position: relative;
    padding: 48px 42px 0;
    min-width: 0;
}


/* HEADING */

.fv-subsidy-calc-heading {
    max-width: 680px;
}

.fv-subsidy-calc-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.fv-subsidy-calc-heading h3 span {
    color: #65d20d;
}

.fv-subsidy-calc-heading p {
    margin: 16px 0 0;
    max-width: 620px;
    color: white;
    font-size: 16px;
    line-height: 1.7;
}

.fv-subsidy-amount-update {
    animation: fvSubsidyAmountUpdate 0.35s ease;
}

@keyframes fvSubsidyAmountUpdate {

    0% {
        opacity: 0.35;
        transform: translateY(5px) scale(0.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}
/* =========================================================
   LOCATION
   ========================================================= */

.fv-subsidy-calc-location {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
}

.fv-subsidy-calc-location label {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.fv-subsidy-city-select {
    min-width: 180px;
    padding: 10px 40px 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    outline: none;
    background-color: #263229;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.fv-subsidy-city-select:hover,
.fv-subsidy-city-select:focus {
    border-color: #65d20d;
    box-shadow: 0 0 0 3px rgba(101, 210, 13, 0.10);
}


/* =========================================================
   SYSTEM SELECTOR
   ========================================================= */

.fv-subsidy-system-selector {
    position: relative;
    margin-top: 28px;
    padding: 15px 16px 18px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.055);
}

.fv-subsidy-system-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.fv-subsidy-system-label span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
}

.fv-subsidy-system-label strong {
    min-width: 75px;
    padding: 7px 12px;
    border-radius: 7px;
    background: #65d20d;
    color: #10200f;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
}


/* RANGE */

.fv-subsidy-range-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fv-subsidy-range-track {
    position: relative;
    flex: 1;
}

#fvSubsidySystemSize {
    width: 100%;
    height: 6px;
    margin: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 10px;
    background: linear-gradient(
        to right,
        #65d20d 0%,
        #65d20d 22.22%,
        rgba(255,255,255,0.16) 22.22%,
        rgba(255,255,255,0.16) 100%
    );
    cursor: pointer;
}


/* Chrome / Edge */

#fvSubsidySystemSize::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    appearance: none;
    -webkit-appearance: none;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #65d20d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    cursor: grab;
    transition: 0.25s ease;
}

#fvSubsidySystemSize::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

#fvSubsidySystemSize::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #65d20d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    cursor: grab;
}


/* RANGE POINTS */

.fv-subsidy-range-points {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    padding: 0 2px;
}

.fv-subsidy-range-points span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 600;
    transition: 0.25s ease;
}

.fv-subsidy-range-points span.active {
    color: #65d20d;
    font-weight: 800;
}


/* ARROW BUTTONS */

.fv-subsidy-range-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fv-subsidy-range-btn:hover {
    background: #65d20d;
    color: #11200f;
    transform: scale(1.05);
}


/* =========================================================
   HOUSE VISUAL
   ========================================================= */

.fv-subsidy-house-area {
    position: relative;
    height: 310px;
    margin: 5px -42px 0;
    overflow: hidden;
}


/* GLOW */

.fv-subsidy-sun-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 20px;
    left: 22%;
    border-radius: 50%;
    background: rgba(101, 210, 13, 0.12);
    filter: blur(35px);
    animation: fvSunGlow 4s ease-in-out infinite;
}

@keyframes fvSunGlow {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.85;
    }
}


/* HOUSE */

.fv-subsidy-house {
    position: absolute;
    left: 13%;
    bottom: 5px;
    width: 480px;
    height: 245px;
    perspective: 800px;
    animation: fvHouseFloat 5s ease-in-out infinite;
}

@keyframes fvHouseFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.fv-house-main {
    position: absolute;
    left: 80px;
    bottom: 20px;
    width: 350px;
    height: 170px;
    background: #f5f7f3;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30);
}


/* ROOF */

.fv-house-roof {
    position: absolute;
    left: -20px;
    top: -65px;
    width: 395px;
    height: 105px;
    transform: skewX(-28deg);
    background: #e2e8e1;
    border: 5px solid #d5ddd3;
}


/* SOLAR PANELS */

.fv-house-solar-panel {
    position: absolute;
    width: 145px;
    height: 78px;
    border: 4px solid #84948a;
    border-radius: 3px;
    background:
        repeating-linear-gradient(
            90deg,
            #193f43 0,
            #193f43 12px,
            #356d6d 13px,
            #356d6d 15px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 12px,
            rgba(255,255,255,0.25) 13px,
            rgba(255,255,255,0.25) 15px
        );
    box-shadow: 0 10px 18px rgba(0,0,0,0.22);
}

.panel-one {
    top: -45px;
    left: 80px;
}

.panel-two {
    top: -15px;
    left: 205px;
    transform: scale(0.85);
}


/* WALL */

.fv-house-wall {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 130px;
    background: linear-gradient(
        90deg,
        #f8faf7,
        #e7ece6
    );
}


/* WINDOWS */

.fv-house-window {
    position: absolute;
    width: 57px;
    height: 62px;
    border: 6px solid #d3dbd2;
    background:
        linear-gradient(
            90deg,
            #52706c 48%,
            #e2e8e2 48%,
            #e2e8e2 52%,
            #52706c 52%
        );
    box-shadow: inset 0 0 20px rgba(53, 110, 100, 0.3);
}

.window-one {
    left: 32px;
    top: 28px;
}

.window-two {
    right: 32px;
    top: 28px;
}


/* DOOR */

.fv-house-door {
    position: absolute;
    left: 145px;
    bottom: 0;
    width: 72px;
    height: 95px;
    background: #b8c5bb;
    border: 5px solid #a4b2a6;
}


/* GROUND */

.fv-subsidy-house-ground {
    position: absolute;
    left: 8%;
    right: 3%;
    bottom: 0;
    height: 45px;
    border-radius: 50%;
    background: rgba(83, 183, 3, 0.18);
    filter: blur(3px);
}


/* PARTICLES */

.fv-subsidy-floating-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #65d20d;
    box-shadow: 0 0 12px rgba(101, 210, 13, 0.8);
    animation: fvParticleFloat 4s ease-in-out infinite;
}

.particle-one {
    top: 30px;
    left: 14%;
}

.particle-two {
    top: 100px;
    left: 68%;
    animation-delay: 1s;
}

.particle-three {
    top: 50px;
    left: 82%;
    animation-delay: 2s;
}

@keyframes fvParticleFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-18px);
        opacity: 1;
    }
}


/* =========================================================
   RIGHT SUMMARY
   ========================================================= */

.fv-subsidy-calc-right {
    display: flex;
    align-items: center;
    padding: 45px;
    background: rgba(255, 255, 255, 0.025);
}


.fv-subsidy-summary-card {
    width: 100%;
    padding: 30px;
    border-radius: 17px;
    background: linear-gradient(
        145deg,
        #26372e,
        #202e27
    );
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
        0 25px 45px rgba(0,0,0,0.22);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease;
}

.fv-subsidy-summary-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 32px 55px rgba(0,0,0,0.30);
}


/* TOTAL */

.fv-subsidy-summary-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.72);
    font-size: 16px;
}

.fv-subsidy-summary-top strong {
    display: block;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
}


/* DIVIDER */

.fv-subsidy-summary-divider {
    height: 1px;
    margin: 22px 0;
    background: rgba(255,255,255,0.12);
}


/* ROWS */

.fv-subsidy-summary-row,
.fv-subsidy-final-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
}

.fv-subsidy-summary-row span {
    color: rgba(255,255,255,0.72);
    font-size: 16px;
}

.fv-subsidy-summary-row strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}


.fv-subsidy-final-row span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.fv-subsidy-final-row strong {
    color: #65d20d;
    font-size: 18px;
    font-weight: 800;
}


/* NOTE */

.fv-subsidy-summary-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 20px;
    padding: 12px;
    border-radius: 9px;
    background: rgba(255,255,255,0.045);
}

.fv-subsidy-summary-note i {
    margin-top: 2px;
    color: #65d20d;
    font-size: 14px;
}

.fv-subsidy-summary-note span {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    line-height: 1.55;
}


/* CTA */

.fv-subsidy-calc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
    padding: 13px 14px 13px 16px;
    border-radius: 9px;
    background: #35443b;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fv-subsidy-calc-cta:hover {
    background: #65d20d;
    color: #10200f;
    transform: translateY(-2px);
}

.fv-subsidy-calc-cta span {
    font-size: 16px;
    font-weight: 700;
}

.fv-subsidy-calc-cta small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.65;
}

.fv-subsidy-calc-cta i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.fv-subsidy-calc-cta:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 1100px) {

    .fv-subsidy-calculator {
        grid-template-columns: 1fr;
    }

    .fv-subsidy-calc-left {
        padding-bottom: 0;
    }

    .fv-subsidy-calc-right {
        padding: 0 42px 42px;
    }

    .fv-subsidy-summary-card {
        max-width: 600px;
        margin: 0 auto;
    }

    .fv-subsidy-house-area {
        height: 290px;
    }

}


@media (max-width: 767px) {

    .fv-subsidy-calculator-section {
        padding: 55px 0;
    }

    .fv-subsidy-calculator {
        border-radius: 20px;
    }

    .fv-subsidy-calc-left {
        padding: 30px 22px 0;
    }

    .fv-subsidy-calc-heading h3 {
        font-size: 28px;
    }

    .fv-subsidy-calc-heading p {
        font-size: 14px;
    }

    .fv-subsidy-calc-location {
        display: block;
    }

    .fv-subsidy-calc-location label {
        display: block;
        margin-bottom: 8px;
    }

    .fv-subsidy-city-select {
        width: 100%;
    }

    .fv-subsidy-system-label {
        align-items: flex-start;
    }

    .fv-subsidy-system-label span {
        font-size: 12px;
    }

    .fv-subsidy-range-btn {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .fv-subsidy-house-area {
        height: 250px;
        margin-left: -22px;
        margin-right: -22px;
    }

    .fv-subsidy-house {
        left: 50%;
        transform: translateX(-50%) scale(0.72);
        transform-origin: bottom center;
    }

    @keyframes fvHouseFloat {
        0%, 100% {
            transform: translateX(-50%) scale(0.72) translateY(0);
        }

        50% {
            transform: translateX(-50%) scale(0.72) translateY(-8px);
        }
    }

    .fv-subsidy-calc-right {
        padding: 0 22px 30px;
    }

    .fv-subsidy-summary-card {
        padding: 22px;
    }

    .fv-subsidy-summary-top strong {
        font-size: 36px;
    }

}


@media (max-width: 480px) {

    .fv-subsidy-calc-heading h3 {
        font-size: 24px;
    }

    .fv-subsidy-system-label {
        display: block;
    }

    .fv-subsidy-system-label strong {
        display: inline-block;
        margin-top: 8px;
    }

    .fv-subsidy-range-points span:nth-child(n+6) {
        display: none;
    }

    .fv-subsidy-summary-row span,
    .fv-subsidy-summary-row strong {
        font-size: 14px;
    }

    .fv-subsidy-summary-top strong {
        font-size: 32px;
    }

}

/* =========================================================
   ELIGIBILITY / DOCUMENTS CARDS
   ========================================================= */

/* =========================================================
   FUTUREVOLT
   ELIGIBILITY + DOCUMENTS SECTION
   Inspired by the provided reference layout
   ========================================================= */


/* =========================================================
   MAIN ELIGIBILITY ROW
   ========================================================= */

.fv-eligibility-main {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        325px;

    gap: 45px;

    align-items: stretch;

    margin-top: 35px;

}


/* =========================================================
   ELIGIBILITY CARD
   ========================================================= */

.fv-eligibility-card {

    position: relative;

    height: 100%;

    padding: 32px 35px;

    border-radius: 17px;

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

    border:
        1px solid rgba(83,183,3,0.10);

    box-shadow:
        0 10px 30px rgba(23,53,31,0.045);

    backdrop-filter: blur(4px);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

    overflow: hidden;

}


/* Decorative green glow */

.fv-eligibility-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(83,183,3,.09),
            transparent 70%
        );

    transition:
        transform .6s ease;

    pointer-events: none;

}


.fv-eligibility-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(83,183,3,.24);

    box-shadow:
        0 18px 45px rgba(23,53,31,.09);

}


.fv-eligibility-card:hover::before {

    transform:
        scale(1.45);

}


/* =========================================================
   CARD HEADER
   ========================================================= */

.fv-eligibility-card-header {

    display: flex;

    align-items: center;

    gap: 16px;

}


.fv-eligibility-card-header h3 {

    margin: 0;

    color: #17351F;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 22px;

    font-weight: 700;

}


/* =========================================================
   ELIGIBILITY ICON
   ========================================================= */

.fv-eligibility-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

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

    border-radius: 13px;

    background:
        #EEF9E8;

    color:
        #53B703;

    font-size: 19px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}


.fv-eligibility-card:hover
.fv-eligibility-icon {

    background:
        #53B703;

    color:
        #ffffff;

    transform:
        translateY(-3px)
        rotate(-4deg);

    box-shadow:
        0 9px 22px rgba(83,183,3,.20);

}


/* =========================================================
   DIVIDER
   ========================================================= */

.fv-eligibility-divider {

    width: 100%;

    height: 1px;

    margin:
        18px 0 17px;

    background:
        #DDEBD7;

}


/* =========================================================
   ELIGIBILITY LIST
   ========================================================= */

.fv-eligibility-list {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.fv-eligibility-list li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color:
        #000;

    font-size: 16px;

    line-height: 1.5;

    transition:
        transform .3s ease,
        color .3s ease;

}


.fv-eligibility-list li:hover {

    transform:
        translateX(5px);

}


.fv-eligibility-list li i {

    flex:
        0 0 auto;

    margin-top: 4px;

    color:
        #53B703;

    font-size: 14px;

    transition:
        transform .3s ease;

}


.fv-eligibility-list li:hover i {

    transform:
        scale(1.15);

}


/* =========================================================
   IMAGE
   ========================================================= */

.fv-eligibility-image {

    min-height: 100%;

}


.fv-eligibility-image-wrap {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 320px;

    overflow: hidden;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(23,53,31,.08);

}


.fv-eligibility-image-wrap img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;

}


.fv-eligibility-image-wrap:hover img {

    transform:
        scale(1.07);

}


/* Image overlay */

.fv-eligibility-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(23,53,31,.38) 100%
        );

    pointer-events: none;

}


/* =========================================================
   IMAGE BADGE
   ========================================================= */

.fv-eligibility-image-badge {

    position: absolute;

    left: 18px;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 13px;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.94);

    color:
        #17351F;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(0,0,0,.12);

    backdrop-filter:
        blur(5px);

    transition:
        transform .35s ease;

}


.fv-eligibility-image-badge i {

    color:
        #53B703;

}


.fv-eligibility-image-wrap:hover
.fv-eligibility-image-badge {

    transform:
        translateY(-4px);

}


/* =========================================================
   DOCUMENT GRID
   ========================================================= */

.fv-document-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 16px;

    margin-top: 27px;

}


/* =========================================================
   DOCUMENT CARD
   ========================================================= */

.fv-document-card {

    position: relative;

    min-height: 130px;

    padding:
        20px 17px;

    border:
        1px solid rgba(83,183,3,.13);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.72);

    box-shadow:
        0 6px 20px rgba(23,53,31,.035);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;

    overflow: hidden;

}


/* Green corner glow */

.fv-document-card::before {

    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -45px;
    top: -45px;

    border-radius: 50%;

    background:
        rgba(83,183,3,.07);

    transition:
        transform .45s ease;

}


.fv-document-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(83,183,3,.30);

    background:
        #ffffff;

    box-shadow:
        0 16px 35px rgba(23,53,31,.09);

}


.fv-document-card:hover::before {

    transform:
        scale(1.5);

}


/* =========================================================
   DOCUMENT ICON
   ========================================================= */

.fv-document-icon {

    width: 40px;
    height: 40px;

    display: flex;

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

    margin-bottom: 14px;

    border-radius:
        9px;

    background:
        #EEF9E8;

    color:
        #53B703;

    font-size:
        17px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}


.fv-document-card:hover
.fv-document-icon {

    background:
        #53B703;

    color:
        #ffffff;

    transform:
        translateY(-3px)
        rotate(-4deg);

}


.fv-document-card h4 {

    position: relative;

    margin: 0;

    color:
        #17351F;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        16px;

    line-height:
        1.4;

    font-weight:
        600;

}


/* =========================================================
   CALLBACK STRIP
   ========================================================= */

.fv-eligibility-callback {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 20px;

    padding:
        14px 20px;

    border:
        1px solid rgba(83,183,3,.10);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 6px 20px rgba(23,53,31,.035);

}


/* Text */

.fv-callback-text {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    color:
        #000;

    font-size:
        16px;

}


.fv-callback-text strong {

    color:
        #17351F;

    font-weight:
        700;

}


/* =========================================================
   CALLBACK BUTTON
   ========================================================= */

.fv-callback-button {

    position: relative;

    flex:
        0 0 auto;

    display: inline-flex;

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

    min-width:
        195px;

    min-height:
        42px;

    padding:
        10px 20px;

    border-radius:
        8px;

    background:
        #53b703;

    color:
        #ffffff;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    overflow:
        hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.fv-callback-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:
        skewX(-20deg);

}


.fv-callback-button:hover {

    color:
        #ffffff;

    text-decoration:
        none;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(23,53,165,.22);

}


.fv-callback-button:hover::before {

    animation:
        fvEligibilityButtonShine .7s ease;

}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes fvEligibilityButtonShine {

    from {
        left: -120%;
    }

    to {
        left: 130%;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .fv-eligibility-main {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .fv-eligibility-image-wrap {

        min-height:
            300px;

        max-height:
            360px;

    }


    .fv-document-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


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

@media (max-width: 767.98px) {

    .fv-eligibility-main {

        margin-top:
            25px;

    }


    .fv-eligibility-card {

        padding:
            23px 20px;

    }


    .fv-eligibility-card-header h3 {

        font-size:
            19px;

    }


    .fv-eligibility-list {

        gap:
            11px;

    }


    .fv-eligibility-list li {

        font-size:
            13px;

    }


    .fv-eligibility-image-wrap {

        min-height:
            280px;

        border-radius:
            15px;

    }


    .fv-document-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            12px;

    }


    .fv-document-card {

        min-height:
            115px;

        padding:
            17px 15px;

    }


    .fv-document-card h4 {

        font-size:
            13px;

    }


    .fv-eligibility-callback {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            14px;

        padding:
            17px;

    }


    .fv-callback-text {

        display:
            block;

        line-height:
            1.6;

    }


    .fv-callback-button {

        width:
            100%;

    }

}


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

@media (max-width: 480px) {

    .fv-document-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .fv-document-card {

        min-height:
            105px;

    }


    .fv-document-icon {

        width:
            36px;

        height:
            36px;

        margin-bottom:
            11px;

        font-size:
            15px;

    }


    .fv-document-card h4 {

        font-size:
            12px;

    }

}
/* =========================================================
   ANIMATED SOLAR ILLUSTRATION
   ========================================================= */

.fv-solar-animation {

    position: relative;

    width: 100%;
    min-height: 320px;

    height: 100%;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #E9F7FF 0%,
            #F5FBF1 65%,
            #EAF7E4 100%
        );

    box-shadow:
        0 12px 35px rgba(23,53,31,.08);

}


/* =========================================================
   SOFT BACKGROUND GLOW
   ========================================================= */

.fv-solar-animation::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -100px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(83,183,3,.15),
            transparent 70%
        );

    animation:
        fvSolarBackgroundGlow
        6s ease-in-out infinite alternate;

}


/* =========================================================
   SUN
   ========================================================= */

.fv-solar-sun {

    position: absolute;

    width: 70px;
    height: 70px;

    top: 40px;
    right: 55px;

    display: flex;

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

    border-radius: 50%;

    animation:
        fvSolarSunFloat
        5s ease-in-out infinite;

}


.fv-sun-core {

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #A8E879,
            #53B703
        );

    box-shadow:
        0 0 25px rgba(83,183,3,.28),
        0 0 55px rgba(83,183,3,.12);

    animation:
        fvSolarSunPulse
        3s ease-in-out infinite;

}


/* =========================================================
   SUN RAYS
   ========================================================= */

.fv-sun-ray {

    position: absolute;

    width: 3px;
    height: 15px;

    top: 68px;
    right: 88px;

    border-radius: 5px;

    background:
        #53B703;

    opacity: .45;

    transform-origin:
        50% -28px;

    animation:
        fvSolarRayPulse
        2.5s ease-in-out infinite;

}


.ray-1 {
    transform: rotate(0deg);
}

.ray-2 {
    transform: rotate(60deg);
}

.ray-3 {
    transform: rotate(120deg);
}

.ray-4 {
    transform: rotate(180deg);
}

.ray-5 {
    transform: rotate(240deg);
}

.ray-6 {
    transform: rotate(300deg);
}


/* =========================================================
   HOUSE
   ========================================================= */

.fv-solar-house {

    position: absolute;

    left: 50%;

    bottom: 55px;

    width: 230px;
    height: 175px;

    transform:
        translateX(-50%);

    animation:
        fvSolarHouseFloat
        6s ease-in-out infinite;

}


/* =========================================================
   ROOF
   ========================================================= */

.fv-house-roof {

    position: absolute;

    left: 12px;
    top: 0;

    width: 205px;
    height: 105px;

    overflow: hidden;

    background:
        #DDEED5;

    clip-path:
        polygon(
            50% 0,
            100% 52%,
            95% 100%,
            5% 100%,
            0 52%
        );

}


/* =========================================================
   SOLAR PANEL
   ========================================================= */

.fv-solar-panel {

    position: absolute;

    left: 35px;
    top: 27px;

    width: 140px;
    height: 55px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-template-rows:
        repeat(2, 1fr);

    gap: 2px;

    padding: 3px;

    border-radius: 4px;

    background:
        #17351F;

    transform:
        skewY(-7deg)
        rotate(-1deg);

    box-shadow:
        0 8px 15px rgba(23,53,31,.20);

    animation:
        fvSolarPanelGlow
        4s ease-in-out infinite;

}


.fv-solar-panel span {

    display: block;

    border:
        1px solid rgba(168,232,121,.35);

    background:
        linear-gradient(
            135deg,
            #245C32,
            #3F8F05
        );

}


/* =========================================================
   HOUSE BODY
   ========================================================= */

.fv-house-body {

    position: absolute;

    left: 40px;
    bottom: 0;

    width: 150px;
    height: 105px;

    border-radius:
        4px 4px 0 0;

    background:
        #FFFFFF;

    border:
        1px solid #DDEBD7;

    box-shadow:
        0 10px 25px rgba(23,53,31,.08);

}


/* =========================================================
   WINDOW
   ========================================================= */

.fv-house-window {

    position: absolute;

    left: 20px;
    top: 25px;

    width: 40px;
    height: 35px;

    border:
        4px solid #53B703;

    background:
        #DFF4FA;

    overflow: hidden;

}


.fv-house-window span {

    position: absolute;

    width: 100%;
    height: 3px;

    top: 50%;

    background:
        #53B703;

    transform:
        translateY(-50%);

}


.fv-house-window::after {

    content: "";

    position: absolute;

    height: 100%;
    width: 3px;

    left: 50%;

    background:
        #53B703;

    transform:
        translateX(-50%);

}


/* =========================================================
   DOOR
   ========================================================= */

.fv-house-door {

    position: absolute;

    right: 22px;
    bottom: 0;

    width: 42px;
    height: 65px;

    border-radius:
        4px 4px 0 0;

    background:
        #17351F;

}


.fv-house-door::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    right: 7px;
    top: 50%;

    border-radius: 50%;

    background:
        #A8E879;

}


/* =========================================================
   GROUND
   ========================================================= */

.fv-solar-ground {

    position: absolute;

    left: -10%;

    bottom: 25px;

    width: 120%;
    height: 50px;

    border-radius:
        50%;

    background:
        #D9EFD0;

    box-shadow:
        0 -5px 20px rgba(83,183,3,.05);

}


/* =========================================================
   ENERGY PARTICLES
   ========================================================= */

.fv-energy-particle {

    position: absolute;

    display: flex;

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

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.90);

    color:
        #53B703;

    font-size:
        12px;

    box-shadow:
        0 5px 15px rgba(83,183,3,.12);

}


.particle-1 {

    left: 20%;

    top: 25%;

    animation:
        fvEnergyParticle1
        4s ease-in-out infinite;

}


.particle-2 {

    right: 20%;

    top: 42%;

    animation:
        fvEnergyParticle2
        5s ease-in-out infinite;

}


.particle-3 {

    left: 15%;

    bottom: 35%;

    animation:
        fvEnergyParticle3
        4.5s ease-in-out infinite;

}


/* =========================================================
   BOTTOM BADGE
   ========================================================= */

.fv-solar-animation-badge {

    position: absolute;

    left: 18px;
    bottom: 15px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 12px;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 8px 20px rgba(23,53,31,.10);

    backdrop-filter:
        blur(5px);

    animation:
        fvSolarBadgeFloat
        5s ease-in-out infinite;

}


.fv-animation-badge-icon {

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius:
        8px;

    background:
        #EEF9E8;

    color:
        #53B703;

    font-size:
        13px;

}


.fv-solar-animation-badge strong {

    display: block;

    color:
        #17351F;

    font-size:
        11px;

    font-weight:
        700;

}


.fv-solar-animation-badge span {

    display: block;

    color:
        #718078;

    font-size:
        9px;

    margin-top:
        1px;

}


/* =========================================================
   HOVER
   ========================================================= */

.fv-solar-animation {

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}


.fv-solar-animation:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px rgba(23,53,31,.12);

}


.fv-solar-animation:hover
.fv-solar-panel {

    animation-duration:
        1.5s;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fvSolarBackgroundGlow {

    from {
        transform: scale(1);
        opacity: .7;
    }

    to {
        transform: scale(1.25);
        opacity: 1;
    }

}


@keyframes fvSolarSunFloat {

    0%, 100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


@keyframes fvSolarSunPulse {

    0%, 100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.08);
    }

}


@keyframes fvSolarRayPulse {

    0%, 100% {
        opacity: .25;
        height: 12px;
    }

    50% {
        opacity: .7;
        height: 17px;
    }

}


@keyframes fvSolarHouseFloat {

    0%, 100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-6px);
    }

}


@keyframes fvSolarPanelGlow {

    0%, 100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.12);
    }

}


@keyframes fvEnergyParticle1 {

    0%, 100% {
        transform:
            translate(0,0)
            scale(1);

        opacity: .45;
    }

    50% {
        transform:
            translate(20px,-25px)
            scale(1.12);

        opacity: 1;
    }

}


@keyframes fvEnergyParticle2 {

    0%, 100% {
        transform:
            translate(0,0);

        opacity: .35;
    }

    50% {
        transform:
            translate(-18px,-28px);

        opacity: 1;
    }

}


@keyframes fvEnergyParticle3 {

    0%, 100% {
        transform:
            translate(0,0)
            rotate(0deg);

        opacity: .4;
    }

    50% {
        transform:
            translate(25px,-18px)
            rotate(15deg);

        opacity: 1;
    }

}


@keyframes fvSolarBadgeFloat {

    0%, 100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }

}


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

@media (max-width: 767.98px) {

    .fv-solar-animation {

        min-height:
            280px;

    }

    .fv-solar-house {

        transform:
            translateX(-50%)
            scale(.85);

        transform-origin:
            bottom center;

    }

    .fv-solar-sun {

        right:
            35px;

        top:
            30px;

        transform:
            scale(.8);

    }

    .fv-sun-ray {

        right:
            68px;

        top:
            57px;

    }

    .fv-solar-animation-badge {

        left:
            12px;

        bottom:
            12px;

    }

}


@media (prefers-reduced-motion: reduce) {

    .fv-solar-animation *,
    .fv-solar-animation::before {

        animation:
            none !important;

    }

}
/* =========================================================
   APPLICATION STEPS
   ========================================================= */

.fv-subsidy-steps {
    position: relative;
    padding-left: 0;
}

.fv-subsidy-steps::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 29px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        #cfe7c2,
        #e8f3e1
    );
}

.fv-subsidy-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 25px;

    padding: 0 0 32px;
}

.fv-subsidy-step:last-child {
    padding-bottom: 0;
}

.fv-subsidy-step-number {
    position: relative;
    z-index: 2;

    width: 60px;
    height: 60px;
    flex: 0 0 60px;

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

    border: 5px solid #ffffff;
    border-radius: 50%;
    background: var(--fv-green-light);
    color: var(--fv-green-dark);

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 800;

    box-shadow: 0 0 0 1px #dcebd5;
    transition: all 0.3s ease;
}

.fv-subsidy-step:hover .fv-subsidy-step-number {
    background: var(--fv-green);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(83, 183, 3, 0.10);
}

.fv-subsidy-step-content {
    flex: 1;
    padding: 8px 0 0;
}

.fv-subsidy-step-content h3 {
    margin: 0 0 9px;
    color: var(--fv-navy);
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.fv-subsidy-step:hover .fv-subsidy-step-content h3 {
    color: var(--fv-green-dark);
}

.fv-subsidy-step-content p {
    max-width: 650px;
    margin: 0;
    color: var(--fv-muted);
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   THINGS TO CHECK CARDS
   ========================================================= */

.fv-subsidy-check-card {
    position: relative;
    height: 100%;
    padding: 30px 25px;

    border: 1px solid var(--fv-border);
    border-radius: 16px;
    background: #ffffff;

    box-shadow: 0 8px 25px rgba(23, 53, 31, 0.035);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.fv-subsidy-check-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 0;
    height: 3px;
    border-radius: 0 0 5px 5px;
    background: var(--fv-green);
    transition: width 0.35s ease;
}

.fv-subsidy-check-card:hover {
    transform: translateY(-7px);
    border-color: rgba(83, 183, 3, 0.25);
    box-shadow: 0 16px 35px rgba(23, 53, 31, 0.07);
}

.fv-subsidy-check-card:hover::before {
    width: 55px;
}

.fv-subsidy-check-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin-bottom: 20px;

    border-radius: 14px;
    background: var(--fv-green-light);
    color: var(--fv-green);
    font-size: 21px;

    transition: all 0.3s ease;
}

.fv-subsidy-check-card:hover > i {
    background: var(--fv-green);
    color: #ffffff;
    transform: rotate(-5deg);
}

.fv-subsidy-check-card h3 {
    margin: 0 0 12px;
    color: var(--fv-navy);
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.fv-subsidy-check-card p {
    margin: 0;
    color: var(--fv-muted);
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   FAQ
   ========================================================= */

.fv-subsidy-faq-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

.fv-subsidy-faq-item {
    margin-bottom: 13px;
    overflow: hidden;

    border: 1px solid #e0ecd9;
    border-radius: 13px;
    background: #ffffff;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.fv-subsidy-faq-item:hover,
.fv-subsidy-faq-item.active {
    border-color: rgba(83, 183, 3, 0.35);
    box-shadow: 0 8px 25px rgba(23, 53, 31, 0.045);
}

.fv-subsidy-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 21px 25px;
    border: 0;
    outline: none;
    background: #ffffff;
    color: var(--fv-navy);

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;

    transition: color 0.3s ease;
}

.fv-subsidy-faq-question:hover {
    color: var(--fv-green-dark);
}

.fv-subsidy-faq-question i {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

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

    border-radius: 50%;
    background: var(--fv-green-light);
    color: var(--fv-green);
    font-size: 11px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.fv-subsidy-faq-item.active .fv-subsidy-faq-question i {
    transform: rotate(180deg);
    background: var(--fv-green);
    color: #ffffff;
}

.fv-subsidy-faq-answer {
    display: none;
    padding: 0 25px 22px;
}

.fv-subsidy-faq-item.active .fv-subsidy-faq-answer {
    display: block;
    animation: fvSubsidyFaqOpen 0.35s ease both;
}

.fv-subsidy-faq-answer p {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid #edf3e9;
    color: var(--fv-muted);
    font-size: 16px;
    line-height: 1.5;
}


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

.fv-subsidy-cta {
    position: relative;
    padding: 85px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 100%,
            rgba(139, 220, 75, 0.12),
            transparent 28%
        ),
        linear-gradient(135deg, #17351f 0%, #285b32 100%);
}

.fv-subsidy-cta::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -280px;
    right: -100px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255, 255, 255, 0.025),
        0 0 0 70px rgba(255, 255, 255, 0.018);
}

.fv-subsidy-cta::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    bottom: -180px;
    left: -100px;
    border: 1px solid rgba(139, 220, 75, 0.15);
    border-radius: 50%;
}

.fv-subsidy-cta .container {
    position: relative;
    z-index: 1;
}

.fv-subsidy-cta-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.fv-subsidy-cta-content h2 {
    margin: 0 0 17px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(28px, 3.5vw, 43px);
    font-weight: 700;
    line-height: 1.2;
}

.fv-subsidy-cta-content p {
    max-width: 650px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.8;
}

.fv-subsidy-cta-content .fv-subsidy-button {
    margin: 5px;
}

.fv-subsidy-cta-content .fv-subsidy-button.light {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--fv-green-dark) !important;
}

.fv-subsidy-cta-content .fv-subsidy-button.light:hover {
    background: #eef9e8;
    color: var(--fv-green-dark) !important;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fvSubsidyFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes fvSubsidyFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fvSubsidyIconFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes fvSubsidySunPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 12px rgba(240, 184, 61, 0.10),
            0 0 0 24px rgba(240, 184, 61, 0.05);
    }

    50% {
        transform: scale(1.06);
        box-shadow:
            0 0 0 18px rgba(240, 184, 61, 0.08),
            0 0 0 34px rgba(240, 184, 61, 0.035);
    }
}

@keyframes fvSubsidyRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fvSubsidyFaqOpen {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .fv-subsidy-breadcrumb {
        padding: 75px 0 65px;
    }

    .fv-subsidy-hero {
        min-height: auto;
        padding: 65px 0 45px;
    }

    .fv-subsidy-hero-content {
        max-width: 100%;
        padding: 0;
        text-align: center;
    }

    .fv-subsidy-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .fv-subsidy-hero-actions {
        justify-content: center;
    }

    .fv-subsidy-hero-note {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        text-align: left;
    }

    .fv-subsidy-hero-visual {
        min-height: 420px;
        margin-top: 10px;
    }

    .fv-subsidy-stats {
        padding-bottom: 20px;
    }

    .fv-subsidy-section {
        padding: 70px 0;
    }

    .fv-subsidy-section-heading {
        margin-bottom: 38px;
    }

    .fv-subsidy-info-card,
    .fv-subsidy-highlight-card,
    .fv-subsidy-feature-card {
        padding: 30px;
    }

    .fv-subsidy-highlight-card {
        min-height: 320px;
    }

    .fv-subsidy-calculator-content {
        padding: 35px;
    }

    .fv-subsidy-cta {
        padding: 70px 0;
    }
}


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

@media (max-width: 767.98px) {

    .fv-subsidy-breadcrumb {
        padding: 55px 0 50px;
    }

    .fv-subsidy-breadcrumb-content {
        gap: 15px;
    }

    .fv-subsidy-breadcrumb-icon {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 15px;
        font-size: 21px;
    }

    .fv-subsidy-breadcrumb h1 {
        margin-bottom: 9px;
        font-size: 27px;
    }

    .fv-subsidy-breadcrumb-list {
        gap: 8px;
    }

    .fv-subsidy-breadcrumb-list li {
        font-size: 11px;
    }

    .fv-subsidy-hero {
        padding: 50px 0 20px;
    }

    .fv-subsidy-hero-badge {
        margin-bottom: 18px;
        padding: 8px 12px;
        font-size: 10px;
    }

    .fv-subsidy-hero h2 {
        margin-bottom: 18px;
        font-size: 37px;
        letter-spacing: -0.7px;
    }

    .fv-subsidy-hero-description {
        font-size: 14px;
        line-height: 1.75;
    }

    .fv-subsidy-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fv-subsidy-button {
        width: 100%;
        min-height: 50px;
        padding: 13px 18px;
        font-size: 12px;
    }

    .fv-subsidy-hero-note {
        font-size: 10px;
        text-align: left;
    }

    .fv-subsidy-hero-visual {
        min-height: 350px;
        margin-top: 10px;
        transform: scale(0.82);
        transform-origin: top center;
        margin-bottom: -55px;
    }

    .fv-subsidy-sun {
        top: 15px;
        right: 15px;
        width: 60px;
        height: 60px;
    }

    .fv-subsidy-house {
        margin-top: 50px;
    }

    .fv-subsidy-stats {
        padding: 0 0 15px;
    }

    .fv-subsidy-stats-card {
        grid-template-columns: 1fr;
        border-radius: 15px;
    }

    .fv-subsidy-stat {
        padding: 20px;
    }

    .fv-subsidy-stat:not(:last-child)::after {
        top: auto;
        right: 20px;
        bottom: 0;
        width: calc(100% - 40px);
        height: 1px;
    }

    .fv-subsidy-stat strong {
        font-size: 20px;
    }

    .fv-subsidy-section {
        padding: 55px 0;
    }

    .fv-subsidy-section-heading {
        margin-bottom: 30px;
    }

    .fv-subsidy-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .fv-subsidy-eyebrow::before,
    .fv-subsidy-eyebrow::after {
        width: 16px;
    }

    .fv-subsidy-section-heading h2 {
        font-size: 29px;
    }

    .fv-subsidy-section-heading p {
        font-size: 14px;
    }

    .fv-subsidy-info-card,
    .fv-subsidy-highlight-card,
    .fv-subsidy-feature-card {
        padding: 25px;
    }

    .fv-subsidy-info-card h3 {
        font-size: 23px;
    }

    .fv-subsidy-highlight-card h3 {
        font-size: 22px;
    }

    .fv-subsidy-highlight-amount {
        font-size: 33px;
    }

    .fv-subsidy-table-wrapper {
        border-radius: 13px;
    }

    .fv-subsidy-table-header {
        padding: 19px 18px;
    }

    .fv-subsidy-table-header h3 {
        font-size: 15px;
    }

    .fv-subsidy-table thead th {
        padding: 14px 17px;
        font-size: 9px;
    }

    .fv-subsidy-table tbody td {
        padding: 16px 17px;
        font-size: 12px;
    }

    .fv-subsidy-table tbody td strong {
        font-size: 14px;
    }

    .fv-subsidy-table-badge {
        display: block;
        width: fit-content;
        margin: 6px 0 0;
        font-size: 8px;
    }

    .fv-subsidy-table-note {
        padding: 16px 17px;
        font-size: 10px;
    }

    .fv-subsidy-calculator-content {
        padding: 27px 22px;
    }

    .fv-subsidy-calculator-content h3 {
        font-size: 23px;
    }

    .fv-subsidy-calculator-controls {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .fv-subsidy-calculator-result {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .fv-subsidy-calculator-controls
    .fv-subsidy-calculator-result {
        height: auto;
    }

    .fv-subsidy-calculator-result > small {
        max-width: 100%;
        text-align: left;
    }

    .fv-subsidy-feature-card h3 {
        font-size: 19px;
    }

    .fv-subsidy-steps::before {
        left: 24px;
    }

    .fv-subsidy-step {
        gap: 17px;
        padding-bottom: 28px;
    }

    .fv-subsidy-step-number {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        font-size: 12px;
    }

    .fv-subsidy-step-content {
        padding-top: 5px;
    }

    .fv-subsidy-step-content h3 {
        font-size: 16px;
    }

    .fv-subsidy-step-content p {
        font-size: 12px;
    }

    .fv-subsidy-check-card {
        padding: 25px 22px;
    }

    .fv-subsidy-faq-question {
        padding: 18px;
        font-size: 14px;
    }

    .fv-subsidy-faq-answer {
        padding: 0 18px 18px;
    }

    .fv-subsidy-faq-answer p {
        font-size: 12px;
    }

    .fv-subsidy-cta {
        padding: 60px 0;
    }

    .fv-subsidy-cta-content h2 {
        font-size: 28px;
    }

    .fv-subsidy-cta-content p {
        font-size: 14px;
    }

    .fv-subsidy-cta-content .fv-subsidy-button {
        margin: 5px 0;
    }
}


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

@media (max-width: 480px) {

    .fv-subsidy-breadcrumb-content {
        align-items: flex-start;
    }

    .fv-subsidy-breadcrumb h1 {
        font-size: 23px;
    }

    .fv-subsidy-hero h2 {
        font-size: 32px;
    }

    .fv-subsidy-hero-description {
        font-size: 14px;
    }

    .fv-subsidy-hero-visual {
        transform: scale(0.70);
        margin-bottom: -100px;
    }

    .fv-subsidy-stat {
        gap: 12px;
    }

    .fv-subsidy-stat-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
        font-size: 17px;
    }

    .fv-subsidy-stat strong {
        font-size: 18px;
    }

    .fv-subsidy-stat span {
        font-size: 10px;
    }

    .fv-subsidy-section-heading h2 {
        font-size: 26px;
    }

    .fv-subsidy-info-card,
    .fv-subsidy-highlight-card,
    .fv-subsidy-feature-card {
        padding: 22px 20px;
    }

    .fv-subsidy-table thead th,
    .fv-subsidy-table tbody td {
        padding-left: 13px;
        padding-right: 13px;
    }

    .fv-subsidy-table tbody td {
        font-size: 11px;
    }

    .fv-subsidy-table tbody td strong {
        font-size: 14px;
    }

    .fv-subsidy-calculator-content {
        padding: 24px 18px;
    }

    .fv-subsidy-calculator-content h3 {
        font-size: 21px;
    }

    .fv-subsidy-step {
        gap: 13px;
    }

    .fv-subsidy-step-number {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 11px;
    }

    .fv-subsidy-steps::before {
        left: 21px;
    }

    .fv-subsidy-cta-content h2 {
        font-size: 25px;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-subsidy-breadcrumb-icon,
    .fv-subsidy-highlight-card .icon,
    .fv-subsidy-sun,
    .fv-subsidy-hero-visual::after {
        animation: none !important;
    }

    .fv-subsidy-button,
    .fv-subsidy-info-card,
    .fv-subsidy-feature-card,
    .fv-subsidy-check-card,
    .fv-subsidy-step-number,
    .fv-subsidy-stat-icon {
        transition: none !important;
    }
}
/* =========================================================
   FUTURE VOLT SUBSIDY PAGE
   EXTRA ATTRACTIVE ANIMATIONS & EFFECTS
   Add this CSS after your existing stylesheet
========================================================= */


/* ---------------------------------------------------------
   GLOBAL PAGE EFFECTS
--------------------------------------------------------- */

.fv-subsidy-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(85, 183, 7, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 28%,
            rgba(85, 183, 7, 0.06),
            transparent 30%
        ),
        #ffffff;
}

.fv-subsidy-section::before,
.fv-subsidy-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(5px);
}

.fv-subsidy-section::before {
    width: 260px;
    height: 260px;
    top: 320px;
    left: -150px;
    background: rgba(85, 183, 7, 0.06);
    animation: fvSubsidyOrbMove 14s ease-in-out infinite alternate;
}

.fv-subsidy-section::after {
    width: 220px;
    height: 220px;
    right: -110px;
    bottom: 260px;
    background: rgba(39, 174, 96, 0.06);
    animation: fvSubsidyOrbMoveReverse 17s ease-in-out infinite alternate;
}

.fv-subsidy-section .container {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   BREADCRUMB - PRESERVE BACKGROUND, ADD MOTION ONLY
--------------------------------------------------------- */

.fv-subsidy-breadcrumb {
    position: relative;
    overflow: hidden;
}

.fv-subsidy-breadcrumb::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        110deg,
        transparent,
        rgba(255, 255, 255, 0.16),
        transparent
    );
    animation: fvBreadcrumbShine 8s ease-in-out infinite;
}


/* ---------------------------------------------------------
   HERO SECTION
--------------------------------------------------------- */

.fv-subsidy-hero {
    position: relative;
    overflow: hidden;
    animation: fvHeroReveal 1s ease both;
}

.fv-subsidy-hero::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -170px;
    top: -180px;
    border: 1px solid rgba(85, 183, 7, 0.12);
    border-radius: 50%;
    animation: fvHeroCircleRotate 22s linear infinite;
    pointer-events: none;
}

.fv-subsidy-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -90px;
    top: -110px;
    border: 1px dashed rgba(85, 183, 7, 0.12);
    border-radius: 50%;
    animation: fvHeroCircleRotateReverse 18s linear infinite;
    pointer-events: none;
}

.fv-subsidy-hero-content {
    animation: fvHeroContentReveal 1s 0.15s ease both;
}

.fv-subsidy-hero-content h1 {
    animation: fvTitleReveal 1s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fv-subsidy-hero-content p {
    animation: fvTextReveal 1s 0.45s ease both;
}

.fv-subsidy-hero-badge {
    position: relative;
    overflow: hidden;
    animation:
        fvBadgeReveal 0.8s 0.1s ease both,
        fvBadgePulse 4s 1.5s ease-in-out infinite;
}

.fv-subsidy-hero-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -110%;
    width: 60%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: fvBadgeShine 5s 2s ease-in-out infinite;
}

.fv-subsidy-hero-actions {
    animation: fvActionsReveal 1s 0.65s ease both;
}


/* ---------------------------------------------------------
   BUTTON ANIMATIONS
--------------------------------------------------------- */

.fv-subsidy-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-position 0.5s ease;
    background-size: 200% 200%;
}

.fv-subsidy-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(-110%);
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 80%
    );
    transition: transform 0.65s ease;
}

.fv-subsidy-button:hover::before {
    transform: translateX(110%);
}

.fv-subsidy-button:hover {
    transform: translateY(-5px) scale(1.025);
    box-shadow:
        0 14px 28px rgba(85, 183, 7, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.05);
}

.fv-subsidy-button:active {
    transform: translateY(-1px) scale(0.98);
}

.fv-subsidy-button i,
.fv-subsidy-button svg {
    transition: transform 0.35s ease;
}

.fv-subsidy-button:hover i,
.fv-subsidy-button:hover svg {
    transform: translateX(5px);
}


/* ---------------------------------------------------------
   HERO VISUAL / HOUSE ILLUSTRATION
--------------------------------------------------------- */

.fv-subsidy-hero-visual {
    position: relative;
    animation: fvVisualReveal 1.1s 0.25s ease both;
}

.fv-subsidy-hero-visual > * {
    transform-origin: center;
}

.fv-subsidy-sun {
    animation:
        fvSunFloat 5s ease-in-out infinite,
        fvSunGlow 3.5s ease-in-out infinite alternate;
}

.fv-subsidy-house {
    animation: fvHouseFloat 6s ease-in-out infinite;
    transform-origin: center bottom;
}

.fv-subsidy-panel-roof {
    animation:
        fvPanelGlow 4s ease-in-out infinite alternate,
        fvPanelShimmer 8s linear infinite;
    transform-origin: center;
}

.fv-subsidy-house-body {
    animation: fvHouseBodyReveal 1.2s 0.5s ease both;
}

.fv-subsidy-window {
    animation:
        fvWindowGlow 4s ease-in-out infinite alternate,
        fvWindowPulse 7s ease-in-out infinite;
}

.fv-subsidy-door {
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.fv-subsidy-door:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 5px 8px rgba(85, 183, 7, 0.2));
}

.fv-subsidy-ground {
    animation: fvGroundPulse 5s ease-in-out infinite;
}

.fv-subsidy-leaf {
    transform-origin: bottom center;
    animation: fvLeafSway 4s ease-in-out infinite;
}

.fv-subsidy-leaf:nth-child(2n) {
    animation-delay: -1.3s;
}

.fv-subsidy-leaf:nth-child(3n) {
    animation-delay: -2.1s;
}




/* ---------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------- */

.fv-subsidy-section-heading {
    animation: fvHeadingReveal 0.9s ease both;
}

.fv-subsidy-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: fvEyebrowReveal 0.8s ease both;
}

.fv-subsidy-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #55b907,
        #a4e66e
    );
    animation: fvEyebrowLine 1.2s ease both;
}

.fv-subsidy-section-heading h2 {
    animation: fvHeadingTextReveal 0.9s 0.15s ease both;
}

.fv-subsidy-section-heading p {
    animation: fvHeadingParaReveal 0.9s 0.3s ease both;
}


/* ---------------------------------------------------------
   INFORMATION CARDS
--------------------------------------------------------- */

.fv-subsidy-info-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    animation: fvCardReveal 0.8s ease both;
}

.fv-subsidy-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(85, 183, 7, 0.1),
            transparent 42%
        );
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.fv-subsidy-info-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #55b907,
        transparent
    );
    transition: left 0.7s ease;
}

.fv-subsidy-info-card:hover {
    transform: translateY(-9px);
    border-color: rgba(85, 183, 7, 0.28);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.08),
        0 5px 14px rgba(85, 183, 7, 0.08);
}

.fv-subsidy-info-card:hover::before {
    opacity: 1;
}

.fv-subsidy-info-card:hover::after {
    left: 110%;
}


/* =========================================================
   FUTUREVOLT SUBSIDY BREADCRUMB - RESPONSIVE
========================================================= */

.fv-subsidy-breadcrumb {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Main content */
.fv-subsidy-breadcrumb .fv-referral-breadcrumb-content {
    position: relative;
    z-index: 5;
    width: 100%;
}

/* =========================================================
   COUNTDOWN - DESKTOP
========================================================= */

.fv-subsidy-breadcrumb .fv-countdown {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);

    z-index: 10;

    width: 310px;
    max-width: calc(100% - 30px);

    padding: 18px 20px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

    text-align: center;
}

/* Countdown heading */
.fv-subsidy-breadcrumb .fv-countdown-label {
    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Timer row */
.fv-subsidy-breadcrumb .fv-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    width: 100%;
}

/* Individual time box */
.fv-subsidy-breadcrumb .fv-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 54px;
    min-width: 54px;
    height: 58px;

    padding: 5px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);

    box-sizing: border-box;
}

/* Number */
.fv-subsidy-breadcrumb .fv-time-box span {
    display: block;

    color: #ffffff;

    font-size: 21px;
    font-weight: 800;

    line-height: 1;
}

/* Label */
.fv-subsidy-breadcrumb .fv-time-box small {
    display: block;

    margin-top: 6px;

    color: rgba(255, 255, 255, 0.80);

    font-size: 9px;
    font-weight: 600;

    line-height: 1;
    text-transform: uppercase;
}

/* Separator */
.fv-subsidy-breadcrumb .fv-time-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 58px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 18px;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
========================================================= */

@media (max-width: 1199px) {

    .fv-subsidy-breadcrumb .fv-countdown {
        right: 20px;

        width: 280px;

        padding: 16px 15px;
    }

    .fv-subsidy-breadcrumb .fv-time-box {
        width: 50px;
        min-width: 50px;
        height: 54px;
    }

    .fv-subsidy-breadcrumb .fv-time-box span {
        font-size: 19px;
    }

    .fv-subsidy-breadcrumb .fv-time-separator {
        height: 54px;
        font-size: 16px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .fv-subsidy-breadcrumb {
        min-height: auto;
    }

    /*
       Move countdown into normal flow.
       This prevents it from overlapping the breadcrumb text.
    */
    .fv-subsidy-breadcrumb .fv-countdown {
        position: relative;

        top: auto;
        right: auto;

        transform: none;

        width: 100%;
        max-width: 330px;

        margin: 25px auto 0;

        padding: 16px 15px;
    }

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content {
        text-align: center;
    }

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-links {
        justify-content: center;
    }

}


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

@media (max-width: 767px) {

    .fv-subsidy-breadcrumb {
        overflow: hidden;
    }

    .fv-subsidy-breadcrumb .container {
        width: 100%;
        max-width: 100%;

        padding-left: 15px;
        padding-right: 15px;
    }

    /* Eyebrow */
    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-eyebrow {
        font-size: 10px;

        letter-spacing: 0.8px;

        line-height: 1.4;
    }

    /* Main heading */
    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content h1 {
        font-size: 38px;

        line-height: 1.1;

        margin-bottom: 14px;
    }

    /* Description */
    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content p {
        max-width: 520px;

        margin-left: auto;
        margin-right: auto;

        font-size: 14px;

        line-height: 1.65;
    }

    /* Breadcrumb links */
    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-links {
        display: flex;
        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 7px;

        margin-top: 15px;

        font-size: 12px;
    }

    /* Countdown */
    .fv-subsidy-breadcrumb .fv-countdown {
        width: 100%;
        max-width: 320px;

        margin: 22px auto 0;

        padding: 14px 12px;

        border-radius: 15px;
    }

    .fv-subsidy-breadcrumb .fv-countdown-label {
        margin-bottom: 10px;

        font-size: 10px;

        letter-spacing: 0.4px;
    }

    .fv-subsidy-breadcrumb .fv-countdown-timer {
        gap: 4px;
    }

    .fv-subsidy-breadcrumb .fv-time-box {
        width: 50px;
        min-width: 50px;

        height: 52px;

        border-radius: 9px;
    }

    .fv-subsidy-breadcrumb .fv-time-box span {
        font-size: 18px;
    }

    .fv-subsidy-breadcrumb .fv-time-box small {
        margin-top: 5px;

        font-size: 8px;
    }

    .fv-subsidy-breadcrumb .fv-time-separator {
        height: 52px;

        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .fv-subsidy-breadcrumb .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content h1 {
        font-size: 32px;

        line-height: 1.1;
    }

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content p {
        font-size: 14px;

        line-height: 1.6;

        padding: 0 5px;
    }

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-links {
        font-size: 11px;

        gap: 6px;
    }

    .fv-subsidy-breadcrumb .fv-countdown {
        max-width: 300px;

        padding: 13px 8px;

        border-radius: 14px;
    }

    .fv-subsidy-breadcrumb .fv-countdown-label {
        font-size: 9px;

        line-height: 1.35;
    }

    .fv-subsidy-breadcrumb .fv-countdown-timer {
        gap: 3px;
    }

    .fv-subsidy-breadcrumb .fv-time-box {
        width: 46px;
        min-width: 46px;

        height: 49px;

        border-radius: 8px;
    }

    .fv-subsidy-breadcrumb .fv-time-box span {
        font-size: 16px;
    }

    .fv-subsidy-breadcrumb .fv-time-box small {
        font-size: 7px;

        margin-top: 4px;
    }

    .fv-subsidy-breadcrumb .fv-time-separator {
        height: 49px;

        font-size: 14px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content h1 {
        font-size: 29px;
    }

    .fv-subsidy-breadcrumb .fv-countdown {
        max-width: 285px;

        padding-left: 5px;
        padding-right: 5px;
    }

    .fv-subsidy-breadcrumb .fv-time-box {
        width: 43px;
        min-width: 43px;

        height: 46px;
    }

    .fv-subsidy-breadcrumb .fv-time-box span {
        font-size: 15px;
    }

    .fv-subsidy-breadcrumb .fv-time-box small {
        font-size: 6.5px;
    }

    .fv-subsidy-breadcrumb .fv-time-separator {
        height: 46px;

        font-size: 11px;
    }

}

/* =========================================================
   SUBSIDY BREADCRUMB - FINAL MOBILE FIX
   Add this at the VERY END of my_styles.css
========================================================= */

.fv-subsidy-breadcrumb {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .fv-subsidy-breadcrumb {
        overflow: hidden;
    }

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content {
        width: 100%;
        max-width: 100%;
    }

    .fv-subsidy-breadcrumb .fv-countdown {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;

        transform: none !important;

        display: block;

        width: min(330px, 100%) !important;
        max-width: calc(100% - 30px) !important;

        margin: 25px auto 0 !important;

        box-sizing: border-box;
    }

}


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

@media (max-width: 767px) {

    .fv-subsidy-breadcrumb {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .fv-subsidy-breadcrumb .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       BREADCRUMB CONTENT
    ----------------------------------------- */

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-content {
        width: 100%;
        max-width: 100%;

        text-align: center;
    }


    .fv-subsidy-breadcrumb
    .fv-referral-breadcrumb-content h1 {

        font-size: 36px;

        line-height: 1.1;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }


    .fv-subsidy-breadcrumb
    .fv-referral-breadcrumb-content p {

        width: 100%;
        max-width: 500px;

        margin-left: auto;
        margin-right: auto;

        padding-left: 5px;
        padding-right: 5px;

        box-sizing: border-box;

        font-size: 14px;

        line-height: 1.6;
    }


    /* -----------------------------------------
       BREADCRUMB LINKS
    ----------------------------------------- */

    .fv-subsidy-breadcrumb .fv-referral-breadcrumb-links {

        width: 100%;

        display: flex;

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

        flex-wrap: wrap;

        gap: 6px;

        box-sizing: border-box;
    }


    /* =====================================================
       COUNTDOWN
    ===================================================== */

    .fv-subsidy-breadcrumb .fv-countdown {

        /* CRITICAL FIX */
        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;

        transform: none !important;

        float: none !important;

        display: block !important;

        width: 100% !important;

        max-width: 290px !important;

        min-width: 0 !important;

        margin: 25px auto 0 !important;

        padding: 13px 8px !important;

        box-sizing: border-box !important;

        overflow: hidden;

        border-radius: 15px;
    }


    /* Countdown title */

    .fv-subsidy-breadcrumb .fv-countdown-label {

        display: block;

        width: 100%;

        margin-bottom: 10px;

        font-size: 9px;

        line-height: 1.4;

        text-align: center;

        white-space: normal;
    }


    /* Timer */

    .fv-subsidy-breadcrumb .fv-countdown-timer {

        display: flex !important;

        width: 100%;

        max-width: 100%;

        align-items: center;

        justify-content: center;

        gap: 3px;

        box-sizing: border-box;
    }


    /* Time boxes */

    .fv-subsidy-breadcrumb .fv-time-box {

        flex: 0 1 46px;

        width: 46px;

        min-width: 0;

        max-width: 46px;

        height: 49px;

        padding: 4px;

        box-sizing: border-box;

        border-radius: 8px;
    }


    /* Numbers */

    .fv-subsidy-breadcrumb .fv-time-box span {

        font-size: 16px;

        line-height: 1;
    }


    /* Labels */

    .fv-subsidy-breadcrumb .fv-time-box small {

        margin-top: 4px;

        font-size: 7px;

        line-height: 1;
    }


    /* Separators */

    .fv-subsidy-breadcrumb .fv-time-separator {

        flex: 0 0 auto;

        width: 8px;

        height: 49px;

        font-size: 12px;

        line-height: 1;
    }

}


/* =========================================================
   480px
========================================================= */

@media (max-width: 480px) {

    .fv-subsidy-breadcrumb .container {

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .fv-subsidy-breadcrumb
    .fv-referral-breadcrumb-content h1 {

        font-size: 32px;
    }


    .fv-subsidy-breadcrumb
    .fv-referral-breadcrumb-content p {

        font-size: 14px;

        line-height: 1.6;
    }


    .fv-subsidy-breadcrumb .fv-countdown {

        width: 100% !important;

        max-width: 285px !important;

        margin-top: 22px !important;

        padding: 12px 6px !important;
    }


    .fv-subsidy-breadcrumb .fv-time-box {

        flex-basis: 43px;

        width: 43px;

        max-width: 43px;

        height: 47px;
    }


    .fv-subsidy-breadcrumb .fv-time-box span {

        font-size: 15px;
    }


    .fv-subsidy-breadcrumb .fv-time-box small {

        font-size: 7px;
    }


    .fv-subsidy-breadcrumb .fv-time-separator {

        width: 7px;

        height: 47px;

        font-size: 11px;
    }

}


/* =========================================================
   360px - VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .fv-subsidy-breadcrumb .container {

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .fv-subsidy-breadcrumb
    .fv-referral-breadcrumb-content h1 {

        font-size: 29px;
    }


    .fv-subsidy-breadcrumb .fv-countdown {

        max-width: 280px !important;

        padding-left: 4px !important;
        padding-right: 4px !important;
    }


    .fv-subsidy-breadcrumb .fv-time-box {

        flex-basis: 41px;

        width: 41px;

        max-width: 41px;

        height: 45px;
    }


    .fv-subsidy-breadcrumb .fv-time-box span {

        font-size: 14px;
    }


    .fv-subsidy-breadcrumb .fv-time-box small {

        font-size: 6px;
    }


    .fv-subsidy-breadcrumb .fv-time-separator {

        width: 6px;

        height: 45px;

        font-size: 10px;
    }

}



/* =========================================================
   FUTUREVOLT — REFER & GIVE PAGE
   Green Solar Theme
   Primary: #53B703
   Dark Green: #17351F
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    --fv-referral-green: #53B703;
    --fv-referral-green-dark: #3F8F05;
    --fv-referral-green-deep: #17351F;
    --fv-referral-green-soft: #EEF9E8;
    --fv-referral-green-light: #F5FAF2;

    --fv-referral-text: #17351F;
    --fv-referral-muted: #0c0c0c;

    --fv-referral-border: #DDEBD7;

    --fv-referral-white: #FFFFFF;

    --fv-referral-shadow:
        0 15px 45px rgba(23, 53, 31, 0.07);

    --fv-referral-shadow-hover:
        0 24px 60px rgba(23, 53, 31, 0.13);

}


/* =========================================================
   GLOBAL PAGE SAFETY
   ========================================================= */

.fv-referral-breadcrumb,
.fv-referral-hero,
.fv-referral-impact-intro,
.fv-referral-how-section,
.fv-referral-contribution-section,
.fv-referral-cause-section,
.fv-referral-form-section,
.fv-referral-impact-banner,
.fv-referral-faq-section {

    position: relative;
    overflow: hidden;

}


.fv-referral-breadcrumb *,
.fv-referral-hero *,
.fv-referral-impact-intro *,
.fv-referral-how-section *,
.fv-referral-contribution-section *,
.fv-referral-cause-section *,
.fv-referral-form-section *,
.fv-referral-impact-banner *,
.fv-referral-faq-section * {

    box-sizing: border-box;

}


/* =========================================================
   COMMON BUTTONS
   ========================================================= */

.fv-referral-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;
    padding: 14px 25px;

    border-radius: 10px;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;

}


.fv-referral-btn i {

    font-size: 12px;

    transition:
        transform 0.3s ease;

}


.fv-referral-btn:hover {

    text-decoration: none;
    transform: translateY(-3px);

}


.fv-referral-btn:hover i {

    transform: translateX(4px);

}


/* Primary */

.fv-referral-btn-primary {

    color: #FFFFFF;
    background: var(--fv-referral-green);

    box-shadow:
        0 10px 25px rgba(83, 183, 3, 0.18);

}


.fv-referral-btn-primary:hover {

    color: #FFFFFF;
    background: var(--fv-referral-green-dark);

    box-shadow:
        0 15px 32px rgba(83, 183, 3, 0.28);

}


/* Outline */

.fv-referral-btn-outline {

    color: var(--fv-referral-text);
    background: #FFFFFF;

    border: 1px solid var(--fv-referral-border);

}


.fv-referral-btn-outline:hover {

    color: var(--fv-referral-green-dark);
    border-color: var(--fv-referral-green);

    background: var(--fv-referral-green-soft);

}


/* White */

.fv-referral-btn-white {

    color: var(--fv-referral-green-dark);
    background: #FFFFFF;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10);

}


.fv-referral-btn-white:hover {

    color: var(--fv-referral-green-dark);
    background: #F5FAF2;

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.fv-referral-breadcrumb {

    min-height: 400px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(5, 30, 17, 0.88) 0%,
            rgba(9, 47, 24, 0.70) 50%,
            rgba(5, 30, 17, 0.82) 100%
        ),
        url("../img/breadcrumb.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}


.fv-referral-breadcrumb::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -80px;
    top: -110px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.fv-referral-breadcrumb::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -70px;
    bottom: -100px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;

}


.fv-referral-breadcrumb-overlay {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(83, 183, 3, 0.16),
            transparent 35%
        );

    pointer-events: none;

}


.fv-referral-breadcrumb .container {

    position: relative;
    z-index: 2;

}


.fv-referral-breadcrumb-content {

    max-width: 850px;

    padding: 70px 0 65px;

    animation: fvReferralBreadcrumbReveal 0.8s ease both;

}


.fv-referral-breadcrumb-eyebrow {

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

    margin-bottom: 17px;

    color: #A8E879;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 2.5px;
    text-transform: uppercase;

}


.fv-referral-breadcrumb-eyebrow span {

    display: inline-block;

    width: 35px;
    height: 2px;

    background: var(--fv-referral-green);

}


.fv-referral-breadcrumb h1 {

    margin: 0 0 17px;

    color: #FFFFFF;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(36px, 5vw, 58px);
    font-weight: 700;

    line-height: 1.12;
    letter-spacing: -1.5px;

}


.fv-referral-breadcrumb h1 span {

    display: inline-block;

    color: #A8E879;

}


.fv-referral-breadcrumb-content > p {

    max-width: 600px;

    margin: 0 0 25px;

    color: rgba(255, 255, 255);

    font-size: 16px;
    line-height: 1.8;

}


.fv-referral-breadcrumb-links {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    color: rgba(255, 255, 255);

    font-size: 16px;
    font-weight: 600;

}


.fv-referral-breadcrumb-links a {

    color: #FFFFFF;
    text-decoration: none;

    transition: color 0.3s ease;

}


.fv-referral-breadcrumb-links a:hover {

    color: #A8E879;

}


.fv-referral-breadcrumb-links i {

    color: #A8E879;
    font-size: 9px;

}


@keyframes fvReferralBreadcrumbReveal {

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

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

}


/* =========================================================
   HERO
   ========================================================= */

.fv-referral-hero {

    padding: 40px 0 40px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F8FCF5 55%,
            #EEF9E8 100%
        );

}


.fv-referral-hero::before {

    content: "";

    position: absolute;

    top: -140px;
    right: -100px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(83, 183, 3, 0.09);

    border-radius: 50%;

    animation: fvReferralSlowRotate 22s linear infinite;

}


.fv-referral-hero::after {

    content: "";

    position: absolute;

    bottom: -200px;
    left: -150px;

    width: 500px;
    height: 500px;

    border: 1px solid rgba(83, 183, 3, 0.06);

    border-radius: 50%;

}


.fv-referral-hero .container {

    position: relative;
    z-index: 2;

}


.fv-referral-hero-content {

    max-width: 570px;

}


.fv-referral-eyebrow {

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

    margin-bottom: 20px;

    color: var(--fv-referral-green-dark);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;

}


.fv-referral-eyebrow-line {

    width: 38px;
    height: 2px;

    background: var(--fv-referral-green);

}


.fv-referral-hero-content h2 {

    margin: 0 0 24px;

    color: var(--fv-referral-text);

    font-size: clamp(34px, 4vw, 53px);
    font-weight: 700;

    line-height: 1.15;
    letter-spacing: -1.3px;

}


.fv-referral-hero-content h2 span {

    display: block;

    color: var(--fv-referral-green);

}


.fv-referral-hero-description {

    max-width: 530px;

    margin: 0 0 15px;

    color: var(--fv-referral-muted);

    font-size: 16px;
    line-height: 1.5;

}


.fv-referral-hero-actions {

    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;

}


.fv-referral-trust-row {

    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 27px;

}


.fv-referral-trust-item {

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

    color: #61705F;

    font-size: 14px;
    font-weight: 600;

}


.fv-referral-trust-item i {

    color: var(--fv-referral-green);

    font-size: 14px;

}


/* HERO VISUAL */

.fv-referral-hero-visual {

    position: relative;

    min-height: 500px;

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

}


.fv-referral-visual-glow {

    position: absolute;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(83, 183, 3, 0.16) 0%,
            rgba(83, 183, 3, 0.04) 50%,
            transparent 72%
        );

    animation: fvReferralGlowPulse 4s ease-in-out infinite;

}


.fv-referral-solar-circle {

    position: relative;

    width: 330px;
    height: 330px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #FFFFFF 0%,
            #F4FAF0 45%,
            #DFF0D5 100%
        );

    border: 1px solid rgba(83, 183, 3, 0.18);

    box-shadow:
        0 25px 70px rgba(23, 53, 31, 0.10),
        inset 0 0 0 15px rgba(255, 255, 255, 0.55);

    animation: fvReferralFloat 6s ease-in-out infinite;

}


.fv-referral-solar-circle::before {

    content: "";

    position: absolute;

    inset: 18px;

    border: 1px dashed rgba(83, 183, 3, 0.20);

    border-radius: 50%;

    animation: fvReferralSlowRotate 20s linear infinite;

}


.fv-referral-solar-circle::after {

    content: "";

    position: absolute;

    inset: 42px;

    border: 1px solid rgba(83, 183, 3, 0.10);

    border-radius: 50%;

}


.fv-referral-sun-icon {

    position: absolute;

    top: 33px;
    right: 63px;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    color: #FFFFFF;

    background: #F4B400;

    box-shadow:
        0 8px 20px rgba(244, 180, 0, 0.20);

    font-size: 23px;

    animation: fvReferralSunPulse 3s ease-in-out infinite;

}


.fv-referral-solar-panel-icon {

    position: relative;
    z-index: 2;

    width: 112px;
    height: 82px;

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

    border-radius: 12px;

    color: #FFFFFF;

    background:
        linear-gradient(
            145deg,
            #1F5267,
            #0B293B
        );

    border: 4px solid #7CCB42;

    box-shadow:
        0 15px 35px rgba(23, 53, 31, 0.20);

    font-size: 39px;

    transform: rotate(-8deg);

}


.fv-referral-solar-panel-icon::before {

    content: "";

    position: absolute;

    inset: 7px;

    background:
        linear-gradient(
            90deg,
            transparent 31%,
            rgba(255, 255, 255, 0.16) 32%,
            rgba(255, 255, 255, 0.16) 34%,
            transparent 35%,
            transparent 65%,
            rgba(255, 255, 255, 0.16) 66%,
            rgba(255, 255, 255, 0.16) 68%,
            transparent 69%
        ),
        linear-gradient(
            0deg,
            transparent 45%,
            rgba(255, 255, 255, 0.16) 46%,
            rgba(255, 255, 255, 0.16) 48%,
            transparent 49%
        );

    border-radius: 5px;

}


.fv-referral-leaf-icon {

    position: absolute;

    bottom: 42px;
    left: 48px;

    width: 58px;
    height: 58px;

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

    border-radius: 50% 50% 50% 10px;

    color: #FFFFFF;

    background: var(--fv-referral-green);

    font-size: 24px;

    transform: rotate(-18deg);

    box-shadow:
        0 10px 25px rgba(83, 183, 3, 0.20);

}


.fv-referral-heart-icon {

    position: absolute;

    right: 38px;
    bottom: 53px;

    width: 50px;
    height: 50px;

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

    border-radius: 50%;

    color: #FFFFFF;

    background: #E47A62;

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(228, 122, 98, 0.20);

    animation: fvReferralHeartBeat 2.5s ease-in-out infinite;

}


/* Floating visual cards */

.fv-referral-visual-card {

    position: absolute;

    z-index: 4;

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

    width: 280px;

    padding: 20px 15px;

    border: 1px solid rgba(221, 235, 215, 0.90);
    border-radius: 13px;

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

    box-shadow:
        0 15px 35px rgba(23, 53, 31, 0.09);

    backdrop-filter: blur(10px);

}


.fv-referral-visual-card-top {

    top: 55px;
    left: -10px;

    animation: fvReferralCardFloatOne 5s ease-in-out infinite;

}


.fv-referral-visual-card-bottom {

    right: -10px;
    bottom: 58px;

    animation: fvReferralCardFloatTwo 5.5s ease-in-out infinite;

}


.fv-referral-visual-card-icon {

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 11px;

    color: var(--fv-referral-green-dark);
    background: var(--fv-referral-green-soft);

    font-size: 17px;

}


.fv-referral-visual-card small {

    display: block;

    margin-bottom: 4px;

    color: black;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.7px;

}


.fv-referral-visual-card strong {

    display: block;

    color: var(--fv-referral-text);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;

}


.fv-referral-floating-dot {

    position: absolute;

    border-radius: 50%;

    background: var(--fv-referral-green);

}


.fv-referral-dot-one {

    width: 9px;
    height: 9px;

    top: 100px;
    right: 45px;

    opacity: 0.65;

    animation: fvReferralDotFloat 4s ease-in-out infinite;

}


.fv-referral-dot-two {

    width: 13px;
    height: 13px;

    bottom: 100px;
    left: 35px;

    opacity: 0.35;

    animation: fvReferralDotFloat 5s ease-in-out infinite reverse;

}


.fv-referral-dot-three {

    width: 6px;
    height: 6px;

    top: 165px;
    left: 30px;

    opacity: 0.50;

    animation: fvReferralDotFloat 3.5s ease-in-out infinite;

}


/* =========================================================
   COMMON SECTION HEADING
   ========================================================= */

.fv-referral-section-heading {

    max-width: 750px;

    margin: 0 auto 45px;

}


.fv-referral-section-eyebrow {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin-bottom: 15px;

    color: var(--fv-referral-green-dark);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;

}


.fv-referral-section-eyebrow span {

    display: inline-block;

    width: 30px;
    height: 2px;

    background: var(--fv-referral-green);

}


.fv-referral-section-heading h2 {

    margin: 0 0 15px;

    color: var(--fv-referral-text);

    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -1px;

}


.fv-referral-section-heading h2 span {

    color: var(--fv-referral-green);

}


.fv-referral-section-heading p {

    max-width: 650px;

    margin: 0 auto;

    color: var(--fv-referral-muted);

    font-size: 15px;
    line-height: 1.8;

}


/* =========================================================
   IMPACT INTRO
   ========================================================= */

.fv-referral-impact-intro {

    padding: 40px 0;

    background: #FFFFFF;

}


.fv-referral-impact-intro::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    top: 80px;

    border: 1px solid rgba(83, 183, 3, 0.08);

    border-radius: 50%;

}


.fv-referral-impact-card {

    position: relative;

    height: 100%;
    min-height: 280px;

    padding: 35px 30px;

    overflow: hidden;

    border: 1px solid var(--fv-referral-border);
    border-radius: 18px;

    background: #FFFFFF;

    box-shadow:
        0 8px 30px rgba(23, 53, 31, 0.035);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

}


.fv-referral-impact-card::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -65px;
    right: -65px;

    border-radius: 50%;

    background: var(--fv-referral-green-soft);

    transition:
        transform 0.5s ease;

}


.fv-referral-impact-card:hover {

    transform: translateY(-9px);

    border-color: rgba(83, 183, 3, 0.35);

    box-shadow:
        var(--fv-referral-shadow-hover);

}


.fv-referral-impact-card:hover::before {

    transform: scale(1.5);

}


.fv-referral-impact-card-number {

    position: absolute;

    top: 25px;
    right: 27px;

    color: #E7F2E1;

    font-size: 42px;
    font-weight: 800;

    line-height: 1;

    transition:
        color 0.4s ease;

}


.fv-referral-impact-card:hover .fv-referral-impact-card-number {

    color: #DCEFD2;

}


.fv-referral-impact-icon {

    position: relative;
    z-index: 2;

    width: 65px;
    height: 65px;

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

    margin-bottom: 25px;

    border-radius: 16px;

    color: var(--fv-referral-green-dark);
    background: var(--fv-referral-green-soft);

    font-size: 25px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;

}


.fv-referral-impact-card:hover .fv-referral-impact-icon {

    color: #FFFFFF;
    background: var(--fv-referral-green);

    transform: translateY(-4px) rotate(-4deg);

}


.fv-referral-impact-card h3 {

    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: var(--fv-referral-text);

    font-size: 21px;
    font-weight: 700;

}


.fv-referral-impact-card p {

    position: relative;
    z-index: 2;

    margin: 0;

    color: black;

    font-size: 16px;
    line-height: 1.8;

}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.fv-referral-how-section {

    padding: 40px 0;

    background:
        linear-gradient(
            145deg,
            #F7FCF4 0%,
            #FFFFFF 100%
        );

}


.fv-referral-process {

    position: relative;

    max-width: 950px;

    margin: 60px auto 0;

}


.fv-referral-process-line {

    position: absolute;

    left: 39px;
    top: 40px;
    bottom: 40px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            #CDE8BC,
            #53B703,
            #CDE8BC
        );

}


.fv-referral-process-step {

    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 28px;

    margin-bottom: 45px;

}


.fv-referral-process-step:last-child {

    margin-bottom: 0;

}


.fv-referral-process-icon {

    position: relative;
    z-index: 2;

    width: 80px;
    height: 80px;

    flex: 0 0 80px;

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

    border: 6px solid #F7FCF4;
    border-radius: 50%;

    color: #FFFFFF;

    background: var(--fv-referral-green);

    box-shadow:
        0 8px 25px rgba(83, 183, 3, 0.18);

    font-size: 23px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.fv-referral-process-step:hover .fv-referral-process-icon {

    transform: scale(1.08);

    box-shadow:
        0 12px 32px rgba(83, 183, 3, 0.28);

}


.fv-referral-process-icon span {

    position: absolute;

    right: -12px;
    bottom: -3px;

    width: 26px;
    height: 26px;

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

    border: 3px solid #F7FCF4;
    border-radius: 50%;

    color: var(--fv-referral-green-dark);
    background: #FFFFFF;

    font-size: 9px;
    font-weight: 800;

}


.fv-referral-process-content {

    flex: 1;

    padding-top: 9px;

}


.fv-referral-process-label {

    display: block;

    margin-bottom: 8px;

    color: var(--fv-referral-green-dark);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.5px;

}


.fv-referral-process-content h3 {

    margin: 0 0 10px;

    color: var(--fv-referral-text);

    font-size: 23px;
    font-weight: 700;

}


.fv-referral-process-content p {

    max-width: 580px;

    margin: 0;

    color: var(--fv-referral-muted);

    font-size: 16px;
    line-height: 1.4;

}


/* =========================================================
   CONTRIBUTION SECTION
   ========================================================= */

.fv-referral-contribution-section {

    padding: 40px 0;

    background: #FFFFFF;

}


.fv-referral-contribution-card {

    position: relative;

    height: 100%;
    min-height: 350px;

    display: flex;
    flex-direction: column;

    padding: 30px 25px;

    overflow: hidden;

    border: 1px solid var(--fv-referral-border);
    border-radius: 18px;

    background: #FFFFFF;

    box-shadow:
        0 8px 28px rgba(23, 53, 31, 0.035);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

}


.fv-referral-contribution-card::after {

    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -75px;
    bottom: -75px;

    border-radius: 50%;

    background: var(--fv-referral-green-soft);

    transition:
        transform 0.5s ease;

}


.fv-referral-contribution-card:hover {

    transform: translateY(-9px);

    border-color: rgba(83, 183, 3, 0.38);

    box-shadow:
        var(--fv-referral-shadow-hover);

}


.fv-referral-contribution-card:hover::after {

    transform: scale(1.45);

}


.fv-referral-contribution-featured {

    border: 2px solid rgba(83, 183, 3, 0.45);

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F7FCF4 100%
        );

}


.fv-referral-contribution-popular {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    padding: 8px 10px;

    color: #FFFFFF;

    background: var(--fv-referral-green);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.2px;
    text-align: center;

}


.fv-referral-contribution-featured .fv-referral-contribution-icon {

    margin-top: 25px;

}


.fv-referral-contribution-icon {

    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

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

    margin-bottom: 20px;

    border-radius: 15px;

    color: var(--fv-referral-green-dark);
    background: var(--fv-referral-green-soft);

    font-size: 22px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;

}


.fv-referral-contribution-card:hover .fv-referral-contribution-icon {

    color: #FFFFFF;
    background: var(--fv-referral-green);

    transform: translateY(-4px);

}


.fv-referral-contribution-label {

    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 7px;

    color: var(--fv-referral-green-dark);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.4px;

}


.fv-referral-contribution-amount {

    position: relative;
    z-index: 2;

    margin-bottom: 14px;

    color: var(--fv-referral-text);

    font-size: 40px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -1px;

}


.fv-referral-contribution-amount small {

    font-size: 21px;
    font-weight: 700;

    vertical-align: 12px;

}


.fv-referral-contribution-card h3 {

    position: relative;
    z-index: 2;

    margin: 0 0 11px;

    color: var(--fv-referral-text);

    font-size: 19px;
    font-weight: 700;

}


.fv-referral-contribution-card p {

    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--fv-referral-muted);

    font-size: 12px;
    line-height: 1.75;

}


.fv-referral-contribution-bottom {

    position: relative;
    z-index: 2;

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

    margin-top: auto;
    padding-top: 22px;

    color: var(--fv-referral-green-dark);

    font-size: 11px;
    font-weight: 700;

}


.fv-referral-contribution-bottom i {

    font-size: 14px;

}


.fv-referral-contribution-note {

    display: flex;
    align-items: flex-start;
    gap: 10px;

    /*max-width: 1000px;*/

    margin: 38px auto 0;
    padding: 17px 20px;

    border: 1px solid #E5EFDF;
    border-radius: 10px;

    background: #FAFDF8;

}


.fv-referral-contribution-note i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--fv-referral-green);

    font-size: 14px;

}


.fv-referral-contribution-note p {

    margin: 0;

    color: black;

    font-size: 14px;
    line-height: 1.7;

}


/* =========================================================
   CAUSE SECTION
   ========================================================= */

.fv-referral-cause-section {

    padding: 40px 0;

    background:
        linear-gradient(
            135deg,
            #F5FAF2 0%,
            #FFFFFF 100%
        );

}


.fv-referral-cause-visual {

    position: relative;

    min-height: 420px;

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

}


.fv-referral-cause-visual::before {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    border: 1px solid rgba(83, 183, 3, 0.12);

    animation: fvReferralSlowRotate 25s linear infinite;

}


.fv-referral-cause-visual::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    border: 1px dashed rgba(83, 183, 3, 0.16);

    animation: fvReferralSlowRotate 18s linear infinite reverse;

}


.fv-referral-cause-main-icon {

    position: relative;
    z-index: 3;

    width: 165px;
    height: 165px;

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

    border-radius: 50%;

    color: #FFFFFF;

    background:
        linear-gradient(
            145deg,
            #6FCB2D,
            #3F8F05
        );

    box-shadow:
        0 20px 45px rgba(83, 183, 3, 0.22);

    font-size: 65px;

    animation: fvReferralFloat 5s ease-in-out infinite;

}


.fv-referral-cause-main-icon::before {

    content: "";

    position: absolute;

    inset: 11px;

    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 50%;

}


.fv-referral-cause-orbit {

    position: absolute;
    z-index: 4;

    width: 52px;
    height: 52px;

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

    border: 4px solid #F5FAF2;
    border-radius: 50%;

    color: var(--fv-referral-green-dark);
    background: #FFFFFF;

    box-shadow:
        0 10px 25px rgba(23, 53, 31, 0.09);

    font-size: 19px;

}


.fv-referral-cause-orbit-one {

    top: 42px;
    right: 73px;

    animation: fvReferralOrbitFloat 4s ease-in-out infinite;

}


.fv-referral-cause-orbit-two {

    left: 55px;
    bottom: 65px;

    animation: fvReferralOrbitFloat 4.7s ease-in-out infinite reverse;

}


.fv-referral-cause-orbit-three {

    right: 28px;
    bottom: 40px;

    color: #FFFFFF;

    background: #5CAED6;

    animation: fvReferralOrbitFloat 5.3s ease-in-out infinite;

}


.fv-referral-cause-visual-label {

    position: absolute;
    z-index: 5;

    bottom: 5px;
    left: 50%;

    min-width: 190px;

    padding: 13px 20px;

    border: 1px solid var(--fv-referral-border);
    border-radius: 12px;

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

    box-shadow:
        0 12px 30px rgba(23, 53, 31, 0.07);

    text-align: center;

    transform: translateX(-50%);

}


.fv-referral-cause-visual-label strong {

    display: block;

    color: var(--fv-referral-text);

    font-size: 14px;
    font-weight: 800;

}


.fv-referral-cause-visual-label span {

    display: block;

    margin-top: 3px;

    color: var(--fv-referral-green-dark);

    font-size: 10px;
    font-weight: 600;

}


.fv-referral-cause-content {

    max-width: 600px;

}


.fv-referral-cause-content .fv-referral-section-eyebrow {

    justify-content: flex-start;

}


.fv-referral-cause-content h2 {

    margin: 0 0 20px;

    color: var(--fv-referral-text);

    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;

    line-height: 1.2;

}


.fv-referral-cause-content h2 span {

    display: block;

    color: var(--fv-referral-green);

}


.fv-referral-cause-content > p {

    margin: 0 0 28px;

    color: var(--fv-referral-muted);

    font-size: 14px;
    line-height: 1.85;

}


.fv-referral-cause-list {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

}


.fv-referral-cause-item {

    display: flex;
    align-items: flex-start;
    gap: 12px;

}


.fv-referral-cause-item-icon {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    color: var(--fv-referral-green-dark);
    background: var(--fv-referral-green-soft);

    font-size: 15px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.fv-referral-cause-item:hover .fv-referral-cause-item-icon {

    color: #FFFFFF;
    background: var(--fv-referral-green);

    transform: translateY(-3px);

}


.fv-referral-cause-item h4 {

    margin: 0 0 5px;

    color: var(--fv-referral-text);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;

}


.fv-referral-cause-item p {

    margin: 0;

    color: #7B8876;

    font-size: 11px;
    line-height: 1.6;

}


.fv-referral-cause-note {

    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 28px;
    padding: 14px 16px;

    border-left: 3px solid var(--fv-referral-green);

    background: #FFFFFF;

}


.fv-referral-cause-note i {

    margin-top: 2px;

    color: var(--fv-referral-green);

    font-size: 14px;

}


.fv-referral-cause-note span {

    color: #7C8B78;

    font-size: 11px;
    line-height: 1.65;

}


/* =========================================================
   REFERRAL FORM SECTION
   ========================================================= */

.fv-referral-form-section {

    padding: 40px 0;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F5FAF2 100%
        );

}


.fv-referral-form-wrapper {

    overflow: hidden;

    border: 1px solid var(--fv-referral-border);
    border-radius: 24px;

    background: #FFFFFF;

    box-shadow:
        0 20px 70px rgba(23, 53, 31, 0.08);

}


/* Form Intro */

.fv-referral-form-intro {

    position: relative;

    height: 100%;

    padding: 50px 40px;

    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            #17351F 0%,
            #24552B 55%,
            #3F8F05 100%
        );

}


.fv-referral-form-intro::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    top: -170px;
    right: -140px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}


.fv-referral-form-intro::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -130px;
    left: -110px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;

}


.fv-referral-form-intro > * {

    position: relative;
    z-index: 2;

}


.fv-referral-form-intro-number {

    position: absolute !important;

    top: 22px;
    right: 30px;

    color: rgba(255, 255, 255, 0.10);

    font-size: 70px;
    font-weight: 800;

    line-height: 1;

}


.fv-referral-form-intro-icon {

    width: 68px;
    height: 68px;

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

    margin-bottom: 25px;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 17px;

    color: #FFFFFF;

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

    font-size: 28px;

    animation: fvReferralIconFloat 4s ease-in-out infinite;

}


.fv-referral-form-intro-eyebrow {

    margin-bottom: 13px;

    color: #A8E879;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.8px;

}


.fv-referral-form-intro h2 {

    margin: 0 0 20px;

    color: #FFFFFF;

    font-size: 32px;
    font-weight: 700;

    line-height: 1.25;

}


.fv-referral-form-intro h2 span {

    display: block;

    color: #A8E879;

}


.fv-referral-form-intro > p {

    margin: 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;
    line-height: 1.85;

}


.fv-referral-form-intro-points {

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

    margin-top: 30px;

}


.fv-referral-form-intro-points > div {

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

    color: rgba(255, 255, 255, 0.85);

    font-size: 16px;
    font-weight: 600;

}


.fv-referral-form-intro-points i {

    color: #A8E879;

    font-size: 14px;

}


.fv-referral-form-intro-bottom {

    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 40px;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

}


.fv-referral-form-intro-bottom i {

    margin-top: 2px;

    color: #A8E879;

    font-size: 14px;

}


.fv-referral-form-intro-bottom span {

    color: rgba(255, 255, 255, 0.58);

    font-size: 16px;
    line-height: 1.6;

}


/* Form Card */

.fv-referral-form-card {

    height: 100%;

    padding: 50px 42px;

    background: #FFFFFF;

}


.fv-referral-form-card-heading {

    margin-bottom: 17px;

}


.fv-referral-form-card-eyebrow {

    margin-bottom: 10px;

    color: var(--fv-referral-green-dark);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.5px;

}


.fv-referral-form-card-heading h3 {

    margin: 0 0 8px;

    color: var(--fv-referral-text);

    font-size: 27px;
    font-weight: 700;

    line-height: 1.3;

}


.fv-referral-form-card-heading p {

    margin: 0;

    color: black;

    font-size: 14px;

}


.fv-referral-form-card-heading p strong {

    color: #D96A55;

}


/* Form Section Titles */

.fv-referral-form-section-title {

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

    margin-bottom: 22px;
    padding-bottom: 15px;

    border-bottom: 1px solid #EDF3E9;

}


.fv-referral-form-section-title > span {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 10px;

    color: var(--fv-referral-green-dark);
    background: var(--fv-referral-green-soft);

    font-size: 14px;
    font-weight: 800;

}


.fv-referral-form-section-title h4 {

    margin: 0 0 3px;

    color: var(--fv-referral-text);

    font-size: 16px;
    font-weight: 700;

}


.fv-referral-form-section-title p {

    margin: 0;

    color: black;

    font-size: 16px;

}


.fv-referral-form-section-title-spaced {

    margin-top: 35px;

}


/* Labels */

.fv-referral-form label {

    display: block;

    margin-bottom: 8px;

    color: var(--fv-referral-text);

    font-size: 16px;
    font-weight: 700;

}


.fv-referral-form label > span {

    color: #f0a500;

}


.fv-referral-form label small {

    color: black;

    font-size: 16px;
    font-weight: 500;

}


/* Inputs */

.fv-referral-input-wrap {

    position: relative;

}


.fv-referral-input-wrap > i {

    position: absolute;
    z-index: 2;

    top: 50%;
    left: 15px;

    color: var(--fv-referral-green);

    font-size: 12px;

    transform: translateY(-50%);

    pointer-events: none;

}


.fv-referral-input-wrap .form-control,
.fv-referral-input-wrap .form-select {

    width: 100%;
    height: 49px;

    padding: 0 14px 0 39px;

    border: 1px solid #DDEBD7;
    border-radius: 9px;

    color: #40534B;
    background: #FFFFFF;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;

    box-shadow: none;
    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.fv-referral-input-wrap .form-control::placeholder {

    color: #A4AEA0;

}


.fv-referral-input-wrap .form-control:focus,
.fv-referral-input-wrap .form-select:focus {

    border-color: rgba(83, 183, 3, 0.65);

    background: #FCFFFA;

    box-shadow:
        0 0 0 3px rgba(83, 183, 3, 0.08);

}


.fv-referral-input-wrap .form-select {

    appearance: auto;

}


/* Textarea */

.fv-referral-textarea {

    width: 100%;

    padding: 13px 15px !important;

    border: 1px solid #DDEBD7;
    border-radius: 9px;

    color: #40534B;
    background: #FFFFFF;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;

    resize: vertical;

    box-shadow: none;
    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.fv-referral-textarea::placeholder {

    color: #A4AEA0;

}


.fv-referral-textarea:focus {

    border-color: rgba(83, 183, 3, 0.65);

    box-shadow:
        0 0 0 3px rgba(83, 183, 3, 0.08);

}


/* Amount Options */

.fv-referral-amount-options {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;

}


.fv-referral-amount-option {

    position: relative;

    display: block;

    margin: 0 !important;

    cursor: pointer;

}


.fv-referral-amount-option input {

    position: absolute;

    opacity: 0;
    pointer-events: none;

}


.fv-referral-amount-box {

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

    min-height: 82px;

    padding: 12px 5px;

    border: 1px solid #DDEBD7;
    border-radius: 10px;

    background: #FFFFFF;

    text-align: center;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

}


.fv-referral-amount-box strong {

    display: block;

    margin-bottom: 5px;

    color: var(--fv-referral-text);

    font-size: 16px;
    font-weight: 800;

}


.fv-referral-amount-box small {

    display: block;

    color: #8B9986;

    font-size: 9px;
    font-weight: 600;

}


.fv-referral-amount-option:hover .fv-referral-amount-box {

    border-color: rgba(83, 183, 3, 0.55);

    transform: translateY(-2px);

}


.fv-referral-amount-option input:checked + .fv-referral-amount-box {

    border-color: var(--fv-referral-green);

    background: var(--fv-referral-green-soft);

    box-shadow:
        0 0 0 2px rgba(83, 183, 3, 0.10);

}


.fv-referral-amount-option input:checked + .fv-referral-amount-box strong {

    color: var(--fv-referral-green-dark);

}


.fv-referral-field-note {

    display: block;

    margin-top: 9px;

    color: #8C9988;

    font-size: 9px;
    line-height: 1.5;

}


/* Consent */

.fv-referral-consent {

    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 27px;
    padding: 14px 15px;

    border-radius: 9px;

    background: #F8FCF5;

}


.fv-referral-consent i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--fv-referral-green);

    font-size: 14px;

}


.fv-referral-consent p {

    margin: 0;

    color: #7D8A78;

    font-size: 10px;
    line-height: 1.7;

}


/* Submit */

.fv-referral-submit-btn {

    width: 100%;
    min-height: 53px;

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

    margin-top: 22px;
    padding: 0 20px 0 24px;

    border: none;
    border-radius: 10px;

    color: #FFFFFF;
    background: var(--fv-referral-green);

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(83, 183, 3, 0.16);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.fv-referral-submit-btn i {

    width: 31px;
    height: 31px;

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

    border-radius: 8px;

    color: var(--fv-referral-green-dark);
    background: #FFFFFF;

    font-size: 11px;

    transition:
        transform 0.3s ease;

}


.fv-referral-submit-btn:hover {

    background: var(--fv-referral-green-dark);

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(83, 183, 3, 0.24);

}


.fv-referral-submit-btn:hover i {

    transform: translateX(4px);

}


/* Success */

.fv-referral-form-success {

    min-height: 500px;

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

    padding: 30px;

    text-align: center;

}


.fv-referral-success-icon {

    width: 75px;
    height: 75px;

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

    margin-bottom: 22px;

    border-radius: 50%;

    color: #FFFFFF;
    background: var(--fv-referral-green);

    font-size: 29px;

    box-shadow:
        0 15px 35px rgba(83, 183, 3, 0.20);

    animation: fvReferralSuccessPop 0.6s ease both;

}


.fv-referral-form-success h3 {

    margin: 0 0 14px;

    color: var(--fv-referral-text);

    font-size: 25px;
    font-weight: 700;

}


.fv-referral-form-success p {

    max-width: 420px;

    margin: 0 0 25px;

    color: var(--fv-referral-muted);

    font-size: 14px;
    line-height: 1.8;

}


/* Alert */

.fv-referral-form-alert {

    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 22px;
    padding: 14px 15px;

    border: 1px solid #F3D2C8;
    border-radius: 9px;

    color: #A34F3D;
    background: #FFF8F5;

    font-size: 11px;

}


.fv-referral-form-alert i {

    margin-top: 2px;

}


/* =========================================================
   IMPACT BANNER
   ========================================================= */

.fv-referral-impact-banner {

    padding: 58px 0;

    background:
        linear-gradient(
            110deg,
            #17351F 0%,
            #24552B 60%,
            #3F8F05 100%
        );

}


.fv-referral-impact-banner-pattern {

    position: absolute;
    inset: 0;

    opacity: 0.5;

    background-image:
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 30px 30px;

    pointer-events: none;

}


.fv-referral-impact-banner .container {

    position: relative;
    z-index: 2;

}


.fv-referral-impact-banner-content {

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

}


.fv-referral-impact-banner-icon {

    width: 65px;
    height: 65px;

    flex: 0 0 65px;

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

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 16px;

    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.10);

    font-size: 27px;

    animation: fvReferralSunPulse 4s ease-in-out infinite;

}


.fv-referral-impact-banner-content > div:last-child > span {

    display: block;

    margin-bottom: 7px;

    color: #A8E879;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.8px;

}


.fv-referral-impact-banner h2 {

    margin: 0;

    color: #FFFFFF;

    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;

    line-height: 1.3;

}


.fv-referral-impact-banner h2 strong {

    color: #A8E879;
    font-weight: 700;

}


.fv-referral-impact-banner .fv-referral-btn {

    min-width: 190px;

}


/* =========================================================
   FAQ
   ========================================================= */

.fv-referral-faq-section {

    padding: 40px 0;

    background: #FFFFFF;

}


.fv-referral-accordion {

    max-width: 1200px;

    margin: 0 auto;

}


.fv-referral-accordion-item {

    margin-bottom: 12px;

    overflow: hidden;

    border: 1px solid var(--fv-referral-border) !important;
    border-radius: 12px !important;

    background: #FFFFFF;

}


.fv-referral-accordion-item .accordion-button {

    padding: 20px 22px;

    color: black;

    background: #FFFFFF;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;

    box-shadow: none !important;

}


.fv-referral-accordion-item .accordion-button:not(.collapsed) {

    color: var(--fv-referral-green-dark);

    background: #F8FCF5;

}


.fv-referral-accordion-item .accordion-button::after {

    width: 14px;
    height: 14px;

    background-size: 14px;

}


.fv-referral-accordion-item .accordion-body {

    padding: 0 15px 10px;

    color: var(--fv-referral-muted);

    background: #F8FCF5;

    font-size: 16px;
    line-height: 1.4;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fvReferralFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


@keyframes fvReferralCardFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(-1deg);
    }

}


@keyframes fvReferralCardFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(8px) rotate(1deg);
    }

}


@keyframes fvReferralGlowPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }

}


@keyframes fvReferralSunPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

}


@keyframes fvReferralHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.12);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.08);
    }

    60% {
        transform: scale(1);
    }

}


@keyframes fvReferralSlowRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes fvReferralDotFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }

}


@keyframes fvReferralOrbitFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes fvReferralIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


@keyframes fvReferralSuccessPop {

    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .fv-referral-hero {

        padding: 85px 0 95px;

    }


    .fv-referral-solar-circle {

        width: 285px;
        height: 285px;

    }


    .fv-referral-visual-card {

        width: 215px;

    }


    .fv-referral-visual-card-top {

        left: -5px;

    }


    .fv-referral-visual-card-bottom {

        right: -5px;

    }


    .fv-referral-hero-visual {

        min-height: 450px;

    }


    .fv-referral-form-intro {

        padding: 42px 30px;

    }


    .fv-referral-form-card {

        padding: 42px 30px;

    }

}


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

@media (max-width: 991.98px) {

    .fv-referral-breadcrumb {

        min-height: 320px;

    }


    .fv-referral-breadcrumb-content {

        padding: 60px 0 55px;

    }


    .fv-referral-hero {

        padding: 70px 0 85px;

    }


    .fv-referral-hero-content {

        max-width: 100%;
        text-align: center;

    }


    .fv-referral-eyebrow {

        justify-content: center;

    }


    .fv-referral-hero-description {

        margin-left: auto;
        margin-right: auto;

    }


    .fv-referral-hero-actions {

        justify-content: center;

    }


    .fv-referral-trust-row {

        justify-content: center;

    }


    .fv-referral-hero-visual {

        min-height: 450px;

        margin-top: 10px;

    }


    .fv-referral-solar-circle {

        width: 300px;
        height: 300px;

    }


    .fv-referral-visual-card-top {

        left: 8%;

    }


    .fv-referral-visual-card-bottom {

        right: 8%;

    }


    .fv-referral-impact-intro,
    .fv-referral-how-section,
    .fv-referral-contribution-section,
    .fv-referral-cause-section,
    .fv-referral-form-section,
    .fv-referral-faq-section {

        padding: 80px 0;

    }


    .fv-referral-cause-visual {

        min-height: 350px;

        margin-bottom: 20px;

    }


    .fv-referral-cause-content {

        max-width: 100%;

    }


    .fv-referral-form-intro {

        min-height: auto;

    }


    .fv-referral-form-card {

        padding: 40px 30px;

    }


    .fv-referral-impact-banner {

        padding: 45px 0;

    }


    .fv-referral-impact-banner-content {

        justify-content: center;

    }


    .fv-referral-impact-banner .text-lg-end {

        text-align: center !important;

    }

}


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

@media (max-width: 767.98px) {

    .fv-referral-breadcrumb {

        min-height: 285px;

    }


    .fv-referral-breadcrumb-content {

        padding: 48px 0 45px;

    }


    .fv-referral-breadcrumb-eyebrow {

        font-size: 9px;
        letter-spacing: 1.7px;

    }


    .fv-referral-breadcrumb-eyebrow span {

        width: 25px;

    }


    .fv-referral-breadcrumb h1 {

        font-size: 36px;
        letter-spacing: -0.8px;

    }


    .fv-referral-breadcrumb-content > p {

        font-size: 14px;
        line-height: 1.7;

    }


    .fv-referral-hero {

        padding: 60px 0 70px;

    }


    .fv-referral-hero-content h2 {

        font-size: 35px;
        letter-spacing: -0.8px;

    }


    .fv-referral-hero-description {

        font-size: 14px;

    }


    .fv-referral-hero-actions {

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

    }


    .fv-referral-hero-actions .fv-referral-btn {

        width: 100%;
        max-width: 290px;

    }


    .fv-referral-trust-row {

        flex-direction: column;
        align-items: center;
        gap: 10px;

    }


    .fv-referral-hero-visual {

        min-height: 370px;

    }


    .fv-referral-solar-circle {

        width: 230px;
        height: 230px;

    }


    .fv-referral-solar-circle::before {

        inset: 13px;

    }


    .fv-referral-solar-circle::after {

        inset: 30px;

    }


    .fv-referral-sun-icon {

        top: 23px;
        right: 43px;

        width: 40px;
        height: 40px;

        font-size: 17px;

    }


    .fv-referral-solar-panel-icon {

        width: 83px;
        height: 62px;

        border-width: 3px;

        font-size: 27px;

    }


    .fv-referral-leaf-icon {

        bottom: 28px;
        left: 30px;

        width: 43px;
        height: 43px;

        font-size: 17px;

    }


    .fv-referral-heart-icon {

        right: 25px;
        bottom: 35px;

        width: 39px;
        height: 39px;

        font-size: 15px;

    }


    .fv-referral-visual-card {

        width: 185px;

        padding: 11px 12px;

        gap: 9px;

    }


    .fv-referral-visual-card-top {

        top: 18px;
        left: 0;

    }


    .fv-referral-visual-card-bottom {

        right: 0;
        bottom: 18px;

    }


    .fv-referral-visual-card-icon {

        width: 35px;
        height: 35px;

        flex: 0 0 35px;

        font-size: 14px;

    }


    .fv-referral-visual-card small {

        font-size: 7px;

    }


    .fv-referral-visual-card strong {

        font-size: 10px;

    }


    .fv-referral-section-heading {

        margin-bottom: 32px;

    }


    .fv-referral-section-eyebrow {

        font-size: 9px;
        letter-spacing: 1.5px;

    }


    .fv-referral-section-heading h2 {

        font-size: 30px;

    }


    .fv-referral-section-heading p {

        font-size: 14px;

    }


    .fv-referral-impact-card {

        min-height: auto;

        padding: 28px 25px;

    }


    .fv-referral-process {

        margin-top: 35px;

    }


    .fv-referral-process-line {

        left: 29px;
        top: 30px;
        bottom: 30px;

    }


    .fv-referral-process-step {

        gap: 17px;
        margin-bottom: 35px;

    }


    .fv-referral-process-icon {

        width: 60px;
        height: 60px;

        flex: 0 0 60px;

        border-width: 4px;

        font-size: 18px;

    }


    .fv-referral-process-icon span {

        right: -10px;
        bottom: -3px;

        width: 22px;
        height: 22px;

        font-size: 8px;

    }


    .fv-referral-process-content {

        padding-top: 4px;

    }


    .fv-referral-process-content h3 {

        font-size: 18px;

    }


    .fv-referral-process-content p {

        font-size: 12px;

    }


    .fv-referral-contribution-card {

        min-height: 320px;

    }


    .fv-referral-cause-visual {

        min-height: 330px;

    }


    .fv-referral-cause-visual::before {

        width: 260px;
        height: 260px;

    }


    .fv-referral-cause-visual::after {

        width: 190px;
        height: 190px;

    }


    .fv-referral-cause-main-icon {

        width: 130px;
        height: 130px;

        font-size: 50px;

    }


    .fv-referral-cause-orbit-one {

        top: 25px;
        right: 30px;

    }


    .fv-referral-cause-orbit-two {

        left: 25px;
        bottom: 50px;

    }


    .fv-referral-cause-orbit-three {

        right: 10px;
        bottom: 30px;

    }


    .fv-referral-cause-visual-label {

        bottom: 0;

    }


    .fv-referral-cause-content h2 {

        font-size: 30px;

    }


    .fv-referral-cause-list {

        grid-template-columns: 1fr;
        gap: 18px;

    }


    .fv-referral-form-intro {

        padding: 38px 25px;

    }


    .fv-referral-form-intro h2 {

        font-size: 28px;

    }


    .fv-referral-form-card {

        padding: 35px 20px;

    }


    .fv-referral-form-card-heading h3 {

        font-size: 23px;

    }


    .fv-referral-form-section-title-spaced {

        margin-top: 30px;

    }


    .fv-referral-amount-options {

        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

    }


    .fv-referral-amount-box {

        min-height: 75px;

    }


    .fv-referral-impact-banner-content {

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

    }


    .fv-referral-impact-banner-content > div:last-child > span {

        font-size: 9px;

    }


    .fv-referral-impact-banner h2 {

        font-size: 25px;

    }


    .fv-referral-impact-banner .fv-referral-btn {

        width: 100%;
        max-width: 260px;

    }


    .fv-referral-accordion-item .accordion-button {

        padding: 17px 16px;

        font-size: 12px;

    }


    .fv-referral-accordion-item .accordion-body {

        padding: 0 16px 18px;

        font-size: 11px;

    }

}


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

@media (max-width: 480px) {

    .fv-referral-breadcrumb h1 {

        font-size: 31px;

    }


    .fv-referral-breadcrumb-content > p {

        font-size: 12px;

    }


    .fv-referral-hero-content h2 {

        font-size: 30px;

    }


    .fv-referral-hero-visual {

        min-height: 330px;

    }


    .fv-referral-solar-circle {

        width: 200px;
        height: 200px;

    }


    .fv-referral-visual-card {

        width: 158px;

        padding: 9px 10px;

    }


    .fv-referral-visual-card-top {

        left: -7px;
        top: 5px;

    }


    .fv-referral-visual-card-bottom {

        right: -7px;
        bottom: 5px;

    }


    .fv-referral-visual-card-icon {

        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 12px;

    }


    .fv-referral-visual-card small {

        font-size: 6px;

    }


    .fv-referral-visual-card strong {

        font-size: 14px;

    }


    .fv-referral-sun-icon {

        top: 18px;
        right: 36px;

        width: 34px;
        height: 34px;

        font-size: 14px;

    }


    .fv-referral-solar-panel-icon {

        width: 72px;
        height: 54px;

        font-size: 23px;

    }


    .fv-referral-leaf-icon {

        bottom: 22px;
        left: 23px;

        width: 37px;
        height: 37px;

        font-size: 14px;

    }


    .fv-referral-heart-icon {

        right: 19px;
        bottom: 26px;

        width: 34px;
        height: 34px;

        font-size: 14px;

    }


    .fv-referral-trust-item {

        font-size: 10px;

    }


    .fv-referral-process-icon {

        width: 54px;
        height: 54px;

        flex-basis: 54px;

        font-size: 16px;

    }


    .fv-referral-process-line {

        left: 26px;

    }


    .fv-referral-process-step {

        gap: 14px;

    }


    .fv-referral-process-content h3 {

        font-size: 16px;

    }


    .fv-referral-process-content p {

        font-size: 11px;

    }


    .fv-referral-cause-visual {

        min-height: 290px;

    }


    .fv-referral-cause-visual::before {

        width: 220px;
        height: 220px;

    }


    .fv-referral-cause-visual::after {

        width: 165px;
        height: 165px;

    }


    .fv-referral-cause-main-icon {

        width: 110px;
        height: 110px;

        font-size: 42px;

    }


    .fv-referral-cause-orbit {

        width: 44px;
        height: 44px;

        font-size: 15px;

    }


    .fv-referral-cause-orbit-one {

        top: 18px;
        right: 20px;

    }


    .fv-referral-cause-orbit-two {

        left: 15px;
        bottom: 40px;

    }


    .fv-referral-cause-orbit-three {

        right: 0;
        bottom: 20px;

    }


    .fv-referral-cause-visual-label {

        min-width: 165px;

        padding: 10px 15px;

    }


    .fv-referral-cause-visual-label strong {

        font-size: 11px;

    }


    .fv-referral-cause-visual-label span {

        font-size: 9px;

    }


    .fv-referral-form-card {

        padding: 30px 16px;

    }


    .fv-referral-form-intro {

        padding: 32px 20px;

    }


    .fv-referral-form-intro h2 {

        font-size: 25px;

    }


    .fv-referral-form-card-heading h3 {

        font-size: 21px;

    }


    .fv-referral-form-section-title h4 {

        font-size: 14px;

    }


    .fv-referral-amount-box strong {

        font-size: 14px;

    }


    .fv-referral-amount-box small {

        font-size: 8px;

    }


    .fv-referral-contribution-amount {

        font-size: 36px;

    }


    .fv-referral-impact-banner h2 {

        font-size: 22px;

    }

}

@media (min-width:1500px) and (max-width:1540px)
{
    .fv-countdown
    {
        top: 85px;
    }
    
    .fv-hero-container
    {
        padding-top: 225px;
    }
    
    .fv-hero-subtitle
    {
        margin: 15px 0 15px !important;
    }
}



/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-referral-breadcrumb-content,
    .fv-referral-solar-circle,
    .fv-referral-visual-glow,
    .fv-referral-visual-card,
    .fv-referral-floating-dot,
    .fv-referral-cause-main-icon,
    .fv-referral-cause-orbit,
    .fv-referral-form-intro-icon,
    .fv-referral-heart-icon,
    .fv-referral-sun-icon,
    .fv-referral-impact-banner-icon {

        animation: none !important;

    }

    .fv-referral-hero::before,
    .fv-referral-solar-circle::before,
    .fv-referral-cause-visual::before,
    .fv-referral-cause-visual::after {

        animation: none !important;

    }

}

/* ===== Lead Capture Section ===== */
.fv-lead-capture-section {
    padding: 60px 0;
}

.fv-lead-capture-box {
    background: #53b703;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    color: #fff;
}

.fv-lead-capture-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.fv-lead-capture-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.fv-lead-capture-text p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto 28px;
}

.fv-lead-capture-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.fv-lead-capture-actions .fv-btn-primary {
    background: #fff;
    color: #1a3d1f;
    border: none;
}

.fv-lead-capture-actions .fv-btn-primary:hover {
    background: #f0f0f0;
}

.fv-lead-capture-actions .fv-btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
}

.fv-lead-capture-actions .fv-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

/* ===== Modal ===== */
.fv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
}

.fv-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.fv-modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 36px 32px;
    max-width: 420px;
    width: 100%;
    position: relative;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

.fv-modal-overlay.is-open .fv-modal-box {
    transform: translateY(0);
}

.fv-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
}

.fv-modal-close:hover {
    color: #333;
}

.fv-modal-icon {
    width: 56px;
    height: 56px;
    background: #eaf7ee;
    color: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 16px;
}

.fv-modal-box h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.fv-modal-box p {
    font-size: 14px;
    color: #666;
    margin-bottom: 22px;
}

.fv-modal-box .fv-form-group {
    text-align: left;
    margin-bottom: 16px;
}

.fv-modal-box .fv-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.fv-modal-box .fv-form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.fv-modal-box .fv-form-group input:focus {
    outline: none;
    border-color: #28a745;
}

.fv-modal-error {
    color: #dc3545;
    font-size: 14px;
    margin-bottom: 12px;
    min-height: 16px;
    text-align: left;
}

.fv-modal-submit {
    width: 100%;
    justify-content: center;
}

.fv-modal-success {
    padding: 10px 0;
}

.fv-modal-success-icon {
    width: 56px;
    height: 56px;
    background: #eaf7ee;
    color: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}

.fv-modal-success h4 {
    font-size: 20px;
    margin-bottom: 8px;
}

.fv-modal-success p {
    margin-bottom: 0;
}
 
        
/* =========================================================
   FUTURE VOLT - SOLAR LOAN PAGE
   Scoped CSS
   Green Theme: #53b703
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --fv-loan-green: #53b703;
    --fv-loan-green-dark: #3f8f05;
    --fv-loan-green-light: #eef9e8;
    --fv-loan-green-soft: #f6fbf3;

    --fv-loan-heading: #17351f;
    --fv-loan-text: #50665b;
    --fv-loan-muted: #819088;

    --fv-loan-border: #ddebd7;
    --fv-loan-white: #ffffff;

    --fv-loan-shadow:
        0 12px 35px rgba(23, 53, 31, 0.055);

    --fv-loan-shadow-hover:
        0 22px 50px rgba(23, 53, 31, 0.12);

}


/* =========================================================
   COMMON
========================================================= */

.fv-loan-section {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
}

.fv-loan-section.bg-light {
    background: #f8fbf6 !important;
}

.fv-loan-section-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.fv-loan-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: var(--fv-green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.4;
    text-transform: uppercase;
}

.fv-loan-section-heading h2 {
    margin: 0 0 16px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 43px;
    font-weight: 700;
    line-height: 1.18;
}

.fv-loan-section-heading h2 span {
    color: var(--fv-loan-green);
}

.fv-loan-section-heading p {
    max-width: 690px;
    margin: 0 auto;
    color: var(--fv-loan-text);
    font-size: 16px;
    line-height: 1.8;
}

.fv-loan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 14px 25px;
    border: 1px solid var(--fv-loan-green);
    border-radius: 10px;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fv-loan-button:hover {
    border-color: var(--fv-loan-green-dark);
    background: var(--fv-loan-green-dark);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(83, 183, 3, 0.20);
}

.fv-loan-button.light {
    border-color: #dcebd7;
    background: #ffffff;
    color: var(--fv-loan-heading);
}

.fv-loan-button.light:hover {
    border-color: var(--fv-loan-green);
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green-dark);
}

.fv-loan-button i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.fv-loan-button:hover i {
    transform: translateX(3px);
}


/* =========================================================
   BREADCRUMB
   Reuses existing fv-referral-breadcrumb /
   fv-subsidy-breadcrumb structure
========================================================= */

.fv-loan-breadcrumb {
    position: relative;
    overflow: hidden;
}

.fv-loan-breadcrumb .fv-referral-breadcrumb-content {
    position: relative;
    z-index: 2;
}

.fv-loan-breadcrumb .fv-referral-breadcrumb-eyebrow {
    color: #A8E879;
}

.fv-loan-breadcrumb .fv-referral-breadcrumb-eyebrow span {
    background: var(--fv-loan-green);
}

.fv-loan-breadcrumb h1 span {
    color: var(--fv-loan-green);
}


/* =========================================================
   HERO
========================================================= */

.fv-loan-hero {
    position: relative;
    padding: 40px 0 40px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(83, 183, 3, 0.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fcf5 100%
        );
}

.fv-loan-hero::before {
    position: absolute;
    top: -150px;
    right: -150px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(83, 183, 3, 0.10);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.fv-loan-hero::after {
    position: absolute;
    right: -60px;
    bottom: -220px;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(83, 183, 3, 0.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.fv-loan-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.fv-loan-hero .fv-loan-eyebrow {
    padding: 8px 14px;
    border: 1px solid #dcebd7;
    border-radius: 30px;
    background: #eef9e8;
    font-size: 15px;
    letter-spacing: 1.5px;
}

.fv-loan-hero .fv-loan-eyebrow i {
    font-size: 14px;
}

.fv-loan-hero h2 {
    margin: 22px 0 20px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 1.12;
}

.fv-loan-hero h2 span {
    display: block;
    color: var(--fv-loan-green);
}

.fv-loan-hero-description {
    max-width: 600px;
    margin: 0 0 27px;
    color: #000;
    font-size: 16px;
    line-height: 1.85;
}

.fv-loan-hero-points {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.fv-loan-hero-point {
    display: flex;
    align-items: center;
    gap: 13px;
}

.fv-loan-point-icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 20px;
}

.fv-loan-hero-point strong {
    display: block;
    margin-bottom: 3px;
    color: var(--fv-loan-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.fv-loan-hero-point span {
    display: block;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}

.fv-loan-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.fv-loan-hero-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 580px;
    color: #000;
    font-size: 14px;
    line-height: 1.65;
}

.fv-loan-hero-note i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--fv-loan-green);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.fv-loan-hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
}

.fv-loan-visual-glow {
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(83, 183, 3, 0.15) 0%,
        rgba(83, 183, 3, 0.04) 48%,
        transparent 70%
    );
    animation: fvLoanPulse 4s ease-in-out infinite;
}

.fv-loan-visual-card.main {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 355px;
    padding: 30px;
    border: 1px solid #dcebd7;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 25px 70px rgba(23, 53, 31, 0.12);
    animation: fvLoanFloat 5s ease-in-out infinite;
}

.fv-loan-visual-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    color: var(--fv-loan-muted);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fv-loan-visual-card-top i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 19px;
}

.fv-loan-visual-amount {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fv-loan-visual-amount small {
    color: #000;
    font-size: 16px;
}

.fv-loan-visual-amount strong {
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
}

.fv-loan-visual-amount strong sup {
    color: var(--fv-loan-green);
    font-size: 18px;
    vertical-align: top;
}

.fv-loan-visual-amount > span {
    color: var(--fv-loan-green);
    font-size: 15px;
    font-weight: 700;
}

.fv-loan-visual-divider {
    height: 1px;
    margin: 28px 0 23px;
    background: #edf3e9;
}

.fv-loan-visual-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fv-loan-visual-details div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-size: 16px;
}

.fv-loan-visual-details i {
    color: var(--fv-loan-green);
    font-size: 14px;
}

.fv-loan-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 185px;
    padding: 14px 16px;
    border: 1px solid #e1eddd;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(23, 53, 31, 0.10);
    backdrop-filter: blur(8px);
}

.fv-loan-floating-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 14px;
}

.fv-loan-floating-card small {
    display: block;
    margin-bottom: 3px;
    color: #000;
    font-size: 14px;
    line-height: 1.3;
}

.fv-loan-floating-card strong {
    display: block;
    color: var(--fv-loan-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.fv-loan-floating-card.top {
    top: -40px;
    right: -12px;
    animation: fvLoanFloat 4s ease-in-out infinite 0.8s;
}

.fv-loan-floating-card.bottom {
    bottom: -40px;
    left: -18px;
    animation: fvLoanFloat 4s ease-in-out infinite 1.4s;
}


/* =========================================================
   STATS
========================================================= */

.fv-loan-stats {
    position: relative;
    z-index: 4;
    margin-top: -35px;
    padding-bottom: 20px;
}

.fv-loan-stats-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid #dcebd7;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(23, 53, 31, 0.08);
}

.fv-loan-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 26px 30px;
    border-right: 1px solid #edf3e9;
}

.fv-loan-stat:last-child {
    border-right: none;
}

.fv-loan-stat-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 19px;
}

.fv-loan-stat strong {
    display: block;
    margin-bottom: 4px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.fv-loan-stat strong sup {
    color: var(--fv-loan-green);
    font-size: 11px;
}

.fv-loan-stat span {
    display: block;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}

.fv-loan-stats-note {
    margin: 15px auto 0;
    color: #000;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}


/* =========================================================
   INTRODUCTION CARDS
========================================================= */

.fv-loan-info-card,
.fv-loan-how-card {
    height: 100%;
    padding: 35px;
    border: 1px solid var(--fv-loan-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--fv-loan-shadow);
}

.fv-loan-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 23px;
    border-radius: 15px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 23px;
}

.fv-loan-info-card h3,
.fv-loan-how-card h3 {
    margin: 0 0 18px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
}

.fv-loan-info-card p {
    margin: 0 0 17px;
    color: black;
    font-size: 16px;
    line-height: 1.8;
}

.fv-loan-info-card p:last-of-type {
    margin-bottom: 24px;
}

.fv-loan-info-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 17px;
    border-left: 3px solid var(--fv-loan-green);
    border-radius: 0 10px 10px 0;
    background: var(--fv-loan-green-soft);
}

.fv-loan-info-highlight i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--fv-loan-green);
    font-size: 14px;
}

.fv-loan-info-highlight span {
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}

.fv-loan-how-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5faf2 100%
        );
}

.fv-loan-how-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid #eaf2e6;
}

.fv-loan-how-step:first-of-type {
    padding-top: 0;
}

.fv-loan-how-step:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.fv-loan-how-number {
    display: flex;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.fv-loan-how-step strong {
    display: block;
    margin-bottom: 5px;
    color: var(--fv-loan-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.fv-loan-how-step p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   PARTNER FILTER
========================================================= */

.fv-loan-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0px auto 35px;
}

.fv-loan-filter {
    padding: 10px 22px;
    border: 1px solid #dcebd7;
    border-radius: 30px;
    background: #ffffff;
    color: var(--fv-loan-text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fv-loan-filter:hover,
.fv-loan-filter.active {
    border-color: var(--fv-loan-green);
    background: var(--fv-loan-green);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(83, 183, 3, 0.16);
}


/* =========================================================
   PARTNER CARDS
========================================================= */

.fv-loan-partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /*min-height: 225px;*/
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--fv-loan-border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--fv-loan-shadow);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.fv-loan-partner-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--fv-loan-green),
        #91d95a
    );
    content: "";
}

.fv-loan-partner-card:hover {
    border-color: rgba(83, 183, 3, 0.35);
    box-shadow: var(--fv-loan-shadow-hover);
    transform: translateY(-7px);
}

.fv-loan-partner-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}

.fv-loan-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    overflow: hidden;
    border: 1px solid #e2eedc;
    border-radius: 15px;
    background: #f8fcf5;
    color: var(--fv-loan-green);
    font-size: 25px;
}

.fv-loan-partner-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.fv-loan-partner-type {
    padding: 6px 11px;
    border-radius: 20px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fv-loan-partner-card h3 {
    min-height: 27px;
    /*margin: 0 0 22px;*/
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.fv-loan-partner-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid #e7f0e3;
    border-radius: 12px;
}

.fv-loan-partner-meta > div {
    min-height: 73px;
    padding: 12px;
    background: #fbfdf9;
}

.fv-loan-partner-meta > div:nth-child(odd) {
    border-right: 1px solid #e7f0e3;
}

.fv-loan-partner-meta > div:nth-child(-n+2) {
    border-bottom: 1px solid #e7f0e3;
}

.fv-loan-partner-meta span {
    display: block;
    margin-bottom: 6px;
    color: var(--fv-loan-muted);
    font-size: 9px;
    line-height: 1.4;
}

.fv-loan-partner-meta strong {
    display: block;
    color: var(--fv-loan-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.fv-loan-partner-detail {
    margin-bottom: 17px;
}

.fv-loan-partner-detail h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    color: var(--fv-loan-heading);
    font-size: 12px;
    font-weight: 700;
}

.fv-loan-partner-detail h4 i {
    color: var(--fv-loan-green);
    font-size: 11px;
}

.fv-loan-partner-detail p {
    margin: 0;
    color: var(--fv-loan-muted);
    font-size: 11px;
    line-height: 1.65;
}

.fv-loan-partner-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /*margin-top: auto;*/
    padding-top: 16px;
    border-top: 1px solid #edf3e9;
    color: #000;
    font-size: 9px;
    line-height: 1.55;
}

.fv-loan-partner-disclaimer i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--fv-loan-green);
}

.fv-loan-empty-partners {
    padding: 60px 30px;
    border: 1px dashed #cfe2c6;
    border-radius: 20px;
    background: #ffffff;
    text-align: center;
}

.fv-loan-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 28px;
}

.fv-loan-empty-partners h3 {
    margin: 0 0 12px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.fv-loan-empty-partners p {
    max-width: 540px;
    margin: 0 auto 25px;
    color: #000;
    font-size: 16px;
    line-height: 1.8;
}

.fv-loan-compliance-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /*max-width: 900px;*/
    margin: 35px auto 0;
    padding: 17px 20px;
    border: 1px solid #e6efdf;
    border-radius: 12px;
    background: #ffffff;
}

.fv-loan-compliance-note > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--fv-loan-green);
}

.fv-loan-compliance-note p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   ELIGIBILITY & DOCUMENTS
========================================================= */

.fv-loan-feature-card {
    position: relative;
    height: 100%;
    padding: 35px;
    border: 1px solid var(--fv-loan-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--fv-loan-shadow);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.fv-loan-feature-card:hover {
    box-shadow: var(--fv-loan-shadow-hover);
    transform: translateY(-5px);
}

.fv-loan-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 22px;
}

.fv-loan-feature-card h3 {
    margin: 0 0 12px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.fv-loan-feature-intro {
    min-height: 48px;
    margin: 0 0 24px;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}

.fv-loan-check-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fv-loan-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: black;
    font-size: 17px;
    line-height: 1.65;
}

.fv-loan-check-list li i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--fv-loan-green);
    font-size: 14px;
}

.fv-loan-feature-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 25px;
    padding-top: 17px;
    border-top: 1px solid #edf3e9;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}

.fv-loan-feature-note i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--fv-loan-green);
}


/* =========================================================
   EMI CALCULATOR
========================================================= */

.fv-loan-calculator-card,
.fv-loan-result-card {
    height: 100%;
    border: 1px solid var(--fv-loan-border);
    border-radius: 20px;
    box-shadow: var(--fv-loan-shadow);
}

.fv-loan-calculator-card {
    padding: 32px;
    background: #ffffff;
}

.fv-loan-calculator-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}

.fv-loan-calculator-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-size: 20px;
}

.fv-loan-calculator-header h3 {
    margin: 0 0 4px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.fv-loan-calculator-header p {
    margin: 0;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}

.fv-loan-form-group {
    margin-bottom: 20px;
}

.fv-loan-form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--fv-loan-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.fv-loan-input-wrapper {
    position: relative;
}

.fv-loan-input-wrapper > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: var(--fv-loan-green);
    font-size: 14px;
    pointer-events: none;
    transform: translateY(-50%);
}

.fv-loan-input,
.fv-loan-select {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #dcebd7;
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: #40534b;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.fv-loan-input-wrapper .fv-loan-input {
    padding-left: 40px;
}

.fv-loan-input:focus,
.fv-loan-select:focus {
    border-color: var(--fv-loan-green);
    box-shadow: 0 0 0 3px rgba(83, 183, 3, 0.10);
}

.fv-loan-calculate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
    padding: 13px 20px;
    border: 1px solid var(--fv-loan-green);
    border-radius: 10px;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fv-loan-calculate-button:hover {
    border-color: var(--fv-loan-green-dark);
    background: var(--fv-loan-green-dark);
    box-shadow: 0 8px 20px rgba(83, 183, 3, 0.18);
    transform: translateY(-2px);
}

.fv-loan-calculator-disclaimer {
    margin-top: 20px;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.fv-loan-result-card {
    display: flex;
    flex-direction: column;
    padding: 35px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f2faee 100%
        );
}

.fv-loan-result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e3efde;
}

.fv-loan-result-label {
    display: block;
    margin-bottom: 9px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.fv-loan-result-top strong {
    display: block;
    color: var(--fv-loan-green-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
}

.fv-loan-result-top small {
    display: block;
    margin-top: 8px;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}

.fv-loan-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 17px;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-size: 23px;
}

.fv-loan-result-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 0;
}

.fv-loan-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #e9f2e5;
}

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

.fv-loan-result-row span {
    color: #000;
    font-size: 16px;
}

.fv-loan-result-row strong {
    color: var(--fv-loan-heading);
    font-size: 16px;
    font-weight: 700;
}

.fv-loan-result-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: auto;
    padding: 15px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
}

.fv-loan-result-note i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--fv-loan-green);
    font-size: 12px;
}

.fv-loan-result-note p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}

.fv-loan-result-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    padding: 13px 20px;
    border: 1px solid var(--fv-loan-green);
    border-radius: 10px;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fv-loan-result-cta:hover {
    border-color: var(--fv-loan-green-dark);
    background: var(--fv-loan-green-dark);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}


/* =========================================================
   EMI TABLE
========================================================= */

.fv-loan-table-wrapper {
    overflow: hidden;
    border: 1px solid var(--fv-loan-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--fv-loan-shadow);
}

.fv-loan-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 30px;
    border-bottom: 1px solid #e6f0e1;
    background: #fbfdf9;
}

.fv-loan-table-header h3 {
    margin: 0 0 7px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.fv-loan-table-header p {
    margin: 0;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}

.fv-loan-table-badge {
    flex: 0 0 auto;
    padding: 8px 13px;
    border-radius: 30px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fv-loan-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--fv-loan-text);
}

.fv-loan-table thead th {
    padding: 17px 20px;
    border-bottom: 1px solid #e3efde;
    background: #f5faf2;
    color: var(--fv-loan-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    vertical-align: middle;
}

.fv-loan-table tbody td {
    padding: 20px;
    border-bottom: 1px solid #edf3e9;
    color: var(--fv-loan-text);
    font-size: 16px;
    line-height: 1.5;
    vertical-align: middle;
}

.fv-loan-table tbody tr:last-child td {
    border-bottom: none;
}

.fv-loan-table tbody tr {
    transition: background 0.3s ease;
}

.fv-loan-table tbody tr:hover {
    background: #fbfdf9;
}

.fv-loan-table tbody td strong {
    color: var(--fv-loan-heading);
    font-weight: 700;
}

.fv-loan-table tbody td:last-child strong {
    color: var(--fv-loan-green-dark);
    font-size: 15px;
}

.fv-loan-table-highlight {
    background: #f4faef;
}

.fv-loan-table-highlight:hover {
    background: #edf8e6 !important;
}

.fv-loan-recommended-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 7px;
    border-radius: 20px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green-dark);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.fv-loan-table-footnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 25px;
    border-top: 1px solid #e8f1e4;
    background: #fbfdf9;
}

.fv-loan-table-footnote i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--fv-loan-green);
    font-size: 14px;
}

.fv-loan-table-footnote p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   APPLICATION PROCESS
========================================================= */

.fv-loan-process {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
}

.fv-loan-process-line {
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 31px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        #bfe2a8,
        #e4f1dd
    );
}

.fv-loan-process-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 0 0 30px;
}

.fv-loan-process-step:last-child {
    padding-bottom: 0;
}

.fv-loan-process-number {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 5px solid #f8fbf6;
    border-radius: 50%;
    background: var(--fv-loan-green);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(83, 183, 3, 0.20);
}

.fv-loan-process-content {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: 18px;
    min-height: 110px;
    padding: 24px 27px;
    border: 1px solid #e0edd9;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(23, 53, 31, 0.035);
    transition: all 0.3s ease;
}

.fv-loan-process-content:hover {
    border-color: rgba(83, 183, 3, 0.35);
    box-shadow: 0 15px 35px rgba(23, 53, 31, 0.07);
    transform: translateX(5px);
}

.fv-loan-process-icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 20px;
}

.fv-loan-process-time {
    display: block;
    margin-bottom: 6px;
    color: var(--fv-loan-green);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.fv-loan-process-content h3 {
    margin: 0 0 8px;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.fv-loan-process-content p {
    margin: 0;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}

.fv-loan-process-disclaimer {
    max-width: 850px;
    margin: 30px auto 0;
    color: #000;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}


/* =========================================================
   FAQ
========================================================= */

.fv-loan-faq-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

.fv-loan-faq-item {
    overflow: hidden;
    margin-bottom: 13px;
    border: 1px solid #e0edd9;
    border-radius: 13px;
    background: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fv-loan-faq-item:hover {
    border-color: rgba(83, 183, 3, 0.35);
}

.fv-loan-faq-item.active {
    border-color: rgba(83, 183, 3, 0.40);
    box-shadow: 0 8px 25px rgba(23, 53, 31, 0.045);
}

.fv-loan-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 21px 24px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--fv-loan-heading);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.fv-loan-faq-question i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fv-loan-green-light);
    color: var(--fv-loan-green);
    font-size: 11px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.fv-loan-faq-item.active .fv-loan-faq-question i {
    background: var(--fv-loan-green);
    color: #ffffff;
    transform: rotate(180deg);
}

.fv-loan-faq-answer {
    display: none;
    padding: 0 24px 22px;
}

.fv-loan-faq-item.active .fv-loan-faq-answer {
    display: block;
    animation: fvLoanFaqOpen 0.3s ease;
}

.fv-loan-faq-answer p {
    margin: 0;
    color: #000;
    font-size: 16px;
    line-height: 1.5;
}


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

.fv-loan-cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255, 255, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(255, 255, 255, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #17351f 0%,
            #276d1c 52%,
            #53b703 100%
        );
}

.fv-loan-cta::before {
    position: absolute;
    top: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    content: "";
}

.fv-loan-cta::after {
    position: absolute;
    bottom: -260px;
    left: -150px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
}

.fv-loan-cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.fv-loan-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 28px;
}

.fv-loan-cta h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
}

.fv-loan-cta h2 span {
    display: block;
    color: #c9f3af;
}

.fv-loan-cta p {
    max-width: 650px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.8;
}

.fv-loan-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.fv-loan-cta .fv-loan-button.light {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--fv-loan-green-dark);
}

.fv-loan-cta .fv-loan-button.light:hover {
    border-color: #eaf8e3;
    background: #eaf8e3;
    color: var(--fv-loan-green-dark);
}

.fv-loan-button.outline-light {
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #ffffff;
}

.fv-loan-button.outline-light:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.fv-loan-cta-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 580px;
    margin: 24px auto 0;
    color: white;
    font-size: 10px;
    line-height: 1.6;
}

.fv-loan-cta-note i {
    flex: 0 0 auto;
    margin-top: 3px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fvLoanFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}

@keyframes fvLoanPulse {

    0%,
    100% {
        opacity: 0.75;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }

}

@keyframes fvLoanFaqOpen {

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

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

}

.fv-loan-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.fv-loan-reveal.fv-loan-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .fv-loan-hero h2 {
        font-size: 47px;
    }

    .fv-loan-visual-card.main {
        max-width: 320px;
        padding: 27px;
    }

    .fv-loan-floating-card.top {
        right: -5px;
    }

    .fv-loan-floating-card.bottom {
        left: -5px;
    }

    .fv-loan-partner-card {
        padding: 25px;
    }

}


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

@media (max-width: 991.98px) {

    .fv-loan-section {
        padding: 70px 0;
    }

    .fv-loan-section-heading {
        margin-bottom: 38px;
    }

    .fv-loan-section-heading h2 {
        font-size: 36px;
    }

    .fv-loan-hero {
        padding: 75px 0 65px;
    }

    .fv-loan-hero-content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    .fv-loan-hero .fv-loan-eyebrow {
        justify-content: center;
    }

    .fv-loan-hero h2 {
        font-size: 44px;
    }

    .fv-loan-hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .fv-loan-hero-points {
        max-width: 480px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .fv-loan-hero-actions {
        justify-content: center;
    }

    .fv-loan-hero-note {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .fv-loan-hero-visual {
        min-height: 430px;
        margin-top: 15px;
    }

    .fv-loan-stats {
        margin-top: -25px;
    }

    .fv-loan-stats-card {
        grid-template-columns: 1fr;
    }

    .fv-loan-stat {
        border-right: none;
        border-bottom: 1px solid #edf3e9;
    }

    .fv-loan-stat:last-child {
        border-bottom: none;
    }

    .fv-loan-info-card,
    .fv-loan-how-card,
    .fv-loan-feature-card {
        padding: 28px;
    }

    .fv-loan-feature-intro {
        min-height: auto;
    }

    .fv-loan-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fv-loan-process-line {
        left: 27px;
    }

    .fv-loan-process-number {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }

    .fv-loan-process-step {
        gap: 20px;
    }

    .fv-loan-cta h2 {
        font-size: 36px;
    }

}


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

@media (max-width: 767.98px) {

    .fv-loan-section {
        padding: 55px 0;
    }

    .fv-loan-section-heading {
        margin-bottom: 30px;
    }

    .fv-loan-section-heading h2 {
        font-size: 30px;
    }

    .fv-loan-section-heading p {
        font-size: 14px;
    }

    .fv-loan-hero {
        padding: 55px 0 50px;
    }

    .fv-loan-hero h2 {
        font-size: 36px;
    }

    .fv-loan-hero-description {
        font-size: 14px;
    }

    .fv-loan-hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .fv-loan-hero-actions .fv-loan-button {
        width: 100%;
        max-width: 300px;
    }

    .fv-loan-hero-visual {
        min-height: 380px;
        margin-top: 5px;
    }

    .fv-loan-visual-card.main {
        max-width: 290px;
        padding: 25px;
    }

    .fv-loan-visual-amount strong {
        font-size: 37px;
    }

    .fv-loan-floating-card {
        min-width: 155px;
        padding: 11px 12px;
    }

    .fv-loan-floating-card.top {
        top: 20px;
        right: -5px;
    }

    .fv-loan-floating-card.bottom {
        bottom: 10px;
        left: -5px;
    }

    .fv-loan-floating-card i {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
        font-size: 12px;
    }

    .fv-loan-floating-card small {
        font-size: 8px;
    }

    .fv-loan-floating-card strong {
        font-size: 10px;
    }

    .fv-loan-stats {
        margin-top: 0;
        padding-top: 20px;
    }

    .fv-loan-stat {
        padding: 22px;
    }

    .fv-loan-stat strong {
        font-size: 21px;
    }

    .fv-loan-info-card,
    .fv-loan-how-card,
    .fv-loan-feature-card,
    .fv-loan-calculator-card,
    .fv-loan-result-card {
        padding: 24px;
    }

    .fv-loan-info-card h3,
    .fv-loan-how-card h3 {
        font-size: 22px;
    }

    .fv-loan-feature-card h3 {
        font-size: 21px;
    }

    .fv-loan-filter-bar {
        margin-top: -10px;
        margin-bottom: 25px;
    }

    .fv-loan-filter {
        padding: 9px 16px;
        font-size: 11px;
    }

    .fv-loan-partner-card {
        min-height: auto;
        padding: 24px;
    }

    .fv-loan-partner-card h3 {
        min-height: auto;
    }

    .fv-loan-partner-meta > div {
        min-height: 70px;
        padding: 10px;
    }

    .fv-loan-partner-meta span {
        font-size: 8px;
    }

    .fv-loan-partner-meta strong {
        font-size: 11px;
    }

    .fv-loan-result-top strong {
        font-size: 34px;
    }

    .fv-loan-result-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        font-size: 19px;
    }

    .fv-loan-table-header {
        padding: 22px;
    }

    .fv-loan-table-header h3 {
        font-size: 18px;
    }

    .fv-loan-table thead th,
    .fv-loan-table tbody td {
        padding: 14px 15px;
        font-size: 11px;
        white-space: nowrap;
    }

    .fv-loan-table tbody td:last-child strong {
        font-size: 14px;
    }

    .fv-loan-table-footnote {
        padding: 16px 20px;
    }

    .fv-loan-process-line {
        left: 24px;
    }

    .fv-loan-process-step {
        gap: 15px;
        padding-bottom: 20px;
    }

    .fv-loan-process-number {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-width: 3px;
        font-size: 11px;
    }

    .fv-loan-process-content {
        flex-direction: column;
        gap: 12px;
        min-height: auto;
        padding: 20px;
    }

    .fv-loan-process-content h3 {
        font-size: 16px;
    }

    .fv-loan-process-content p {
        font-size: 11px;
    }

    .fv-loan-process-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .fv-loan-faq-question {
        padding: 18px 17px;
        font-size: 14px;
    }

    .fv-loan-faq-answer {
        padding: 0 17px 19px;
    }

    .fv-loan-faq-answer p {
        font-size: 12px;
    }

    .fv-loan-cta {
        padding: 65px 0;
    }

    .fv-loan-cta h2 {
        font-size: 30px;
    }

    .fv-loan-cta p {
        font-size: 14px;
    }

    .fv-loan-cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .fv-loan-cta-actions .fv-loan-button {
        width: 100%;
        max-width: 300px;
    }

}


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

@media (max-width: 480px) {

    .fv-loan-hero h2 {
        font-size: 31px;
    }

    .fv-loan-hero-visual {
        min-height: 340px;
    }

    .fv-loan-visual-card.main {
        max-width: 260px;
        padding: 21px;
    }

    .fv-loan-visual-card-top {
        margin-bottom: 25px;
    }

    .fv-loan-visual-amount strong {
        font-size: 32px;
    }

    .fv-loan-visual-details div {
        font-size: 10px;
    }

    .fv-loan-floating-card {
        min-width: 130px;
    }

    .fv-loan-floating-card.top {
        right: -12px;
    }

    .fv-loan-floating-card.bottom {
        left: -12px;
    }

    .fv-loan-floating-card strong {
        font-size: 9px;
    }

    .fv-loan-stat {
        gap: 12px;
        padding: 18px;
    }

    .fv-loan-stat-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .fv-loan-stat strong {
        font-size: 19px;
    }

    .fv-loan-partner-meta {
        grid-template-columns: 1fr;
    }

    .fv-loan-partner-meta > div {
        border-right: none !important;
        border-bottom: 1px solid #e7f0e3;
    }

    .fv-loan-partner-meta > div:last-child {
        border-bottom: none;
    }

    .fv-loan-result-top {
        flex-direction: column;
        gap: 15px;
    }

    .fv-loan-result-icon {
        display: none;
    }

    .fv-loan-process-line {
        left: 22px;
    }

    .fv-loan-process-number {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 10px;
    }

    .fv-loan-process-content {
        padding: 17px;
    }

    .fv-loan-process-icon {
        display: none;
    }

    .fv-loan-cta h2 {
        font-size: 27px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-loan-visual-glow,
    .fv-loan-visual-card.main,
    .fv-loan-floating-card {
        animation: none !important;
    }

    .fv-loan-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fv-loan-button,
    .fv-loan-partner-card,
    .fv-loan-feature-card,
    .fv-loan-process-content {
        transition: none;
    }

}

/* =========================================================
   FUTURE VOLT
   MONEY BACK GUARANTEE PAGE
   Scoped CSS
   Theme: Green #53B703
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    --fv-g-green: #53b703;
    --fv-g-green-dark: #3f8f05;
    --fv-g-green-light: #eef9e8;
    --fv-g-green-soft: #f6fbf3;

    --fv-g-heading: #17351f;
    --fv-g-text: #50665b;
    --fv-g-muted: #819088;

    --fv-g-border: #ddebd7;
    --fv-g-white: #ffffff;

    --fv-g-shadow:
        0 12px 35px rgba(23, 53, 31, 0.055);

    --fv-g-shadow-hover:
        0 22px 50px rgba(23, 53, 31, 0.12);

}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.fv-guarantee-section {

    position: relative;
    padding: 40px 0;
    overflow: hidden;

}

.fv-guarantee-section-heading {

    position: relative;
    z-index: 2;

    max-width: 760px;
    margin: 0 auto 48px;

    text-align: center;

}

.fv-guarantee-eyebrow {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--fv-g-green);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.4;

    text-transform: uppercase;

}

.fv-guarantee-eyebrow i {

    font-size: 14px;

}

.fv-guarantee-section-heading h2 {

    margin: 0 0 16px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 43px;
    font-weight: 700;
    line-height: 1.18;

}

.fv-guarantee-section-heading h2 span {

    color: var(--fv-g-green);

}

.fv-guarantee-section-heading p {

    max-width: 1000px;
    margin: 0 auto;

    color: black;

    font-size: 16px;
    line-height: 1.4;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.fv-guarantee-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;
    padding: 14px 25px;

    border: 1px solid var(--fv-g-green);
    border-radius: 10px;

    background: var(--fv-g-green);
    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}

.fv-guarantee-button:hover {

    border-color: var(--fv-g-green-dark);
    background: var(--fv-g-green-dark);
    color: #ffffff;

    text-decoration: none;

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(83, 183, 3, 0.20);

}

.fv-guarantee-button.light {

    border-color: #dcebd7;
    background: #53b703;
    color: var(--fv-g-heading);

}

.fv-guarantee-button.light:hover {

    border-color: var(--fv-g-green);
    background: #5f9e20;
    color: var(--fv-g-green-dark);

}

.fv-guarantee-button i {

    font-size: 12px;

    transition: transform 0.3s ease;

}

.fv-guarantee-button:hover i {

    transform: translateX(3px);

}


/* =========================================================
   BREADCRUMB
   Reuses existing breadcrumb background
   ========================================================= */

.fv-guarantee-breadcrumb {

    position: relative;

    min-height: 280px;
    padding: 75px 0 65px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(5, 28, 43, 0.76),
            rgba(5, 28, 43, 0.76)
        ),
        url("../img/breadcrumb.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}

.fv-guarantee-breadcrumb::before {

    position: absolute;
    top: -100px;
    right: -100px;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(83, 183, 3, 0.25);
    border-radius: 50%;

    content: "";

}

.fv-guarantee-breadcrumb::after {

    position: absolute;
    bottom: -180px;
    left: -120px;

    width: 400px;
    height: 400px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    content: "";

}

.fv-guarantee-breadcrumb .container {

    position: relative;
    z-index: 2;

}

.fv-guarantee-breadcrumb-content {

    position: relative;
    z-index: 2;

    text-align: center;

}

.fv-guarantee-breadcrumb-eyebrow {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

}

.fv-guarantee-breadcrumb-eyebrow span {

    display: inline-block;

    width: 30px;
    height: 2px;

    background: var(--fv-g-green);

}

.fv-guarantee-breadcrumb h1 {

    margin: 0 0 20px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;

}

.fv-guarantee-breadcrumb h1 span {

    color: var(--fv-g-green);

}

.fv-guarantee-breadcrumb-links {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;

}

.fv-guarantee-breadcrumb-links a {

    color: #ffffff;
    text-decoration: none;

    transition: color 0.3s ease;

}

.fv-guarantee-breadcrumb-links a:hover {

    color: var(--fv-g-green);

}

.fv-guarantee-breadcrumb-links i {

    color: var(--fv-g-green);
    font-size: 9px;

}


/* =========================================================
   HERO
   ========================================================= */

.fv-guarantee-hero {

    position: relative;

    padding: 30px 0 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(83, 183, 3, 0.09),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fcf5 100%
        );

}

.fv-guarantee-hero-decoration {

    position: absolute;

    border: 1px solid rgba(83, 183, 3, 0.10);
    border-radius: 50%;

    pointer-events: none;

}

.fv-guarantee-decoration-one {

    top: -180px;
    right: -130px;

    width: 520px;
    height: 520px;

}

.fv-guarantee-decoration-two {

    right: -180px;
    bottom: -280px;

    width: 550px;
    height: 550px;

    border-color: rgba(83, 183, 3, 0.07);

}

.fv-guarantee-hero .container {

    position: relative;
    z-index: 2;

}

.fv-guarantee-hero-content {

    position: relative;
    z-index: 2;

    max-width: 650px;

}

.fv-guarantee-hero-content .fv-guarantee-eyebrow {

    display: inline-flex;

    padding: 8px 14px;

    border: 1px solid #dcebd7;
    border-radius: 30px;

    background: var(--fv-g-green-light);

    font-size: 11px;
    letter-spacing: 1.5px;

}

.fv-guarantee-hero-content h2 {

    margin: 23px 0 20px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 1.12;

}

.fv-guarantee-hero-content h2 span {

    display: block;
    color: var(--fv-g-green);

}

.fv-guarantee-hero-description {

    max-width: 600px;
    margin: 0 0 28px;

    color: black;

    font-size: 16px;
    line-height: 1.4;

}

.fv-guarantee-hero-actions {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 22px;

}

.fv-guarantee-hero-note {

    display: flex;
    align-items: flex-start;
    gap: 8px;

    max-width: 590px;

    color: #000;

    font-size: 15px;
    line-height: 1.5;

}

.fv-guarantee-hero-note i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--fv-g-green);

}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.fv-guarantee-hero-visual {

    position: relative;
    z-index: 2;

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

    min-height: 470px;

}

.fv-guarantee-visual-glow {

    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(83, 183, 3, 0.17) 0%,
            rgba(83, 183, 3, 0.05) 48%,
            transparent 70%
        );

    animation: fvGuaranteePulse 4s ease-in-out infinite;

}

.fv-guarantee-shield-card {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 335px;

    padding: 40px;

    border: 1px solid #dcebd7;
    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(23, 53, 31, 0.12);

    animation: fvGuaranteeFloat 5s ease-in-out infinite;

}

.fv-guarantee-shield-icon {

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

    width: 76px;
    height: 76px;

    margin-bottom: 25px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #eef9e8,
            #dff3d3
        );

    color: var(--fv-g-green);

    font-size: 34px;

}

.fv-guarantee-card-label {

    display: block;

    margin-bottom: 14px;

    color: black;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;

}

.fv-guarantee-shield-card h3 {

    margin: 0 0 15px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;

}

.fv-guarantee-shield-card h3 span {

    display: block;
    color: var(--fv-g-green);

}

.fv-guarantee-shield-card p {

    margin: 0;

    color: black;

    font-size: 16px;
    line-height: 1.5;

}

.fv-guarantee-card-divider {

    height: 1px;

    margin: 25px 0 22px;

    background: #edf3e9;

}

.fv-guarantee-card-points {

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

}

.fv-guarantee-card-points div {

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

    color: black;

    font-size: 14px;

}

.fv-guarantee-card-points i {

    color: var(--fv-g-green);
    font-size: 14px;

}

.fv-guarantee-floating-badge {

    position: absolute;
    z-index: 3;

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

    min-width: 180px;

    padding: 14px 16px;

    border: 1px solid #e1eddd;
    border-radius: 14px;

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

    box-shadow:
        0 12px 30px rgba(23, 53, 31, 0.10);

    backdrop-filter: blur(8px);

}

.fv-guarantee-floating-badge i {

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

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border-radius: 10px;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 14px;

}

.fv-guarantee-floating-badge small {

    display: block;

    margin-bottom: 3px;

    color: black;

    font-size: 14px;
    line-height: 1.3;

}

.fv-guarantee-floating-badge strong {

    display: block;

    color: var(--fv-g-heading);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

}

.fv-guarantee-floating-badge.top {

    top: 22px;
    right: -18px;

    animation: fvGuaranteeFloat 4s ease-in-out infinite 0.8s;

}

.fv-guarantee-floating-badge.bottom {

    bottom: 18px;
    left: -70px;

    animation: fvGuaranteeFloat 4s ease-in-out infinite 1.4s;

}


/* =========================================================
   GUARANTEE STATEMENT
   ========================================================= */

.fv-guarantee-statement-section {

    padding: 35px 0 30px;

    background: #ffffff;

}

.fv-guarantee-statement-card {

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

    padding: 40px 45px;

    border: 1px solid var(--fv-g-border);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5faf2 100%
        );

    box-shadow: var(--fv-g-shadow);

}

.fv-guarantee-statement-icon {

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

    flex: 0 0 78px;

    width: 78px;
    height: 78px;

    border-radius: 22px;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 30px;

}

.fv-guarantee-statement-content {

    flex: 1;

}

.fv-guarantee-section-label {

    display: block;

    margin-bottom: 10px;

    color: var(--fv-g-green);

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;

}

.fv-guarantee-statement-content h2 {

    margin: 0 0 15px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.25;

}

.fv-guarantee-statement-content h2 span {

    color: var(--fv-g-green);

}

.fv-guarantee-statement-text {

    max-width: 900px;

    margin: 0 0 18px;

    color: black;

    font-size: 16px;
    line-height: 1.85;

}

.fv-guarantee-statement-note {

    display: flex;
    align-items: flex-start;
    gap: 8px;

    max-width: 1000px;

    padding: 12px 15px;

    border-left: 3px solid var(--fv-g-green);
    border-radius: 0 8px 8px 0;

    background: var(--fv-g-green-soft);

    color: black;

    font-size: 14px;
    line-height: 1.4;

}

.fv-guarantee-statement-note i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--fv-g-green);

}


/* =========================================================
   COVERAGE SECTION
   ========================================================= */

.fv-guarantee-coverage-section {

    background: #f8fbf6;

}

.fv-guarantee-coverage-card {

    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 305px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--fv-g-border);
    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--fv-g-shadow);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}

.fv-guarantee-coverage-card::before {

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--fv-g-green),
            #91d95a
        );

    content: "";

}

.fv-guarantee-coverage-card:hover {

    border-color: rgba(83, 183, 3, 0.35);

    box-shadow: var(--fv-g-shadow-hover);

    transform: translateY(-7px);

}

.fv-guarantee-card-top {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 23px;

}

.fv-guarantee-coverage-icon {

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

    width: 58px;
    height: 58px;

    border-radius: 15px;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 22px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}

.fv-guarantee-coverage-card:hover .fv-guarantee-coverage-icon {

    background: var(--fv-g-green);
    color: #ffffff;

    transform: translateY(-4px);

}

.fv-guarantee-card-number {

    color: #e1eed9;

    font-size: 40px;
    font-weight: 800;
    line-height: 1;

    transition: color 0.3s ease;

}

.fv-guarantee-coverage-card:hover .fv-guarantee-card-number {

    color: #d6ebcb;

}

.fv-guarantee-coverage-card h3 {

    margin: 0 0 13px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;

}

.fv-guarantee-coverage-card p {

    margin: 0 0 22px;

    color: black;

    font-size: 16px;
    line-height: 1.5;

}

.fv-guarantee-card-tag {

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: auto;

    color: var(--fv-g-green-dark);

    font-size: 14px;
    font-weight: 700;

}

.fv-guarantee-card-tag i {

    font-size: 10px;

}

.fv-guarantee-disclaimer-box {

    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 35px;
    padding: 17px 20px;

    border: 1px solid #dcebd7;
    border-radius: 12px;

    background: #ffffff;

}

.fv-guarantee-disclaimer-box > i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--fv-g-green);

    font-size: 14px;

}

.fv-guarantee-disclaimer-box p {

    margin: 0;

    color: black;

    font-size: 14px;
    line-height: 1.4;

}

.fv-guarantee-disclaimer-box strong {

    color: var(--fv-g-heading);

}


/* =========================================================
   EXCLUSIONS SECTION
   ========================================================= */

.fv-guarantee-exclusions-section {

    background: #ffffff;

}

.fv-guarantee-exclusions-intro {

    padding-right: 35px;

}

.fv-guarantee-exclusions-intro h2 {

    margin: 0 0 18px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 39px;
    font-weight: 700;
    line-height: 1.2;

}

.fv-guarantee-exclusions-intro h2 span {

    display: block;
    color: var(--fv-g-green);

}

.fv-guarantee-exclusions-intro p {

    margin: 0 0 25px;

    color: black;

    font-size: 15px;
    line-height: 1.85;

}

.fv-guarantee-exclusion-note {

    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 16px 18px;

    border-left: 3px solid var(--fv-g-green);
    border-radius: 0 12px 12px 0;

    background: var(--fv-g-green-soft);

    color: black;

    font-size: 14px;
    line-height: 1.5;

}

.fv-guarantee-exclusion-note i {

    margin-top: 3px;

    color: var(--fv-g-green);

}

.fv-guarantee-exclusions-list {

    display: flex;
    flex-direction: column;
    gap: 0;

    padding: 5px 0;

}

.fv-guarantee-exclusion-item {

    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #edf3e9;

}

.fv-guarantee-exclusion-item:first-child {

    padding-top: 0;

}

.fv-guarantee-exclusion-item:last-child {

    padding-bottom: 0;
    border-bottom: none;

}

.fv-guarantee-exclusion-icon {

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

    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    border-radius: 12px;

    background: #fff5e8;
    color: #c8872c;

    font-size: 16px;

}

.fv-guarantee-exclusion-item h4 {

    margin: 0 0 7px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;

}

.fv-guarantee-exclusion-item p {

    margin: 0;

    color: black;

    font-size: 16px;
    line-height: 1.4;

}


/* =========================================================
   VERIFICATION SECTION
   ========================================================= */

.fv-guarantee-verification-section {

    background:
        linear-gradient(
            145deg,
            #f8fcf5 0%,
            #ffffff 100%
        );

}

.fv-guarantee-verification-card {

    height: 100%;
    padding: 35px;

    border: 1px solid var(--fv-g-border);
    border-radius: 20px;

    background: #ffffff;

    box-shadow: var(--fv-g-shadow);

}

.fv-guarantee-verification-card-header {

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

    margin-bottom: 30px;

}

.fv-guarantee-verification-icon {

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

    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    border-radius: 15px;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 22px;

}

.fv-guarantee-verification-card-header > div > span {

    display: block;

    margin-bottom: 5px;

    color: var(--fv-g-green);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;

}

.fv-guarantee-verification-card-header h3 {

    margin: 0;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;

}

.fv-guarantee-verification-flow {

    display: flex;
    flex-direction: column;

}

.fv-guarantee-verification-step {

    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 20px 0;

    border-bottom: 1px solid #edf3e9;

}

.fv-guarantee-verification-step:first-child {

    padding-top: 0;

}

.fv-guarantee-verification-step:last-child {

    padding-bottom: 0;
    border-bottom: none;

}

.fv-guarantee-verification-number {

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

    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    border-radius: 10px;

    background: var(--fv-g-green);
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

}

.fv-guarantee-verification-step h4 {

    margin: 0 0 6px;

    color: var(--fv-g-heading);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

}

.fv-guarantee-verification-step p {

    margin: 0;

    color: black;

    font-size: 14px;
    line-height: 1.4;

}

.fv-guarantee-measurement-card {

    position: relative;

    height: 100%;
    padding: 35px;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #17351f 0%,
            #254e2c 100%
        );

    box-shadow:
        0 18px 45px rgba(23, 53, 31, 0.15);

}

.fv-guarantee-measurement-card::after {

    position: absolute;
    right: -120px;
    bottom: -150px;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    content: "";

}

.fv-guarantee-measurement-label {

    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 15px;

    color: #91d95a;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

}

.fv-guarantee-measurement-card h3 {

    position: relative;
    z-index: 2;

    margin: 0 0 28px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.3;

}

.fv-guarantee-measurement-card h3 span {

    display: block;
    color: #91d95a;

}

.fv-guarantee-measurement-list {

    position: relative;
    z-index: 2;

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

}

.fv-guarantee-measurement-list > div {

    display: flex;
    align-items: flex-start;
    gap: 12px;

}

.fv-guarantee-measurement-list > div > i {

    flex: 0 0 auto;

    margin-top: 4px;

    color: #91d95a;

    font-size: 14px;

}

.fv-guarantee-measurement-list span {

    display: block;

    color: white;

    font-size: 14px;
    line-height: 1.4;

}

.fv-guarantee-measurement-list strong {

    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

}

.fv-guarantee-measurement-footer {

    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 30px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 13px;
    line-height: 1.6;

}

.fv-guarantee-measurement-footer i {

    margin-top: 3px;

    color: #91d95a;

}


/* =========================================================
   CLAIM PROCESS
   ========================================================= */

.fv-guarantee-claim-section {

    background: #ffffff;

}

.fv-guarantee-claim-timeline {

    position: relative;

    max-width: 900px;
    margin: 0 auto;

}

.fv-guarantee-claim-timeline::before {

    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 25px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            #cce7bc,
            #e9f4e3
        );

    content: "";

}

.fv-guarantee-claim-step {

    position: relative;
    z-index: 1;

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

    padding-bottom: 35px;

}

.fv-guarantee-claim-step:last-child {

    padding-bottom: 0;

}

.fv-guarantee-claim-marker {

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

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border: 5px solid #f8fbf6;
    border-radius: 50%;

    background: var(--fv-g-green);

    box-shadow:
        0 0 0 1px #cce7bc;

}

.fv-guarantee-claim-marker span {

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

}

.fv-guarantee-claim-content {

    flex: 1;

    padding: 25px 28px;

    border: 1px solid var(--fv-g-border);
    border-radius: 16px;

    background: #ffffff;

    box-shadow: var(--fv-g-shadow);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}

.fv-guarantee-claim-content:hover {

    border-color: rgba(83, 183, 3, 0.30);

    box-shadow: var(--fv-g-shadow-hover);

    transform: translateX(5px);

}

.fv-guarantee-claim-top {

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

    margin-bottom: 11px;

}

.fv-guarantee-claim-phase {

    color: var(--fv-g-green);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.3px;

}

.fv-guarantee-claim-time {

    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: black;

    font-size: 10px;

}

.fv-guarantee-claim-time i {

    color: var(--fv-g-green);

}

.fv-guarantee-claim-content h3 {

    margin: 0 0 10px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;

}

.fv-guarantee-claim-content p {

    margin: 0 0 17px;

    color: black;

    font-size: 16px;
    line-height: 1.5;

}

.fv-guarantee-claim-tags {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;

}

.fv-guarantee-claim-tags span {

    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--fv-g-green-dark);

    font-size: 14px;
    font-weight: 700;

}

.fv-guarantee-claim-tags i {

    font-size: 14px;

}

.fv-guarantee-claim-support {

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

    margin-top: 45px;
    padding: 25px 30px;

    border: 1px solid #dcebd7;
    border-radius: 16px;

    background: var(--fv-g-green-soft);

}

.fv-guarantee-claim-support-icon {

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

    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    border-radius: 14px;

    background: #ffffff;
    color: var(--fv-g-green);

    font-size: 20px;

}

.fv-guarantee-claim-support > div:nth-child(2) {

    flex: 1;

}

.fv-guarantee-claim-support h4 {

    margin: 0 0 5px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;

}

.fv-guarantee-claim-support p {

    margin: 0;

    color: black;

    font-size: 14px;
    line-height: 1.5;

}

.fv-guarantee-claim-support .fv-guarantee-button {

    flex: 0 0 auto;

}


/* =========================================================
   DURATION SECTION
   ========================================================= */

.fv-guarantee-duration-section {

    background: #f8fbf6;

}

.fv-guarantee-duration-content {

    padding-right: 45px;

}

.fv-guarantee-duration-content h2 {

    margin: 0 0 18px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 39px;
    font-weight: 700;
    line-height: 1.2;

}

.fv-guarantee-duration-content h2 span {

    display: block;
    color: var(--fv-g-green);

}

.fv-guarantee-duration-content > p {

    margin: 0 0 27px;

    color: black;

    font-size: 16px;
    line-height: 1.5;

}

.fv-guarantee-duration-points {

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

}

.fv-guarantee-duration-points > div {

    display: flex;
    align-items: flex-start;
    gap: 11px;

}

.fv-guarantee-duration-points > div > i {

    margin-top: 4px;

    color: var(--fv-g-green);

    font-size: 14px;

}

.fv-guarantee-duration-points span {

    display: block;

    color: black;

    font-size: 14px;
    line-height: 1.4;

}

.fv-guarantee-duration-points strong {

    display: block;

    margin-bottom: 3px;

    color: var(--fv-g-heading);

    font-size: 16px;
    font-weight: 700;

}

.fv-guarantee-duration-card {

    position: relative;

    padding: 35px;

    overflow: hidden;

    border: 1px solid #dcebd7;
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f1faeb 100%
        );

    box-shadow: var(--fv-g-shadow);

}

.fv-guarantee-duration-card::before {

    position: absolute;
    top: -90px;
    right: -90px;

    width: 250px;
    height: 250px;

    border: 1px solid rgba(83, 183, 3, 0.10);
    border-radius: 50%;

    content: "";

}

.fv-guarantee-duration-card-top {

    position: relative;
    z-index: 2;

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

    margin-bottom: 25px;

}

.fv-guarantee-duration-card-top span {

    color: var(--fv-g-green);

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.4px;

}

.fv-guarantee-duration-card-top i {

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

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 17px;

}

.fv-guarantee-duration-value {

    position: relative;
    z-index: 2;

    display: flex;
    align-items: baseline;
    gap: 12px;

    margin-bottom: 12px;

}

.fv-guarantee-duration-value strong {

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 68px;
    font-weight: 700;
    line-height: 1;

}

.fv-guarantee-duration-value span {

    color: var(--fv-g-green);

    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;

}

.fv-guarantee-duration-card > p {

    position: relative;
    z-index: 2;

    margin: 0;

    color: black;

    font-size: 14px;
    line-height: 1.5;

}

.fv-guarantee-duration-divider {

    height: 1px;

    margin: 27px 0 23px;

    background: #dfeedd;

}

.fv-guarantee-duration-meta {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;

}

.fv-guarantee-duration-meta > div {

    display: flex;
    align-items: flex-start;
    gap: 10px;

}

.fv-guarantee-duration-meta i {

    margin-top: 3px;

    color: var(--fv-g-green);

    font-size: 14px;

}

.fv-guarantee-duration-meta small {

    display: block;

    margin-bottom: 5px;

    color: black;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;

}

.fv-guarantee-duration-meta strong {

    display: block;

    color: var(--fv-g-heading);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

}

.fv-guarantee-duration-note {

    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 25px;
    padding-top: 18px;

    border-top: 1px solid #dfeedd;

    color: black;

    font-size: 14px;
    line-height: 1.4;

}

.fv-guarantee-duration-note i {

    margin-top: 3px;

    color: var(--fv-g-green);

}


/* =========================================================
   TERMS SECTION
   ========================================================= */

.fv-guarantee-terms-section {

    background: #ffffff;

}

.fv-guarantee-terms-card {

    height: 100%;
    padding: 30px;

    border: 1px solid var(--fv-g-border);
    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--fv-g-shadow);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}

.fv-guarantee-terms-card:hover {

    border-color: rgba(83, 183, 3, 0.30);

    box-shadow: var(--fv-g-shadow-hover);

    transform: translateY(-5px);

}

.fv-guarantee-terms-card-heading {

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

    margin-bottom: 25px;

}

.fv-guarantee-terms-icon {

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

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 14px;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 19px;

}

.fv-guarantee-terms-card-heading > div:last-child > span {

    display: block;

    margin-bottom: 3px;

    color: var(--fv-g-green);

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;

}

.fv-guarantee-terms-card h3 {

    margin: 0;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;

}

.fv-guarantee-terms-card ul {

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

    margin: 0;
    padding: 0;

    list-style: none;

}

.fv-guarantee-terms-card li {

    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: black;

    font-size: 15px;
    line-height: 1.4;

}

.fv-guarantee-terms-card li i {

    flex: 0 0 auto;

    margin-top: 4px;

    color: var(--fv-g-green);

    font-size: 11px;

}

.fv-guarantee-full-terms-box {

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

    margin-top: 35px;
    padding: 27px 30px;

    border: 1px solid #dcebd7;
    border-radius: 16px;

    background: var(--fv-g-green-soft);

}

.fv-guarantee-full-terms-icon {

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

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 14px;

    background: #ffffff;
    color: var(--fv-g-green);

    font-size: 20px;

}

.fv-guarantee-full-terms-box > div:nth-child(2) {

    flex: 1;

}

.fv-guarantee-full-terms-box h3 {

    margin: 0 0 7px;

    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;

}

.fv-guarantee-full-terms-box p {

    margin: 0;

    color: black;

    font-size: 14px;
    line-height: 1.5;

}

.fv-guarantee-full-terms-box .fv-guarantee-button {

    flex: 0 0 auto;

}


/* =========================================================
   FAQ SECTION
   ========================================================= */

.fv-guarantee-faq-section {

    background: #f8fbf6;

}

.fv-guarantee-faq-list {

    max-width: 1000px;
    margin: 0 auto;

}

.fv-guarantee-faq-item {

    margin-bottom: 13px;

    overflow: hidden;

    border: 1px solid var(--fv-g-border);
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 5px 20px rgba(23, 53, 31, 0.035);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}

.fv-guarantee-faq-item.active {

    border-color: rgba(83, 183, 3, 0.35);

    box-shadow:
        0 12px 30px rgba(23, 53, 31, 0.07);

}

.fv-guarantee-faq-question {

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

    width: 100%;

    padding: 22px 25px;

    border: none;
    outline: none;

    background: #ffffff;
    color: var(--fv-g-heading);

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;

}

.fv-guarantee-faq-question:hover {

    background: #fbfef9;

}

.fv-guarantee-faq-question i {

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

    flex: 0 0 27px;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: var(--fv-g-green-light);
    color: var(--fv-g-green);

    font-size: 10px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;

}

.fv-guarantee-faq-item.active .fv-guarantee-faq-question i {

    background: var(--fv-g-green);
    color: #ffffff;

    transform: rotate(45deg);

}

.fv-guarantee-faq-answer {

    display: grid;
    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.35s ease;

}

.fv-guarantee-faq-answer p {

    overflow: hidden;

    margin: 0;
    padding: 0 25px;

    color: black;

    font-size: 15px;
    line-height: 1.8;

    transition:
        padding 0.35s ease;

}

.fv-guarantee-faq-item.active .fv-guarantee-faq-answer {

    grid-template-rows: 1fr;

}

.fv-guarantee-faq-item.active .fv-guarantee-faq-answer p {

    padding: 0 14px 16px;

}


/* =========================================================
   FINAL CTA
   ========================================================= */

.fv-guarantee-cta-section {

    position: relative;

    padding: 70px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #17351f 0%,
            #286033 100%
        );

}

.fv-guarantee-cta-decoration {

    position: absolute;

    border: 1px solid rgba(145, 217, 90, 0.14);
    border-radius: 50%;

    pointer-events: none;

}

.fv-guarantee-cta-decoration.one {

    top: -260px;
    right: -130px;

    width: 550px;
    height: 550px;

}

.fv-guarantee-cta-decoration.two {

    bottom: -300px;
    left: -180px;

    width: 600px;
    height: 600px;

}

.fv-guarantee-cta-section .container {

    position: relative;
    z-index: 2;

}

.fv-guarantee-cta-content {

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

}

.fv-guarantee-cta-icon {

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

    flex: 0 0 65px;

    width: 65px;
    height: 65px;

    border: 1px solid rgba(145, 217, 90, 0.35);
    border-radius: 18px;

    background: rgba(145, 217, 90, 0.12);
    color: #91d95a;

    font-size: 27px;

}

.fv-guarantee-cta-text {

    flex: 1;

}

.fv-guarantee-cta-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: #91d95a;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

}

.fv-guarantee-cta-text h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;

}

.fv-guarantee-cta-text h2 span {

    color: #91d95a;

}

.fv-guarantee-cta-text p {

    max-width: 600px;

    margin: 0;

    color: white;

    font-size: 15px;
    line-height: 1.5;

}

.fv-guarantee-cta-actions {

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    flex: 0 0 auto;

}

.fv-guarantee-cta-section .fv-guarantee-button {

    border-color: #53b703;
    background: #53b703;
    color: #ffffff;

}

.fv-guarantee-cta-section .fv-guarantee-button:hover {

    border-color: #91d95a;
    background: #91d95a;
    color: #17351f;

}

.fv-guarantee-cta-section .fv-guarantee-button.light {

    border-color: rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #ffffff;

}

.fv-guarantee-cta-section .fv-guarantee-button.light:hover {

    border-color: #91d95a;
    background: rgba(145, 217, 90, 0.12);
    color: #ffffff;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fvGuaranteeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}

@keyframes fvGuaranteePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .fv-guarantee-hero-content h2 {
        font-size: 47px;
    }

    .fv-guarantee-floating-badge.top {
        right: -5px;
    }

    .fv-guarantee-floating-badge.bottom {
        left: -5px;
    }

    .fv-guarantee-exclusions-intro {
        padding-right: 15px;
    }

    .fv-guarantee-duration-content {
        padding-right: 15px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 991.98px) {

    .fv-guarantee-breadcrumb {
        min-height: 240px;
        padding: 60px 0 55px;
    }

    .fv-guarantee-breadcrumb h1 {
        font-size: 40px;
    }

    .fv-guarantee-hero {
        padding: 75px 0 70px;
    }

    .fv-guarantee-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .fv-guarantee-hero-content .fv-guarantee-eyebrow {
        justify-content: center;
    }

    .fv-guarantee-hero-content h2 {
        font-size: 47px;
    }

    .fv-guarantee-hero-description {
        max-width: 650px;
        margin-right: auto;
        margin-left: auto;
    }

    .fv-guarantee-hero-actions {
        justify-content: center;
    }

    .fv-guarantee-hero-note {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .fv-guarantee-hero-visual {
        min-height: 450px;
        margin-top: 35px;
    }

    .fv-guarantee-statement-card {
        align-items: flex-start;
    }

    .fv-guarantee-exclusions-intro {
        padding-right: 0;
        margin-bottom: 45px;
        text-align: center;
    }

    .fv-guarantee-exclusions-intro .fv-guarantee-eyebrow {
        justify-content: center;
    }

    .fv-guarantee-exclusions-intro h2 {
        font-size: 36px;
    }

    .fv-guarantee-exclusion-note {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
    }

    .fv-guarantee-duration-content {
        padding-right: 0;
        margin-bottom: 45px;
        text-align: center;
    }

    .fv-guarantee-duration-content .fv-guarantee-eyebrow {
        justify-content: center;
    }

    .fv-guarantee-duration-points {
        max-width: 520px;
        margin: 0 auto;
        text-align: left;
    }

    .fv-guarantee-cta-content {
        flex-wrap: wrap;
    }

    .fv-guarantee-cta-text {
        flex: 1 1 calc(100% - 100px);
    }

    .fv-guarantee-cta-actions {
        width: 100%;
        padding-left: 90px;
    }

}


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

@media (max-width: 767.98px) {

    .fv-guarantee-section {
        padding: 65px 0;
    }

    .fv-guarantee-section-heading {
        margin-bottom: 35px;
    }

    .fv-guarantee-section-heading h2 {
        font-size: 32px;
    }

    .fv-guarantee-section-heading p {
        font-size: 14px;
        line-height: 1.75;
    }

    .fv-guarantee-breadcrumb {
        min-height: 210px;
        padding: 50px 0 45px;
    }

    .fv-guarantee-breadcrumb h1 {
        font-size: 34px;
    }

    .fv-guarantee-breadcrumb-eyebrow {
        font-size: 10px;
    }

    .fv-guarantee-breadcrumb-links {
        font-size: 11px;
    }

    .fv-guarantee-hero {
        padding: 60px 0 55px;
    }

    .fv-guarantee-hero-content h2 {
        font-size: 38px;
        line-height: 1.15;
    }

    .fv-guarantee-hero-description {
        font-size: 14px;
        line-height: 1.75;
    }

    .fv-guarantee-hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .fv-guarantee-hero-actions .fv-guarantee-button {
        width: 100%;
        max-width: 290px;
    }

    .fv-guarantee-hero-note {
        font-size: 10px;
    }

    .fv-guarantee-hero-visual {
        min-height: 400px;
        margin-top: 25px;
    }

    .fv-guarantee-visual-glow {
        width: 300px;
        height: 300px;
    }

    .fv-guarantee-shield-card {
        max-width: 310px;
        padding: 27px;
    }

    .fv-guarantee-shield-icon {
        width: 65px;
        height: 65px;
        font-size: 28px;
    }

    .fv-guarantee-shield-card h3 {
        font-size: 23px;
    }

    .fv-guarantee-floating-badge {
        min-width: 150px;
        padding: 11px 12px;
    }

    .fv-guarantee-floating-badge.top {
        top: 8px;
        right: -5px;
    }

    .fv-guarantee-floating-badge.bottom {
        bottom: 5px;
        left: -5px;
    }

    .fv-guarantee-floating-badge strong {
        font-size: 10px;
    }

    .fv-guarantee-statement-section {
        padding-top: 25px;
    }

    .fv-guarantee-statement-card {
        flex-direction: column;
        gap: 22px;
        padding: 28px 24px;
    }

    .fv-guarantee-statement-icon {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
        font-size: 25px;
    }

    .fv-guarantee-statement-content h2 {
        font-size: 26px;
    }

    .fv-guarantee-statement-text {
        font-size: 14px;
    }

    .fv-guarantee-coverage-card {
        min-height: auto;
        padding: 25px;
    }

    .fv-guarantee-disclaimer-box {
        padding: 15px;
    }

    .fv-guarantee-exclusions-intro h2 {
        font-size: 31px;
    }

    .fv-guarantee-exclusions-intro p {
        font-size: 14px;
    }

    .fv-guarantee-exclusion-item {
        gap: 13px;
        padding: 18px 0;
    }

    .fv-guarantee-exclusion-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .fv-guarantee-exclusion-item h4 {
        font-size: 14px;
    }

    .fv-guarantee-exclusion-item p {
        font-size: 11px;
    }

    .fv-guarantee-verification-card {
        padding: 25px;
    }

    .fv-guarantee-verification-card-header h3 {
        font-size: 19px;
    }

    .fv-guarantee-measurement-card {
        padding: 28px 25px;
    }

    .fv-guarantee-measurement-card h3 {
        font-size: 24px;
    }

    .fv-guarantee-claim-timeline::before {
        left: 20px;
    }

    .fv-guarantee-claim-step {
        gap: 15px;
        padding-bottom: 25px;
    }

    .fv-guarantee-claim-marker {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-width: 4px;
    }

    .fv-guarantee-claim-marker span {
        font-size: 9px;
    }

    .fv-guarantee-claim-content {
        padding: 20px;
    }

    .fv-guarantee-claim-content h3 {
        font-size: 17px;
    }

    .fv-guarantee-claim-content p {
        font-size: 12px;
    }

    .fv-guarantee-claim-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .fv-guarantee-claim-support {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 22px;
    }

    .fv-guarantee-claim-support > div:nth-child(2) {
        flex: 1 1 calc(100% - 70px);
    }

    .fv-guarantee-claim-support .fv-guarantee-button {
        width: 100%;
        margin-top: 5px;
    }

    .fv-guarantee-duration-content h2 {
        font-size: 31px;
    }

    .fv-guarantee-duration-content > p {
        font-size: 14px;
    }

    .fv-guarantee-duration-card {
        padding: 27px;
    }

    .fv-guarantee-duration-value strong {
        font-size: 55px;
    }

    .fv-guarantee-duration-value span {
        font-size: 18px;
    }

    .fv-guarantee-duration-meta {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .fv-guarantee-terms-card {
        padding: 25px;
    }

    .fv-guarantee-full-terms-box {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 23px;
    }

    .fv-guarantee-full-terms-box > div:nth-child(2) {
        flex: 1 1 calc(100% - 75px);
    }

    .fv-guarantee-full-terms-box .fv-guarantee-button {
        width: 100%;
        margin-top: 5px;
    }

    .fv-guarantee-faq-question {
        padding: 18px 18px;
        font-size: 14px;
    }

    .fv-guarantee-faq-answer p {
        padding-right: 18px;
        padding-left: 18px;
        font-size: 12px;
    }

    .fv-guarantee-faq-item.active .fv-guarantee-faq-answer p {
        padding-right: 18px;
        padding-left: 18px;
        padding-bottom: 20px;
    }

    .fv-guarantee-cta-section {
        padding: 55px 0;
    }

    .fv-guarantee-cta-content {
        align-items: flex-start;
        gap: 18px;
    }

    .fv-guarantee-cta-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .fv-guarantee-cta-text {
        flex: 1 1 calc(100% - 70px);
    }

    .fv-guarantee-cta-text h2 {
        font-size: 25px;
    }

    .fv-guarantee-cta-text p {
        font-size: 12px;
    }

    .fv-guarantee-cta-actions {
        width: 100%;
        padding-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .fv-guarantee-cta-actions .fv-guarantee-button {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .fv-guarantee-section {
        padding: 55px 0;
    }

    .fv-guarantee-section-heading h2 {
        font-size: 28px;
    }

    .fv-guarantee-breadcrumb h1 {
        font-size: 29px;
    }

    .fv-guarantee-hero-content h2 {
        font-size: 32px;
    }

    .fv-guarantee-hero-visual {
        min-height: 365px;
    }

    .fv-guarantee-shield-card {
        max-width: 275px;
        padding: 23px;
    }

    .fv-guarantee-shield-card h3 {
        font-size: 21px;
    }

    .fv-guarantee-shield-card p {
        font-size: 12px;
    }

    .fv-guarantee-floating-badge {
        min-width: 135px;
        padding: 9px 10px;
        gap: 8px;
    }

    .fv-guarantee-floating-badge i {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .fv-guarantee-floating-badge small {
        font-size: 8px;
    }

    .fv-guarantee-floating-badge strong {
        font-size: 9px;
    }

    .fv-guarantee-floating-badge.top {
        right: -10px;
    }

    .fv-guarantee-floating-badge.bottom {
        left: -10px;
    }

    .fv-guarantee-statement-content h2 {
        font-size: 23px;
    }

    .fv-guarantee-exclusions-intro h2 {
        font-size: 28px;
    }

    .fv-guarantee-verification-card-header {
        align-items: flex-start;
        gap: 12px;
    }

    .fv-guarantee-verification-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .fv-guarantee-verification-card-header h3 {
        font-size: 17px;
    }

    .fv-guarantee-claim-marker {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .fv-guarantee-claim-timeline::before {
        left: 18px;
    }

    .fv-guarantee-claim-content {
        padding: 17px;
    }

    .fv-guarantee-duration-value strong {
        font-size: 48px;
    }

    .fv-guarantee-duration-value span {
        font-size: 16px;
    }

    .fv-guarantee-cta-text h2 {
        font-size: 22px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-guarantee-shield-card,
    .fv-guarantee-floating-badge,
    .fv-guarantee-visual-glow {

        animation: none !important;

    }

    .fv-guarantee-button,
    .fv-guarantee-coverage-card,
    .fv-guarantee-claim-content,
    .fv-guarantee-terms-card {

        transition: none !important;

    }

}

/* ===== Refer & Earn Page ===== */
.fv-refer-blocks-section {
    padding: 50px 0;
}

.fv-refer-block {
    border-radius: 14px;
    padding: 32px;
    height: 100%;
    box-sizing: border-box;
}

.fv-refer-block-bonus {
    background: #eaf7ee;
    border: 1px solid #cbead4;
}

.fv-refer-block-karma {
    background: #fff7e6;
    border: 1px solid #ffe4b3;
}

.fv-refer-block-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.fv-refer-block-bonus .fv-refer-block-icon {
    background: #28a745;
    color: #fff;
}

.fv-refer-block-karma .fv-refer-block-icon {
    background: #f0a500;
    color: #fff;
}

.fv-refer-block h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.fv-refer-block p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

.fv-refer-block-emphasis {
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    margin: 14px 0;
}

.fv-refer-block-emphasis i {
    margin-right: 8px;
    color: #28a745;
}

.fv-refer-block-closing {
    font-style: italic;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
}

/* Referral form */
.fv-refer-form-section {
    padding: 20px 0 60px;
}

.fv-refer-form-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 40px;
    max-width: 720px;
    margin: 0 auto;
}

.fv-refer-form-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

.fv-refer-form-subhead {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #28a745;
    margin: 28px 0 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.fv-refer-form-card label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.fv-refer-form-card input[type="text"],
.fv-refer-form-card input[type="email"],
.fv-refer-form-card input[type="number"],
.fv-refer-form-card input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.fv-refer-form-card input:focus {
    outline: none;
    border-color: #28a745;
}

.fv-refer-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.fv-refer-input-wrapper .fv-country-code {
    padding: 12px 12px;
    background: #f5f5f5;
    font-size: 14px;
    color: #555;
    border-right: 1px solid #ddd;
}

.fv-refer-input-wrapper input {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.fv-referral-block {
    margin-bottom: 8px;
}

.fv-referral-mobile-error {
    color: #dc3545;
    font-size: 12px;
    min-height: 16px;
}

.fv-referral-bonus-hint {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.fv-referral-bonus-hint.fv-bonus-hint-active {
    color: #28a745;
    font-weight: 600;
}

.fv-referral-remove {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 14px;
    margin-top: 8px;
    cursor: pointer;
}

.fv-referral-divider {
    margin: 20px 0;
    border-color: #eee;
}

.fv-refer-add-link {
    background: none;
    border: none;
    color: #28a745;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin: 6px 0 10px;
}

.fv-refer-add-link:hover {
    text-decoration: underline;
}

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

.fv-cause-option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 0;
}

.fv-cause-option:has(input:checked) {
    border-color: #28a745;
    background: #eaf7ee;
}

.fv-refer-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    margin: 22px 0;
    cursor: pointer;
}

.fv-refer-consent input {
    margin-top: 3px;
}

.fv-refer-submit-btn {
    width: 100%;
    background: #28a745;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.fv-refer-submit-btn:hover {
    background: #1e7a35;
}

.fv-refer-payout-note {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 14px;
    margin-bottom: 0;
}

.fv-refer-success {
    text-align: center;
    padding: 30px 0;
}

.fv-refer-success h2 {
    font-size: 24px;
    margin-bottom: 10px;
}



/* =========================================================
   HOME HERO COUNTDOWN
   SAME VISUAL STYLE AS SUBSIDY PAGE
   POSITION IS NOT CHANGED
========================================================= */

.fv-hero .fv-countdown {

    /* ONLY VISUAL STYLING */
    width: 320px;
    max-width: calc(100% - 30px);

    padding: 15px 20px;

    border-radius: 18px;

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

        border: 1px solid var(--fv-border);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.15);

    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.fv-hero .fv-countdown-label {

    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


/* =========================================================
   TIMER
========================================================= */

.fv-hero .fv-countdown-timer {

    display: flex;

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

    gap: 6px;

    width: 100%;
}


/* =========================================================
   TIME BOX
========================================================= */

.fv-hero .fv-time-box {

    display: flex;

    flex-direction: column;

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

    width: 54px;
    min-width: 54px;

    height: 58px;

    padding: 5px;

    border-radius: 10px;

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

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-sizing: border-box;
}


/* =========================================================
   NUMBER
========================================================= */

.fv-hero .fv-time-box span {

    display: block;

    color: #ffffff;

    font-size: 21px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   LABEL
========================================================= */

.fv-hero .fv-time-box small {

    display: block;

    margin-top: 6px;

    color: rgba(255, 255, 255, 0.80);

    font-size: 9px;
    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;
}


/* =========================================================
   SEPARATOR
========================================================= */

.fv-hero .fv-time-separator {

    display: inline-flex;

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

    height: 58px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 18px;
    font-weight: 700;

    line-height: 1;
}

        .fv-referral-emphasis-line {
    background: #f5f9f6;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 16px;
    margin: 14px 0;
}

.fv-referral-emphasis-line i {
    color: #28a745;
    margin-right: 8px;
}

.fv-referral-closing-line {
    font-style: italic;
    font-size: 14px;
    margin-top: 10px;
}

.fv-referral-entry-divider {
    margin: 20px 0;
    border-color: #eee;
}

.fv-referral-remove-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 14px;
    margin-top: 6px;
    cursor: pointer;
}

.fv-referral-add-link {
    background: none;
    border: none;
    color: #28a745;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin: 4px 0 18px;
}

.fv-referral-add-link:hover {
    text-decoration: underline;
}

.fv-referral-bonus-hint {
    display: block;
    font-size: 14px;
    color: #888;
    margin-top: 4px;
}

.fv-referral-bonus-hint.fv-bonus-hint-active {
    color: #28a745;
    font-weight: 600;
}

.fv-referral-cause-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.fv-referral-cause-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.fv-referral-cause-card:has(input:checked) {
    border-color: #28a745;
    background: #eaf7ee;
}

.fv-referral-cause-card input {
    margin-top: 4px;
}

.fv-cause-card-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #28a745;
    font-size: 14px;
}

.fv-referral-cause-card:has(input:checked) .fv-cause-card-icon {
    background: #28a745;
    color: #fff;
}

.fv-cause-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fv-cause-card-body strong {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fv-cause-card-body small {
    font-size: 12.5px;
    color: #777;
    line-height: 1.4;
}

.fv-cause-recommended-tag {
    background: #28a745;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.fv-cause-card-default {
    border-color: #28a745;
}

.fv-referral-consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    margin: 20px 0;
    cursor: pointer;
}

.fv-referral-consent-checkbox input {
    margin-top: 3px;
}

.fv-referral-payout-note {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 14px;
}

.fv-referral-stat-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    position: relative;
    z-index: 2;
}

.fv-referral-stat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #28a745;
    margin-bottom: 22px;
}

.fv-referral-stat-card-header i {
    font-size: 16px;
}

.fv-referral-stat-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.fv-referral-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fv-referral-stat-label {
    font-size: 16px;
    color: black;
    margin-bottom: 6px;
}

.fv-referral-stat-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
}

.fv-referral-stat-value small {
    font-size: 15px;
    font-weight: 600;
}

.fv-referral-stat-primary {
    color: #1a3d1f;
}

.fv-referral-stat-secondary {
    color: #f0a500;
}

.fv-referral-stat-note {
    font-size: 14px;
    color: black;
    margin-top: 4px;
}

.fv-referral-stat-divider {
    width: 1px;
    background: #eee;
}

.fv-referral-stat-example {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #e5e5e5;
    font-size: 16px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fv-referral-stat-example i {
    color: #28a745;
}

.fv-referral-stat-example strong {
    color: #1a3d1f;
}

/* Reuse existing floating card positions but ensure they sit above stat card cleanly */
.fv-referral-hero-visual {
    position: relative;
    padding: 20px;
}

.fv-referral-visual-card-top {
    top: -20px;
    left: -10px;
}

.fv-referral-visual-card-bottom {
    bottom: -20px;
    right: -10px;
}

.fv-referral-impact-counter-section {
    padding: 20px 0 20px;
}

.fv-referral-impact-counter-card {
    background: linear-gradient(135deg, #1a3d1f, #28a745);
    border-radius: 18px;
    padding: 40px;
    text-align: center;
    color: #fff; 
}

.fv-referral-impact-counter-header {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    /*opacity: 0.85;*/
    margin-bottom: 20px;
}

.fv-referral-impact-counter-header i {
    margin-right: 8px;
}

.fv-referral-impact-counter-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.fv-referral-impact-counter-item strong {
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}

.fv-referral-impact-counter-item span {
    font-size: 15px;
   font-weight:bold;
    
}

.fv-referral-impact-counter-divider {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,0.3);
}

.fv-referral-impact-counter-note {
    max-width: 1500px;
    margin: 0 auto 14px;
    font-size: 15px;
    line-height: 1.6;
 
}

.fv-referral-impact-counter-closing {
    font-style: italic;
    font-size: 16px;
    margin-bottom: 0;
}

.fv-referral-cause-item-featured {
    border: 1px solid #28a745;
    background: #f5faf6;
    border-radius: 10px;
    padding: 12px;
}

@media (max-width: 575px) {
    .fv-referral-impact-counter-row {
        gap: 24px;
    }
    .fv-referral-impact-counter-divider {
        display: none;
    }
}

@media (max-width: 767px) {

    .fv-referral-hero-visual {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
        overflow: visible;
    }

    .fv-referral-stat-card {
        padding: 24px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .fv-referral-stat-row {
        flex-direction: column;
        gap: 16px;
    }

    .fv-referral-stat-divider {
        width: 100%;
        height: 1px;
    }

    .fv-referral-stat-example {
        flex-wrap: wrap;
    }

    /* Kill absolute positioning entirely on mobile — stack instead */
    .fv-referral-visual-card-top,
    .fv-referral-visual-card-bottom {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Stack the two small cards as a row, wrapping if needed */
    .fv-referral-visual-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
    }

    .fv-referral-visual-card small {
        display: block;
        font-size: 10px;
        line-height: 1.3;
    }

    .fv-referral-visual-card strong {
        display: block;
        font-size: 14px;
        line-height: 1.3;
    }

    /* Remove decorative dots on mobile — pure noise at this width */
    .fv-referral-floating-dot {
        display: none;
    }

}
.fv-cause-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.fv-cause-radio input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #55B907;
    cursor: pointer;
}

.fv-cause-radio .fv-cause-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin: 0;
}
.fv-subsidy-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.fv-subsidy-faq-item.active .fv-subsidy-faq-answer {
    max-height: 500px;
}

.fv-subsidy-faq-question {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fv-subsidy-faq-question i {
    transition: transform 0.3s ease;
}

.fv-subsidy-faq-item.active .fv-subsidy-faq-question i {
    transform: rotate(180deg);
}

.fv-subsidy-faq-answer p {
    margin-bottom: 0;
    line-height: 1.7;
}
.fv-referral-stat-plus {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
    font-weight: 700;
    color: #000;

    flex: 0 0 auto;
    width: 50px;
}
/* =========================================================
   FUTUREVOLT PROCESS - ZIG ZAG CONNECTOR
========================================================= */

.residential-process-section {
    position: relative;
    padding: 75px 0 100px;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcf6 100%
    );
}

/* =========================================================
   HEADING
========================================================= */

.residential-process-section .section-title {
    position: relative;
    z-index: 5;
}

.residential-process-section .section-title h1 {
    color: #173b20;
    font-weight: 800;
}

.residential-process-section .section-title h1 span {
    color: #55B907;
}

.residential-section-description {
    max-width: 700px;
    margin: 0 auto;
    color: #68756d;
    line-height: 1.7;
}


/* =========================================================
   PROCESS ROW
========================================================= */

.residential-process-section .row {
    position: relative;

    margin-top: 85px;

    min-height: 400px;

    align-items: flex-start;

    z-index: 2;
}


/* =========================================================
   PROCESS COLUMNS
========================================================= */

.residential-process-section
.row > [class*="col-"] {
    position: relative;
}


/* =========================================================
   ZIG-ZAG CARD POSITIONS

   01  LOWER
   02  HIGHER
   03  LOWER
   04  HIGHER
========================================================= */

.residential-process-section
.row > [class*="col-"]:nth-child(1) {
    padding-top: 125px;
}

.residential-process-section
.row > [class*="col-"]:nth-child(2) {
    padding-top: 10px;
}

.residential-process-section
.row > [class*="col-"]:nth-child(3) {
    padding-top: 105px;
}

.residential-process-section
.row > [class*="col-"]:nth-child(4) {
    padding-top: 0;
}


/* =========================================================
   PROCESS CARD
========================================================= */

.residential-process-card {
    position: relative;

    background: #ffffff;

    border: 1px solid rgba(85, 185, 7, 0.14);

    border-radius: 18px;

    padding: 68px 24px 25px;

    min-height: 235px;

    box-shadow:
        0 12px 35px rgba(35, 75, 40, 0.10);

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;

    z-index: 5;
}


/* =========================================================
   CARD HOVER
========================================================= */

.residential-process-card:hover {
    transform: translateY(-10px) !important;

    border-color: rgba(85, 185, 7, 0.4);

    box-shadow:
        0 22px 45px rgba(50, 110, 35, 0.16),
        0 0 0 5px rgba(85, 185, 7, 0.04);
}


/* =========================================================
   CARD TOP LINE
========================================================= */

.residential-process-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #55B907,
        transparent
    );

    border-radius: 0 0 10px 10px;
}


/* =========================================================
   ICON
========================================================= */

.residential-process-icon {
    position: absolute;

    top: -32px;
    left: 25px;

    width: 68px;
    height: 68px;

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

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #6bd51b 0%,
        #55B907 50%,
        #328504 100%
    );

    color: #ffffff;

    font-size: 24px;

    border: 5px solid #ffffff;

    box-shadow:
        0 8px 22px rgba(85,185,7,0.32),
        0 0 0 7px rgba(85,185,7,0.08);

    z-index: 10;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.residential-process-card:hover
.residential-process-icon {
    transform: scale(1.12) rotate(-8deg);

    box-shadow:
        0 12px 28px rgba(85,185,7,0.42),
        0 0 0 10px rgba(85,185,7,0.10);
}


/* =========================================================
   STEP NUMBER
========================================================= */

.residential-process-number {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #eff9e9;

    color: #398d08;

    font-size: 14px;
    font-weight: 800;

    border: 1px solid rgba(85,185,7,0.15);

    transition: all 0.35s ease;
}

.residential-process-card:hover
.residential-process-number {
    background: #55B907;
    color: #ffffff;

    transform: scale(1.1);
}


/* =========================================================
   CARD TEXT
========================================================= */

.residential-process-card h4 {
    margin: 5px 0 12px;

    color: #173b20;

    font-size: 19px;
    font-weight: 750;

    line-height: 1.35;
}

.residential-process-card p {
    margin: 0;

    color: #68766d;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CONNECTOR LINES
========================================================= */

/*
   01 → 02
   02 → 03
   03 → 04
*/

.residential-process-section
.row > [class*="col-"]:not(:last-child)::before {

    content: "";

    position: absolute;

    height: 2px;

    background: linear-gradient(
        90deg,
        rgba(85,185,7,0.25),
        #55B907,
        rgba(85,185,7,0.55)
    );

    transform-origin: left center;

    z-index: 1;

    opacity: 0.85;

    transition:
        height 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   01 → 02
   GOING UP
========================================================= */

.residential-process-section
.row > [class*="col-"]:nth-child(1)::before {

    width: 145px;

    right: -85px;
    top: 205px;

    transform: rotate(-30deg);
}


/* =========================================================
   02 → 03
   GOING DOWN
========================================================= */

.residential-process-section
.row > [class*="col-"]:nth-child(2)::before {

    width: 145px;

    right: -85px;
    top: 155px;

    transform: rotate(30deg);
}


/* =========================================================
   03 → 04
   GOING UP
========================================================= */

.residential-process-section
.row > [class*="col-"]:nth-child(3)::before {

    width: 145px;

    right: -85px;
    top: 195px;

    transform: rotate(-30deg);
}


/* =========================================================
   ARROW HEADS
========================================================= */

.residential-process-section
.row > [class*="col-"]:not(:last-child)::after {

    content: "\f061";

    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    position: absolute;

    color: #55B907;

    font-size: 17px;

    z-index: 4;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* 01 → 02 */

.residential-process-section
.row > [class*="col-"]:nth-child(1)::after {

    right: -82px;
    top: 165px;

    transform: rotate(-30deg);
}


/* 02 → 03 */

.residential-process-section
.row > [class*="col-"]:nth-child(2)::after {

    right: -82px;
    top: 195px;

    transform: rotate(30deg);
}


/* 03 → 04 */

.residential-process-section
.row > [class*="col-"]:nth-child(3)::after {

    right: -82px;
    top: 160px;

    transform: rotate(-30deg);
}


/* =========================================================
   CONNECTOR ANIMATION
========================================================= */

.residential-process-section
.row > [class*="col-"]:not(:last-child)::before {

    background-size: 200% 100%;

    animation: connectorFlow 2.5s linear infinite;
}

@keyframes connectorFlow {

    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}


/* Arrow pulse */

.residential-process-section
.row > [class*="col-"]:not(:last-child)::after {

    animation: arrowPulse 1.8s ease-in-out infinite;
}

@keyframes arrowPulse {

    0%,
    100% {
        opacity: 0.65;
        filter: drop-shadow(0 0 0 rgba(85,185,7,0));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(
            0 0 6px rgba(85,185,7,0.55)
        );
    }
}


/* =========================================================
   MILESTONE DOTS
========================================================= */

.residential-process-card .residential-process-number::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    left: -15px;
    bottom: 2px;

    border-radius: 50%;

    background: #55B907;

    opacity: 0.55;

    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.7);
        opacity: 0.9;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .residential-process-section .row {
        margin-top: 65px;
        min-height: auto;
    }

    .residential-process-section
    .row > [class*="col-"] {
        padding-top: 40px !important;
        margin-bottom: 65px;
    }

    /* Vertical connector */

    .residential-process-section
    .row > [class*="col-"]:not(:last-child)::before {

        width: 2px;

        height: 65px;

        left: 50%;
        right: auto;

        top: auto;
        bottom: -65px;

        transform: none;

        background: linear-gradient(
            180deg,
            #55B907,
            rgba(85,185,7,0.15)
        );

        animation: none;
    }

    .residential-process-section
    .row > [class*="col-"]:not(:last-child)::after {

        content: "\f063";

        left: 50%;
        right: auto;

        top: auto;
        bottom: -53px;

        transform: translateX(-50%);

        font-size: 16px;

        animation: mobileArrow 1.5s ease-in-out infinite;
    }

    @keyframes mobileArrow {

        0%,
        100% {
            transform: translate(-50%, 0);
        }

        50% {
            transform: translate(-50%, 5px);
        }
    }

    .residential-process-card:hover {
        transform: translateY(-8px) !important;
    }
}


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

@media (max-width: 575px) {

    .residential-process-section {
        padding: 60px 0 75px;
    }

    .residential-process-section .row {
        margin-top: 50px;
    }

    .residential-process-card {
        min-height: 220px;

        padding: 65px 20px 25px;
    }

    .residential-process-icon {
        width: 62px;
        height: 62px;

        left: 20px;

        font-size: 22px;
    }

    .residential-process-number {
        width: 39px;
        height: 39px;
    }

    .residential-process-card h4 {
        font-size: 17px;
    }

    .residential-process-card p {
        font-size: 13px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .residential-process-card,
    .residential-process-icon,
    .residential-process-number {
        transition: none;
    }

    .residential-process-section
    .row > [class*="col-"]::before,
    .residential-process-section
    .row > [class*="col-"]::after,
    .residential-process-card .residential-process-number::after {
        animation: none !important;
    }
} 
/* =========================================================
   COUNTDOWN HOVER EFFECTS
========================================================= */



/* =========================================================
   TIME BOX HOVER
========================================================= */

.fv-countdown .fv-time-box {
    position: relative;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Individual box */
.fv-countdown .fv-time-box:hover {
    transform: translateY(-7px) scale(1.04);

    background: linear-gradient(
        145deg,
        #55B907,
        #3d9205
    );

    border-color: #55B907;

    box-shadow:
        0 12px 25px rgba(85, 185, 7, 0.28),
        0 0 18px rgba(85, 185, 7, 0.16);
}


/* Number */
.fv-countdown .fv-time-box span {
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.fv-countdown .fv-time-box:hover span {
    transform: scale(1.08);
}


/* Label */
.fv-countdown .fv-time-box small {
    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;
}

.fv-countdown .fv-time-box:hover small {
    color: #ffffff;

    letter-spacing: 0.5px;
}


/* =========================================================
   SEPARATOR HOVER
========================================================= */

.fv-countdown .fv-time-separator {
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        text-shadow 0.3s ease;
}

.fv-countdown:hover .fv-time-separator {
    color: #55B907;

    text-shadow:
        0 0 8px rgba(85, 185, 7, 0.35);

    transform: scale(1.15);
}


/* =========================================================
   LABEL HOVER
========================================================= */

.fv-countdown .fv-countdown-label {
    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;
}

.fv-countdown:hover .fv-countdown-label {
    color: #ffffff;

    letter-spacing: 0.3px;
}


/* =========================================================
   SUBTLE SHINE ON TIME BOX
========================================================= */

.fv-countdown .fv-time-box {
    overflow: hidden;
}

.fv-countdown .fv-time-box::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -100%;

    width: 45%;
    height: 220%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transform: rotate(20deg);

    transition: left 0.6s ease;

    pointer-events: none;
}

.fv-countdown .fv-time-box:hover::after {
    left: 150%;
}


/* =========================================================
   GLOW ANIMATION
========================================================= */

.fv-countdown:hover {
    animation: fvCountdownGlow 2s ease-in-out infinite;
}

.fv-cause-info-icon {
    font-size: 13px;
    color: #999;
    margin-left: 6px;
    cursor: pointer;
}
.fv-cause-info-icon:hover {
    color: #25a244;
}

.tooltip.fv-cause-tooltip .tooltip-inner {
    max-width: 280px;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
}

.tooltip-inner {
    max-width: 280px;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
}
@keyframes fvCountdownGlow {

    0%,
    100% {
        box-shadow:
            0 18px 40px rgba(85, 185, 7, 0.15),
            0 0 0 1px rgba(85, 185, 7, 0.10);
    }

    50% {
        box-shadow:
            0 20px 45px rgba(85, 185, 7, 0.24),
            0 0 25px rgba(85, 185, 7, 0.10);
    }
}


/* =========================================================
   MOBILE - KEEP EFFECT SUBTLE
========================================================= */

@media (max-width: 575px) {

    .fv-countdown:hover {
        transform: translateY(-2px);
        animation: none;
    }

    .fv-countdown .fv-time-box:hover {
        transform: translateY(-4px) scale(1.02);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-countdown,
    .fv-countdown .fv-time-box,
    .fv-countdown .fv-time-box span,
    .fv-countdown .fv-time-box small,
    .fv-countdown .fv-time-separator,
    .fv-countdown .fv-countdown-label {
        transition: none !important;
    }

    .fv-countdown:hover {
        animation: none !important;
    }

    .fv-countdown .fv-time-box::after {
        display: none;
    }
}

.dropdown-item.active, .dropdown-item:active
{
    background:#53b703 !important;
}

/* =========================================================
   OUR ESTEEMED CLIENTS
========================================================= */

.fv-esteemed-clients {
    width: 100%;
    /*margin-top: 60px;*/
    padding-top: 20px;
    /*border-top: 1px solid rgba(114, 180, 44, 0.15);*/
}


/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.fv-esteemed-clients-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 35px;
}

.fv-esteemed-clients-heading h3 {
    margin: 0;
    padding: 0;

    font-size: 22px;
    line-height: 1.3;

    font-weight: 700;
    letter-spacing: 1.5px;

    color: #72B42C;

    white-space: nowrap;
}

.fv-esteemed-clients-line {
    width: 70px;
    height: 2px;

    display: block;

    background: #53b703;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   LOGO SLIDER
--------------------------------------------------------- */

.fv-client-logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.fv-client-logo-track {
    display: flex;
    align-items: center;

    width: max-content;

    animation: fvClientScrollRight 25s linear infinite;
}


/* ---------------------------------------------------------
   CLIENT LOGO
--------------------------------------------------------- */

.fv-client-logo-item {
    flex: 0 0 auto;

    width: 180px;
    height: 100px;

    margin: 0 20px;

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

    background: #ffffff;

    border-radius: 10px;

    padding: 15px;

    box-sizing: border-box;
}

.fv-client-logo-item img {
    max-width: 100%;
    max-height: 70px;

    width: auto;
    height: auto;

    object-fit: contain;

    display: block;
}


/* ---------------------------------------------------------
   RIGHT-SIDE SCROLL
--------------------------------------------------------- */

@keyframes fvClientScrollRight {

    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }

}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.fv-client-logo-track:hover {
    animation-play-state: paused;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

    .fv-esteemed-clients {
        margin-top: 45px;
        padding-top: 35px;
    }

    .fv-esteemed-clients-heading {
        gap: 12px;
        margin-bottom: 25px;
    }

    .fv-esteemed-clients-heading h3 {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .fv-esteemed-clients-line {
        width: 35px;
    }

    .fv-client-logo-item {
        width: 140px;
        height: 80px;

        margin: 0 12px;

        padding: 12px;
    }

    .fv-client-logo-item img {
        max-height: 55px;
    }

}

.refer-benefit-plus {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    font-weight: 700;
    color: #ffffff;

    flex-shrink: 0;
    margin: 0 8px;
}



.fv-subsidy-step-content h3 span {
    color: #55b907;
    font-weight: 700;
    position: relative;
}

.fv-subsidy-step-content h3 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: #55b907;
    border-radius: 10px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
} 

.fv-subsidy-step-content h3:hover span::after {
    transform: scaleX(1);
}

.commercial-comparison-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* ===== On-Grid column (2nd) ===== */
.commercial-comparison-table th:nth-child(2),
.commercial-comparison-table td:nth-child(2) {
    position: relative;
    z-index: 2;
    border-left: 2px solid rgba(76, 175, 80, 0.35);
    border-right: 2px solid rgba(76, 175, 80, 0.35);
    box-shadow: -8px 0 20px -6px rgba(76, 175, 80, 0.25),
                 8px 0 20px -6px rgba(76, 175, 80, 0.25);
}

/* ===== Hybrid column (4th) ===== */
.commercial-comparison-table th:nth-child(4),
.commercial-comparison-table td:nth-child(4) {
    position: relative;
    z-index: 2;
    border-left: 2px solid rgba(33, 150, 243, 0.35);
    border-right: 2px solid rgba(33, 150, 243, 0.35);
    box-shadow: -8px 0 20px -6px rgba(33, 150, 243, 0.25),
                 8px 0 20px -6px rgba(33, 150, 243, 0.25);
}

/* Header cell: top border + rounded top corners + stronger top shadow */
.commercial-comparison-table thead th:nth-child(2) {
    border-top: 3px solid rgba(76, 175, 80, 0.6);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: -8px -8px 20px -6px rgba(76, 175, 80, 0.25),
                 8px -8px 20px -6px rgba(76, 175, 80, 0.25);
}
.commercial-comparison-table thead th:nth-child(4) {
    border-top: 3px solid rgba(33, 150, 243, 0.6);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: -8px -8px 20px -6px rgba(33, 150, 243, 0.25),
                 8px -8px 20px -6px rgba(33, 150, 243, 0.25);
}

/* Last row cell: bottom border + rounded bottom corners + stronger bottom shadow */
.commercial-comparison-table tbody tr:last-child td:nth-child(2) {
    border-bottom: 3px solid rgba(76, 175, 80, 0.6);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: -8px 8px 20px -6px rgba(76, 175, 80, 0.25),
                 8px 8px 20px -6px rgba(76, 175, 80, 0.25);
}
.commercial-comparison-table tbody tr:last-child td:nth-child(4) {
    border-bottom: 3px solid rgba(33, 150, 243, 0.6);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: -8px 8px 20px -6px rgba(33, 150, 243, 0.25),
                 8px 8px 20px -6px rgba(33, 150, 243, 0.25);
}

/* Tint — !important guards against your existing row zebra-striping overriding it */
/*.commercial-comparison-table td:nth-child(2) {
    background-color: rgba(76, 175, 80, 0.05) !important;
}
.commercial-comparison-table td:nth-child(4) {
    background-color: rgba(33, 150, 243, 0.05) !important;
}*/

.fv-savings-grid.fv-savings-grid-2col {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
}

.fv-savings-grid.fv-savings-grid-2col .fv-savings-item {
    flex: 1 1 0;
    text-align: center;
}


    /* =========================================================
   FUTUREVOLT 3D SOLAR SYSTEM
   PREMIUM VISUAL UPGRADE
========================================================= */

.fv-solar-types-3d {
    position: relative;
    overflow: hidden;
    padding: 30px 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(114,180,44,.10),
            transparent 42%
        ),
        #ffffff;

    color: #172018;
}


/* =========================================================
   BACKGROUND
========================================================= */

.fv-solar-types-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 70%,
            rgba(114,180,44,.06),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 35%,
            rgba(114,180,44,.06),
            transparent 28%
        );

}


/* =========================================================
   HEADING
========================================================= */

.fv-solar-types-heading {

    position: relative;

    z-index: 3;

    text-align: center;

    max-width: 780px;

    margin:
        0 auto 42px;

}


.fv-solar-types-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: #72B42C;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.fv-solar-types-eyebrow span {

    width: 30px;

    height: 2px;

    background: #72B42C;

    border-radius: 10px;

}


.fv-solar-types-heading h2 {

    margin:
        15px 0 13px;

    font-size:
        clamp(38px, 5vw, 62px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.fv-solar-types-heading h2 strong {

    color: #72B42C;

}


.fv-solar-types-heading p {

    margin: 0;

    color:
        #000;

    font-size: 16px;

    line-height: 1.7;

}


/* =========================================================
   TABS
========================================================= */

.fv-solar-system-tabs {

    position: relative;

    z-index: 10;

    display: flex;

    justify-content: center;

    gap: 14px;

    margin-bottom: 38px;

}


.fv-system-tab {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 205px;

    padding: 13px 19px;

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

    border-radius: 16px;

    background:
        #53b703;

    color: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.fv-system-tab:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(114,180,44,.35);

    background:
        rgb(81 133 27);

}


.fv-system-tab.active {

    border-color:
        #72B42C;

    background:
        #53b703;

    box-shadow:
        0 0 35px rgba(114,180,44,.08);

}


.fv-tab-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(114,180,44,.12);

    color: #ffffff;

    font-size: 18px;

}


.fv-system-tab strong {

    display: block;

    margin-bottom: 2px;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .5px;

}


.fv-system-tab small {

    display: block;

    color:
        #ffffff;

    font-size: 11px;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

/* =========================================================
   MAIN 3D WRAPPER - RESPONSIVE
========================================================= */

.fv-solar-3d-wrapper {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(330px, .82fr);

    min-height: 610px;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    border:
        1px solid rgba(114,180,44,.18);

    border-radius: 28px;

    background:
        rgba(4,12,6,.72);

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

}


/* =========================================================
   3D SCENE
========================================================= */

/* =========================================================
   3D SCENE - RESPONSIVE HEIGHT
========================================================= */

.fv-solar-3d-scene {

    position: relative;

    width: 100%;

    height: 610px;

    min-height: 610px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(114,180,44,.10),
            transparent 45%
        ),
        #f7faf5;

}


.fv-solar-3d-scene canvas {

    display: block;

    width: 100% !important;

    height: 100% !important;

}


/* =========================================================
   LOADING
========================================================= */

.fv-scene-loading {

    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background:
        #071008;

    color:
        rgba(255,255,255,.55);

    font-size: 12px;

    letter-spacing: .4px;

    transition:
        opacity .4s ease;

}


.fv-scene-loading span {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #72B42C;

    box-shadow:
        0 0 18px rgba(114,180,44,.7);

    animation:
        fvSceneLoaderPulse
        1s ease-in-out infinite;

}


@keyframes fvSceneLoaderPulse {

    0%,
    100% {
        transform: scale(.7);
        opacity: .4;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

}


/* =========================================================
   INFORMATION PANEL
========================================================= */

.fv-solar-info {

    position: relative;

    padding:
        44px 42px;

    border-left:
        1px solid rgba(255,255,255,.07);

    background:

        linear-gradient(
            180deg,
            rgba(114,180,44,.08),
            rgba(114,180,44,.025)
        );

}


.fv-info-number {

    position: absolute;

    top: 24px;

    right: 32px;

    color:
        rgba(255,255,255,.08);

    font-size: 70px;

    line-height: 1;

    font-weight: 800;

}


.fv-info-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 14px;

    background:
        rgba(114,180,44,.12);

    color: #fdef5c;

    font-size: 20px;

    box-shadow:
        0 0 30px rgba(114,180,44,.08);

}


.fv-solar-info h3 {

    position: relative;

    z-index: 2;

    margin:
        0 0 13px;

    color: #fff;

    font-size: 31px;

    line-height: 1.15;

    font-weight: 800;

}


.fv-solar-info p {

    margin:
        0 0 30px;

    color:
        #ffffff;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   FLOW PANEL
========================================================= */

.fv-energy-flow {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 30px;

    padding:
        15px 12px;

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

    border-radius: 14px;

    background:
        rgba(0,0,0,.18);
    margin: 20px -20px;

}


.fv-flow-item {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

}


.fv-flow-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(114,180,44,.1);

    color: #fdef5c;

    font-size: 18px;

}


.fv-flow-item small {

    color:
        #ffffff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .7px;

}


.fv-flow-line {

    position: relative;

    flex: 1;

    min-width: 20px;

    height: 2px;

    overflow: hidden;

    background:
        rgba(114,180,44,.15);

}


.fv-flow-line span {

    position: absolute;

    top: 0;

    left: -30%;

    width: 30%;

    height: 100%;

    background:
        #72B42C;

    box-shadow:
        0 0 10px #72B42C;

    animation:
        fvFlowLineMove
        1.8s linear infinite;

}


@keyframes fvFlowLineMove {

    from {
        left: -30%;
    }

    to {
        left: 100%;
    }

}


.fv-flow-destinations {

    display: flex;

    align-items: center;

    gap: 8px;

}


.fv-flow-destinations span {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color:
        #ffffff;

    font-size: 8px;

    font-weight: 800;

}


.fv-flow-destinations i {

    color: #53b703;
    font-size:20px;

}


/* =========================================================
   FEATURES
========================================================= */

.fv-solar-features {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 30px;

}


.fv-solar-features div {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        #ffffff;

    font-size: 13px;

}


.fv-solar-features i {

    color: #72B42C;

    font-size: 13px;

}


/* =========================================================
   BUTTON
========================================================= */

.fv-solar-info-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 19px;

    border-radius: 11px;

    background:
        #53b703;

    color: #fff !important;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.fv-solar-info-button:hover {

    transform:
        translateY(-2px);

    color: #fff !important;

    box-shadow:
        0 12px 35px rgba(114,180,44,.25);

}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.fv-solar-bottom-message {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    max-width: 650px;

    margin:
        28px auto 0;

    padding:
        15px 22px;

    border:
        1px solid rgba(114,180,44,.2);

    border-radius: 15px;

    background:
        #53b703;

}


.fv-message-sun {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(114, 180, 44);

    color: #fdef5c;

    font-size: 20px;

}


.fv-solar-bottom-message strong {

    display: block;

    color: #fff;

    font-size: 14px;

}


.fv-solar-bottom-message small {

    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.45);

    font-size: 10px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fv-solar-3d-wrapper {

        grid-template-columns: 1fr;

        min-height: 0;

    }


    .fv-solar-3d-scene {

        height: 560px;

        min-height: 560px;

    }


    .fv-solar-info {

        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.07);

    }

}


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

@media (max-width: 767px) {

    .fv-solar-types-3d {

        padding:
            60px 0 50px;

    }


    .fv-solar-types-heading {

        margin-bottom: 25px;

    }


    .fv-solar-types-heading h2 {

        font-size:
            clamp(30px, 9vw, 37px);

        line-height: 1.08;

        letter-spacing: -1px;

    }


    .fv-solar-types-heading p {

        padding:
            0 15px;

        font-size: 14px;

        line-height: 1.6;

    }


    /* -----------------------------------------
       TABS
    ----------------------------------------- */

    .fv-solar-system-tabs {

        justify-content: flex-start;

        overflow-x: auto;

        overflow-y: hidden;

        width: 100%;

        padding:
            5px 3px 13px;

        margin-bottom: 20px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .fv-solar-system-tabs::-webkit-scrollbar {

        display: none;

    }


    .fv-system-tab {

        flex:
            0 0 auto;

        min-width: 165px;

        padding:
            10px 12px;

    }


    .fv-tab-icon {

        width: 36px;

        height: 36px;

        font-size: 15px;

    }


    /* -----------------------------------------
       3D WRAPPER
    ----------------------------------------- */

    .fv-solar-3d-wrapper {

        width: 100%;

        min-height: 0;

        border-radius: 18px;

    }


    /* -----------------------------------------
       3D SCENE
    ----------------------------------------- */

    .fv-solar-3d-scene {

        width: 100%;

        height:
            clamp(
                390px,
                115vw,
                480px
            );

        min-height: 390px;

        max-height: 480px;

    }


    /* -----------------------------------------
       INFO PANEL
    ----------------------------------------- */

    .fv-solar-info {

        padding:
            30px 20px;

    }


    .fv-info-number {

        top: 18px;

        right: 18px;

        font-size: 48px;

    }


    .fv-solar-info h3 {

        font-size: 25px;

    }


    .fv-solar-info p {

        font-size: 13px;

        line-height: 1.65;

    }


    /* -----------------------------------------
       ENERGY FLOW
    ----------------------------------------- */

    .fv-energy-flow {

        overflow-x: auto;

        overflow-y: hidden;

        margin:
            18px 0 25px;

        padding:
            13px 10px;

        -webkit-overflow-scrolling: touch;

    }


    /* -----------------------------------------
       BOTTOM MESSAGE
    ----------------------------------------- */

    .fv-solar-bottom-message {

        align-items: flex-start;

        margin-left: 8px;

        margin-right: 8px;

        padding:
            13px 15px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .fv-solar-types-3d {

        padding-top: 50px;

    }


    .fv-solar-system-tabs {

        gap: 9px;

    }


    .fv-system-tab {

        min-width: 154px;

        padding:
            9px 10px;

    }


    .fv-system-tab strong {

        font-size: 12px;

    }


    .fv-system-tab small {

        font-size: 10px;

    }


    .fv-tab-icon {

        width: 33px;

        height: 33px;

        font-size: 14px;

    }


    .fv-solar-3d-scene {

        height: 390px;

        min-height: 390px;

        max-height: 390px;

    }


    .fv-solar-info {

        padding:
            27px 17px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 350px) {

    .fv-solar-3d-scene {

        height: 380px;

        min-height: 380px;

        max-height: 380px;

    }


    .fv-solar-3d-wrapper {

        border-radius: 15px;

    }

}
/* =========================================================
   3D SCENE SCROLL FIX
========================================================= */

.fv-solar-3d-scene {

    touch-action: pan-y;

}


/* Canvas should allow normal page scrolling */

.fv-solar-3d-scene canvas {

    touch-action: pan-y !important;

    cursor: grab;

}


.fv-solar-3d-scene canvas:active {

    cursor: grabbing;

}


/* =========================================================
   FUTUREVOLT - ESTEEMED CLIENTS SECTION
========================================================= */

.fv-esteemed-clients {

    position: relative;

    width: 100%;

    /*padding: 60px 0 70px;*/

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdf9 48%,
            #f6faf3 100%
        );

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
========================================================= */

.fv-esteemed-clients::before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    top: -180px;

    left: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(114, 180, 44, 0.10) 0%,
            rgba(114, 180, 44, 0.035) 45%,
            transparent 72%
        );

    pointer-events: none;
}


.fv-esteemed-clients::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -180px;

    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(114, 180, 44, 0.09) 0%,
            rgba(114, 180, 44, 0.025) 45%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.fv-esteemed-clients-heading {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin: 0 auto 38px;

    padding: 0 20px;
}


/* =========================================================
   HEADING TEXT
========================================================= */

.fv-esteemed-clients-heading h3 {

    margin: 0;

    padding: 0;

    color: #53b703;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: 2px;

    text-align: center;

    white-space: nowrap;
}


/* =========================================================
   DECORATIVE LINES
========================================================= */

.fv-esteemed-clients-line {

    display: block;

    width: 75px;

    height: 2px;

    flex-shrink: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #72B42C 100%
        );
}


.fv-esteemed-clients-line:last-child {

    background:
        linear-gradient(
            90deg,
            #72B42C 0%,
            transparent 100%
        );
}


/* =========================================================
   LOGO SLIDER
========================================================= */

.fv-client-logo-slider {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    overflow: hidden;

    padding: 15px 0 25px;
}


/* =========================================================
   LEFT / RIGHT FADE
========================================================= */

.fv-client-logo-slider::before,
.fv-client-logo-slider::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 125px;

    z-index: 5;

    pointer-events: none;
}


.fv-client-logo-slider::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            #f9fcf7 0%,
            rgba(249, 252, 247, 0.90) 25%,
            rgba(249, 252, 247, 0) 100%
        );
}


.fv-client-logo-slider::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            #f9fcf7 0%,
            rgba(249, 252, 247, 0.90) 25%,
            rgba(249, 252, 247, 0) 100%
        );
}


/* =========================================================
   LOGO TRACK
========================================================= */

.fv-client-logo-track {

    display: flex;

    align-items: center;

    gap: 24px;

    width: max-content;

    padding: 10px 20px;
}


/* =========================================================
   CLIENT CARD
========================================================= */

.fv-client-logo-item {

    position: relative;

    flex: 0 0 205px;

    width: 205px;

    height: 128px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    overflow: hidden;

    isolation: isolate;

    border: 1px solid rgba(114, 180, 44, 0.16);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfef9 100%
        );

    box-shadow:
        0 8px 25px rgba(23, 53, 31, 0.055),
        0 2px 8px rgba(114, 180, 44, 0.035);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


/* =========================================================
   CARD TOP GREEN ACCENT
========================================================= */

.fv-client-logo-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: 15%;

    width: 70%;

    height: 3px;

    z-index: 1;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #72B42C 20%,
            #55B907 50%,
            #72B42C 80%,
            transparent 100%
        );

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.45s ease;
}


/* =========================================================
   CARD CORNER GLOW
========================================================= */

.fv-client-logo-item::after {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    top: -70px;

    right: -45px;

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(114, 180, 44, 0.065);

    transition:
        transform 0.5s ease,
        background 0.5s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.fv-client-logo-item:hover {

    transform:
        translateY(-10px)
        scale(1.015);

    border-color:
        rgba(114, 180, 44, 0.42);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f3faee 100%
        );

    box-shadow:
        0 20px 45px rgba(23, 53, 31, 0.12),
        0 5px 20px rgba(114, 180, 44, 0.10);
}


.fv-client-logo-item:hover::before {

    transform: scaleX(1);
}


.fv-client-logo-item:hover::after {

    transform: scale(1.5);

    background:
        rgba(114, 180, 44, 0.11);
}


/* =========================================================
   CLIENT LOGO
========================================================= */

.fv-client-logo-item img {

    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    max-width: 160px;

    height: 74px;

    object-fit: contain;

    object-position: center;

    /* KEEP ORIGINAL LOGO COLOURS */
    filter: none;

    opacity: 1;

    transform: scale(0.94);

    transition:
        transform 0.4s ease;
}


/* =========================================================
   LOGO HOVER
========================================================= */

.fv-client-logo-item:hover img {

    /* KEEP ORIGINAL LOGO COLOURS ON HOVER TOO */
    filter: none;

    opacity: 1;

    transform: scale(1.06);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.fv-client-logo-item span {

    position: relative;

    z-index: 2;

    color: #819088;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 600;

    text-align: center;
}


/* =========================================================
   CARD INNER HIGHLIGHT
========================================================= */

.fv-client-logo-item {

    background-clip: padding-box;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .fv-client-logo-slider {

        max-width: 100%;

    }

    .fv-client-logo-item {

        flex-basis: 195px;

        width: 195px;

        height: 120px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 991.98px) {

    .fv-esteemed-clients {

        padding: 50px 0 60px;
    }


    .fv-esteemed-clients-heading {

        margin-bottom: 30px;

        gap: 15px;
    }


    .fv-esteemed-clients-heading h3 {

        font-size: 18px;

        letter-spacing: 1.6px;
    }


    .fv-esteemed-clients-line {

        width: 60px;
    }


    .fv-client-logo-track {

        gap: 20px;

        padding-left: 15px;

        padding-right: 15px;
    }


    .fv-client-logo-item {

        flex-basis: 180px;

        width: 180px;

        height: 110px;

        padding: 17px;

        border-radius: 16px;
    }


    .fv-client-logo-item img {

        max-width: 140px;

        height: 65px;
    }


    .fv-client-logo-slider::before,
    .fv-client-logo-slider::after {

        width: 80px;
    }

}


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

@media (max-width: 767.98px) {

    .fv-esteemed-clients {

        padding: 42px 0 50px;
    }


    .fv-esteemed-clients-heading {

        gap: 11px;

        margin-bottom: 25px;

        padding: 0 15px;
    }


    .fv-esteemed-clients-heading h3 {

        font-size: 15px;

        letter-spacing: 1.2px;
    }


    .fv-esteemed-clients-line {

        width: 40px;

        height: 2px;
    }


    .fv-client-logo-slider {

        padding-top: 10px;

        padding-bottom: 18px;
    }


    .fv-client-logo-track {

        gap: 15px;

        padding: 8px 10px;
    }


    .fv-client-logo-item {

        flex-basis: 155px;

        width: 155px;

        height: 98px;

        padding: 14px;

        border-radius: 14px;

        box-shadow:
            0 7px 20px rgba(23, 53, 31, 0.055);
    }


    .fv-client-logo-item img {

        max-width: 125px;

        height: 58px;

        filter: none;

        opacity: 0.9;
    }


    .fv-client-logo-slider::before,
    .fv-client-logo-slider::after {

        width: 45px;
    }


    .fv-client-logo-item:hover {

        transform: translateY(-5px);
    }

}


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

@media (max-width: 480px) {

    .fv-esteemed-clients {

        padding: 38px 0 45px;
    }


    .fv-esteemed-clients-heading {

        gap: 8px;

        margin-bottom: 22px;
    }


    .fv-esteemed-clients-heading h3 {

        font-size: 13px;

        letter-spacing: 1px;
    }


    .fv-esteemed-clients-line {

        width: 27px;

        height: 1.5px;
    }


    .fv-client-logo-track {

        gap: 12px;

        padding-left: 8px;

        padding-right: 8px;
    }


    .fv-client-logo-item {

        flex-basis: 140px;

        width: 140px;

        height: 88px;

        padding: 11px;

        border-radius: 12px;
    }


    .fv-client-logo-item img {

        max-width: 112px;

        height: 51px;
    }


    .fv-client-logo-slider::before,
    .fv-client-logo-slider::after {

        width: 30px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .fv-esteemed-clients-heading h3 {

        font-size: 12px;

        letter-spacing: 0.8px;
    }


    .fv-esteemed-clients-line {

        width: 20px;
    }


    .fv-client-logo-item {

        flex-basis: 130px;

        width: 130px;

        height: 82px;
    }


    .fv-client-logo-item img {

        max-width: 105px;

        height: 47px;
    }

}
.fv-client-logo-track {
    animation: fvClientScrollRight 80s linear infinite;
}

@keyframes fvClientScrollRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
    /* =========================================================
   FUTUREVOLT GUARANTEE™
========================================================= */

.fv-guarantee-section {

    position: relative;

    width: 100%;

    padding: 30px 25px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 50%,
            rgba(114, 180, 44, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 95% 20%,
            rgba(82, 170, 210, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6fbf2 48%,
            #eef8f4 100%
        );

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.fv-guarantee-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    top: -250px;

    right: -180px;

    border-radius: 50%;

    background:
        rgba(114, 180, 44, 0.055);

    pointer-events: none;

}


.fv-guarantee-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    bottom: -220px;

    left: -150px;

    border-radius: 50%;

    background:
        rgba(114, 180, 44, 0.05);

    pointer-events: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.fv-guarantee-container {

    position: relative;

    z-index: 2;

    max-width: 1220px;

    margin: 0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.fv-guarantee-heading {

    max-width: 800px;

    margin: 0 auto 60px;

    text-align: center;

}


.fv-guarantee-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 17px;

    margin-bottom: 18px;

    border: 1px solid
        rgba(114, 180, 44, 0.25);

    border-radius: 50px;

    background:
        rgba(114, 180, 44, 0.07);

    color: #53B703;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.fv-guarantee-heading h2 {

    margin: 0 0 18px;

    color: #17251a;

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

    line-height: 1.1;

    font-weight: 750;

    letter-spacing: -1.5px;

}


.fv-guarantee-heading h2 span {

    display: block;

    margin-top: 5px;

    color: #53B703;

    font-weight: 850;

}


.fv-guarantee-heading p {

    max-width: 690px;

    margin: 0 auto;

    color: #69736a;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.fv-guarantee-wrapper {

    display: grid;

    grid-template-columns:
        0.72fr
        1.5fr;

    align-items: center;

    gap: 30px;

    padding: 55px;

    border: 1px solid
        rgba(114, 180, 44, 0.16);

    border-radius: 32px;

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

    box-shadow:
        0 25px 70px
        rgba(36, 70, 30, 0.075);

    backdrop-filter: blur(12px);

}


/* =========================================================
   GUARANTEE VISUAL
========================================================= */

.fv-guarantee-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 350px;

}


/* =========================================================
   GLOW
========================================================= */

.fv-guarantee-glow {

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(114, 180, 44, 0.22) 0%,
            rgba(114, 180, 44, 0.09) 42%,
            transparent 70%
        );

    filter: blur(2px);

}


/* =========================================================
   ORBITS
========================================================= */

.fv-guarantee-orbit {

    position: absolute;

    border: 1px solid
        rgba(114, 180, 44, 0.35);

    border-radius: 50%;

}


.fv-orbit-1 {

    width: 280px;

    height: 105px;

    transform:
        rotate(-28deg);

}


.fv-orbit-2 {

    width: 300px;

    height: 125px;

    transform:
        rotate(28deg);

    border-color:
        rgba(114, 180, 44, 0.18);

}


/* =========================================================
   SHIELD
========================================================= */

.fv-guarantee-shield {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 185px;

    height: 215px;

    padding: 7px;

    clip-path:
        polygon(
            50% 0%,
            90% 13%,
            97% 50%,
            85% 76%,
            50% 100%,
            15% 76%,
            3% 50%,
            10% 13%
        );

    background:
        linear-gradient(
            145deg,
            #8bdc42 0%,
            #53B703 45%,
            #439700 100%
        );

    filter:
        drop-shadow(
            0 18px 30px
            rgba(83, 183, 3, 0.28)
        );

    animation:
        fvGuaranteeFloat 4s
        ease-in-out infinite;

}


/* =========================================================
   INNER SHIELD
========================================================= */

.fv-shield-inner {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    height: 100%;

    clip-path:
        polygon(
            50% 0%,
            90% 13%,
            97% 50%,
            85% 76%,
            50% 100%,
            15% 76%,
            3% 50%,
            10% 13%
        );

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255,255,255,0.24),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #69c91d 0%,
            #53B703 55%,
            #439700 100%
        );

    overflow: hidden;

}


/* =========================================================
   SHIELD HIGHLIGHT
========================================================= */

.fv-shield-highlight {

    position: absolute;

    z-index: 7;

    top: 12px;

    left: 30px;

    width: 55px;

    height: 115px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.38),
            rgba(255,255,255,0)
        );

    transform: rotate(25deg);

    filter: blur(4px);

    pointer-events: none;

}


/* =========================================================
   SOLAR ICON
========================================================= */

.fv-shield-sun {

    position: relative;

    z-index: 8;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border-radius: 50%;

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

    box-shadow:
        0 0 25px
        rgba(255,255,255,0.22);

}


.fv-shield-sun i {

    color: #ffffff;

    font-size: 22px;

    animation:
        fvSunPulse 2.5s
        ease-in-out infinite;

}


/* =========================================================
   CHECKMARK
========================================================= */

.fv-shield-check {

    position: relative;

    z-index: 8;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    border: 4px solid
        rgba(255,255,255,0.95);

    border-radius: 50%;

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

    box-shadow:
        0 0 0 7px
        rgba(255,255,255,0.07),

        0 8px 25px
        rgba(0,0,0,0.12);

}


.fv-shield-check i {

    color: #ffffff;

    font-size: 45px;

    font-weight: 900;

    line-height: 1;

}


/* =========================================================
   SOLAR PARTICLES
========================================================= */

.fv-shield-inner::before,
.fv-shield-inner::after {

    content: "";

    position: absolute;

    border-radius: 50%;

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

}


.fv-shield-inner::before {

    width: 5px;

    height: 5px;

    top: 42px;

    right: 38px;

    box-shadow:
        -58px 45px 0
        rgba(255,255,255,0.35),

        55px 72px 0
        rgba(255,255,255,0.28),

        -42px 105px 0
        rgba(255,255,255,0.25);

    animation:
        fvParticles 3s
        ease-in-out infinite;

}


.fv-shield-inner::after {

    width: 3px;

    height: 3px;

    bottom: 48px;

    left: 42px;

    box-shadow:
        60px -30px 0
        rgba(255,255,255,0.35),

        40px 18px 0
        rgba(255,255,255,0.25);

    animation:
        fvParticles 2.4s
        ease-in-out infinite reverse;

}


/* =========================================================
   SHIELD ANIMATIONS
========================================================= */

@keyframes fvSunPulse {

    0%,
    100% {

        transform: scale(1);

        opacity: .85;

    }

    50% {

        transform: scale(1.15);

        opacity: 1;

    }

}


@keyframes fvParticles {

    0%,
    100% {

        opacity: .35;

        transform: translateY(0);

    }

    50% {

        opacity: 1;

        transform: translateY(-5px);

    }

}
/* =========================================================
   FLOATING STARS
========================================================= */

.fv-guarantee-star {

    position: absolute;

    z-index: 8;

    color: #53B703;

    font-size: 22px;

    animation:
        fvGuaranteeSpark 2.5s
        ease-in-out infinite;

}


.fv-star-1 {

    top: 48px;

    right: 15px;

}


.fv-star-2 {

    bottom: 55px;

    right: 35px;

    font-size: 14px;

    animation-delay: .6s;

}


.fv-star-3 {

    top: 100px;

    left: 20px;

    font-size: 13px;

    animation-delay: 1s;

}


/* =========================================================
   CONTENT
========================================================= */

.fv-guarantee-content {

    min-width: 0;

}


.fv-guarantee-content-top {

    margin-bottom: 28px;

}


.fv-guarantee-small-title {

    display: block;

    margin-bottom: 9px;

    color: #53B703;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.fv-guarantee-content-top h3 {

    margin: 0 0 12px;

    color: #17251a;

    font-size: clamp(30px, 3vw, 42px);

    line-height: 1.12;

    font-weight: 450;

}


.fv-guarantee-content-top h3 strong {

    color: #53B703;

    font-weight: 800;

}


.fv-guarantee-content-top p {

    max-width: 620px;

    margin: 0;

    color: #000;

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   CARDS GRID
========================================================= */

.fv-guarantee-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}


/* =========================================================
   GUARANTEE CARD
========================================================= */

.fv-guarantee-card {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    min-height: 145px;

    padding: 22px;

    border: 1px solid
        #e4ebdf;

    border-radius: 18px;

    background: #ffffff;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.fv-guarantee-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #53B703,
            #a1d66e
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform .35s ease;

}


.fv-guarantee-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(114, 180, 44, 0.32);

    box-shadow:
        0 15px 35px
        rgba(41, 73, 35, 0.09);

}


.fv-guarantee-card:hover::before {

    transform:
        scaleX(1);

}


/* =========================================================
   CARD ICON
========================================================= */

.fv-guarantee-card-icon {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(114, 180, 44, 0.16),
            rgba(114, 180, 44, 0.045)
        );

}


.fv-guarantee-card-icon i {

    color: #53B703;

    font-size: 21px;

}


/* =========================================================
   CARD CONTENT
========================================================= */

.fv-guarantee-card-content h4 {

    margin: 1px 0 7px;

    color: #1c2a1d;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 750;

}


.fv-guarantee-card-content p {

    margin: 0;

    color: #000;

    font-size: 15px;

    line-height: 1.5;

}


.fv-guarantee-card-content p strong {

    color: #53B703;

    font-weight: 800;

}


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

.fv-guarantee-cta {

    margin-top: 25px;

}


.fv-guarantee-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding: 15px 20px;

    border-radius: 8px;

    background: #53B703;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;

    font-weight: 750;

    box-shadow:
        0 9px 22px
        rgba(114, 180, 44, 0.20);

    transition:
        all .3s ease;

}


.fv-guarantee-button:hover {

    background: #5f9e20;

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(114, 180, 44, 0.28);

}


.fv-guarantee-button i {

    transition:
        transform .3s ease;

}


.fv-guarantee-button:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   BOTTOM TRUST STRIP
========================================================= */

.fv-guarantee-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    margin-top: 25px;

    padding: 19px 25px;

    border: 1px solid
        rgba(114, 180, 44, 0.13);

    border-radius: 15px;

    background:
        rgba(114, 180, 44, 0.045);

}


.fv-guarantee-bottom-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #536053;

    font-size: 16px;

    font-weight: 650;

    white-space: nowrap;

}


.fv-guarantee-bottom-item i {

    color: #53B703;

    font-size: 16px;

}


.fv-guarantee-bottom-line {

    width: 1px;

    height: 25px;

    background:
        rgba(114, 180, 44, 0.20);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fvGuaranteeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


@keyframes fvGuaranteeSpark {

    0%,
    100% {

        opacity: .35;

        transform:
            scale(.8)
            rotate(0deg);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.2)
            rotate(15deg);

    }

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .fv-guarantee-wrapper {

        grid-template-columns:
            .6fr 1.4fr;

        gap: 30px;

        padding: 25px;

    }


    .fv-guarantee-visual {

        min-height: 300px;

    }


    .fv-guarantee-shield {

        width: 155px;

        height: 180px;

    }





    .fv-guarantee-orbit {

        transform:
            scale(.85)
            rotate(-28deg);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .fv-guarantee-section {

        padding: 80px 20px;

    }


    .fv-guarantee-wrapper {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 40px;

    }


    .fv-guarantee-visual {

        min-height: 260px;

        order: 2;

    }


    .fv-guarantee-content {

        order: 1;

    }


    .fv-guarantee-bottom {

        flex-wrap: wrap;

    }


    .fv-guarantee-bottom-line {

        display: none;

    }

}


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

@media (max-width: 767px) {

    .fv-guarantee-section {

        padding: 65px 15px;

    }


    .fv-guarantee-heading {

        margin-bottom: 35px;

    }


    .fv-guarantee-heading h2 {

        font-size: 35px;

    }


    .fv-guarantee-heading p {

        font-size: 14px;

    }


    .fv-guarantee-wrapper {

        padding: 28px 20px;

        border-radius: 23px;

    }


    .fv-guarantee-visual {

        min-height: 230px;

    }


    .fv-guarantee-shield {

        width: 135px;

        height: 160px;

    }





    .fv-guarantee-orbit {

        transform:
            scale(.72)
            rotate(-28deg);

    }


    .fv-guarantee-content-top h3 {

        font-size: 30px;

    }


    .fv-guarantee-content-top p {

        font-size: 14px;

    }


    .fv-guarantee-grid {

        grid-template-columns: 1fr;

    }


    .fv-guarantee-card {

        min-height: auto;

        padding: 20px;

    }


    .fv-guarantee-cta {

        margin-top: 20px;

    }


    .fv-guarantee-button {

        width: 100%;

    }


    .fv-guarantee-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        padding: 20px;

    }


    .fv-guarantee-bottom-item {

        white-space: normal;

    }

}


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

@media (max-width: 420px) {

    .fv-guarantee-heading h2 {

        font-size: 31px;

    }


    .fv-guarantee-wrapper {

        padding: 25px 16px;

    }


    .fv-guarantee-card {

        gap: 12px;

    }


    .fv-guarantee-card-icon {

        width: 43px;

        height: 43px;

    }


    .fv-guarantee-card-icon i {

        font-size: 18px;

    }


    .fv-guarantee-card-content h4 {

        font-size: 15px;

    }


    .fv-guarantee-card-content p {

        font-size: 12.5px;

    }

}




/* =========================================================
   FUTUREVOLT
   MONEY BACK GUARANTEE
   ₹8 REFUND CALCULATION - FULL WIDTH
========================================================= */


/* =========================================================
   MAIN REFUND BOX
========================================================= */

.fv-generation-refund {

    position: relative;

    display: flex;

    align-items: stretch;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin: 25px 0 0;

    padding: 24px 28px;

    gap: 30px;

    border: 1px solid #e4ebdf;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfdf9 52%,
            #f4faef 100%
        );

    box-shadow:
        0 15px 40px
        rgba(41, 73, 35, 0.075);

    overflow: hidden;

    box-sizing: border-box;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/* =========================================================
   TOP GREEN ACCENT
========================================================= */

.fv-generation-refund::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #53B703 0%,
            #72B42C 50%,
            #A1D66E 100%
        );

}


/* =========================================================
   SOFT DECORATIVE GLOW
========================================================= */

.fv-generation-refund::after {

    content: "";

    position: absolute;

    right: -80px;
    bottom: -110px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(114, 180, 44, 0.065);

    pointer-events: none;

}


/* =========================================================
   ₹8 VALUE AREA
========================================================= */

.fv-generation-refund-value {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    flex: 0 0 220px;

    min-width: 220px;

}


/* ₹8 GREEN BADGE */

.fv-generation-refund-value strong {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 88px;

    height: 66px;

    flex: 0 0 88px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #53B703 0%,
            #439700 100%
        );

    color: #ffffff;

    font-size: 32px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    box-shadow:
        0 10px 25px
        rgba(83, 183, 3, 0.23);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


/* UNIT TEXT */

.fv-generation-refund-value span {

    display: block;

    max-width: 100px;

    color: #53B703;

    font-size: 14px;

    line-height: 1.45;

    font-weight: 800;

    letter-spacing: 1.25px;

    text-transform: uppercase;

}


/* HOVER ₹8 */

.fv-generation-refund:hover
.fv-generation-refund-value strong {

    transform: scale(1.04);

    box-shadow:
        0 13px 30px
        rgba(83, 183, 3, 0.29);

}


/* =========================================================
   DETAILS AREA
========================================================= */

.fv-generation-refund-details {

    position: relative;

    z-index: 2;

    flex: 1 1 auto;

    min-width: 0;

    padding-left: 30px;

    border-left: 1px solid #e4ebdf;

}


/* =========================================================
   TITLE
========================================================= */

.fv-generation-refund-title {

    margin: 0 0 7px;

    color: #53B703;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   FORMULA
========================================================= */

.fv-generation-refund-formula {

    color: #17351F;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 700;

}


/* =========================================================
   CALCULATION AREA
========================================================= */

.fv-refund-calculation {

    width: 100%;

    max-width: 100%;

    margin-top: 14px;

}


/* =========================================================
   CALCULATION ROW
========================================================= */

.fv-refund-calculation-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 35px;

    padding: 6px 0;

    gap: 25px;

    border-bottom:
        1px solid rgba(228, 235, 223, 0.85);

    box-sizing: border-box;

}


/* LEFT LABEL */

.fv-refund-calculation-row span {

    color: #707970;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 500;

}


/* RIGHT VALUE */

.fv-refund-calculation-row strong {

    color: #1c2a1d;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 750;

    text-align: right;

}


/* =========================================================
   SHORTFALL
========================================================= */

.fv-refund-calculation-row.fv-refund-shortfall {

    border-bottom: 0;

    padding-bottom: 5px;

}


.fv-refund-shortfall span {

    color: #536053;

    font-weight: 650;

}


.fv-refund-shortfall strong {

    color: #53B703;

    font-weight: 800;

}


/* =========================================================
   DIVIDER
========================================================= */

.fv-refund-calculation-divider {

    width: 100%;

    height: 1px;

    margin: 7px 0 10px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #dfe9da 15%,
            #dfe9da 85%,
            transparent 100%
        );

}


/* =========================================================
   FINAL REFUND BOX
========================================================= */

.fv-refund-final {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 60px;

    padding: 10px 14px;

    gap: 20px;

    border:
        1px solid
        rgba(83, 183, 3, 0.18);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(83, 183, 3, 0.045),
            rgba(114, 180, 44, 0.11)
        );

    box-sizing: border-box;

}


/* FINAL LEFT CONTENT */

.fv-refund-final > div:first-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}


/* REFUND CALCULATION LABEL */

.fv-refund-final > div:first-child span {

    color: #69736a;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .9px;

    text-transform: uppercase;

}


/* 460 × ₹8 */

.fv-refund-final > div:first-child strong {

    color: #17351F;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 800;

}


/* =========================================================
   FINAL ₹3,680
========================================================= */

.fv-refund-final-amount {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    flex: 0 0 auto;

}


/* REFUND LABEL */

.fv-refund-final-amount small {

    color: #53B703;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 1.3px;

}


/* ₹3,680 */

.fv-refund-final-amount strong {

    color: #53B703;

    font-size: 25px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.5px;

}


/* =========================================================
   TERMS / NOTE
========================================================= */

.fv-generation-note {

    display: flex;

    align-items: flex-start;

    width: 100%;

    max-width: 100%;

    margin-top: 10px;

    margin-bottom: 0;

    padding: 0 3px;

    gap: 8px;

    color: #000;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.5;

    box-sizing: border-box;

}


/* INFO ICON */

.fv-generation-note i {

    flex: 0 0 auto;

    margin-top: 2px;

    color: #53B703;

    font-size: 16px;

}


/* =========================================================
   IMPORTANT:
   FULL WIDTH INSIDE EXISTING TWO-COLUMN WRAPPER
========================================================= */

.fv-guarantee-wrapper > .fv-generation-refund {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    max-width: none !important;

}


.fv-guarantee-wrapper > .fv-generation-note {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    max-width: none !important;

}


/* =========================================================
   CTA BELOW FULL-WIDTH REFUND
========================================================= */

.fv-guarantee-wrapper > .fv-guarantee-cta {

    grid-column: 1 / -1 !important;

    width: 100%;

    margin-top: 0px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .fv-generation-refund {

        padding: 21px 22px;

        gap: 24px;

    }


    .fv-generation-refund-value {

        flex-basis: 190px;

        min-width: 190px;

    }


    .fv-generation-refund-value strong {

        width: 78px;

        height: 58px;

        flex-basis: 78px;

        font-size: 29px;

    }


    .fv-generation-refund-details {

        padding-left: 24px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .fv-generation-refund {

        margin-top: 20px;

        padding: 20px;

        gap: 22px;

    }


    .fv-generation-refund-value {

        flex-basis: 180px;

        min-width: 180px;

    }


    .fv-generation-refund-value strong {

        width: 72px;

        height: 56px;

        flex-basis: 72px;

        font-size: 28px;

    }


    .fv-generation-refund-details {

        padding-left: 22px;

    }


    .fv-generation-refund-formula {

        font-size: 15px;

    }


    .fv-refund-calculation-row span,
    .fv-refund-calculation-row strong {

        font-size: 11px;

    }

}


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

@media (max-width: 767px) {

    .fv-generation-refund {

        flex-direction: column;

        align-items: stretch;

        gap: 17px;

        padding: 19px;

        margin-top: 18px;

        border-radius: 17px;

    }


    /* ₹8 section */

    .fv-generation-refund-value {

        width: 100%;

        min-width: 0;

        flex-basis: auto;

        justify-content: flex-start;

    }


    .fv-generation-refund-value strong {

        width: 70px;

        height: 54px;

        flex-basis: 70px;

        font-size: 27px;

    }


    .fv-generation-refund-value span {

        max-width: none;

        font-size: 9px;

    }


    /* Details */

    .fv-generation-refund-details {

        width: 100%;

        min-width: 0;

        padding-top: 16px;

        padding-left: 0;

        border-top: 1px solid #e4ebdf;

        border-left: 0;

    }


    .fv-generation-refund-title {

        font-size: 9px;

        letter-spacing: 1.4px;

    }


    .fv-generation-refund-formula {

        font-size: 14px;

        line-height: 1.5;

    }


    /* Calculation */

    .fv-refund-calculation {

        margin-top: 12px;

    }


    .fv-refund-calculation-row {

        min-height: 35px;

        gap: 15px;

    }


    .fv-refund-calculation-row span,
    .fv-refund-calculation-row strong {

        font-size: 10.5px;

    }


    /* Final */

    .fv-refund-final {

        min-height: 58px;

        padding: 10px 12px;

    }


    .fv-refund-final > div:first-child strong {

        font-size: 13px;

    }


    .fv-refund-final-amount strong {

        font-size: 22px;

    }


    /* Note */

    .fv-generation-note {

        margin-top: 8px;

        font-size: 9.5px;

        line-height: 1.55;

    }


    /* CTA */

    .fv-guarantee-wrapper > .fv-guarantee-cta {

        margin-top: 20px;

    }

}


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

@media (max-width: 420px) {

    .fv-generation-refund {

        padding: 16px;

        border-radius: 16px;

    }


    .fv-generation-refund-value {

        gap: 11px;

    }


    .fv-generation-refund-value strong {

        width: 64px;

        height: 50px;

        flex-basis: 64px;

        border-radius: 13px;

        font-size: 25px;

    }


    .fv-generation-refund-value span {

        font-size: 8px;

        letter-spacing: 1px;

    }


    .fv-generation-refund-details {

        padding-top: 14px;

    }


    .fv-generation-refund-title {

        font-size: 8px;

    }


    .fv-generation-refund-formula {

        font-size: 13px;

    }


    .fv-refund-calculation-row {

        gap: 10px;

    }


    .fv-refund-calculation-row span,
    .fv-refund-calculation-row strong {

        font-size: 10px;

    }


    .fv-refund-final {

        min-height: 55px;

        padding: 9px 10px;

        gap: 10px;

    }


    .fv-refund-final > div:first-child span {

        font-size: 7px;

    }


    .fv-refund-final > div:first-child strong {

        font-size: 12px;

    }


    .fv-refund-final-amount small {

        font-size: 7px;

    }


    .fv-refund-final-amount strong {

        font-size: 19px;

    }


    .fv-generation-note {

        font-size: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-generation-refund {

        transition: none;

    }

    .fv-generation-refund-value strong {

        transition: none;

    }

}

/* =========================================================
   REFUND CALCULATION - HOVER EFFECTS
========================================================= */

/* Main card hover */
.fv-generation-refund {

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

}

.fv-generation-refund:hover {

    transform: translateY(-5px);

    border-color:
        rgba(83, 183, 3, 0.35);

    box-shadow:
        0 20px 45px
        rgba(41, 73, 35, 0.12);

}


/* Animated top line */
.fv-generation-refund::before {

    transform: scaleX(0.35);

    transform-origin: left center;

    transition:
        transform 0.5s ease;

}

.fv-generation-refund:hover::before {

    transform: scaleX(1);

}


/* ₹8 badge */
.fv-generation-refund-value strong {

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}

.fv-generation-refund:hover
.fv-generation-refund-value strong {

    transform: translateY(-3px) scale(1.05);

    box-shadow:
        0 14px 30px
        rgba(83, 183, 3, 0.30);

}


/* Unit text */
.fv-generation-refund-value span {

    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;

}

.fv-generation-refund:hover
.fv-generation-refund-value span {

    color: #439700;

    letter-spacing: 1.45px;

}


/* Calculation rows */
.fv-refund-calculation-row {

    position: relative;

    transition:
        background 0.3s ease,
        padding-left 0.3s ease,
        padding-right 0.3s ease;

}

.fv-refund-calculation-row:hover {

    padding-left: 8px;
    padding-right: 8px;

    border-radius: 7px;

    background:
        rgba(83, 183, 3, 0.035);

}


/* Row values */
.fv-refund-calculation-row strong {

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}

.fv-refund-calculation-row:hover strong {

    color: #53B703;

    transform: translateX(-3px);

}


/* Shortfall row */
.fv-refund-shortfall {

    transition:
        background 0.3s ease;

}

.fv-refund-shortfall:hover {

    background:
        rgba(83, 183, 3, 0.07);

}


/* Final refund box */
.fv-refund-final {

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

}

.fv-refund-final:hover {

    transform: translateY(-2px);

    border-color:
        rgba(83, 183, 3, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(83, 183, 3, 0.08),
            rgba(114, 180, 44, 0.16)
        );

    box-shadow:
        0 8px 20px
        rgba(83, 183, 3, 0.10);

}


/* Refund amount */
.fv-refund-final-amount strong {

    transition:
        transform 0.35s ease,
        text-shadow 0.35s ease;

}

.fv-refund-final:hover
.fv-refund-final-amount strong {

    transform: scale(1.08);

    text-shadow:
        0 4px 15px
        rgba(83, 183, 3, 0.20);

}


/* Refund label */
.fv-refund-final-amount small {

    transition:
        letter-spacing 0.3s ease;

}

.fv-refund-final:hover
.fv-refund-final-amount small {

    letter-spacing: 1.6px;

}


/* Terms note */
.fv-generation-note {

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}

.fv-generation-note:hover {

    color: #657267;

    transform: translateX(3px);

}

.fv-generation-note i {

    transition:
        transform 0.3s ease,
        color 0.3s ease;

}

.fv-generation-note:hover i {

    color: #439700;

    transform: scale(1.15);

}


/* =========================================================
   MOBILE - KEEP EFFECTS SUBTLE
========================================================= */

@media (max-width: 767px) {

    .fv-generation-refund:hover {

        transform: translateY(-3px);

    }

    .fv-generation-refund:hover
    .fv-generation-refund-value strong {

        transform: translateY(-2px) scale(1.03);

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fv-generation-refund,
    .fv-generation-refund::before,
    .fv-generation-refund-value strong,
    .fv-generation-refund-value span,
    .fv-refund-calculation-row,
    .fv-refund-calculation-row strong,
    .fv-refund-final,
    .fv-refund-final-amount strong,
    .fv-refund-final-amount small,
    .fv-generation-note,
    .fv-generation-note i {

        transition: none !important;

        transform: none !important;

    }

}

/* =========================================================
   REFUND EXPLANATION
========================================================= */

.fv-refund-explanation {

    margin: 5px 0 10px;

    max-width: 850px;

    color: #000;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 500;
}


.fv-refund-explanation strong {

    color: #53B703;

    font-weight: 800;
}


/* =========================================================
   REFUND PROMISE
========================================================= */

.fv-refund-promise {

    margin-top: 14px;

    padding: 25px 15px;

    border: 1px solid rgba(83, 183, 3, 0.18);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(83, 183, 3, 0.045),
            rgba(114, 180, 44, 0.10)
        );

    color: #000;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.fv-refund-promise:hover {

    transform: translateX(3px);

    border-color: rgba(83, 183, 3, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(83, 183, 3, 0.08),
            rgba(114, 180, 44, 0.15)
        );
}


.fv-refund-promise i {

    color: #53B703;

    font-size: 15px;

    margin-top: 3px;
}


.fv-refund-promise strong {

    color: #17351F;

    font-weight: 750;
}


/* =========================================================
   TERMS NOTE
========================================================= */

.fv-guarantee-terms {

    color: #000;

    font-size: 16px;

    opacity: .95;
}


.fv-guarantee-terms i {

    color: #72B42C;
}


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

@media (max-width: 767px) {

    .fv-refund-explanation {

        font-size: 12px;

        line-height: 1.6;

        margin-top: 5px;

        margin-bottom: 10px;
    }


    .fv-refund-promise {

        padding: 11px 12px;

        margin-top: 10px;

        font-size: 10px;

        line-height: 1.55;
    }


    .fv-guarantee-terms {

        font-size: 9.5px;

        line-height: 1.55;
    }

}
/* =========================================================
   REFUND CONFIDENCE HEADING
========================================================= */

.fv-refund-confidence-heading {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 25px;
}


.fv-refund-eyebrow {

    display: inline-block;

    margin-bottom: 8px;

    color: #53B703;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.fv-refund-confidence-heading h3 {

    margin: 0 0 10px;

    color: #17351F;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 800;

}


.fv-refund-confidence-heading h3 span {

    color: #53B703;

}


.fv-refund-confidence-heading p {

    margin: 0 auto;

    max-width: 680px;

    color: #69736A;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   TRUST STRIP
========================================================= */

.fv-refund-trust-strip {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 20px;

}


.fv-refund-trust-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border: 1px solid #E4EBDF;

    border-radius: 12px;

    background: #FFFFFF;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.fv-refund-trust-item:hover {

    transform: translateY(-4px);

    border-color: rgba(83,183,3,.30);

    box-shadow:
        0 10px 25px rgba(41,73,35,.08);
}


.fv-refund-trust-icon {

    width: 42px;

    height: 50px;

    flex: 0 0 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #EEF9E8;

    color: #53B703;

    font-size: 16px;
}


.fv-refund-trust-item strong {

    display: block;

    margin-bottom: 3px;

    color: #17351F;

    font-size: 15px;

    font-weight: 800;
}


.fv-refund-trust-item span {

    display: block;

    color: #000;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   CUSTOMER CONFIDENCE MESSAGE
========================================================= */

.fv-refund-confidence-message {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    /*margin-top: 18px;*/

    padding: 17px 19px;

    border-left: 4px solid #53B703;

    border-radius: 0 12px 12px 0;

    background:
        linear-gradient(
            90deg,
            rgba(83,183,3,.07),
            rgba(114,180,44,.025)
        );
}


.fv-refund-confidence-message > i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: #53B703;

    font-size: 19px;
}


.fv-refund-confidence-message strong {

    color: #17351F;

    font-size: 16px;

    font-weight: 800;
}


.fv-refund-confidence-message p {

    margin: 5px 0 0;

    color: #000;

    font-size: 16px;

    line-height: 1.5;
}


.fv-refund-confidence-message p strong {

    color: #53B703;

    font-size: inherit;
}


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

@media (max-width: 767px) {

    .fv-refund-confidence-heading {

        margin-bottom: 18px;
    }

    .fv-refund-confidence-heading h3 {

        font-size: 25px;
    }

    .fv-refund-confidence-heading p {

        font-size: 12px;
    }

    .fv-refund-trust-strip {

        grid-template-columns: 1fr;

        gap: 9px;
    }

    .fv-refund-trust-item {

        padding: 12px;
    }

    .fv-refund-confidence-message {

        padding: 14px;

        gap: 10px;
    }

    .fv-refund-confidence-message strong {

        font-size: 12px;
    }

    .fv-refund-confidence-message p {

        font-size: 10px;
    }

}

.footer .footer-item a:hover {
    letter-spacing: 0.5px;
    color: var(--bs-secondary);
}
/* =========================================================
   TABLET VIEW - REFUND TRUST CARDS
   768px to 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .fv-refund-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    .fv-refund-trust-item {
        min-width: 0;
        padding: 12px;
    }

    .fv-refund-trust-item strong,
    .fv-refund-trust-item span {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .fv-refund-trust-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }

}





/* =========================================================
   SOLAR ENERGY FLOW VIDEO SECTION
========================================================= */

.fv-solar-flow-section {
    padding: 30px 0px 30px;
    background: #f7faf5;
    overflow: hidden;
}


/* VIDEO */

.fv-solar-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 625px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    background: #071b2d;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.fv-solar-flow-video {
    display: block;
    width: 100%;
    height: 500px;
    aspect-ratio: 1080 / 1450;
   object-fit: cover;
}


/* CONTENT */

.fv-solar-flow-content {
    padding-left: 25px;
}

.fv-solar-flow-subtitle {
    display: inline-block;
    margin-bottom: 12px;
    color: #72B42C;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fv-solar-flow-content h2 {
    margin-bottom: 20px;
    color: #17212b;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
}

.fv-solar-flow-content h2 span {
    color: #72B42C;
}

.fv-solar-flow-intro {
    max-width: 650px;
    margin-bottom: 30px;
    color: #667085;
    font-size: 17px;
    line-height: 1.8;
}


/* FLOW ITEMS */

.fv-solar-flow-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fv-solar-flow-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fv-flow-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #72B42C,
        #3d91c9
    );

    color: #fff;
    font-size: 19px;
}

.fv-solar-flow-item h4 {
    margin: 0 0 5px;
    color: #17212b;
    font-size: 18px;
    font-weight: 700;
}

.fv-solar-flow-item p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.6;
}




/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .fv-solar-flow-section {
        padding: 75px 0;
    }

    .fv-solar-flow-content {
        padding-left: 0;
    }

    .fv-solar-flow-content h2 {
        font-size: 36px;
    }

    .fv-solar-video-wrapper {
        max-width: 450px;
    }
    
}


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

@media (max-width: 575.98px) {

    .fv-solar-flow-section {
        padding: 60px 0;
    }

    .fv-solar-video-wrapper {
        max-width: 100%;
        border-radius: 18px;
    }

    .fv-solar-flow-content h2 {
        font-size: 30px;
    }

    .fv-solar-flow-intro {
        font-size: 15px;
    }

    .fv-solar-flow-item {
        gap: 12px;
    }

    .fv-flow-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .fv-solar-flow-item h4 {
        font-size: 16px;
    }

    .fv-solar-flow-item p {
        font-size: 14px;
    }

    .fv-solar-flow-btn {
        width: 100%;
        justify-content: center;
    }
    
    .fv-solar-flow-video {
    display: block;
    width: 100%;
    height: 260px;
    aspect-ratio: 1080 / 1450;
   object-fit: cover;
}
}
.fv-solar-flow-note {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    /*margin-top: 30px;*/
    padding: 18px 20px;
    border-left: 4px solid #72B42C;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.fv-solar-flow-note > i {
    color: #72B42C;
    font-size: 24px;
    margin-top: 3px;
}

.fv-solar-flow-note strong {
    display: block;
    margin-bottom: 5px;
    color: #17212b;
    font-size: 16px;
}

.fv-solar-flow-note p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}
/* =========================================================
   1024px SCREEN OPTIMIZATION
========================================================= */

@media (min-width: 992px) and (max-width: 1100px) {

    /* Section spacing */
    .fv-solar-flow-section {
        padding: 30px 0;
    }

    /* Reduce gap between video and content */
    .fv-solar-flow-section .row {
        --bs-gutter-x: 25px;
        --bs-gutter-y: 25px;
    }

    /* Section heading */
    .fv-solar-flow-section .commercial-comparison-heading {
        margin-bottom: 25px;
    }

    .fv-solar-flow-section .sub-title {
        font-size: 14px;
        letter-spacing: 0.8px;
    }

    .fv-solar-flow-section .display-5 {
        font-size: 32px;
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .fv-solar-flow-section .commercial-comparison-intro {
        font-size: 14px;
        line-height: 1.5;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .fv-solar-video-wrapper {
        width: 100%;
        margin: 0;
        border-radius: 20px;
    }


    /* =====================================================
       RIGHT CONTENT
    ===================================================== */

    .fv-solar-flow-content {
        width: 100%;
        padding-left: 5px;
        padding-right: 0;
    }

    .fv-solar-flow-items {
        gap: 11px;
    }


    /* =====================================================
       FLOW ITEMS
    ===================================================== */

    .fv-solar-flow-item {
        gap: 10px;
    }

    .fv-flow-icon {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;

        border-radius: 10px;

        font-size: 16px;
    }

    .fv-solar-flow-item h4 {
        font-size: 16px;
        line-height: 1.3;

        margin-bottom: 3px;
    }

    .fv-solar-flow-item p {
        font-size: 13px;
        line-height: 1.45;
    }


    /* =====================================================
       NOTE
    ===================================================== */

    .fv-solar-flow-note {
        margin-top: 14px;

        padding: 12px 14px;

        gap: 10px;
    }

    .fv-solar-flow-note > i {
        font-size: 19px;
    }

    .fv-solar-flow-note strong {
        font-size: 14px;
    }

    .fv-solar-flow-note p {
        font-size: 12px;
        line-height: 1.45;
    }
    .fv-solar-flow-video {
    display: block;
    width: 100%;
    height: 400px;
    aspect-ratio: 1080 / 1450;
   object-fit: cover;
   }
}

/* =========================================================
   768px SCREEN OPTIMIZATION
========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Section */
    .fv-solar-flow-section {
        padding: 35px 0;
    }


    /* Reduce column gap */
    .fv-solar-flow-section .row {
        --bs-gutter-x: 20px;
        --bs-gutter-y: 20px;
    }


    /* =====================================================
       SECTION HEADING
    ===================================================== */

    .fv-solar-flow-section .commercial-comparison-heading {
        margin-bottom: 22px;
    }

    .fv-solar-flow-section .sub-title {
        font-size: 13px;
        letter-spacing: 0.7px;
    }

    .fv-solar-flow-section .display-5 {
        font-size: 27px;
        line-height: 1.15;
        margin-bottom: 9px;
    }

    .fv-solar-flow-section .commercial-comparison-intro {
        font-size: 13px;
        line-height: 1.45;

        max-width: 650px;

        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .fv-solar-video-wrapper {
        width: 100%;

        margin: 0;

        border-radius: 18px;

        overflow: hidden;
    }

    .fv-solar-flow-video {
    display: block;
    width: 100%;
    height: 400px;
    aspect-ratio: 1080 / 1450;
   object-fit: cover;
   }


    /* =====================================================
       CONTENT
    ===================================================== */

    .fv-solar-flow-content {
        width: 100%;

        padding-left: 0;
        padding-right: 0;
    }

    .fv-solar-flow-items {
        gap: 10px;
    }


    /* =====================================================
       FLOW ITEMS
    ===================================================== */

    .fv-solar-flow-item {
        gap: 9px;
    }

    .fv-flow-icon {
        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        border-radius: 9px;

        font-size: 14px;
    }

    .fv-solar-flow-item h4 {
        font-size: 14px;

        line-height: 1.25;

        margin-bottom: 2px;
    }

    .fv-solar-flow-item p {
        font-size: 11.5px;

        line-height: 1.4;

        margin-bottom: 0;
    }


    /* =====================================================
       NOTE
    ===================================================== */

    .fv-solar-flow-note {
        margin-top: 12px;

        padding: 10px 11px;

        gap: 8px;

        border-left-width: 3px;
    }

    .fv-solar-flow-note > i {
        font-size: 17px;
    }

    .fv-solar-flow-note strong {
        font-size: 12.5px;

        line-height: 1.3;
    }

    .fv-solar-flow-note p {
        font-size: 10.5px;

        line-height: 1.4;
    }
    
  
}

/* =========================================================
   CATEGORY IMAGE GALLERY
========================================================= */

.offering-gallery-section {
    padding: 30px 0;
    background: #f7faf5;
}

.offering-gallery-description {
    max-width: 700px;
    margin: 0 auto;
    color: #666;
}


/* Gallery Card */

.offering-gallery-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: all 0.35s ease;
}

.offering-gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.13);
}


/* Image */

.offering-gallery-image {
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.offering-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.offering-gallery-card:hover .offering-gallery-image img {
    transform: scale(1.07);
}


/* Content */

.offering-gallery-content {
    padding: 22px;
}

.offering-gallery-content h4 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

.offering-gallery-content p {
    margin-bottom: 0;
    color: #666;
    line-height: 1.7;
}


/* Empty State */

.offering-gallery-empty {
    padding: 50px 20px;
    background: #fff;
    border-radius: 18px;
}

.offering-gallery-empty i {
    font-size: 45px;
    color: #72B42C;
    margin-bottom: 15px;
}

.offering-gallery-empty h4 {
    margin-bottom: 8px;
}

.offering-gallery-empty p {
    color: #777;
}


/* Tablet */

@media (max-width: 991.98px) {

    .offering-gallery-section {
        padding: 70px 0;
    }

    .offering-gallery-image {
        height: 230px;
    }

}


/* Mobile */

@media (max-width: 575.98px) {

    .offering-gallery-section {
        padding: 55px 0;
    }

    .offering-gallery-image {
        height: 220px;
    }

    .offering-gallery-content {
        padding: 18px;
    }

}

/* =====================================================
   GALLERY IMAGE POPUP
===================================================== */

.gallery-image-popup {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);

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

    padding: 30px;
}

/* Full original image */

.gallery-popup-image-full {
    max-width: 95%;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 6px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


/* Close button */

.gallery-popup-close {
    position: absolute;

    top: 20px;
    right: 30px;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

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

    color: #ffffff;

    font-size: 35px;
    line-height: 40px;

    cursor: pointer;

    z-index: 100000;

    transition: all 0.3s ease;
}

.gallery-popup-close:hover {
    background: #72B42C;
    transform: rotate(90deg);
}


/* Gallery images should look clickable */

.gallery-popup-image {
    cursor: pointer;

    transition: transform 0.3s ease;
}

.gallery-popup-image:hover {
    transform: scale(1.03);
}


/* Mobile */

@media (max-width: 575.98px) {

    .gallery-image-popup {
        padding: 15px;
    }

    .gallery-popup-image-full {
        max-width: 100%;
        max-height: 85vh;
    }

    .gallery-popup-close {
        top: 12px;
        right: 15px;

        width: 40px;
        height: 40px;

        font-size: 30px;
    }

}