.hero-section{

        position:relative;

        min-height:100vh;

        overflow:hidden;

        color:#fff;

    }

    .hero-bg{

        position:absolute;

        inset:0;

        background:url("../images/home/morning.webp") center center;

        background-size:cover;

        animation:zoomHero 35s linear infinite alternate;

    }

    .hero-overlay{

        position:absolute;

        inset:0;

        background:linear-gradient(

            rgba(0,40,90,.45),

            rgba(0,0,0,.45)

        );

    }

    .hero-navbar{

        position:relative;

        z-index:10;

        padding:20px 0;

    }

    .hero-content{

        position:relative;

        z-index:5;

        padding-top:120px;

    }

    .hero-title{

        font-size:56px;

        font-weight:800;

        line-height:1.1;

    }

    .hero-text{

        font-size:18px;

        opacity:.9;

        max-width:550px;

    }

    .hero-badge{

        display:inline-block;

        padding:6px 14px;

        border-radius:50px;

        background:rgba(255,255,255,.18);

        backdrop-filter:blur(12px);

        margin-bottom:18px;

    }

    .glass-panel{

        background:rgba(255,255,255,.18);

        backdrop-filter:blur(18px);

        border:1px solid rgba(255,255,255,.18);

        border-radius:24px;

        padding:30px;

        box-shadow:0 20px 60px rgba(0,0,0,.25);

    }

    .feature-item{

        display:flex;

        gap:18px;

        align-items:flex-start;

        margin-bottom:25px;

    }

    .feature-icon{

        width:58px;

        height:58px;

        border-radius:16px;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:28px;

    }

    .hero-wave{

        position:absolute;

        left:0;

        bottom:-2px;

        width:100%;

    }

    .hero-wave svg{

        width:100%;

    }

    @keyframes zoomHero{

        from{

            transform:scale(1);

        }

        to{

            transform:scale(1.08);

        }

    }

    #heroBackground{

        position:absolute;

        inset:0;

        overflow:hidden;

    }

    .hero-layer{

        position:absolute;

        inset:-4%;

        background-size:cover;

        background-position:center center;

        opacity:0;

        transition:

            opacity 3s ease,

            filter 3s ease;

    }

    .hero-layer.active{

        opacity:1;

        animation:

            heroZoom 45s linear infinite alternate;

    }

    @keyframes heroZoom{

        from{

            transform:

                scale(1)

                translate(0,0);

        }

        to{

            transform:

                scale(1.10)

                translate(-2%,-2%);

        }

    }

    .hero-light{

        position:absolute;

        width:900px;

        height:900px;

        right:-250px;

        top:-220px;

        border-radius:50%;

        background:

            radial-gradient(

                rgba(255,225,150,.40),

                transparent 70%

            );

        filter:blur(40px);

        animation:

            sunMove 18s ease-in-out infinite alternate;

    }

    @keyframes sunMove{

        from{

            transform:

                translateY(0)

                scale(1);

        }

        to{

            transform:

                translateY(30px)

                scale(1.18);

        }

    }

    .hero-cloud{

        position:absolute;

        inset:0;

        background:url("../images/cloud.png");

        background-repeat:repeat-x;

        background-size:900px auto;

        opacity:.15;

        animation:

            cloudMove 120s linear infinite;

    }

    @keyframes cloudMove{

        from{

            background-position:0 0;

        }

        to{

            background-position:900px 0;

        }

    }

    .hero-overlay{

        position:absolute;

        inset:0;

        background:

            linear-gradient(

                rgba(0,40,90,.28),

                rgba(0,0,0,.40)

            );

    }

    body.night-mode .hero-light{

        opacity:.10;

    }

    body.night-mode .hero-overlay{

        background:

            linear-gradient(

                rgba(5,20,60,.55),

                rgba(0,0,0,.60)

            );

    }

    .btn-primary{

        transition:.35s;

    }

    .btn-primary:hover{

        transform:

            translateY(-3px);

        box-shadow:

            0 18px 35px rgba(0,80,255,.30);

    }

    /* ==========================================
    FLOATING CARD
    ========================================== */

    .floating-card{

        animation:floatingCard 8s ease-in-out infinite;

    }

    @keyframes floatingCard{

        0%{

            transform:
                translateY(0)
                rotate(0deg);

        }

        25%{

            transform:
                translateY(-8px)
                rotate(.2deg);

        }

        50%{

            transform:
                translateY(-15px)
                rotate(0deg);

        }

        75%{

            transform:
                translateY(-8px)
                rotate(-.2deg);

        }

        100%{

            transform:
                translateY(0);

        }

    }

    .faq-contact{

        background:#fff;

        border-radius:30px;

        overflow:hidden;

        box-shadow:0 20px 50px rgba(15,23,42,.08);

        height:100%;

        display:flex;

        flex-direction:column;

    }

    .faq-image{

        text-align:center;

        padding:35px 20px 10px;

    }

    .faq-image img{

        width:100%;

        max-width:320px;

        height:auto;

        transition:.4s;

    }

    .faq-contact:hover .faq-image img{

        transform:translateY(-8px);

    }

    .faq-info{

        padding:30px;

        text-align:center;

    }

    .faq-contact-icon{

        width:80px;

        height:80px;

        margin:auto;

        margin-bottom:25px;

        border-radius:22px;

        display:flex;

        justify-content:center;

        align-items:center;

        background:linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

        color:white;

        font-size:36px;

        box-shadow:0 15px 35px rgba(37,99,235,.3);

    }

    .faq-info h4{

        font-weight:700;

        margin-bottom:15px;

    }

    .faq-info p{

        color:#64748b;

        line-height:1.8;

        margin-bottom:30px;

    }

    .faq-info .btn:hover{

        transform:translateY(-3px);

    }

    @media(max-width:991px){

    .faq-contact{

        margin-bottom:35px;

    }

    .faq-image img{

            max-width:240px;

        }

    }

    .floating-help-card{

        position:absolute;

        left:80px;

        bottom:45px;

        width:350px;

        padding:22px;

        border-radius:22px;

        background:rgb(255 245 4 / 47%);

        backdrop-filter:blur(18px);

        box-shadow:

            0 20px 45px rgba(15,23,42,.18);

        animation:

            floatCard 5s ease-in-out infinite;

        z-index:1;

    }

    .floating-icon{

        width:60px;

        height:60px;

        border-radius:18px;

        background:linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );

        display:flex;

        justify-content:center;

        align-items:center;

        color:#fff;

        font-size:30px;

        margin-bottom:15px;

    }

    .floating-help-card h5{

        font-weight:700;

        margin-bottom:10px;

        color:#1e293b;

    }

    .floating-help-card p{

        font-size:14px;

        color:#475569;

        line-height:1.7;

        margin-bottom:18px;

    }

    .floating-help-card .btn{

        width:100%;

        padding:10px 18px;

        font-weight:600;

    }

    .floating-help-card:hover{

        transform:translateY(-8px);

        transition:.3s;

    }

    @media(max-width:991px){

        .floating-help-card{

            position:relative;

            right:auto;
            left:auto;

            bottom:auto;

            width:100%;

            margin-top:25px;

        }

    }

    @keyframes floatCard{

        0%{

            transform:translateY(0);

        }

        50%{

            transform:translateY(-10px);

        }

        100%{

            transform:translateY(0);

        }

    }

    .why-section{

        background:#ffffff87;

        position:relative;

        overflow:hidden;

    }

    .section-badge{

        display:inline-block;

        padding:8px 18px;

        border-radius:50px;

        background:#eef5ff;

        color:#2563eb;

        font-size:.8rem;

        font-weight:600;

        letter-spacing:1px;

    }

    .section-title h2{

        margin-top:15px;

        font-weight:800;

        font-size:2.3rem;

    }

    .section-title p{

        max-width:650px;

        margin:auto;

        color:#6c757d;

    }

    .why-card{

        background:#fff;

        border-radius:24px;

        padding:35px;

        height:100%;

        transition:.35s;

        border:1px solid #edf2f7;

        box-shadow:

            0 10px 35px rgba(0,0,0,.04);

    }

    .why-card:hover{

        transform:translateY(-10px);

        box-shadow:

            0 20px 45px rgba(37,99,235,.12);

    }

    .why-icon{

        width:70px;

        height:70px;

        border-radius:18px;

        display:flex;

        justify-content:center;

        align-items:center;

        color:#fff;

        font-size:32px;

        margin-bottom:20px;

    }

    .why-card h5{

        font-weight:700;

    }

    .why-card p{

        color:#6c757d;

        margin-top:10px;

        line-height:1.8;

    }

    .why-section::before{

        content:"";

        position:absolute;

        width:420px;

        height:420px;

        background:#dbeafe;

        border-radius:50%;

        filter:blur(120px);

        top:-150px;

        right:-120px;

        opacity:.55;

    }

    .service-section{

        background:#f7fbff;

        position:relative;

        overflow:hidden;

    }

    .service-card{

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:28px;

        border-radius:24px;

        background:white;

        text-decoration:none;

        color:#222;

        transition:.35s;

        height:100%;

        border:1px solid #eef3f8;

        box-shadow:

        0 8px 30px rgba(0,0,0,.04);

    }

    .service-card:hover{

        transform:

        translateY(-8px);

        box-shadow:

        0 25px 55px rgba(0,0,0,.10);

        color:#222;

    }

    .service-icon{

        width:72px;

        height:72px;

        border-radius:22px;

        display:flex;

        justify-content:center;

        align-items:center;

        background:

        linear-gradient(

        135deg,

        #2563eb,

        #3b82f6

        );

        color:white;

        font-size:34px;

        margin-right:25px;

        transition:.35s;

    }

    .service-card:hover .service-icon{

        transform:

        rotate(-8deg)

        scale(1.08);

    }

    .service-card h4{

        font-weight:700;

        margin-bottom:8px;

    }

    .service-card p{

        margin-bottom:12px;

        color:#6b7280;

    }

    .service-meta{

        display:flex;

        gap:18px;

        font-size:14px;

        color:#64748b;

    }

    .service-arrow{

        width:56px;

        height:56px;

        display:flex;

        justify-content:center;

        align-items:center;

        border-radius:50%;

        background:#eff6ff;

        font-size:28px;

        transition:.35s;

    }

    .service-card:hover .service-arrow{

        transform:

        translateX(8px);

        background:#2563eb;

        color:white;

    }

    .service-section::before{

        content:"";

        position:absolute;

        width:450px;

        height:450px;

        border-radius:50%;

        background:#dbeafe;

        filter:blur(140px);

        left:-180px;

        bottom:-180px;

        opacity:.6;

    }

    .stats-section{

        padding:110px 0;

        background:#ffffffa8;

        position:relative;

        overflow:hidden;

    }

    .stat-card{

        background:white;

        padding:40px;

        border-radius:26px;

        text-align:center;

        border:1px solid #eef2f7;

        transition:.35s;

        box-shadow:

        0 15px 45px rgba(0,0,0,.05);

        height:100%;

    }

    .stat-card:hover{

        transform:

        translateY(-10px);

        box-shadow:

        0 25px 60px rgba(37,99,235,.14);

    }

    .stat-icon{

        width:82px;

        height:82px;

        margin:auto;

        border-radius:24px;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:38px;

        margin-bottom:25px;

        color:white;

    }

    .blue{

        background:#2563eb;

        }

        .green{

        background:#16a34a;

        }

        .orange{

        background:#ea580c;

        }

        .purple{

        background:#9333ea;

    }

    .stat-card h2{

        font-size:46px;

        font-weight:800;

        margin-bottom:12px;

    }

    .stat-card p{

        color:#64748b;

        font-size:15px;

        margin:0;

    }

    .stats-section::before{

        content:"";

        position:absolute;

        width:500px;

        height:500px;

        background:#dbeafe;

        border-radius:50%;

        filter:blur(160px);

        left:-250px;

        top:-200px;

        opacity:.55;

    }

    .faq-section{

        padding:120px 0;

        background:#f8fbff;

        position:relative;

    }

    .faq-contact{

        margin-top:40px;

        display:flex;

        gap:25px;

        background:white;

        border-radius:24px;

        padding:30px;

        box-shadow:0 20px 45px rgba(0,0,0,.05);

    }

    .faq-contact-icon{

        width:75px;

        height:75px;

        border-radius:22px;

        background:#2563eb;

        color:white;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:34px;

        flex-shrink:0;

    }

    .faq-box{

        background:white;

        border-radius:30px;

        overflow:hidden;

        box-shadow:0 25px 50px rgba(0,0,0,.06);

    }

    .faq-item{

        border-bottom:1px solid #edf2f7;

    }

    .faq-item button{

        width:100%;

        padding:28px 35px;

        border:none;

        background:white;

        display:flex;

        justify-content:space-between;

        align-items:center;

        font-size:18px;

        font-weight:600;

        cursor:pointer;

        transition:.3s;

    }

    .faq-item button:hover{

        background:#f8fbff;

    }

    .faq-item button i{

        transition:.35s;

        font-size:28px;

    }

    .faq-content{

        max-height:0;

        overflow:hidden;

        transition:.35s;

        padding:0 35px;

        color:#64748b;

        line-height:1.8;

    }

    .faq-item.active .faq-content{

        max-height:220px;

        padding:0 35px 30px;

    }

    .faq-item.active button i{

        transform:rotate(45deg);

    }

    .footer-modern{

        background:#0f172a;

        color:white;

        padding:

        90px 0 25px;

        position:relative;

        overflow:hidden;

    }

    .footer-modern::before{

        content:"";

        position:absolute;

        width:550px;

        height:550px;

        background:

        rgba(37,99,235,.18);

        filter:blur(170px);

        right:-250px;

        top:-250px;

        border-radius:50%;

    }

    .footer-modern h5{

        margin-bottom:25px;

        font-weight:700;

    }

    .footer-modern p{

        color:#cbd5e1;

        line-height:1.8;

    }

    .footer-modern ul{

        list-style:none;

        padding:0;

        margin:0;

    }

    .footer-modern li{

        margin-bottom:15px;

    }

    .footer-modern a{

        color:#cbd5e1;

        text-decoration:none;

        transition:.3s;

    }

    .footer-modern a:hover{

        color:white;

        padding-left:8px;

    }

    .footer-social{

        display:flex;

        gap:15px;

        margin-top:30px;

    }

    .footer-social a{

        width:48px;

        height:48px;

        border-radius:14px;

        display:flex;

        align-items:center;

        justify-content:center;

        background:rgba(255,255,255,.08);

        font-size:22px;

    }

    .footer-social a:hover{

        background:#2563eb;

        transform:translateY(-5px);

        padding-left:0;

    }

    .status-item{

        display:flex;

        align-items:center;

        gap:12px;

        margin-bottom:18px;

        color:#cbd5e1;

    }

    .status-dot{

        width:12px;

        height:12px;

        border-radius:50%;

        display:inline-block;

    }

    .online{

        background:#22c55e;

        animation:

        pulse 2s infinite;

    }

    @keyframes pulse{

        0%{

        box-shadow:

        0 0 0 0 rgba(34,197,94,.6);

        }

        100%{

        box-shadow:

        0 0 0 12px rgba(34,197,94,0);

        }

    }

    .footer-bottom{

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding-top:25px;

        color:#94a3b8;

        font-size:14px;

        flex-wrap:wrap;

        gap:15px;

    }

    .footer-modern hr{

        border-color:

        rgba(255,255,255,.08);

        margin:

        45px 0 25px;

    }

    @media(max-width:768px){

        .footer-bottom{

        text-align:center;

        justify-content:center;

        }

        .footer-modern{

        padding-top:70px;

        }

        .footer-social{

        justify-content:center;

        }

    }