/* ===== ROOT ===== */
:root{
    --blue:#2B9FD8;        /* Logo Blue */
    --blue-light:#00CFFF;  /* Light glow */
    --violet:#7A5CFF;      /* Logo Violet */
    --violet-dark:#5B3DDB; /* Deep Violet */
    --nav-dark:#0F172A;    /* Neutral dark base */
}

/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:Arial;
    padding-top:90px;   /* 50px topbar + 70px navbar */
    background:#f4f8fb;
}



.logo-intro{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    animation: introHide 4.5s ease forwards;
}

.logo-intro img{
    width:400px;
    animation: logoZoom 4.5s ease forwards;
}

@keyframes logoZoom{
    0%{
        transform: scale(1.5);
        opacity:0;
    }
    40%{
        transform: scale(1);
        opacity:1;
    }
    100%{
        transform:
            translate(calc(-50vw + 95px), calc(-50vh + 60px))
            scale(0.36);
    }
}

@keyframes introHide{
    0%{ opacity:1; }
    85%{ opacity:1; }
    100%{
        opacity:0;
        visibility:hidden;
    }
}

/* ===== TOPBAR ===== */
.topbar{
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width:100%;
    height:50px;

    /* 🔥 2 color gradient (violet → cyan tone hint) */
background: linear-gradient(
90deg,
#24135a 0%,
#3a2b8a 55%,
#1b3b63 100%
);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom:1px solid rgba(122,92,255,0.35);

    display:flex;
    align-items:center;
    transition:0.4s;
}

.top-container{
    width:90%;
    margin:auto;
    position:relative;
}

/* CENTER CONTACT TEXT */
.top-contact{
    text-align:center;
    color:white;
    font-size:15px;
    line-height:50px;
}

/* RIGHT SOCIAL ICON */
.top-social{
    position:absolute;
    right:0;
    top:0;
    height:50px;
    display:flex;
    align-items:center;
    gap:15px;
}

/* SOCIAL ICON COLOR WHITE */
.top-social i{
    color:white;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

.top-social i:hover{
    color:var(--violet);
}


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

.floating-logo{
    position:fixed;
    top:5px;
    left:40px;
    width:110px;
    height:110px;
    border-radius:50%;
    z-index:99999;

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

    background:transparent;   /* ❌ white removed */
}

/* SCROLL PE LOGO BIG */
.floating-logo.big{
    width:115px;
    height:115px;
    top:0px;
    transition:0.4s;
}

/* ===== 3D LOGO EFFECT ===== */
.floating-logo img{
    width:100%;
    height:100%;
    border-radius:50%;
    padding:0;                 /* ❌ padding removed */
    background:transparent;    /* ❌ white removed */
    position:relative;
    z-index:2;

    box-shadow:
    0 10px 20px rgba(0,0,0,0.35);
}
.floating-logo img:hover{
    transform:scale(1.08);

    box-shadow:
    0 0 35px var(--blue),
    0 0 60px var(--violet),
    0 15px 30px rgba(0,0,0,0.5);
}
.floating-logo::before{
    content:'';
    position:absolute;
    top:-8px;
    left:-8px;
    right:-8px;
    bottom:-8px;
    border-radius:50%;
    z-index:1;

    background:linear-gradient(135deg, #00CFFF, #7A5CFF);
    padding:4px;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    box-shadow:
    0 0 25px rgba(0,207,255,0.6),
    0 0 45px rgba(122,92,255,0.6);
}

.floating-logo:hover::before{
    box-shadow:
    0 0 35px var(--blue),
    0 0 70px var(--violet);
}

.floating-logo:hover::after{
background:radial-gradient(circle,
rgba(43,159,216,0.8) 0%,
rgba(122,92,255,0.6) 40%,
transparent 75%);
}





/* ===== HEADER ===== */
/* ===== GLASS NAVBAR ===== */
.header{
position:fixed;
top:50px;
left:0;
width:100%;
height:50px;

display:flex;
align-items:center;

/* 🔥 Dark transparent version of same gradient */
background: linear-gradient(
90deg,
#2a1a6e 0%,
#3b2c8f 60%,
#132a4a 100%
);
backdrop-filter: blur(10px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

/* subtle inner glow */
border-bottom:1px solid rgba(122,92,255,0.55);

box-shadow:
0 10px 40px rgba(0,0,0,0.35),
0 0 30px rgba(122,92,255,0.25);

z-index:9998;
transition:0.4s;
}

/* SCROLL EFFECT */
.header.glass-scroll{
height:60px;
top:0;

background: linear-gradient(
90deg,
rgba(45,28,168,0.95),
rgba(91,61,219,0.95)
);

border-bottom:1px solid rgba(122,92,255,0.7);

box-shadow:
0 8px 35px rgba(0,0,0,0.5),
0 0 35px rgba(122,92,255,0.35);
}


/* TOPBAR HIDE HONE PE NAVBAR UPAR AA JAYE */
.header.move-up{
top:0;
}

.header.shrink ~ .main-logo{
    width:70px;
    height:70px;
    top:2px;
}

/* ===== NAV ===== */
.nav-container{
    height: 100%;
    width:90%;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    position: relative;
}
.nav-menu li a{
    display:flex;
    align-items:center;
    gap:8px;

}
.nav-menu li a i{
    font-size:14px;
}



/* ===== MENU ===== */
.menu{
    display:flex;
    height: 100%;
    list-style:none;
    gap:25px;
    align-items:center;
    gap: 15px;
}

.menu li{
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    font-size:17px;
    transition:0.4s;
    
}

.menu a{
    text-decoration:none;
    color:rgb(255, 255, 255);
    font-size:17px;
    display:flex;
    align-items:center;
    height:100%;
    padding:0 18px;
    font-weight:600;
    text-shadow:0 2px 8px rgba(0,0,0,0.6);
    transition:0.3s;
}

.header.glass-scroll .menu  a{
    color:#ffffff;
    text-shadow:0 2px 10px rgba(0,0,0,0.8);
}

/* Scroll ke baad menu text white */
.header.glass-scroll .menu li a{
    color:#ffffff;
    text-shadow:0 2px 10px rgba(0,0,0,0.8);
}

/* NAVBAR ICON GAP FIX */
.menu li a{
    display:flex;
    height: 100%;
    padding: 0 18px;
    align-items:center;
    gap:8px;   /* 👈 icon aur text ke beech gap */
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    text-shadow:0 2px 8px rgba(0,0,0,0.6);
    transition:0.3s;
}

.header.glass-scroll .menu li a i{
    color:#ffffff;
}

.menu a:hover{
    background-image: linear-gradient(
        90deg,
        var(--blue-light),
        var(--violet),
        var(--blue-light)
    );
    background-size:200% auto;
    animation: gradientMove 3s linear infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu li a:hover{
    background-image: linear-gradient(
        90deg,
        var(--blue-light),
        var(--violet),
        var(--blue-light)
    );
    background-size:200% auto;
    animation: gradientMove 3s linear infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes gradientMove{
    0%{ background-position:0% center; }
    100%{ background-position:200% center; }
}
.header.glass-scroll .menu li a{
    font-size:14px;
}

/* ICON SIZE + EXTRA SPACE */
.menu li a i{
    font-size:15px;
    transition:0.4s;
    color:#ffffff;
}
.header.shrink .menu li a i{
font-size:12px;
}






/* ===== MOBILE ===== */
.menu-toggle{
    display:none;
    font-size:25px;
    cursor:pointer;
    color:white;
}

@media(max-width:768px){

.menu-toggle{
    display:block;
}

.menu{
    display:none;
    flex-direction:column;
    width:100%;
    background: linear-gradient(180deg, var(--blue), var(--violet));
    position:absolute;
    top:60px;
    left:0;
}

.menu.show{
    display:flex;
}

.mega-menu{
    position:static;
    width:100%;
    display:none;
}

.mega-parent.open .mega-menu{
    display:grid;
}

.dropdown-menu{
    position:static;
}

}
/* ===== TABLET FIX ===== */
@media (max-width: 1024px){

.floating-logo{
    left:15px;      /* thoda side me */
    width:85px;     /* chhota size */
    height:85px;
    top:5px;
}

.nav-container{
    justify-content:flex-end;   /* menu right shift */
    padding-left:90px;          /* logo ke liye space */
}

}




/* hero section start */
/* hero section start */
/* hero section start */




.hero-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:60px 8%;
    gap:60px;
}

/* LEFT */

.hero-left{
    flex:1;
    max-width:550px;
}

.hero-title{
    font-size:52px;
    line-height:1.25;
    font-weight:800;
    min-height:130px;
}

#typing{
    background:linear-gradient(90deg,#2a1a6e,#3b2c8f,#1b3b63);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-left p{
    font-size:17px;
    color:#555;
    line-height:1.8;
    margin-top:20px;
}

/* BUTTON */

.hero-actions{
    margin-top:35px;
}

.hero-btn{
    padding:15px 32px;
    border-radius:10px;
    background: linear-gradient(
90deg,
#1a0f4d 0%,
#37017d 50%,
#9725d0 100%
);
box-shadow:
0 0 12px rgba(151,37,208,0.25),
0 0 25px rgba(55,1,125,0.18);

transition:0.35s ease;
    color:white;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    display:inline-block;
    transition:0.35s;
}

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

    box-shadow:
    0 0 18px rgba(151,37,208,0.45),
    0 0 35px rgba(55,1,125,0.35);
}

/* RIGHT */

.hero-right{
    flex:1;
    display:flex;
    justify-content:center;
}

.hero-right iframe{
    width:100%;
    height:420px;
    border:none;
}

.hero-title{
    font-size:52px;
    line-height:1.25;
    font-weight:800;
    min-height:140px;
}

/* Prefix Text */
#typing-prefix{
    background:linear-gradient(90deg,#2a1a6e,#3b2c8f,#1b3b63);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Brand Name */
.typing-brand{
    display:block;
    margin-top:12px;
    font-size:58px;
    font-weight:800;

    background: linear-gradient(
    90deg,
    #37017d 0%,
    #9725d0 50%,
    #0f0733 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
    0 0 8px rgba(151,37,208,0.25),
    0 0 20px rgba(55,1,125,0.18);

    transition:0.35s ease;
}

/* UNIQUE HOVER GLOW (Same Color Theme) */
.typing-brand:hover{
    text-shadow:
    0 0 12px rgba(151,37,208,0.45),
    0 0 28px rgba(55,1,125,0.35);
}

@keyframes blink{
    50%{ opacity:0; }
}



.whatsapp-btn{
      background: linear-gradient(
90deg,
#1a0f4d 0%,
#37017d 50%,
#9725d0 100%
);
box-shadow:
0 0 12px rgba(151,37,208,0.25),
0 0 25px rgba(55,1,125,0.18);
    cursor: pointer;
}

.whatsapp-btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 0 18px rgba(151,37,208,0.45),
    0 0 35px rgba(55,1,125,0.35);
}
/* MOBILE */

@media(max-width:768px){

    .hero-section{
        flex-direction:column;
        text-align:center;
        padding:50px 5%;
        gap:40px;
    }

    .hero-title{
        font-size:34px;
        min-height:90px;
    }

    .hero-left p{
        font-size:16px;
    }

    .hero-right iframe{
        height:260px;
    }
}













/* services section  */
/* =========================================
   SERVICES SECTION – FINAL PROFESSIONAL UI
========================================= */
/* =========================================
   SERVICES SECTION – FINAL CLEAN VERSION
========================================= */

.services-section{ 
    padding:120px 8%;
    background:linear-gradient(135deg,#f6f8ff,#eef2ff);
}

/* ========= HEADER ========= */

.section-header{
    text-align:center;
    margin-bottom:80px;
}

.section-header h2{
    font-size:46px;
    font-weight:900;
    background: linear-gradient(
    90deg,
    #6504e3 0%,
    #9725d0 50%,
    #0f0733 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-header p{
    color:#667085;
    margin-top:12px;
    font-size:18px;
}

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

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

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

.service-card{
    position:relative;
    padding:50px 35px;
    border-radius:28px;
    text-align:center;
    cursor:pointer;
    overflow:hidden;
    background:#ffffff;

    box-shadow:0 15px 40px rgba(0,0,0,0.07);
    transition:all 0.4s ease;

    /* Subtle breathing animation */
    animation:cardZoom 6s ease-in-out infinite;
}

/* Card zoom in–out */

@keyframes cardZoom{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.03); }
    100%{ transform:scale(1); }
}

/* =========================================
   PREMIUM BORDER
========================================= */

.service-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:2px;
    background:linear-gradient(135deg,#7a5cff,#ac2fff,#7a5cff);
    background-size:200% 200%;
    animation:borderMove 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events:none;
}

@keyframes borderMove{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

/* =========================================
   HOVER GRADIENT BACKGROUND
========================================= */

.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    background:linear-gradient(135deg,#2545e8,#a70fd5);
    opacity:0;
    transform:scale(1);
    z-index:0;
}

/* Hover effect */

.service-card:hover{
    transform:translateY(-12px) scale(1.06);
    box-shadow:0 25px 70px rgba(122,92,255,0.25);
}

/* Hover gradient visible + zoom */

.service-card:hover::before{
    opacity:1;
    animation:hoverBgZoom 6s ease-in-out infinite;
}

@keyframes hoverBgZoom{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
    100%{ transform:scale(1); }
}

/* Keep content above */

.service-card > *{
    position:relative;
    z-index:2;
}

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

.service-card iframe{
    width:140px;
    height:140px;
    border:none;
    margin-bottom:20px;
}

.service-card i{
    font-size:55px;
    margin-bottom:25px;
    color:#7a5cff;
    transition:0.3s;
}

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

.service-card h3{
    font-size:22px;
    margin-bottom:15px;
    font-weight:700;
    color:#111827;
    transition:0.3s;
}

.service-card p{
    font-size:15px;
    line-height:1.7;
    color:#4b5563;
    transition:0.3s;
}

/* Hover text white */

.service-card:hover h3,
.service-card:hover p,
.service-card:hover i{
    color:#ffffff;
}



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

@media(max-width:1024px){
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .services-section{
        padding:80px 6%;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .section-header h2{
        font-size:32px;
    }

    .service-card{
        padding:40px 25px;
    }
}





/* about section  */
/* about section  */
/* about section  */
/* ===============================
   WHY SECTION – LIGHT PREMIUM
================================ */

/* ===============================
   WHY SECTION – PREMIUM GLASS UI
================================ */

.why-section{
    padding:35px 8%  50px 8%;
    background: linear-gradient(135deg,#f6f8ff,#eef2ff);
    position:relative;
    overflow:hidden;
}

/* Soft background glow */
.why-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background: radial-gradient(circle,rgba(123,92,255,0.25),transparent 70%);
    top:-150px;
    left:-150px;
    filter: blur(120px);
    z-index:0;
}

/* Container */
.why-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:90px;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
}

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

.why-image img{
    width:100%;
    max-width:480px;
    transition:0.6s ease;
    filter: drop-shadow(0 30px 60px rgba(76,47,255,0.25));
}

.why-image img:hover{
    transform: scale(1.05);
}

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

.why-content{
    flex:1;
}

.why-content h2{
    font-size:44px;
    margin-bottom:25px;
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}

.why-text{
    color:#701fd3;
    font-weight:500;
}

.brand-text{
    background: linear-gradient(
    90deg,
    #6504e3 0%,
    #9725d0 50%,
    #0f0733 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:500;
}

.why-desc{
    color:#4a5568;
    line-height:1.9;
    margin-bottom:55px;
    max-width:620px;
    text-align:justify;
    font-size:16px;
}

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

.why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
}

/* ===============================
   PREMIUM GLASS CARDS
================================ */

/* ===============================
   PREMIUM ANIMATED GLASS CARD
================================ */

.why-card{
    padding:35px;
    border-radius:22px;
    position:relative;
    overflow:hidden;

    /* Animated Transparent Purple Glass */
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.45),
        rgba(115,113,250,0.25),
        rgba(129,100,231,0.20),
        rgba(59,130,246,0.18)
    );
    background-size: 300% 300%;
    animation: 
        glassMove 10s ease infinite,
        floatCard 6s ease-in-out infinite;

    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);

    border:1.5px solid transparent;
    background-clip: padding-box;

    box-shadow: 0 15px 50px rgba(76,47,255,0.18);

    transition: all 0.4s ease;
}

/* Smooth Moving Gradient Animation */
@keyframes glassMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gradient Border Layer (Always Visible) */
.why-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    padding:1.5px;
    background: linear-gradient(135deg,#7b5cff,#4c2fff,#3b82f6);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
}

/* Soft Glow Effect */
.why-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    background: linear-gradient(135deg,#7b5cff,#3b82f6);
    opacity:0.15;
    filter: blur(40px);
    z-index:-1;
}

/* Floating subtle animation (Preserved) */
.why-card:nth-child(2){ animation-delay:1s, 1s; }
.why-card:nth-child(3){ animation-delay:2s, 2s; }
.why-card:nth-child(4){ animation-delay:3s, 3s; }

@keyframes floatCard{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}

/* Hover Enhancement (Preserved + Improved) */
.why-card:hover{
    transform: translateY(-12px) scale(1.05);
    box-shadow: 0 30px 80px rgba(76,47,255,0.35);
}

/* Card Text */

.why-card h3{
    margin-bottom:15px;
    font-size:19px;
    font-weight:600;
    color:#4c2fff;
}

.why-card p{
    color:#5b6475;
    font-size:14.5px;
    line-height:1.8;
}

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

@media(max-width:992px){

    .why-container{
        flex-direction:column;
        text-align:center;
    }

    .why-content h2{
        justify-content:center;
    }

    .why-desc{
        text-align:center;
        margin:auto;
    }

    .why-grid{
        grid-template-columns:1fr;
    }
}








/* process section   */
/* process section   */
/* process section   */

/* ===============================
   PROCESS SECTION – PREMIUM FLOW
================================ */

.process-section{
    padding:50px 8%;
    background: linear-gradient(135deg,#f8faff,#eef2ff);
}

/* Header */

.process-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 70px auto;
}

.process-header h2{
    font-size:42px;
    margin-bottom:20px;
}

.process-light{
    color:#1f2b6c;
    font-weight:600;
}

.process-brand{
    background: linear-gradient(90deg,#5b3fff,#7b5cff,#3b82f6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:700;
}

.process-desc{
    color:#4a5568;
    line-height:1.8;
    font-size:16px;
}

/* Flow Layout */

.process-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
}

/* Step Box */

.step-box{
    width:260px;
    padding:35px;
    border-radius:22px;
    text-align:center;
    position:relative;
    overflow:hidden;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.45),
        rgba(115,113,250,0.25),
        rgba(129,100,231,0.18)
    );

    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);

    border:1.5px solid rgba(123,92,255,0.5);

    box-shadow: 0 15px 50px rgba(76,47,255,0.18);

    transition:0.4s ease;
}

.step-box:hover{
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(76,47,255,0.35);
}

/* Step Number */

.step-number{
    font-size:28px;
    font-weight:700;
    margin-bottom:12px;
    background: linear-gradient(90deg,#5b3fff,#7b5cff,#3b82f6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Text */

.step-box h3{
    margin-bottom:12px;
    font-size:18px;
    color:#4c2fff;
}

.step-box p{
    font-size:14px;
    color:#5b6475;
    line-height:1.6;
}

/* Arrow Connector */

.arrow{
    width:40px;
    height:2px;
    background: linear-gradient(90deg,#7b5cff,#4c2fff,#3b82f6);
    position:relative;
}

.arrow::after{
    content:"";
    position:absolute;
    right:-6px;
    top:-4px;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:8px solid #7b5cff;
}

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

@media(max-width:992px){

    .process-flow{
        flex-direction:column;
    }

    .arrow{
        width:2px;
        height:40px;
        background: linear-gradient(#7b5cff,#4c2fff,#3b82f6);
    }

    .arrow::after{
        top:auto;
        bottom:-6px;
        left:-3px;
        right:auto;
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        border-top:8px solid #7b5cff;
    }
}

@media(max-width:576px){

    .process-header h2{
        font-size:32px;
    }

    .step-box{
        width:100%;
    }

}
















/* ================= PREMIUM LIVE STATS STRIP ================= */

.stats-strip{
    padding:80px 6%;
    background: linear-gradient(
        90deg,
        rgba(45,28,168,0.95),
        rgba(91,61,219,0.95)
    );
    position:relative;
    overflow:hidden;
}

/* subtle top glow line */
.stats-strip::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,transparent,#b39dff,transparent);
    opacity:.7;
}

/* subtle bottom glow */
.stats-strip::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,transparent,#7b5cff,transparent);
    opacity:.4;
}

.stats-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.stat-item{
    flex:1;
    text-align:center;
    position:relative;
    transition:0.3s ease;
}

.stat-item h2{
    font-size:50px;
    font-weight:800;
    color:#ffffff;
    display:inline-block;
    letter-spacing:1px;
}

.stat-item span{
    font-size:26px;
    font-weight:700;
    color:#d2c7ff;
    margin-left:6px;
}

.stat-item p{
    margin-top:12px;
    font-size:15px;
    color:#f1edff;
    font-weight:500;
    letter-spacing:.5px;
    opacity:.9;
}

/* Elegant vertical divider */
.divider{
    width:1px;
    height:65px;
    background:linear-gradient(to bottom,transparent,#c4b3ff,transparent);
    opacity:.5;
}

/* subtle hover highlight */
.stat-item:hover{
    transform:translateY(-6px);
}

.stat-item:hover h2{
    color:#ffffff;
    text-shadow:0 0 15px rgba(255,255,255,0.6);
}

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

@media(max-width:992px){
    .stats-wrapper{
        flex-wrap:wrap;
        justify-content:center;
        gap:50px;
    }

    .divider{
        display:none;
    }

    .stat-item{
        flex:45%;
    }

    .stat-item h2{
        font-size:38px;
    }
}

@media(max-width:600px){
    .stat-item{
        flex:100%;
    }

    .stat-item h2{
        font-size:32px;
    }
}





















/* ================= TESTIMONIAL LIGHT SECTION ================= */

/* ================= TESTIMONIAL SECTION ================= */

/* ================= TESTIMONIAL SECTION ================= */

.testimonial-section{
    padding:70px 6%;
    background:rgba(255,255,255,0.65);
    backdrop-filter:blur(20px);
    position:relative;
}

.testimonial-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(91,61,219,0.05),
        rgba(45,28,168,0.03)
    );
    pointer-events:none;
}

/* HEADER */

.testimonial-header{
    text-align:center;
    margin-bottom:60px;
}

.testimonial-header h2{
    font-size:40px;
    font-weight:800;
    color:#1a1040;
}

.testimonial-header h2 span{
    color:#2d1ca8;
    position:relative;
}

.testimonial-header h2 span::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#2d1ca8,#5b3ddb);
    border-radius:4px;
    display: none;
}

.testimonial-header p{
    margin-top:15px;
    font-size:19px;
    color:#555;
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

/* WRAPPER */

.testimonial-wrapper{
    max-width:630px;
    margin:auto;
    overflow:hidden;
}

.testimonial-track{
    display:flex;
    transition:0.7s ease;
}

/* TESTIMONIAL ITEM */

/* ================= ULTRA PREMIUM TESTIMONIAL CARD ================= */

.testimonial-item{
    min-width:100%;
    padding:55px 50px;
    border-radius:24px;
    position:relative;
    overflow:hidden;

    /* Premium layered glass */
    background:linear-gradient(
        145deg,
        rgba(255,255,255,0.65),
        rgba(31, 3, 246, 0.237)
    );

    backdrop-filter:blur(25px);

    border:1px solid rgba(45,28,168,0.12);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.05),
        0 5px 15px rgba(45,28,168,0.08);

    transition:all 0.5s cubic-bezier(.17,.67,.32,1.34);
    text-align:center;
}


/* Top Accent Glow Line */

.testimonial-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#2d1ca8,#5b3ddb);
    opacity:0.8;
}


/* Hover Effect – Depth + Glow + Background Shift */

.testimonial-item:hover{
    transform:translateY(-12px) scale(1.02);

    background:linear-gradient(
        145deg,
        rgba(255,255,255,0.85),
        rgba(69, 48, 228, 0.566)
    );

    border:1px solid rgba(45,28,168,0.25);

    box-shadow:
        0 30px 80px rgba(45,28,168,0.15),
        0 10px 30px rgba(0,0,0,0.08),
        0 0 30px rgba(91,61,219,0.2);
}

/* TEXT */

.testimonial-item p{
    font-size:18px;
    line-height:1.9;
    color:#222;
    margin-bottom:35px;
    font-weight:500;
}

.testimonial-item h4{
    font-size:19px;
    font-weight:700;
    color:#2d1ca8;
}

.testimonial-item span{
    font-size:14px;
    color:#777;
}

/* ================= STAR RATING ================= */

.stars{
    font-size:20px;
    letter-spacing:4px;
    margin-bottom:25px;

    background:linear-gradient(90deg,#f7b500,#ffcc33);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    display:inline-block;
}

/* RESPONSIVE */

@media(max-width:768px){

    .testimonial-section{
        padding:70px 6%;
    }

    .testimonial-item{
        padding:35px 20px;
    }

    .testimonial-header h2{
        font-size:30px;
    }
}








/* ================= PREMIUM CTA SECTION (ADVANCED UI) ================= */

.cta-section{
    padding:50px 6%;
    position:relative;
    overflow:hidden;
    text-align:center;

    /* Modern Premium Gradient */
    background:linear-gradient(
        135deg,
        #1a1040 0%,
        #2d1ca8 45%,
        #5b3ddb 100%
    );

    color:#ffffff;
}

/* Floating Soft Glow Effect */
.cta-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    background:radial-gradient(
        circle,
        rgba(255,255,255,0.14),
        transparent 70%
    );
    top:-220px;
    right:-180px;
    filter:blur(120px);
    animation: pulseGlow 8s ease-in-out infinite alternate;
}

@keyframes pulseGlow{
    from{
        transform:scale(1);
        opacity:0.8;
    }
    to{
        transform:scale(1.15);
        opacity:1;
    }
}

/* Content Wrapper */

.cta-content{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;

    backdrop-filter: blur(6px);
    padding:40px 20px;
}

.cta-content h2{
    font-size:48px;
    font-weight:800;
    letter-spacing:-0.6px;
    margin-bottom:24px;

    background: linear-gradient(90deg,#ffffff,#d6ccff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cta-content p{
    font-size:19px;
    line-height:1.85;
    opacity:0.95;
    margin-bottom:50px;
}

/* Buttons Container */

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

/* Primary Button */

.btn-primary{
    padding:16px 40px;
    border-radius:999px;

    background:#ffffff;
    color:#2d1ca8;

    font-weight:700;
    text-decoration:none;
    font-size:15px;

    transition:all 0.35s cubic-bezier(.4,0,.2,1);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.btn-primary:hover{
    transform:translateY(-5px) scale(1.04);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.28);
}

/* Secondary Button */

.btn-secondary{
    padding:16px 40px;
    border-radius:999px;

    border:1.6px solid rgba(255,255,255,0.65);
    color:#ffffff;

    font-weight:600;
    text-decoration:none;
    font-size:15px;

    transition:all 0.35s ease;

    backdrop-filter:blur(10px);
}

.btn-secondary:hover{
    background:rgba(255,255,255,0.15);
    border-color:#ffffff;
    transform:translateY(-5px);
}

/* Responsive Design */

@media(max-width:768px){

    .cta-section{
        padding:90px 5%;
    }

    .cta-content h2{
        font-size:34px;
    }

    .cta-content p{
        font-size:16px;
    }

    .cta-buttons{
        gap:18px;
    }
}














/* ================= FAQ SECTION ================= */

.faq-section{
    padding:110px 6%;
    background:#f8f9ff;
}

.faq-header{
    text-align:center;
    margin-bottom:60px;
}

.faq-header h2{
    font-size:40px;
    font-weight:800;
    color:#1a1040;
}

.faq-header h2 span{
    color:#2d1ca8;
}

.faq-header p{
    margin-top:15px;
    color:#555;
    font-size:16px;
}

/* Container */

.faq-container{
    max-width:900px;
    margin:auto;
}

/* Item */

.faq-item{
    background:#ffffff;
    border-radius:16px;
    margin-bottom:18px;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
    overflow:hidden;
    transition:0.3s ease;
}

.faq-item:hover{
    box-shadow:0 12px 35px rgba(45,28,168,0.08);
}

/* Question */

.faq-question{
    width:100%;
    padding:22px 25px;
    background:none;
    border:none;
    text-align:left;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Icon */

.faq-question .icon{
    font-size:22px;
    color:#2d1ca8;
    transition:0.3s ease;
}

/* Answer */

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    padding:0 25px;
}

.faq-answer p{
    padding-bottom:20px;
    color:#555;
    line-height:1.8;
}

/* Active */

.faq-item.active .faq-answer{
    max-height:200px;
}

.faq-item.active .icon{
    transform:rotate(45deg);
}











/* ================= PREMIUM GLASS FOOTER ================= */

.main-footer{
    background: linear-gradient(
        90deg,
        #2a1a6e 0%,
        #3b2c8f 60%,
        #1e6eb4 100%
    );
    padding:80px 6% 30px;
    color:#fff;
    position:relative;
    overflow:hidden;
}

/* subtle glow background */
.main-footer::before{
    content:'';
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    top:-200px;
    right:-200px;
    z-index:0;
}

/* Container */
.footer-container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap:30px;
}

/* ===== Glass Card ===== */
.footer-col{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:18px;
    padding:25px;
    transition:0.4s ease;
    box-shadow:0 8px 25px rgba(0,0,0,0.25);
}

.footer-col:hover{
    transform: translateY(-8px);
    box-shadow:0 12px 35px rgba(0,0,0,0.35);
}

/* ===== Logo Section ===== */
.footer-logo{
    text-align:center;
    margin-bottom:15px;
}

.footer-logo img{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid rgba(255,255,255,0.4);
    padding:5px;
    transition:0.4s ease;
    box-shadow:0 0 15px rgba(255,255,255,0.2);
}

.footer-logo img:hover{
    transform:scale(1.1);
    border-color:#fff;
    box-shadow:0 0 25px rgba(255,255,255,0.6);
}

.footer-logo h3{
    margin-top:12px;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.5px;
}

/* Paragraph */
.footer-col p{
    font-size:13px;
    line-height:1.6;
    color:#e0e0ff;
}

/* ===== Headings ===== */
.footer-col h4{
    margin-bottom:15px;
    font-size:22px;
    font-weight:600;
    position:relative;
    display:inline-block;
}

.footer-col h4::after{
    content:'';
    position:absolute;
    width:40px;
    height:2px;
    background:#fff;
    bottom:-6px;
    left:0;
    transition:0.4s;
}

.footer-col h4:hover::after{
    width:100%;
}

/* ===== Links ===== */
.footer-col ul{
    list-style:none;
    padding:0;
}

.footer-col ul li{
    margin-bottom:10px;
}

.footer-col ul li a{
    text-decoration:none;
    color:#e0e0ff;
    font-size:18px;
    position:relative;
    transition:0.3s ease;
}

.footer-col ul li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-3px;
    width:0;
    height:2px;
    background:#fff;
    transition:0.3s ease;
}

.footer-col ul li a:hover{
    color:#fff;
    padding-left:6px;
}

.footer-col ul li a:hover::after{
    width:100%;
}

/* ===== Contact Info ===== */
.contact-info li{
    font-size:16px;
    margin-bottom:10px;
    color:#e0e0ff;
}

/* ===== Social Icons ===== */
.social-icons{
    margin-top:15px;
}

.social-icons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    color:#fff;
    margin-right:10px;
    font-size:14px;
    transition:0.4s ease;
    border:1px solid rgba(255,255,255,0.25);
}

.social-icons a:hover{
    transform:translateY(-6px) scale(1.15);
    background:#ffffff;
    color:#2a1a6e;
    box-shadow:0 8px 20px rgba(255,255,255,0.5);
}

/* ===== Map ===== */
.footer-map iframe{
    width:100%;
    height:180px;
    border:none;
    border-radius:12px;
    filter: grayscale(20%) brightness(90%);
    transition:0.4s;
}

.footer-map iframe:hover{
    filter: grayscale(0%) brightness(100%);
}

/* ===== Bottom Bar ===== */
.footer-bottom{
    margin-top:50px;
    text-align:center;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.2);
    font-size:14px;
    color:#ddd;
}