@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Geist:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Prata&display=swap');

    /* =========================================================
   SPIRE AIRTECH FOOTER
   CLEAN WINTER DESIGN
========================================================= */

*{
    font-family: 'Geist', sans-serif;
}
.spire-footer {
    position: relative;
    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(55, 145, 210, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(55, 145, 210, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06182c 0%,
            #092b49 50%,
            #06182c 100%
        );
}


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

.spire-footer-container {
    position: relative;
    z-index: 10;

    max-width: 1320px;

    margin: 0 auto;

    padding: 30px 30px 30px;
}


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

.footer-grid {
    display: grid;

    grid-template-columns:
        1.45fr
        0.75fr
        1fr
        1.15fr;

    gap: 55px;
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo-link {
    display: inline-block;

    margin-bottom: 25px;
}

.footer-logo {
    display: block;

    width: auto;
    max-width: 180px;
    height: auto;
}


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

.footer-description {
    max-width: 390px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;
}

.footer-social a {
    width: 42px;
    height: 42px;

    display: flex;

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

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

    border-radius: 50%;

    color: #ffffff;

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

    text-decoration: none;

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

.footer-social a:hover {
    transform: translateY(-4px);

    color: #59c9ff;

    border-color: rgba(89, 201, 255, 0.7);

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


/* =========================================================
   HEADINGS
========================================================= */

.footer-links h4,
.footer-contact h4 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   LINK LIST
========================================================= */

.footer-links ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.footer-links li {
    margin: 0 0 14px;
}

.footer-links li:last-child {
    margin-bottom: 0;
}

.footer-links a {
    position: relative;

    display: inline-block;

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

    font-size: 14px;

    line-height: 1.5;

    text-decoration: none;

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

.footer-links a:hover {
    color: #59c9ff;

    transform: translateX(4px);
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact h4 {
    margin-bottom: 15px;
}

.footer-phone {
    display: inline-block;

    margin-bottom: 35px;

    color: #55c8ff;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.3;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-phone:hover {
    color: #ffffff;
}


/* =========================================================
   CONTACT BLOCK
========================================================= */

.contact-block {
    margin-bottom: 25px;
}

.contact-title {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 7px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}

.contact-title i {
    color: #55c8ff;

    font-size: 16px;
}

.contact-block p,
.contact-block a {
    display: block;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.6;

    text-decoration: none;
}

.contact-block a:hover {
    color: #55c8ff;
}


/* =========================================================
   BOTTOM FOOTER
========================================================= */

.footer-bottom {
    position: relative;

    z-index: 10;

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

.footer-bottom-container {
    max-width: 1320px;

    min-height: 72px;

    margin: 0 auto;

    padding: 20px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

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

    font-size: 13px;
}

.footer-legal {
    display: flex;

    align-items: center;

    gap: 25px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.48);

    font-size: 13px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #55c8ff;
}


/* =========================================================
   ❄️ SUBTLE SNOW PARTICLES
========================================================= */

.footer-snow {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;
}

.footer-snow span {
    position: absolute;

    top: -20px;

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

    font-size: 12px;

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.7);

    animation:
        footerSnowFall
        linear
        infinite;
}


/* Individual snow */

.footer-snow span:nth-child(1) {
    left: 7%;
    animation-duration: 12s;
    animation-delay: -2s;
}

.footer-snow span:nth-child(2) {
    left: 15%;
    font-size: 15px;
    animation-duration: 16s;
    animation-delay: -8s;
}

.footer-snow span:nth-child(3) {
    left: 25%;
    animation-duration: 13s;
    animation-delay: -4s;
}

.footer-snow span:nth-child(4) {
    left: 34%;
    font-size: 16px;
    animation-duration: 18s;
    animation-delay: -10s;
}

.footer-snow span:nth-child(5) {
    left: 46%;
    animation-duration: 14s;
    animation-delay: -6s;
}

.footer-snow span:nth-child(6) {
    left: 55%;
    font-size: 14px;
    animation-duration: 17s;
    animation-delay: -3s;
}

.footer-snow span:nth-child(7) {
    left: 64%;
    animation-duration: 12s;
    animation-delay: -9s;
}

.footer-snow span:nth-child(8) {
    left: 73%;
    font-size: 17px;
    animation-duration: 19s;
    animation-delay: -7s;
}

.footer-snow span:nth-child(9) {
    left: 81%;
    animation-duration: 13s;
    animation-delay: -4s;
}

.footer-snow span:nth-child(10) {
    left: 89%;
    font-size: 15px;
    animation-duration: 17s;
    animation-delay: -12s;
}

.footer-snow span:nth-child(11) {
    left: 93%;
    animation-duration: 14s;
    animation-delay: -5s;
}

.footer-snow span:nth-child(12) {
    left: 40%;
    font-size: 10px;
    animation-duration: 11s;
    animation-delay: -7s;
}


/* =========================================================
   SNOW FALL
========================================================= */

@keyframes footerSnowFall {

    0% {
        transform:
            translate3d(0, -30px, 0)
            rotate(0deg);

        opacity: 0;
    }

    15% {
        opacity: 0.6;
    }

    50% {
        transform:
            translate3d(25px, 45vh, 0)
            rotate(90deg);
    }

    100% {
        transform:
            translate3d(-20px, 105vh, 0)
            rotate(180deg);

        opacity: 0;
    }
}


/* =========================================================
   ❄️ SNOW ACCUMULATION
========================================================= */

.snow-corner {
    position: absolute;

    bottom: -8px;

    z-index: 6;

    width: 330px;

    height: 70px;

    pointer-events: none;

    opacity: 0.92;
}


/* LEFT SNOW */

.snow-left {
    left: -70px;

    background:
        radial-gradient(
            ellipse at 20% 100%,
            rgba(255,255,255,0.96) 0%,
            rgba(239,248,253,0.90) 28%,
            rgba(207,229,242,0.55) 48%,
            transparent 72%
        );

    transform: rotate(-2deg);
}


/* RIGHT SNOW */

.snow-right {
    right: -70px;

    background:
        radial-gradient(
            ellipse at 80% 100%,
            rgba(255,255,255,0.96) 0%,
            rgba(239,248,253,0.90) 28%,
            rgba(207,229,242,0.55) 48%,
            transparent 72%
        );

    transform: rotate(2deg);
}


/* =========================================================
   SMALL FROST DETAILS
========================================================= */

.snow-left::before,
.snow-right::before {
    content: "";

    position: absolute;

    bottom: 45px;

    width: 120px;

    height: 22px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,0.80),
            transparent 70%
        );

    filter: blur(2px);
}

.snow-left::before {
    left: 80px;
}

.snow-right::before {
    right: 80px;
}


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

@media (max-width: 1000px) {

    .footer-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 45px 40px;
    }

    .footer-company {
        grid-column: span 2;
    }

    .footer-description {
        max-width: 600px;
    }
}


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

@media (max-width: 700px) {

    .spire-footer-container {
        padding:
            60px
            22px
            55px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .footer-company {
        grid-column: auto;
    }

    .footer-description {
        max-width: 100%;
    }

    .footer-phone {
        font-size: 21px;
    }

    .footer-bottom-container {
        padding:
            22px;

        flex-direction: column;

        text-align: center;
    }

    .footer-legal {
        justify-content: center;

        flex-wrap: wrap;

        gap: 12px 20px;
    }

    .snow-corner {
        width: 240px;

        height: 55px;
    }

    .snow-left {
        left: -90px;
    }

    .snow-right {
        right: -90px;
    }
}


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

@media (max-width: 420px) {

    .spire-footer-container {
        padding:
            50px 18px 45px;
    }

    .footer-logo {
        max-width: 155px;
    }

    .footer-social a {
        width: 40px;
        height: 40px;
    }

    .footer-links h4,
    .footer-contact h4 {
        font-size: 16px;
    }

    .footer-description,
    .footer-links a,
    .contact-block p,
    .contact-block a {
        font-size: 13px;
    }
}




/* =========================================================
   SPIRE AIRTECH
   HEAVY WINTER SNOWFALL
========================================================= */

.spire-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(50, 150, 220, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(50, 150, 220, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #06182c 0%,
            #092b49 50%,
            #06182c 100%
        );
}


/* =========================================================
   HEAVY SNOW CONTAINER
========================================================= */

.heavy-snow {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   EVERY SNOW PARTICLE
========================================================= */

.heavy-snow span {
    position: absolute;

    top: -60px;

    left: 0;

    display: block;

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

    line-height: 1;

    user-select: none;

    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.85),
        0 0 10px rgba(190, 225, 255, 0.55);

    animation-name: heavySnowFall;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    will-change: transform;
}


/* =========================================================
   LARGE FLAKES
========================================================= */

.heavy-snow span:nth-child(1) {
    left: 2%;
    font-size: 22px;
    animation-duration: 8s;
    animation-delay: -3s;
}

.heavy-snow span:nth-child(2) {
    left: 8%;
    font-size: 20px;
    animation-duration: 6s;
    animation-delay: -5s;
}

.heavy-snow span:nth-child(3) {
    left: 14%;
    font-size: 28px;
    animation-duration: 11s;
    animation-delay: -8s;
}

.heavy-snow span:nth-child(4) {
    left: 21%;
    font-size: 25px;
    animation-duration: 7s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(5) {
    left: 28%;
    font-size: 20px;
    animation-duration: 9s;
    animation-delay: -6s;
}

.heavy-snow span:nth-child(6) {
    left: 36%;
    font-size: 20px;
    animation-duration: 5.5s;
    animation-delay: -4s;
}

.heavy-snow span:nth-child(7) {
    left: 43%;
    font-size: 25px;
    animation-duration: 12s;
    animation-delay: -9s;
}

.heavy-snow span:nth-child(8) {
    left: 51%;
    font-size: 24px;
    animation-duration: 7.5s;
    animation-delay: -3s;
}


/* =========================================================
   MEDIUM PARTICLES
========================================================= */

.heavy-snow span:nth-child(9) {
    left: 57%;
    font-size: 8px;
    animation-duration: 5s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(10) {
    left: 61%;
    font-size: 12px;
    animation-duration: 6.5s;
    animation-delay: -4s;
}

.heavy-snow span:nth-child(11) {
    left: 66%;
    font-size: 7px;
    animation-duration: 4.5s;
    animation-delay: -1s;
}

.heavy-snow span:nth-child(12) {
    left: 70%;
    font-size: 15px;
    animation-duration: 8s;
    animation-delay: -5s;
}

.heavy-snow span:nth-child(13) {
    left: 75%;
    font-size: 9px;
    animation-duration: 5.5s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(14) {
    left: 79%;
    font-size: 20px;
    animation-duration: 10s;
    animation-delay: -7s;
}

.heavy-snow span:nth-child(15) {
    left: 84%;
    font-size: 11px;
    animation-duration: 6s;
    animation-delay: -3s;
}

.heavy-snow span:nth-child(16) {
    left: 89%;
    font-size: 23px;
    animation-duration: 11s;
    animation-delay: -8s;
}


/* =========================================================
   EXTRA SNOW
========================================================= */

.heavy-snow span:nth-child(17) {
    left: 5%;
    font-size: 6px;
    animation-duration: 4s;
    animation-delay: -1s;
}

.heavy-snow span:nth-child(18) {
    left: 11%;
    font-size: 9px;
    animation-duration: 5s;
    animation-delay: -3s;
}

.heavy-snow span:nth-child(19) {
    left: 18%;
    font-size: 14px;
    animation-duration: 7s;
    animation-delay: -5s;
}

.heavy-snow span:nth-child(20) {
    left: 24%;
    font-size: 7px;
    animation-duration: 4.5s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(21) {
    left: 32%;
    font-size: 16px;
    animation-duration: 8s;
    animation-delay: -6s;
}

.heavy-snow span:nth-child(22) {
    left: 39%;
    font-size: 8px;
    animation-duration: 5s;
    animation-delay: -4s;
}

.heavy-snow span:nth-child(23) {
    left: 47%;
    font-size: 12px;
    animation-duration: 6s;
    animation-delay: -1s;
}

.heavy-snow span:nth-child(24) {
    left: 54%;
    font-size: 18px;
    animation-duration: 9s;
    animation-delay: -5s;
}

.heavy-snow span:nth-child(25) {
    left: 60%;
    font-size: 6px;
    animation-duration: 4s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(26) {
    left: 68%;
    font-size: 13px;
    animation-duration: 7s;
    animation-delay: -6s;
}

.heavy-snow span:nth-child(27) {
    left: 73%;
    font-size: 8px;
    animation-duration: 5s;
    animation-delay: -3s;
}

.heavy-snow span:nth-child(28) {
    left: 82%;
    font-size: 17px;
    animation-duration: 8s;
    animation-delay: -7s;
}

.heavy-snow span:nth-child(29) {
    left: 87%;
    font-size: 7px;
    animation-duration: 4.5s;
    animation-delay: -1s;
}

.heavy-snow span:nth-child(30) {
    left: 94%;
    font-size: 15px;
    animation-duration: 7s;
    animation-delay: -4s;
}


/* =========================================================
   EXTRA DENSE SNOW
========================================================= */

.heavy-snow span:nth-child(31) {
    left: 3%;
    font-size: 5px;
    animation-duration: 3.8s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(32) {
    left: 16%;
    font-size: 6px;
    animation-duration: 4.2s;
    animation-delay: -3s;
}

.heavy-snow span:nth-child(33) {
    left: 29%;
    font-size: 5px;
    animation-duration: 3.5s;
    animation-delay: -1s;
}

.heavy-snow span:nth-child(34) {
    left: 42%;
    font-size: 7px;
    animation-duration: 4.8s;
    animation-delay: -4s;
}

.heavy-snow span:nth-child(35) {
    left: 56%;
    font-size: 5px;
    animation-duration: 3.7s;
    animation-delay: -2s;
}

.heavy-snow span:nth-child(36) {
    left: 69%;
    font-size: 6px;
    animation-duration: 4.5s;
    animation-delay: -3s;
}

.heavy-snow span:nth-child(37) {
    left: 78%;
    font-size: 5px;
    animation-duration: 3.9s;
    animation-delay: -1s;
}

.heavy-snow span:nth-child(38) {
    left: 91%;
    font-size: 7px;
    animation-duration: 4.6s;
    animation-delay: -3s;
}


/* =========================================================
   SNOW ANIMATION
========================================================= */

@keyframes heavySnowFall {

    0% {
        transform:
            translate3d(
                0,
                -70px,
                0
            )
            rotate(0deg);

        opacity: 0;
    }

    8% {
        opacity: 0.9;
    }

    25% {
        transform:
            translate3d(
                35px,
                25vh,
                0
            )
            rotate(90deg);
    }

    50% {
        transform:
            translate3d(
                -25px,
                50vh,
                0
            )
            rotate(180deg);
    }

    75% {
        transform:
            translate3d(
                30px,
                75vh,
                0
            )
            rotate(270deg);
    }

    100% {
        transform:
            translate3d(
                -20px,
                110vh,
                0
            )
            rotate(360deg);

        opacity: 0.15;
    }
}


/* =========================================================
   SNOW BUILDUP — LEFT CORNER
========================================================= */

.snow-corner {
    position: absolute;

    bottom: -18px;

    width: 360px;
    height: 100px;

    z-index: 5;

    pointer-events: none;
}


/* LEFT */

.snow-left {
    left: -80px;

    background:
        radial-gradient(
            ellipse at 15% 100%,
            #ffffff 0%,
            rgba(255,255,255,0.95) 20%,
            rgba(239,248,253,0.88) 38%,
            rgba(214,234,245,0.55) 58%,
            transparent 75%
        );

    filter: blur(0.3px);

    transform: rotate(-3deg);
}


/* RIGHT */

.snow-right {
    right: -80px;

    background:
        radial-gradient(
            ellipse at 85% 100%,
            #ffffff 0%,
            rgba(255,255,255,0.95) 20%,
            rgba(239,248,253,0.88) 38%,
            rgba(214,234,245,0.55) 58%,
            transparent 75%
        );

    filter: blur(0.3px);

    transform: rotate(3deg);
}


/* =========================================================
   FROSTY EDGE
========================================================= */

.snow-left::after,
.snow-right::after {
    content: "";

    position: absolute;

    bottom: 35px;

    width: 170px;
    height: 25px;

    border-radius: 50%;

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

    filter: blur(8px);
}

.snow-left::after {
    left: 75px;
}

.snow-right::after {
    right: 75px;
}


/* =========================================================
   KEEP FOOTER CONTENT ABOVE SNOW
========================================================= */

.spire-footer-container,
.footer-bottom {
    position: relative;

    z-index: 10;
}


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

@media (max-width: 768px) {

    .heavy-snow span {
        text-shadow:
            0 0 4px rgba(255,255,255,0.8);
    }

    .snow-corner {
        width: 250px;
        height: 75px;
    }

    .snow-left {
        left: -100px;
    }

    .snow-right {
        right: -100px;
    }
}
/* =========================================
   HEAVY SNOW CONTAINER
========================================= */

.heavy-snow {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 3;
}


/* =========================================
   SNOW PARTICLE
========================================= */

.snow-particle {
    position: absolute;

    top: -50px;

    display: block;

    color: #ffffff;

    line-height: 1;

    font-family: Arial, sans-serif;

    user-select: none;

    white-space: nowrap;

    text-shadow:
        0 0 3px rgba(255,255,255,.9),
        0 0 8px rgba(190,225,255,.8),
        0 0 15px rgba(130,200,255,.45);

    animation-name: realisticSnow;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    will-change:
        transform,
        opacity;
}


/* =========================================
   SNOW FALL ANIMATION
========================================= */

@keyframes realisticSnow {

    0% {

        transform:
            translate3d(
                0,
                -60px,
                0
            )
            rotate(0deg);

        opacity: 0;
    }


    8% {

        opacity: 0.8;
    }


    20% {

        transform:
            translate3d(
                calc(var(--drift) * .25),
                20vh,
                0
            )
            rotate(calc(var(--rotation) * .25));
    }


    40% {

        transform:
            translate3d(
                calc(var(--drift) * -.35),
                40vh,
                0
            )
            rotate(calc(var(--rotation) * .5));
    }


    60% {

        transform:
            translate3d(
                calc(var(--drift) * .65),
                60vh,
                0
            )
            rotate(calc(var(--rotation) * .75));
    }


    80% {

        transform:
            translate3d(
                calc(var(--drift) * -.25),
                80vh,
                0
            )
            rotate(calc(var(--rotation) * .9));
    }


    100% {

        transform:
            translate3d(
                var(--drift),
                110vh,
                0
            )
            rotate(var(--rotation));

        opacity: 0;
    }
}


  .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }



      
@media (max-width: 991px) {
  .spire-about-image > img {
    min-height: 400px;
  }
  .spire-about-content {
    padding-right: 0;
  }
  .spire-philosophy-wrapper {
    margin-top: 25px;
  }
}

@media (max-width: 767px) {
  .spire-about-image > img {
    min-height: 350px;
  }
  .spire-feature-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 5px;
  }
  .spire-feature {
    gap: 5px;
  }
  .spire-feature-icon {
    width: 27px;
    height: 27px;
    font-size: 14px;
  }
  .spire-feature strong {
    font-size: 9px;
  }
  .spire-feature span {
    font-size: 7px;
  }
  .spire-philosophy-wrapper {
    padding: 22px 18px;
  }
  .spire-philosophy {
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .spire-feature-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .spire-feature {
    justify-content: flex-start;
    border-right: 0;
  }
  .spire-about-image > img {
    min-height: 330px;
  }
}



      @keyframes fall {
        0% {
          transform: translateY(-20px) translateX(0);
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        100% {
          transform: translateY(220px) translateX(25px);
          opacity: 0.1;
        }
      }

      .snowflake-1 {
        animation: fall 2.2s linear infinite;
      }
      .snowflake-2 {
        animation: fall 1.6s linear infinite;
        animation-delay: 0.4s;
      }
      .snowflake-3 {
        animation: fall 2.8s linear infinite;
        animation-delay: 0.8s;
      }
      .snowflake-4 {
        animation: fall 1.9s linear infinite;
        animation-delay: 0.2s;
      }
      .snowflake-5 {
        animation: fall 2.5s linear infinite;
        animation-delay: 1.1s;
      }
      .snowflake-6 {
        animation: fall 1.4s linear infinite;
        animation-delay: 0.6s;
      }

      /* Heat / Ember particle flicker animation */
      @keyframes ember-rise {
        0% {
          transform: translateY(0) scale(0.8);
          opacity: 0;
        }
        30% {
          opacity: 0.9;
        }
        100% {
          transform: translateY(-160px) scale(1.4) translateX(10px);
          opacity: 0;
        }
      }

      .ember-1 {
        animation: ember-rise 1.8s ease-in infinite;
      }
      .ember-2 {
        animation: ember-rise 1.2s ease-in infinite;
        animation-delay: 0.3s;
      }
      .ember-3 {
        animation: ember-rise 2.1s ease-in infinite;
        animation-delay: 0.7s;
      }
      .ember-4 {
        animation: ember-rise 1.5s ease-in infinite;
        animation-delay: 0.5s;
      }



      
  
      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      .animate-marquee {
        display: flex;
        width: max-content;
        animation: marquee 25s linear infinite;
      }

      .marquee-container:hover .animate-marquee {
        animation-play-state: paused;
      }
      .sticky-header {
            position: sticky;
            top: 0;
            z-index: 20;
        }


        

/* Yeh header ko screen ke top par sticky banayega */
.sticky-header {
    position: sticky;
    top: 74px;
    z-index: 50;
}







/* Exact Fincart Background Pattern */
.fincart-bg {
    position: relative;
    background-color: #fcfcfd;
    overflow: hidden;
}

.fincart-bg::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("images/download.avif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.01;
    /* image opacity */
    z-index: 0;
    pointer-events: none;
}

/* Keep all section content above the background */
.fincart-bg>* {
    position: relative;
    z-index: 1;
}

/* 3D Flip CSS Settings */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}








.why-choose-us-section {
    padding: 20px 20px;
    background-color: #ffffff;

}

.why-choose-container {
    max-width: 1440px;
    margin: 0 auto;
}

/* Header Styling */
.why-choose-header {
    text-align: center;
    margin-bottom: 70px;
}

.why-choose-header .sub-title {
    color: #2563eb;
    /* Primary Blue */
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.why-choose-header .main-title {
    color: #0f172a;
    /* Dark Navy text */
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
}

/* 2-Column Grid Layout */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    row-gap: 50px;
}

/* Single Item Styling */
.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-left: 20px;
    border-left: 2px solid #3b82f6;
    /* Left Vertical Blue Accent Border */
}

.feature-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #2563eb;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
}

.feature-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.feature-content p {
    font-size: 0.95rem;
    color: #64748b;
    /* Soft gray description text */
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .why-choose-header .main-title {
        font-size: 1.85rem;
    }
    
    .key-strengths{
        display:none;
    }
    
    .key-ss{
        display:none;
    }
}