/* ==========================================
   TRUSTED COMPANIES SECTION
========================================== */


.trusted-title{

    text-align:center;

    font-size:clamp(24px,3vw,38px);

    font-weight:700;

    margin-bottom:50px;
    margin-top:50px;


    background:

    linear-gradient(
        90deg,
        #032122,
        #60a5fa,
         #2a5758
       
    );


    background-size:200%;


    background-clip:text;
    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:

    titleGradient 6s linear infinite;


}



@keyframes titleGradient{

    from{

        background-position:0%;

    }

    to{

        background-position:200%;

    }

}





/* SLIDER */

.trusted-slider{

    overflow:hidden;

    width:100%;

    position:relative;


    mask-image:

    linear-gradient(
        90deg,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

}



.trusted-wrapper{


    display:flex;

    align-items:center;

    gap:30px;

    width:max-content;


    animation:

    logoSlide 25s linear infinite;
padding: 3rem;

}



.trusted-slider:hover .trusted-wrapper{

    animation-play-state:paused;

}





@keyframes logoSlide{


from{

    transform:translateX(0);

}


to{

    transform:translateX(-50%);

}


}





/* LOGO CARD */


.trusted-logo{


    width:190px;

    height:100px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:20px;


    border-radius:22px;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid rgba(255,255,255,.15);


    backdrop-filter:

    blur(18px);


    box-shadow:

    0 35px 70px rgba(56,189,248,.25);


    transition:

    transform .4s ease,
    box-shadow .4s ease;


}





.trusted-logo img{


    max-width:130px;

    max-height:55px;


    object-fit:contain;


   


   


    transition:.4s ease;


}





.trusted-logo:hover{


    transform:

    translateY(-12px)
    rotateX(8deg);


    box-shadow:

    0 35px 70px rgba(56,189,248,.25);


}





.trusted-logo:hover img{


    filter:none;


    opacity:1;


}


.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}



.section-badge {

    display: inline-flex;

    padding: 8px 18px;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: #fffffe;

    border: none;

    border-radius: 50px;

    font-weight: 600;

    margin-top: 20px;



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

    box-shadow:
        inset 0 1px 0 rgba(20, 94, 107, 0.63);



}



.about-content h2 {

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    line-height: 1.2;

    color: var(--primary-dark);

    margin-bottom: 25px;

}



.about-content p {

    color: var(--text-muted);

    line-height: 1.8;

    margin-bottom: 20px;

}



.about-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin: 35px 0;

}



.about-points div {

    background: #fff;

    padding: 15px;

    border-radius: 14px;

    box-shadow: var(--shadow-xs);

}



.about-points span {

    color: var(--success);

    margin-right: 8px;

    font-weight: 800;

}



.about-image {

    position: relative;

}



.about-image img {

    width: 100%;

    height: 600px;

    object-fit: cover;

    border-radius: 35px;

}



.experience-card {

    position: absolute;

    bottom: 40px;

    left: -40px;

    background: #fff;

    padding: 30px;

    border-radius: 25px;

    box-shadow: var(--shadow-md);

}



.experience-card h3 {

    font-size: 45px;

    color: var(--primary);

}



@media(max-width:992px) {


    .about-grid {

        grid-template-columns: 1fr;

    }



    .about-image img {

        height: 450px;

    }



    .experience-card {

        left: 20px;

    }


}


.statistics-section {

    padding: 90px 0;

    background:
        linear-gradient(135deg,
            #071A33,
            #143D7A);

}



.statistics-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}




.stat-card {

    text-align: center;

    padding: 40px 25px;

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

    backdrop-filter: blur(15px);

    border-radius: 25px;

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

    color: #fff;

    transition: .35s;

}



.stat-card:hover {

    transform: translateY(-10px);

}



.stat-icon {

    font-size: 40px;

    margin-bottom: 20px;

}



.stat-card h3 {

    font-size: 50px;

    color: #fff;

    margin-bottom: 10px;

}



.stat-card p {

    color: rgba(255, 255, 255, .75);

}





@media(max-width:992px) {


    .statistics-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}



@media(max-width:600px) {


    .statistics-grid {

        grid-template-columns: 1fr;

    }


}



.services-section {

    background: #F8FAFC;

}



.section-heading {

    max-width: 750px;

    margin: 0 auto 60px;

}



.section-heading h2 {

    font-size: clamp(2.3rem, 4vw, 3.5rem);

    color: var(--primary-dark);

    margin: 20px 0;

}



.section-heading p {

    color: var(--text-muted);

    line-height: 1.8;

}





.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.stats-section {

    padding: 120px 0;

    background: #fff;

    position: relative;

    overflow: hidden;

}

.stats-heading {

    text-align: center;

    margin-bottom: 70px;

}

.stats-heading span {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #EEF4FF;

    color: #0B5CFF;

    font-weight: 600;

}

.stats-heading h2 {

    margin-top: 18px;

    font-size: 52px;

    font-weight: 800;

    line-height: 1.1;

    color: #071A33;

}

.stats-minimal {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

}

.stat {

    text-align: center;

    padding: 20px;

}

.stat h3 {

    font-size: 72px;

    font-weight: 900;

    background:
        linear-gradient(135deg,
            #0B5CFF,
            #19C37D);

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1;

    margin-bottom: 14px;

}

.stat p {

    font-size: 16px;

    color: #777;

    letter-spacing: .5px;

}

.divider {

    width: 1px;

    height: 120px;

    background:
        linear-gradient(transparent,

            rgba(0, 0, 0, .15),

            transparent);

}


.service-card {

    background: #fff;

    padding: 40px 30px;

    border-radius: 25px;

    box-shadow: var(--shadow-xs);

    transition: .35s;

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

}





.service-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}




.service-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

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

    color: var(--primary);

}



.service-icon svg {

    width: 32px;

    height: 32px;

    stroke-width: 2;

}




.service-card h3 {

    color: var(--primary-dark);

    margin-bottom: 15px;

}





.service-card p {

    color: var(--text-muted);

    line-height: 1.7;

    margin-bottom: 25px;

}





.service-card a {
    font-weight: 300;
    text-decoration: none;

    /* Gradient background */
    background: linear-gradient(
        90deg,
        rgb(6, 70, 97),   /* Blue */
        rgba(11, 4, 161, 0.933), /* Yellow */
        rgb(185, 8, 52)      /* Green Sea */
    );

    /* Apply gradient to text */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* For Firefox */
    background-clip: text;
    color: transparent;
}




@media(max-width:992px) {


    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}



@media(max-width:600px) {


    .services-grid {

        grid-template-columns: 1fr;

    }


}


.process-section {

    background: #fff;

}



.process-wrapper {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 25px;

    position: relative;

}





.process-item {

    text-align: center;

    position: relative;

}





.process-number {

    font-size: 14px;

    font-weight: 800;

    color: var(--primary);

    margin-bottom: 20px;

}





.process-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

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

    color: var(--primary);

    margin-bottom: 25px;

}



.process-icon svg {

    width: 38px;

    height: 38px;

}





.process-item h3 {

    color: var(--primary-dark);

    margin-bottom: 15px;

}



.process-item p {

    color: var(--text-muted);

    line-height: 1.7;

    font-size: 15px;

}





@media(max-width:992px) {

    .process-wrapper {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media(max-width:600px) {

    .process-wrapper {

        grid-template-columns: 1fr;

    }

}


.courses-section {

    background: #F8FAFC;

}



.courses-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}





.course-card {

    background: #fff;

    padding: 35px 25px;

    border-radius: 25px;

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

    transition: .35s;

}





.course-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}





.course-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

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

    color: var(--primary);

    border-radius: 20px;

    margin-bottom: 25px;

}



.course-icon svg {

    width: 32px;

    height: 32px;

}





.course-card h3 {

    color: var(--primary-dark);

    margin-bottom: 15px;

}





.course-card p {

    color: var(--text-muted);

    line-height: 1.7;

    min-height: 80px;

}





.course-price {

    font-size: 30px;

    font-weight: 800;

    color: var(--primary);

    margin: 25px 0;

}





@media(max-width:1200px) {

    .courses-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media(max-width:600px) {

    .courses-grid {

        grid-template-columns: 1fr;

    }

}


.course-benefits {

    list-style: none;

    padding: 0;

    margin: 25px 0;

}



.course-benefits li {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: var(--text-muted);

    font-size: 14px;

}



.course-benefits svg {

    width: 18px;

    height: 18px;

    color: var(--primary);

    flex-shrink: 0;

}






/* ==========================================
   COURSES SECTION - PREMIUM RESPONSIVE
========================================== */


.courses-section {

    padding: 100px 0;

    position: relative;

    overflow: hidden;

}



.courses-grid {


    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 32px;

    align-items: stretch;


}



/* COURSE CARD */


.course-card {


    position: relative;

    display: flex;

    flex-direction: column;


    min-height: 420px;


    padding: 35px 30px;


    background:

        linear-gradient(145deg,
            rgba(255, 255, 255, .95),
            rgba(238, 244, 255, .75));


    border-radius: var(--radius-xl);


    border: 1px solid rgba(11, 92, 255, .12);


    box-shadow: var(--shadow-sm);


    transition:
        transform .35s ease,
        box-shadow .35s ease;


    overflow: hidden;


}




.course-card::before {


    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -70px;

    top: -70px;


    background:

        linear-gradient(135deg,
            rgba(11, 92, 255, .15),
            rgba(25, 195, 125, .12));


    border-radius: 50%;


    filter: blur(10px);


}



.course-card:hover {


    transform: translateY(-12px);


    box-shadow:

        0 30px 70px rgba(0, 0, 0, .15);


}




/* ICON */


.course-icon {


    width: 75px;

    height: 75px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 24px;


    background:

        linear-gradient(135deg,
            rgba(11, 92, 255, .12),
            rgba(25, 195, 125, .15));


    color: var(--primary);


    margin-bottom: 25px;


    flex-shrink: 0;


}




.course-icon svg {


    width: 35px;

    height: 35px;


}




/* TITLE */


.course-card h3 {


    font-size: 26px;

    font-weight: 800;


    color: var(--primary-dark);


    margin-bottom: 15px;


    line-height: 1.3;


}




/* DESCRIPTION */


.course-card p {


    color: #64748b;


    font-size: 16px;


    line-height: 1.8;


    margin-bottom: 25px;


}



/* BENEFITS */


.course-benefits {


    display: flex;

    flex-direction: column;

    gap: 12px;


    margin-bottom: 25px;


}



.course-benefits li {


    list-style: none;

    display: flex;

    align-items: center;

    gap: 10px;


    color: #475569;


    font-size: 15px;


}



/* DURATION */


.course-duration {


    margin-top: auto;


    display: flex;

    align-items: center;

    gap: 8px;


    color: var(--primary);


    font-weight: 700;


}



/* PRICE */


.course-price {


    margin-top: 15px;


    font-size: 28px;

    font-weight: 800;


    color: var(--primary-dark);


}




/* BUTTON */


.course-card a {


    margin-top: 20px;


    display: inline-flex;


    width: max-content;


    padding: 12px 24px;


    border-radius: 50px;


    background:

        linear-gradient(135deg,
            var(--primary),
            var(--accent));


    color: white;


    font-weight: 700;


    text-decoration: none;


    transition: .3s;


}



.course-card a:hover {


    transform: translateY(-3px);


}



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


@media(max-width:600px) {


    .courses-section {


        padding: 60px 0;


    }



    .courses-grid {


        grid-template-columns: 1fr;


        gap: 20px;


    }



    .course-card {


        min-height: auto;


        padding: 25px 20px;


        border-radius: 22px;


    }



    .course-icon {


        width: 60px;

        height: 60px;

        border-radius: 18px;


    }



    .course-card h3 {


        font-size: 22px;


    }



    .course-card p {


        font-size: 15px;


    }



    .course-price {


        font-size: 24px;


    }


}

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


@media(max-width:1100px) {


    .courses-grid {


        grid-template-columns:
            repeat(2, minmax(0, 1fr));


        gap: 25px;


    }


    .course-card {


        min-height: 400px;


        padding: 30px 25px;


    }


}





.cta-section {

    padding: 100px 0;

    background:
        linear-gradient(135deg,
            #071A33,
            #123B75);

}



.cta-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.cta-content h2 {

    color: #fff;

    font-size: clamp(2.5rem, 5vw, 4rem);

    line-height: 1.2;

    margin: 25px 0;

}



.cta-content p {

    color: rgba(255, 255, 255, .75);

    line-height: 1.8;

    max-width: 550px;

}





.cta-buttons {

    display: flex;

    gap: 20px;

    margin-top: 35px;

}





.cta-buttons .btn {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* =====================================
 CTA IMAGE STICKY - DESKTOP ONLY
===================================== */


@media(min-width:1200px){


.cta-image img{

    position:sticky;

    top:120px;

    height:max-content;

}



.cta-image img{

    position:sticky;

    z-index:2;


}



.image-glow{

    position:absolute;

    inset:-50px;

}



}   

@media(max-width:1199px){


.cta-image img{

    position:relative;

    top:auto;

}



}

/* =====================================
 ONLY IMAGE STICKY - DESKTOP ONLY
===================================== */


@media(min-width:1200px){


.cta-image img{


    position:sticky;


    top:120px;


    display:block;


}



}

@media(min-width:1200px){

.cta-image img{

    position:sticky;

    top:100px;

    height:620px;

    object-fit:cover;

}

}
/* ==========================================
GOOGLE RATING BADGE
========================================== */

.hero-rating {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 16px 24px;

    margin: 35px 0;

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

    backdrop-filter: blur(20px);

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

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(3, 49, 139, 0.849);

    animation:
        floating 4s ease-in-out infinite;

    transition: .45s;

}

.hero-rating:hover {

    transform:
        translateY(-8px) scale(1.03);

    box-shadow:
        0 30px 80px rgb(192, 1, 90)
}

.google-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);

}

.google-icon img {

    width: 34px;

}

.rating-stars {

    display: flex;

    gap: 4px;

    margin-bottom: 6px;

}

.rating-stars svg {

    width: 18px;

    height: 18px;

    fill: #FFC107;

    color: #FFC107;

    animation:
        starGlow 2s infinite;

}

.rating-text strong {

    display: block;

    font-size: 17px;

    font-weight: 700;

    color: #071A33;

}

.rating-text span {

    font-size: 14px;

    color: #666;

}



.cta-buttons svg {

    width: 20px;

}




.btn-outline {

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

    color: #fff;

    padding: 14px 28px;

    border-radius: 50px;

}





.cta-image img {

    width: 100%;

    height: 450px;

    object-fit: cover;

    border-radius: 30px;

}





@media(max-width:992px) {


    .cta-wrapper {

        grid-template-columns: 1fr;

    }



    .cta-image img {

        height: 350px;

    }



}



@media(max-width:600px) {


    .cta-buttons {

        flex-direction: column;

    }


}


.reveal {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        all .7s ease;

}



.reveal.active {

    opacity: 1;

    transform:
        translateY(0);

}


/* ===============================
Premium Animations
=============================== */

@keyframes heroFade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes slideLeft {

    from {

        opacity: 0;

        transform:

            translateX(-60px);

    }

    to {

        opacity: 1;

        transform:

            translateX(0);

    }

}



@keyframes floatImage {

    0% {

        transform:

            translateY(0);

    }

    50% {

        transform:

            translateY(-18px);

    }

    100% {

        transform:

            translateY(0);

    }

}



@keyframes blobOne {

    0% {

        transform:

            translate(0, 0) scale(1);

    }

    50% {

        transform:

            translate(70px, 40px) scale(1.12);

    }

    100% {

        transform:

            translate(0, 0) scale(1);

    }

}



@keyframes blobTwo {

    0% {

        transform:

            translate(0, 0);

    }

    50% {

        transform:

            translate(-60px, -40px);

    }

    100% {

        transform:

            translate(0, 0);

    }

}












html[data-theme="dark"] .stat {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.9),
            rgba(139, 92, 246, 0.8),
            rgba(3, 7, 18, 1));
}









/*==========================================
Hero Trust Badges
==========================================*/

.trust-badges {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 45px;

}

.trust-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 18px 22px;

    border-radius: 18px;

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

    backdrop-filter: blur(20px);

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

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .08);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    animation: badgeFloat 5s ease-in-out infinite;

}

.trust-item:hover {

    transform:
        translateY(-8px) scale(1.04);

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

}

.trust-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: linear-gradient(135deg, #0B5CFF, #19C37D);

    color: #fff;

    flex-shrink: 0;

}

.trust-icon svg {

    width: 28px;

    height: 28px;

}

.trust-content {

    display: flex;

    flex-direction: column;

}

.trust-content strong {

    font-size: 28px;

    font-weight: 800;

    line-height: 1;

    color: #071A33;

}

.trust-content span {

    margin-top: 6px;

    font-size: 14px;

    font-weight: 500;

    color: #6b7280;

}

@keyframes badgeFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}

.trust-item:nth-child(2) {

    animation-delay: .3s;

}

.trust-item:nth-child(3) {

    animation-delay: .6s;

}

.trust-item:nth-child(4) {

    animation-delay: .9s;

}

@media(max-width:992px) {

    .trust-badges {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:576px) {

    .trust-badges {

        grid-template-columns: 1fr;

    }

    .trust-item {

        padding: 16px;

    }

    .trust-content strong {

        font-size: 24px;

    }

}




/* ==========================================
   HERO SECTION MOBILE RESPONSIVE
   ONLY MOBILE + TABLET
========================================== */


/* Tablet */
@media (max-width:992px) {


    .hero-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .hero-content {

        text-align: center;

    }


    .section-label {

        font-size: 14px;

        padding: 8px 18px;

    }


  .premium-hero-content h1{

font-size:clamp(42px,5vw,72px);

line-height:1.05;

letter-spacing:-1.5px;

font-weight:700;

color:#fff;

}


    .hero-description {

        max-width: 650px;

        margin: 20px auto;

        font-size: 16px;
color:#ffffffab;
        line-height: 1.7;

    }



    .hero-rating {

        justify-content: center;

        margin-top: 25px;
        color:#fff;

    }



    .hero-actions {

        justify-content: center;

        gap: 15px;

        flex-wrap: wrap;


    }



    .hero-visual {

        margin-top: 20px;

    }

}





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

@media(max-width:768px) {


    .hero-grid {

        gap: 30px;

    }


    .hero-content {

        text-align: center;

    }


    .section-label {

        font-size: 12px;

        letter-spacing: .5px;

        padding: 7px 16px;

    }



    .hero-content h1 {


        font-size: 34px;

        line-height: 1.18;

        letter-spacing: -.5px;

    }



    .hero-content h1 span {

        display: inline;

    }



    .hero-description {


        font-size: 15px;

        line-height: 1.65;

        margin-top: 18px;

        padding: 0 5px;

    }





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


    @media(max-width:480px) {


        .hero-grid {

            gap: 25px;

        }



        .hero-content h1 {


            font-size: 30px;

            line-height: 1.2;

        }



        .hero-description {


            font-size: 14px;

        }



        .hero-rating {


            padding: 10px 12px;

            border-radius: 15px;

        }



        .google-icon img {

            width: 128px;

            height: 128px;

        }



        .rating-content strong {

            font-size: 13px;

        }



        .rating-content span {

            font-size: 11px;

        }



        .hero-actions a {

            font-size: 12px;

            padding: 13px;

        }



        .hero-trust {

            margin-top: 15px;

        }

    }



    /* =================================
   EXTRA SMALL DEVICES
================================= */

    @media(max-width:360px) {


        .hero-content h1 {

            font-size: 27px;

        }



        .hero-description {

            font-size: 13px;

        }



        .hero-rating {

            gap: 8px;

        }



        .rating-content strong {

            font-size: 12px;

        }



        .rating-content span {

            font-size: 10px;

        }

    }

    /* =================================
   GOOGLE RATING BADGE
================================= */

    .hero-rating {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 12px;

        margin: 22px auto 0;

        padding: 12px 18px;

        width: max-content;

        max-width: 100%;

        border-radius: 18px;

        background: white;

        backdrop-filter: blur(15px);

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

        box-sizing: border-box;

    }


    /* Google Logo Wrapper */

    .google-icon {

        width: 138px;

        height: 138px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

        overflow: hidden;

    }



    .google-icon img {

        width: 100%;

        height: 100%;
        min-height: 102px;




        display: block;

    }



    /* Rating Content */

    .rating-content {

        display: flex;

        flex-direction: column;

        justify-content: center;

    }



    .rating-stars {

        display: flex;

        gap: 3px;

    }



    .rating-stars svg {

        width: 15px;

        height: 15px;

    }



    .rating-content strong {

        font-size: 14px;

        line-height: 1.3;

    }



    .rating-content span {

        font-size: 12px;

        color: #6b7280;

    }





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

    @media(max-width:480px) {


        .hero-rating {

            width: 100%;

            max-width: 320px;

            padding: 10px 14px;

            gap: 10px;

            border-radius: 16px;

        }



        .google-icon {

            width: 32px;

            height: 32px;

        }



        .rating-content strong {

            font-size: 13px;

        }



        .rating-content span {

            font-size: 11px;

        }



        .rating-stars svg {

            width: 13px;

            height: 13px;

        }

    }



    /* Extra Small */

    @media(max-width:360px) {


        .hero-rating {

            max-width: 280px;

        }


        .google-icon {

            width: 28px;

            height: 28px;

        }


        .rating-content strong {

            font-size: 12px;

        }


    }

    @media(max-width:768px) {

        .hero-content h1 {

            font-size: 36px;

            line-height: 1.12;

            letter-spacing: -1px;

            font-weight: 800;

            max-width: 380px;

            margin-left: auto;

            margin-right: auto;

        }


        .hero-content h1 span {

            display: block;

            margin-top: 6px;

            background: linear-gradient(135deg,
                    #0B5CFF,
                    #19C37D);

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;

        }

    }

    .hero-content h1 {
        font-size: clamp(32px, 8vw, 42px);
    }



    /* ==========================================
   STATS SECTION MOBILE RESPONSIVE
========================================== */


    /* Tablet */
    @media (max-width: 992px) {


        .stats-heading {

            text-align: center;

            padding: 0 20px;

        }


        .stats-heading h2 {

            font-size: 36px;

            line-height: 1.2;

        }


        .stats-minimal {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 25px;

            width: 100%;

            margin-top: 35px;

        }


        .divider {

            display: none;

        }


        .stat {

            text-align: center;

            padding: 20px;

            width: 100%;

            box-sizing: border-box;

        }

    }



    /* Mobile */
    @media (max-width: 576px) {


        .stats-heading {

            width: 100%;

            padding: 0 15px;

        }


        .stats-heading span {

            font-size: 13px;

        }


        .stats-heading h2 {

            font-size: 28px;

            line-height: 1.25;

            letter-spacing: -.5px;

        }



        .stats-minimal {


            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 18px;

            width: 100%;

            margin-top: 30px;

        }


        .stat {


            width: 100%;

            max-width: 320px;

            padding: 22px 15px;

            text-align: center;

            border-radius: 18px;



            box-shadow:

                0 15px 40px rgba(0, 0, 0, .08);

            box-sizing: border-box;

        }



        .stat h3 {


            font-size: 38px;

            line-height: 1;

            margin-bottom: 8px;

        }



        .stat p {

            font-size: 14px;

            margin: 0;

        }



        .divider {

            display: none;

        }

    }



    /* Small phones */
    @media(max-width:360px) {


        .stats-heading h2 {

            font-size: 25px;

        }


        .stat {

            max-width: 280px;

            padding: 18px 12px;

        }


        .stat h3 {

            font-size: 34px;

        }


    }


    

    /* Google Rating */

    .hero-rating {


        display: flex;

        justify-content: center;

        align-items: center;

        gap: 112px;

        margin-top: 22px;

        padding: 12px 15px;

        border-radius: 18px;

        background: white;

        backdrop-filter: blur(15px);

        width: max-content;

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

    }



    .google-icon img {

        width: 32px;

        height: 32px;

    }



    .rating-stars {

        gap: 3px;

    }



    .rating-stars svg {

        width: 15px;

        height: 15px;

    }



    .rating-content strong {

        font-size: 14px;

    }



    .rating-content span {

        font-size: 12px;

    }



    /* Buttons */


    .hero-actions {


        flex-direction: column;

        width: 100%;

        gap: 12px;

        margin-top: 25px;

    }



    .hero-actions a {


        width: 100%;

        justify-content: center;

        text-align: center;

        padding: 14px 20px;

        border-radius: 14px;

    }



    /* Trust spacing */

    .hero-trust {

        margin-top: 25px;

    }


}
/* ==========================================================
   PREMIUM HERO FOUNDATION
========================================================== */

.premium-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

    background:#030712;

}



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

.hero-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}



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

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.90);

    animation:videoZoom 25s ease-in-out infinite alternate;

}


/* =========================
   GRADIENT
========================= */
.hero-gradient{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        transparent 45%,
        rgba(2,6,23,.65)
    );

}
/* =========================
   DARK OVERLAY
========================= */

.hero-overlay{

    position:absolute;

    inset:0;


    background:

    linear-gradient(

        90deg,

        rgba(3,7,18,.78),

        rgba(3,7,18,.35),

        rgba(3,7,18,.20)

    );

}
/* =========================
   NOISE
========================= */

.hero-noise{

    position:absolute;

    inset:0;

    opacity:.05;

    mix-blend-mode:soft-light;

    background-image:

    radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:4px 4px;

}



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

.premium-hero .container{

    position:relative;

    z-index:10;

}



.premium-hero-content{

    max-width:760px;

}



/* =========================
   AURORA PLACEHOLDER
========================= */

.hero-aurora{

    position:absolute;

    inset:-20%;

    pointer-events:none;

}



/* =========================
   GLOWS
========================= */
.glow-one{

    background:#64748b;

}


.glow-two{

    background:#38bdf8;

}

.hero-aurora{

    opacity:.25;

}
/* =========================
   SPOTLIGHT
========================= */

.hero-spotlight{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.6;

}



/* =========================
   PARTICLES WRAPPER
========================= */

.hero-particles span{

opacity:.35;

width:3px;

height:3px;

}
/* ==========================================================
   PREMIUM HERO AMBIENT EFFECTS
========================================================== */


/* =========================
   ANIMATED AURORA
========================= */

.hero-aurora{

    position:absolute;

    inset:-30%;

    background:

        radial-gradient(circle at 20% 30%,
        rgba(37,99,235,.22),
        transparent 35%),

        radial-gradient(circle at 80% 20%,
        rgba(14,165,233,.18),
        transparent 40%),

        radial-gradient(circle at 50% 85%,
        rgba(56,189,248,.18),
        transparent 45%);

    filter:blur(90px);

    animation:auroraMove 18s ease-in-out infinite alternate;




    opacity:.25;

}




@keyframes auroraMove{

    0%{

        transform:
        translate3d(-3%,0,0)
        scale(1);

    }

    50%{

        transform:
        translate3d(2%,-2%,0)
        scale(1.08);

    }

    100%{

        transform:
        translate3d(4%,3%,0)
        scale(1.15);

    }

}




/* =========================
   GLOW ANIMATION
========================= */

.hero-glow{

    animation:glowFloat 12s ease-in-out infinite alternate;

}



.glow-two{

    animation-delay:3s;

}



@keyframes glowFloat{

    from{

        transform:
        translateY(0)
        scale(1);

    }

    to{

        transform:
        translateY(-40px)
        scale(1.12);

    }

}





/* =========================
   MOUSE SPOTLIGHT
========================= */

.hero-spotlight{

    background:

    radial-gradient(

        320px circle at

        var(--mouse-x,50%)

        var(--mouse-y,50%),

        rgba(255,255,255,.10),

        transparent 70%

    );

    transition:

    background .12s linear;

}





/* =========================
   FLOATING PARTICLES
========================= */

.hero-particles span{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#60a5fa;

    opacity:.6;

    filter:drop-shadow(0 0 10px #38bdf8);

    animation:particleFloat linear infinite;

}



.hero-particles span:nth-child(1){

    left:8%;

    bottom:-30px;

    animation-duration:12s;

}



.hero-particles span:nth-child(2){

    left:25%;

    bottom:-40px;

    animation-duration:16s;

    animation-delay:2s;

}



.hero-particles span:nth-child(3){

    left:46%;

    bottom:-20px;

    animation-duration:14s;

    animation-delay:5s;

}



.hero-particles span:nth-child(4){

    left:68%;

    bottom:-35px;

    animation-duration:18s;

    animation-delay:3s;

}

.premium-hero-content{
    background:#071a333f;
     padding:30px 10px;
    border-radius:8px;
}

.hero-particles span:nth-child(5){

    left:84%;

    bottom:-25px;

    animation-duration:15s;

    animation-delay:6s;

}



.hero-particles span:nth-child(6){

    left:94%;

    bottom:-35px;

    animation-duration:20s;

    animation-delay:1s;

}



@keyframes particleFloat{

    0%{

        transform:
        translateY(0)
        scale(.6);

        opacity:0;

    }

    20%{

        opacity:.8;

    }

    80%{

        opacity:.35;

    }

    100%{

        transform:
        translateY(-110vh)
        scale(1.4);

        opacity:0;

    }

}





/* =========================
   VIDEO SUBTLE ZOOM
========================= */

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:1;

    transform:scale(1.04);


    filter:

    brightness(.92)
    contrast(1.12)
    saturate(.95);


    animation:

    videoZoom 30s ease-in-out infinite alternate;


    will-change:transform;

}



@keyframes videoZoom{

    from{

        transform:scale(1.04);

    }

    to{

        transform:scale(1.08);

    }

}

/* ==========================================
   PREMIUM BUTTON SHINE
========================================== */

.hero-btn{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}



.hero-btn::before{

    content:"";

    position:absolute;

    inset:0;

    left:-130%;

    background:

    linear-gradient(

        110deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:left .7s ease;

}



.hero-btn:hover{

    transform:translateY(-4px);

}



.hero-btn:hover::before{

    left:130%;

}

/* ==========================================
   TRUST CARDS
========================================== */

.hero-trust{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:40px;

}



.trust-item{

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

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

    backdrop-filter:blur(14px);

    border-radius:16px;

    padding:16px 22px;

}



.trust-item:hover{

    transform:

    translateY(-8px);

    border-color:

    rgba(96,165,250,.45);

    box-shadow:

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

}

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

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;

    text-align:center;

}



.mouse{

    width:32px;

    height:54px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:30px;

    margin:auto;

    position:relative;

}



.mouse span{

    position:absolute;

    left:50%;

    top:10px;

    width:4px;

    height:9px;

    background:#fff;

    border-radius:5px;

    transform:translateX(-50%);

    animation:scrollWheel 2s infinite;

}



@keyframes scrollWheel{

    0%{

        opacity:0;

        transform:

        translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

        translate(-50%,18px);

    }

}

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

@media(max-width:991px){




.hero-trust{

    justify-content:center;

}

}



@media(max-width:768px){

.premium-hero{

    min-height:100vh;

    text-align:center;

}

.hero-actions{

    justify-content:center;

    flex-wrap:wrap;

}



.hero-trust{

    flex-direction:column;

}

}


.hero-video{

    opacity:.100;

}

.hero-video{

filter:
brightness(.82)
contrast(1.12)
saturate(.92);

}
.hero-video{

filter:
brightness(.82)
contrast(1.12)
saturate(.92);

}

@keyframes videoZoom{

from{
transform:scale(1.04);
}

to{
transform:scale(1.08);
}

}

.premium-hero{
min-height:100vh;
}


@media(max-width:768px){

.premium-hero{

min-height:90vh

}

}
.premium-hero-content h1{

   font-size:clamp(34px,3.6vw,52px);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-2.5px;


    background:

    linear-gradient(

        100deg,

        hsl(258, 87%, 50%),

        #dbeafe,

        #017e73,

        #f8dc5f,

        #d80291

    );


    background-size:300% auto;


    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:

    headingGradient 10s linear infinite;


    filter:

    drop-shadow(
    0 15px 35px rgba(0,0,0,.45)
    );

}



@keyframes headingGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:300% center;

    }

}

.gradient-word{

background:

linear-gradient(
90deg,
#60a5fa,
#ffffff,
#38bdf8
);


background-size:200%;


background-clip: text;

-webkit-background-clip: text;

-webkit-text-fill-color:transparent;


animation:

headingGradient 6s linear infinite;

}


.hero-glow{

    opacity:.05;

}

.hero-video{

filter:

brightness(.90)
contrast(1.08)
saturate(.90);

}

.premium-hero-content h1{

    font-size:clamp(36px,4vw,58px);

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.8px;

}


.typing-gradient{

background:

linear-gradient(
90deg,
#38bdf8,
#fff173,
#008156
);


background-size:200%;


-webkit-background-clip: text;

-webkit-text-fill-color:transparent;


animation:

textGradient 5s linear infinite;


font-weight:600;

}



@keyframes textGradient{

0%{

background-position:0%;

}


100%{

background-position:200%;

}

}


.hero-description{
    color:white;
}


/* ==========================================
   PREMIUM HERO BUTTONS
========================================== */

.hero-actions{

    display:flex;

    gap:20px;

    margin-top:38px;

}



.hero-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:8px 22px;

    border-radius:50px;

    font-size:15px;

    font-weight:500;

    text-decoration:none;

    overflow:hidden;

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;


    isolation:isolate;

}



.hero-btn span,
.hero-btn i{

    position:relative;

    z-index:2;

}



.hero-btn i{

    transition:.35s ease;

}





/* =========================
PRIMARY BUTTON
========================= */


.primary-btn{

    color:#fff;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );


    box-shadow:

    0 15px 40px rgba(37,99,235,.35);

}



.primary-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );


    transform:translateX(-120%);

    transition:.8s ease;

}



.primary-btn:hover::before{

    transform:translateX(120%);

}



.primary-btn:hover{

    transform:

    translateY(-5px);

    box-shadow:

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

}



.primary-btn:hover i{

    transform:translateX(5px);

}





/* =========================
GLASS BUTTON
========================= */


.glass-btn{

    color:#fff;


    background:

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


    border:

    1px solid rgba(255,255,255,.25);


    backdrop-filter:

    blur(15px);

}



.glass-btn:hover{

    transform:

    translateY(-5px);


    background:

    rgba(255,255,255,.14);


    border-color:

    rgba(255,255,255,.45);


    box-shadow:

    0 20px 50px rgba(255,255,255,.12);

}



.glass-btn:hover i{

    transform:

    rotate(8deg)
    scale(1.1);

}





/* =========================
BUTTON FLOAT ANIMATION
========================= */


.hero-actions{

    animation:

    buttonsReveal 1s 
    cubic-bezier(.16,1,.3,1)
    .8s both;

}



@keyframes buttonsReveal{


from{

    opacity:0;

    transform:

    translateY(25px);

}


to{

    opacity:1;

    transform:none;

}


}



/* ==========================================
   PREMIUM HERO TAG
========================================== */

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;


    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#e0f2fe;


    background:

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


    border:

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


    backdrop-filter:

    blur(15px);


    position:relative;

    overflow:hidden;


    box-shadow:

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


    animation:

    tagFloat 5s ease-in-out infinite;

}



/* Small glowing dot */

.hero-tag::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;


    background:#38bdf8;


    box-shadow:

    0 0 15px #38bdf8;


    animation:

    pulseDot 2s infinite;

}




.hero-tag::after{

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );


    transform:translateX(-120%);

    animation:

    tagShine 5s infinite;

}





@keyframes tagShine{


0%,60%{

transform:translateX(-120%);

}


100%{

transform:translateX(120%);

}


}





@keyframes pulseDot{


0%,100%{

opacity:.5;

transform:scale(1);

}


50%{

opacity:1;

transform:scale(1.5);

}


}





@keyframes tagFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-4px);

}


}


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

.scroll-indicator{

    color:#ffffff;

    text-align:center;

    opacity:.9;

}



.mouse{

    width:34px;

    height:58px;

    border-radius:30px;

    border:2px solid transparent;


    background:

    linear-gradient(#050b18,#050b18) padding-box,

    linear-gradient(
        180deg,
        #facc15,
        #22c55e
    ) border-box;


    position:relative;

    margin:auto;


    box-shadow:

    0 0 25px rgba(250,204,21,.25),

    0 0 35px rgba(34,197,94,.25);


    animation:

    mouseFloat 3s ease-in-out infinite;

}




.mouse span{

    position:absolute;

    top:12px;

    left:50%;


    width:6px;

    height:12px;


    border-radius:20px;


    transform:translateX(-50%);


    background:

    linear-gradient(
        180deg,
        #facc15,
        #22c55e
    );


    box-shadow:

    0 0 15px #22c55e;


    animation:

    scrollMove 2s infinite;

}




.scroll-indicator small{

    display:block;

    margin-top:14px;


    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;


    font-weight:600;


    background:

    linear-gradient(
        90deg,
        #facc15,
        #22c55e
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:

    textGlow 4s linear infinite;

}





@keyframes scrollMove{

    0%{

        opacity:0;

        transform:

        translate(-50%,0);

    }


    40%{

        opacity:1;

    }


    100%{

        opacity:0;

        transform:

        translate(-50%,22px);

    }

}





@keyframes mouseFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-6px);

}


}





@keyframes textGlow{

0%{

filter:
drop-shadow(0 0 0 transparent);

}


50%{

filter:
drop-shadow(0 0 10px rgba(34,197,94,.5));

}


100%{

filter:
drop-shadow(0 0 0 transparent);

}

}


/* ==========================================
   MOBILE HERO CLEAN VIDEO LAYOUT
   320px - 768px
========================================== */

@media(max-width:768px){


.premium-hero{

    display:flex;

    flex-direction:column;

    min-height:auto;

}


/* VIDEO TOP */

.hero-video{

    position:relative;

    width:100%;

    height:280px;

    object-fit:cover;


    filter:none !important;

    opacity:1 !important;

    transform:none;

    animation:none;

}



/* Remove video effects */

.hero-overlay,
.hero-gradient,
.hero-glow,
.aurora{

    display:none !important;

}



/* CONTENT BELOW */

.premium-hero .container{

    padding-top:35px;

}



.premium-hero-content{

    text-align:center;

}



.hero-tag{

    margin:auto;

}



.premium-hero-content h1{

    font-size:34px;

    line-height:1.12;

    letter-spacing:-1px;

}



.premium-hero-content p{

    font-size:15px;

    line-height:1.6;

}



/* BUTTONS SIDE BY SIDE */

.hero-actions{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:12px;

}






/* Hide scroll on mobile */

.scroll-indicator{

    display:none;

}


}



/* SMALL MOBILE */

@media(max-width:480px){


.hero-video{

    height:230px;

}



.hero-actions{

    gap:8px;

}






.premium-hero-content h1{

    font-size:30px;

}


}

/* DEFAULT CLEAN VIDEO */

.hero-video{

    filter:none;

    transition:filter .8s ease,
               transform .8s ease;

}



/* AFTER SCROLL DESKTOP ONLY */

@media(min-width:769px){

    .premium-hero.scrolled .hero-video{

        filter:

        brightness(.65)
        contrast(1.12)
        saturate(.85);

    }


    .premium-hero.scrolled .hero-overlay{

        opacity:.35;

    }

}

/* REMOVE ALL BLUE HERO FILTERS */

.premium-hero .hero-video{

    filter:none !important;

}


.premium-hero .hero-overlay{

    background:rgba(0,0,0,0.18) !important;

}


.premium-hero .hero-gradient{

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,0),
        rgba(0,0,0,.25)
    ) !important;

}


.premium-hero .hero-glow{

    display:none !important;

}

.hero-video{

filter:none !important;

mix-blend-mode:normal !important;

opacity:1 !important;

}

/* ==========================================
   CINEMATIC HERO BLACK OVERLAY 20%
========================================== */


/* VIDEO CLEAN */

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:none !important;

    opacity:1;

    z-index:1;

}



/* BLACK CINEMATIC LAYER */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    rgba(0,0,0,0.20);

    z-index:2;

    pointer-events:none;

}



/* EXTRA GRADIENT DEPTH */

.hero-gradient{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.20)
    );

    z-index:3;

    pointer-events:none;

}



/* REMOVE BLUE EFFECTS */

.hero-glow{

    opacity:0 !important;

    display:none;

}



/* CONTENT ABOVE EVERYTHING */

.premium-hero-content{

    position:relative;

    z-index:5;

}



.hero-actions,
.hero-tag,
.hero-trust{

    position:relative;

    z-index:5;

}



/* MOBILE CLEAN VIDEO */

@media(max-width:768px){


.hero-video{

    filter:none !important;

}


.hero-overlay{

    background:

    rgba(0,0,0,0.10);

}


.hero-gradient{

    display:none;

}


.hero-glow{

    display:none !important;

}


}

/* ==========================================
   MOBILE HERO FIX
   VIDEO TOP + CONTENT BELOW
========================================== */

@media(max-width:768px){


.premium-hero{

    display:flex;

    flex-direction:column;

    min-height:auto;

    overflow:hidden;

}



/* VIDEO SECTION */

.hero-video{

    position:relative !important;

    width:100%;

    height:420px;
min-height: 310px;

    object-fit:cover;


    object-position:center center;


    filter:none !important;


    transform:none !important;

}



/* remove desktop layers */

.hero-overlay,
.hero-gradient,
.hero-glow{

    display:none !important;

}



/* CONTENT BELOW VIDEO */

.premium-hero .container{

    position:relative;

    width:100%;

    padding:35px 20px 50px;


    order:2;

}



.premium-hero-content{

    text-align:center;

    transform:none !important;
    margin-top:90px;

}





/* TAG */

.hero-tag{

    margin:auto;

}



/* HEADING */

.premium-hero-content h1{

    font-size:28px;

    line-height:1.15;

    letter-spacing:-1px;

    margin-top:20px;

}



/* PARAGRAPH */

.premium-hero-content p{

    font-size:13px;

    line-height:1.7;

    margin:18px auto;

    max-width:400px;

}



/* BUTTONS SIDE BY SIDE */

.hero-actions{

    display:flex;

    flex-direction:row;

    justify-content:center;

    gap:10px;

}






/* TRUST */

.hero-trust{

    justify-content:center;

    flex-wrap:wrap;

}



}



/* SMALL PHONES */

@media(max-width:480px){


.hero-video{

    height:320px;

    object-position:center center;

}



.premium-hero .container{

    padding:30px 16px 40px;

}



.premium-hero-content h1{

    font-size:29px;

}



.hero-actions{

    gap:8px;

}



}




.hero-btn{

  

    max-width:170px;
    font-size:12px;
    

}
.hero-btn:hover{
    color:white;
}

/* ==========================================
PART 3
CTA + RESPONSIVE + FINAL POLISH
========================================== */


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


.final-cta{

    position:relative;

    overflow:hidden;

    text-align:center;

}



.cta-atmosphere{


    position:absolute;


    inset:0;


    background:


    radial-gradient(

        circle at center,

        rgba(11,92,255,.35),

        transparent 60%

    );


    filter:blur(80px);


}




.cta-content{


    position:relative;


    z-index:5;


    max-width:900px;


    margin:auto;


}



.cta-content span{


    display:block;


    color:#19C37D;


    letter-spacing:6px;


    font-size:14px;


    text-transform:uppercase;


}



.cta-content h2{


    margin:35px 0;


    font-size:


    clamp(
        45px,
        7vw,
        100px
    );


    line-height:1.05;


    letter-spacing:-4px;


}



.cta-content p{


    max-width:600px;


    margin:auto;


    font-size:20px;


    line-height:1.7;


    color:#A1A1AA;


}



.cta-button{


    display:inline-flex;


    margin-top:45px;


    padding:

    18px 45px;


    border-radius:50px;


    background:white;


    color:#071A33;


    text-decoration:none;


    font-weight:700;


    transition:.4s;


}



.cta-button:hover{


    transform:

    translateY(-8px);


}







/* ==========================================
GLOBE MOTION POLISH
========================================== */


.globe-container{


    will-change:transform;


}



.globe{


    transform-style:preserve-3d;


}



.globe::before{


    content:"";


    position:absolute;


    inset:0;


    border-radius:50%;


    background:


    radial-gradient(

        circle at 30% 20%,

        rgba(255,255,255,.35),

        transparent 30%

    );


    z-index:3;


}




.globe-node{


    animation:

    floatingNode 4s ease-in-out infinite;


}



@keyframes floatingNode{


    0%,
    100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }


}





.travel-pulse{


    position:absolute;


    width:15px;


    height:15px;


    border-radius:50%;


    background:#19C37D;


    box-shadow:

    0 0 40px #19C37D;


}






/* ==========================================
LARGE DESKTOP
========================================== */


@media(min-width:1440px){



.global-vision-wrapper{


    padding-left:8%;

    padding-right:8%;


}



.globe-container{


    width:560px;

    height:560px;


}



}



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


@media(max-width:1100px){



.global-vision-wrapper{


    grid-template-columns:1fr;


    display:flex;


    flex-direction:column;


    text-align:center;


    gap:60px;


}



.global-copy{


    order:1;


    text-align:center;


}



.globe-container{


    order:2;


    width:420px;


    height:420px;


}



.global-metrics{


    order:3;


    width:100%;


    max-width:700px;


    grid-template-columns:repeat(3,1fr);


    margin:0 auto;


}



.baw-intelligence-interface{


    gap:20px;


}



.intel-card{


    width:300px;


}



}






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


@media(max-width:768px){



.baw-living-story{


    overflow:hidden;


}



.story-chapter{


    padding:

    70px 20px;


}



.hero-story-title{


    font-size:42px;


}



.arrival-content p{


    font-size:16px;


}





/* VIDEO */


.baw-ivs-animation-studio-video{


    width:100%;


    height:450px;


    border-radius:25px;


}



.baw-ivs-animation-studio-overlay h2{


    font-size:42px;


}



.baw-ivs-animation-studio-overlay p{


    font-size:16px;


}





/* CARDS */


.baw-intelligence-interface{


    flex-direction:column;


    width:100%;


}



.intel-card{


    width:100%;


    min-height:auto;


    padding:35px;


}





/* GLOBAL */


.global-vision-wrapper{


    padding:

    70px 20px;


    gap:45px;


}



.global-copy h4{


    font-size:38px;


}



.global-copy p{


    font-size:16px;


}





.globe-container{


    width:300px;


    height:300px;


}





.flag{


    font-size:18px;


    padding:6px 9px;


    top:-35px;


}





.uk-node{

    left:30%;

}



.singapore-node{

    right:22%;

}



.thailand-node{

    right:15%;

}





.global-metrics{


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:15px;


    width:100%;


}



.metric-card{


    width:100%;


    max-width:320px;


}



.metric-card h3{


    font-size:38px;


}





/* CTA */


.cta-content h2{


    letter-spacing:-2px;


}



.cta-content p{


    font-size:16px;


}



}






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


@media(max-width:420px){



.hero-story-title{


    font-size:34px;


}



.glass-panel h3{


    font-size:32px;


}



.globe-container{


    width:250px;

    height:250px;


}



.global-copy h4{


    font-size:30px;


}



.story-label,
.global-label{


    font-size:11px;


    letter-spacing:3px;


}



}

/* .india{

left:32%;

bottom:8%;


animation-delay:2.5s;

} */

 /* ===================================================
   PREMIUM CTA ATMOSPHERE
   DAY + NIGHT THEME
=================================================== */


.cta-section{

    position:relative;
    overflow:hidden;

    padding:120px 50px;

    border-radius:40px;

}



/* ================= DAY MODE ================= */


html[data-theme="light"] .cta-section,
body:not(.dark-mode) .cta-section{


    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(11,92,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 30%,
        rgba(25,195,125,.15),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #ffffff,
        #f8fafc
    );


    box-shadow:

    0 40px 100px rgba(0,0,0,.12);


}




html[data-theme="light"] .cta-atmosphere,
body:not(.dark-mode) .cta-atmosphere{


    position:absolute;

    inset:0;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(11,92,255,.08),
        transparent
    );


    filter:blur(60px);


}





/* TEXT */


html[data-theme="light"] .cta-content span,
body:not(.dark-mode) .cta-content span{


    color:#0B5CFF;


    font-weight:700;


    letter-spacing:.18em;


}



html[data-theme="light"] .cta-content h2,
body:not(.dark-mode) .cta-content h2{


    background:

    linear-gradient(
        135deg,
        #000000,
        #0B5CFF,
        #19C37D
    );


    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;


}



html[data-theme="light"] .cta-content p,
body:not(.dark-mode) .cta-content p{


    color:#6b7280;


}




/* BUTTON DAY */


html[data-theme="light"] .cta-button,
body:not(.dark-mode) .cta-button{


    background:

    linear-gradient(
        135deg,
        #000,
        #0B5CFF
    );


    color:white;


    box-shadow:

    0 20px 40px rgba(11,92,255,.25);


}








/* ================= NIGHT MODE ================= */


html[data-theme="dark"] .cta-section{


    background:


    radial-gradient(
        circle at 20% 10%,
        rgba(11,92,255,.25),
        transparent 35%
    ),


    radial-gradient(
        circle at 80% 70%,
        rgba(25,195,125,.18),
        transparent 35%
    ),


    linear-gradient(
        135deg,
        #020617,
        #000000
    );



    box-shadow:


    0 40px 120px rgba(0,0,0,.7);



}






html[data-theme="dark"] .cta-atmosphere{


    position:absolute;

    inset:0;


    background:


    radial-gradient(
        circle,
        rgba(11,92,255,.25),
        transparent 60%
    );


    filter:blur(80px);


}








/* NIGHT TEXT */


html[data-theme="dark"] .cta-content span{


    color:#19C37D;


}





html[data-theme="dark"] .cta-content h2{


    background:


    linear-gradient(
        135deg,
        #ffffff,
        #8ab4ff,
        #19C37D
    );


    -webkit-background-clip:text;

    background-clip:text;


    color:transparent;


    text-shadow:

    0 10px 40px rgba(11,92,255,.35);


}





html[data-theme="dark"] .cta-content p{


    color:#a8b3c7;


}







/* BUTTON NIGHT */


html[data-theme="dark"] .cta-button{


    background:


    linear-gradient(
        135deg,
        #0B5CFF,
        #19C37D
    );


    color:#fff;


    box-shadow:


    0 20px 60px rgba(11,92,255,.45);


}







/* COMMON BUTTON */


.cta-button{


    display:inline-flex;

    align-items:center;

    gap:10px;


    padding:18px 38px;


    border-radius:100px;


    font-weight:700;


    text-decoration:none;


    transition:.4s;


}



.cta-button:hover{


    transform:

    translateY(-6px);


    box-shadow:

    0 30px 70px rgba(11,92,255,.45);


}







/* CONTENT */


.cta-content{


    position:relative;

    z-index:2;


    max-width:850px;


}




.cta-content h2{


    font-size:

    clamp(42px,6vw,80px);


    line-height:1.05;


    margin:25px 0;


}




.cta-content p{


    font-size:20px;


    line-height:1.8;


}

/* =====================================
BUSINESS SOLUTION SECTION
===================================== */


.cta-wrapper{


display:grid;


grid-template-columns:

1.1fr .9fr;


gap:80px;


align-items:center;


}






/* Heading */


.cta-content h2{


font-size:

clamp(42px,5vw,72px);


line-height:1.05;


font-weight:800;


}



.cta-content h2 span{


background:

linear-gradient(

135deg,

#7f1d4f,

#9333ea,

#19c37d

);


-webkit-background-clip:text;

color:transparent;


}





.cta-content strong{


color:#9333ea;


}







/* Points */


.solution-points{


margin:45px 0;


display:flex;


flex-direction:column;


gap:22px;


}




.solution-item{


display:flex;


gap:18px;


align-items:flex-start;


padding:20px;


border-radius:22px;


background:

rgba(255,255,255,.7);


border:

1px solid rgba(0,0,0,.08);


transition:.4s;


}



.solution-item:hover{


transform:

translateX(10px);


box-shadow:

0 20px 50px rgba(0,0,0,.1);


}



.solution-item svg{


width:28px;

height:28px;


padding:8px;


border-radius:12px;


background:

linear-gradient(
135deg,
#9333ea,
#19c37d
);


color:white;


}




.solution-item h4{


margin:0 0 5px;


}



.solution-item p{


margin:0;


color:#6b7280;


}









/* IMAGE */


.cta-image{


position:relative;


}




.cta-image img{


width:100%;


height:620px;


object-fit:cover;


border-radius:40px;


position:relative;


z-index:2;


box-shadow:


0 40px 100px rgba(147,51,234,.35);


}





.image-glow{


position:absolute;


inset:-40px;


background:


linear-gradient(

135deg,

#7f1d4f,

#9333ea,

#19c37d

);


filter:blur(80px);


opacity:.5;


}




.image-overlay{


position:absolute;


z-index:3;


bottom:30px;


left:30px;


right:30px;


padding:25px;


border-radius:25px;


background:

rgba(0,0,0,.45);


backdrop-filter:

blur(20px);


color:white;


}





.image-overlay strong{


display:block;


font-size:22px;


}





.image-overlay span{


opacity:.8;


}







@media(max-width:992px){


.cta-wrapper{


grid-template-columns:1fr;


}


.cta-image img{


height:450px;


}


}

.solution-item svg{

width:46px;
height:46px;

padding:12px;

flex-shrink:0;

border-radius:16px;

background:
linear-gradient(
135deg,
#7f1d4f,
#9333ea,
#19c37d
);

color:white;

box-shadow:

0 15px 35px rgba(147,51,234,.35);

transition:.4s;

}



.solution-item:hover svg{

transform:

rotate(-8deg)
scale(1.1);

box-shadow:

0 20px 45px rgba(25,195,125,.45);

}

/* ======================================
CLIENT EXPERIENCE WALL
====================================== */


.client-wall{


padding:120px 0;


overflow:hidden;


}




.section-heading h2 span{


background:

linear-gradient(
135deg,
#7f1d4f,
#9333ea,
#19c37d
);


-webkit-background-clip:text;

color:transparent;


}







/* FEATURED */


.featured-review{


margin:60px auto;


max-width:900px;


padding:45px;


border-radius:35px;


background:

rgba(255,255,255,.7);


border:

1px solid rgba(0,0,0,.08);


box-shadow:

0 40px 100px rgba(0,0,0,.08);


animation:

floatReview 6s ease infinite;


}



@keyframes floatReview{


50%{

transform:translateY(-12px);

}

}




.review-user,
.user{


display:flex;


align-items:center;


gap:18px;


}




.review-user img,
.user img{


width:60px;

height:60px;


border-radius:50%;


object-fit:cover;


}



.featured-review p{


font-size:22px;


line-height:1.8;


}







.review-tags span{


display:inline-block;


padding:8px 18px;


border-radius:30px;


background:#f1f5f9;


margin:10px;


}





/* SLIDER */


.review-slider{


overflow:hidden;


margin-top:50px;


}



.review-track{


display:flex;


gap:25px;


animation:

slideReviews 18s linear infinite;


}



@keyframes slideReviews{


to{

transform:translateX(-50%);

}

}





.review-card{


min-width:330px;


padding:30px;


border-radius:25px;


background:white;


border:1px solid #e5e7eb;


transition:.4s;


}



.review-card:hover{


transform:translateY(-10px);


}



.stars{


color:#f59e0b;


margin:20px 0;


}









/* PROOF */


.proof-grid{


margin-top:70px;


display:grid;


grid-template-columns:1fr 1fr;


gap:30px;


}




.proof-card{


padding:35px;


border-radius:30px;


background:

rgba(255,255,255,.8);


border:1px solid #e5e7eb;


}





.proof-top{


font-weight:700;


display:flex;


gap:12px;


align-items:center;


}



.chat{


margin-top:25px;


padding:18px;


background:#dcf8c6;


border-radius:20px;


max-width:80%;


}



.reply{


margin-left:auto;

background:#fff;


border:1px solid #eee;


}



.email-box{


margin-top:25px;


padding:25px;


background:#f8fafc;


border-radius:20px;


}









/* DARK MODE */


html[data-theme="dark"] .featured-review,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .proof-card{


background:

rgba(255,255,255,.05);


border-color:

rgba(255,255,255,.12);


}



html[data-theme="dark"] .review-card p,
html[data-theme="dark"] .featured-review p{


color:#cbd5e1;


}






/* MOBILE */


@media(max-width:768px){


.client-wall{


padding:70px 0;


}



.featured-review{


padding:25px;


}



.featured-review p{


font-size:17px;


}



.review-card{


min-width:280px;


}



.proof-grid{


grid-template-columns:1fr;


}


}


.section-heading h2,
.featured-review h3,
.featured-review p,
.review-card h4 {


    color:#111827;


}



.section-heading h2 span,
.featured-review strong,
.testimonial-highlight {


    background:

    linear-gradient(
        135deg,
        #7f1d4f,
        #9333ea,
        #0B5CFF,
        #19C37D
    );


    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;


    font-weight:800;


}





/* Important words */

.highlight-word{


    position:relative;


    color:#9333ea;


    font-weight:800;


}



.highlight-word::after{


    content:"";


    position:absolute;


    left:0;

    bottom:2px;


    width:100%;

    height:8px;


    background:

    linear-gradient(
        90deg,
        rgba(147,51,234,.2),
        rgba(25,195,125,.2)
    );


    border-radius:20px;


    z-index:-1;


}




/* DARK MODE */


html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .featured-review h3,
html[data-theme="dark"] .featured-review p{


    color:#ffffff;


}

/* =====================================
 WHATSAPP REAL UI
===================================== */


.whatsapp{


background:#efeae2 !important;


}



.whatsapp .proof-top{


background:#075e54;


color:white;


margin:-35px -35px 25px;


padding:20px;


border-radius:30px 30px 0 0;


}



.chat{


position:relative;


background:#dcf8c6;


border-radius:12px 12px 0 12px;


padding:14px 18px;


font-size:15px;


box-shadow:

0 5px 15px rgba(0,0,0,.08);


}



.chat::after{


content:"";


position:absolute;


right:-8px;


bottom:0;


border-width:8px 0 0 8px;


border-style:solid;


border-color:transparent transparent transparent #dcf8c6;


}



.chat span{


display:block;


text-align:right;


font-size:11px;


color:#667781;


margin-top:5px;


}



.reply{


background:white;


}



.reply::after{


left:-8px;


right:auto;


border-color:

transparent white transparent transparent;


}

/* =====================================
 GOOGLE MAIL STYLE
===================================== */


.email{


background:#ffffff !important;


}



.email .proof-top{


color:#202124;


border-bottom:

1px solid #dadce0;


padding-bottom:20px;


}



.email-box{


background:white;


border:

1px solid #dadce0;


border-radius:12px;


padding:25px;


box-shadow:

0 5px 20px rgba(60,64,67,.15);


}



.email-box strong{


font-size:18px;


color:#202124;


}



.email-box::before{


content:

"From: BAW Client <client@email.com>";


display:block;


font-size:13px;


color:#5f6368;


margin-bottom:12px;


}



.email-box p{


color:#3c4043;


line-height:1.7;


}

html[data-theme="dark"] .whatsapp{

background:#111b21 !important;

}


html[data-theme="dark"] .email{

background:#111827 !important;

}


html[data-theme="dark"] .email-box{

background:#1f2937;

border-color:#374151;


}


html[data-theme="dark"] .email-box strong,
html[data-theme="dark"] .email-box p{

color:white;

}



.gradient-word {
    background: linear-gradient(90deg, #6c63ff, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}




.why-us-content p {
    margin: 0 0 25px;
    font-size: 0.9rem;
    line-height: 1.75;
    color: #717375;
font-style: italic;


}





.testimonial-rating {
    display: flex;          /* stars ko ek line me laane ke liye */
    gap: 6px;               /* thoda spacing between stars */
    align-items: center;    /* vertical alignment */
    justify-content: flex-start; /* left aligned */
}

.testimonial-rating svg {
    display: inline-block;  /* ensure inline placement */
    color: #facc15;         /* star ka color (golden) */
}
.hero-btn:hover{
    color:white;
}