/* ===================================================================
   AI SOCH STUDIO — DESIGN TOKENS
=================================================================== */
:root{
  --bg: #06070d;
  --bg-alt: #0a0c17;
  --panel: #0e1122;
  --panel-2: #11142a;
  --line: rgba(255, 255, 255, 0.63);
  --text: #f4f6fb;
  --text-dim: #fafafa;
  --text-dimmer: #ffffff;

  --cyan: #2fe6e0;
  --cyan-soft: rgba(47,230,224,.14);
  --purple: #9b5bff;
  --purple-soft: rgba(155,91,255,.16);
  --magenta: #ff3fc7;
  --magenta-soft: rgba(255,63,199,.15);
  --orange: #ff9a44;
  --orange-soft: rgba(255,154,68,.16);

  --grad-brand: linear-gradient(115deg, var(--cyan), var(--purple) 55%, var(--magenta));
  --grad-cta: linear-gradient(120deg, var(--cyan), var(--purple));

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); }
html.lenis{ scroll-behavior:auto; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px){ body{ cursor:auto; } }

::selection{ background:var(--purple); color:#fff; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

.section{ position:relative; padding:min(20px,14vw) var(--pad) min(10px,10vw); }
.section-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; filter:saturate(1.3) contrast(1.05); z-index:-2; }
.section-bg-fade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--bg-alt) 0%, rgba(10,12,23,.75) 35%, var(--bg-alt) 100%); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:22px;
}
.eyebrow .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(47,230,224,.4); font-size:11px; color:var(--text-dim);
  font-family:var(--font-display);
}
.eyebrow-sub{ color:var(--text-dim); margin-top:-16px; }

.sec-title{
  font-size:clamp(32px, 4.6vw, 58px);
  line-height:1.06;
  max-width:16ch;
  margin-bottom:22px;
}
.sec-title em{ font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-title.center{ margin-left:auto; margin-right:auto; text-align:center; max-width:14ch; }
.sec-lead{ color:var(--text-dim); font-size:clamp(15px,1.6vw,18px); max-width:52ch; line-height:1.6; margin-bottom:8px; }
.t-cyan{ color:var(--cyan); } .t-magenta{ color:var(--magenta); } .t-orange{ color:var(--orange); }

/* ===================== BUTTONS ===================== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px; font-weight:600; font-size:14.5px;
  white-space:nowrap; isolation:isolate; overflow:hidden;
}
.btn span{ position:relative; z-index:2; }
.btn i{ position:relative; z-index:2; width:9px; height:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-left:2px; }
.btn i.down{ transform:rotate(135deg); margin-top:-4px; }
.btn-primary{ color:#04060c; }
.btn-primary::before{ content:''; position:absolute; inset:0; background:var(--grad-cta); z-index:1; transition:transform .5s var(--ease); }
.btn-primary:hover::before{ transform:scale(1.15); }
.btn-lg{ padding:19px 34px; font-size:16px; }
.btn-ghost{ color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn-outline{ color:var(--text); border:1px solid var(--line); }
.btn-outline:hover{ border-color:var(--magenta); color:var(--magenta); }
.btn-whatsapp{ color:#04140f; }
.btn-whatsapp::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,#25d366,#0fbd8c); z-index:1; }
.btn-whatsapp span, .btn-whatsapp i{ position:relative; z-index:2; }
.wa-ico{ width:14px; height:14px; border:none !important; background:currentColor; -webkit-mask:radial-gradient(circle at 30% 30%, transparent 3px, black 3.5px); border-radius:3px; transform:none; }

/* ===================== PRELOADER ===================== */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.preloader-mark{ position:relative; width:110px; height:110px; display:flex; align-items:center; justify-content:center; }
.preloader-ring{ position:absolute; inset:0; }
.preloader-ring circle{ fill:none; stroke:url(#logoGrad); stroke-width:2; stroke-dasharray:264; stroke-dashoffset:264; }
.preloader-word{ font-family:var(--font-display); letter-spacing:.3em; font-size:13px; color:var(--text-dim); }
.preloader-bar{ width:220px; height:2px; background:rgba(255,255,255,.08); overflow:hidden; border-radius:2px; }
.preloader-bar span{ display:block; width:0%; height:100%; background:var(--grad-brand); }

/* ===================== CURSOR ===================== */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; }
.cursor-dot{ width:6px; height:6px; background:var(--cyan); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(47,230,224,.5); transition:width .25s,height .25s,border-color .25s,background .25s; }
.cursor-ring.hover{ width:64px; height:64px; background:rgba(47,230,224,.08); border-color:var(--magenta); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ===================== GRAIN ===================== */
.grain{
  position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); backdrop-filter:blur(0px);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(6,7,13,.72); backdrop-filter:blur(14px); padding:12px var(--pad); border-color:var(--line); }
.nav-logo{ display:flex; align-items:center; gap:1px; }
.nav-logo-mark svg{ width:30px; height:30px; }
.nav-logo-text{ font-family:var(--font-display); font-weight:600; font-size:15px; display:flex; flex-direction:column; line-height:1.15; }
.nav-logo-text small{ font-family:var(--font-body); font-weight:500; font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dimmer); }
.nav-links{ display:flex; gap:34px; font-size:16px;font-weight:600; color:var(--text-dim); }
.nav-links a{ position:relative; transition:color .3s; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--cyan); transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ padding:11px 20px; font-size:13px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-burger span{ height:2px; background:var(--text); border-radius:2px; transition:transform .3s,opacity .3s; }
.nav-burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2){ opacity:0; }
.nav-burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
  padding:0 32px; transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:26px; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}



/* ============popup============== */

/* =========================================================
   IMAGE ONLY POPUP — NO EXTRA GAP
========================================================= */

.ai-service-modal {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

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

    background: rgba(0, 0, 0, .88) !important;

    padding: 20px !important;
    box-sizing: border-box !important;

    z-index: 99999 !important;
}


/* =========================================================
   POPUP BOX
========================================================= */

.ai-service-modal .ai-modal-box {

    position: relative !important;

    width: min(900px, 92vw) !important;

    /* IMAGE RATIO */
    aspect-ratio: 2.25 / 1 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 90vh !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 18px !important;

    background: #000 !important;

    display: block !important;

    transform: scale(.94) translateY(15px) !important;

    transition: transform .35s ease !important;
}


/* =========================================================
   ACTIVE
========================================================= */

.ai-service-modal.active .ai-modal-box {

    transform: scale(1) translateY(0) !important;

}


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

.ai-service-modal .ai-modal-image {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #000 !important;

    background-size: 100% 100% !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

}


/* =========================================================
   MODAL CONTENT — COMPLETELY HIDDEN
========================================================= */

.ai-service-modal .ai-modal-content {

    display: none !important;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.ai-service-modal .ai-modal-close {

    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    z-index: 9999 !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

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

    background: rgba(0,0,0,.75) !important;

    color: #fff !important;

    font-size: 27px !important;
    line-height: 1 !important;

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

    cursor: pointer !important;

}


/* =========================================================
   CLOSE HOVER
========================================================= */

.ai-service-modal .ai-modal-close:hover {

    background: #2fe6e0 !important;

    color: #000 !important;

    border-color: #2fe6e0 !important;

}


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

@media (max-width: 760px) {

    .ai-service-modal {

        padding: 12px !important;

    }

    .ai-service-modal .ai-modal-box {

        width: 96vw !important;

        max-width: 96vw !important;

        aspect-ratio: 2.25 / 1 !important;

        max-height: 85vh !important;

        border-radius: 12px !important;

    }

    .ai-service-modal .ai-modal-close {

        top: 8px !important;

        right: 8px !important;

        width: 38px !important;

        height: 38px !important;

        font-size: 24px !important;

    }

}


/* ===================================================================
   01 HERO
=================================================================== */
.hero{
  min-height:90vh; display:flex; align-items:center;
  padding-top:30px; padding-bottom:80px;
  background:radial-gradient(ellipse at 20% 0%, #0d1128 0%, var(--bg) 60%);
  overflow:hidden;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:saturate(1.3) hue-rotate(-6deg) brightness(.62) contrast(1.05); }
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
}
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; z-index:1; }
.hero-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 30% 30%, black, transparent 70%);
}
.hero-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; z-index:1; }
.hero-glow-a{ width:520px; height:520px; background:var(--purple); top:-120px; left:-100px; }
.hero-glow-b{ width:460px; height:460px; background:var(--cyan); bottom:-160px; right:-80px; }

.hero-inner{ position:relative; z-index:2; max-width:900px; }
.reveal-line{ overflow:hidden; }
.reveal-line span{ display:inline-block; transform:translateY(110%); }

.hero-title{ font-size:clamp(34px, 8.6vw, 76px); line-height:.98; letter-spacing:-.02em; margin:1px 0 2px; }
.hero-title .line{ display:block; overflow:hidden; }
/* .hero-title .line span, .hero-title .line{ } */
.hero-title .line{ position:relative; }
.hero-title .line-grad {
    background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #a56aeb 25%,
        #df16e3 50%,
        #fc9d21 75%,
        #fc9d21 100%
    ) !important;

    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

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

    color: transparent !important;
    font-weight: 800 !important;
}
.hero-position{ font-size:clamp(16px,1.9vw,20px); color:var(--text); font-weight:500; margin-bottom:10px; }
.hero-copy{ color:var(--text-dim); font-size:clamp(14px,1.6vw,17px); line-height:1.6; margin-bottom:34px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
.hero-pillars{ display:flex; flex-wrap:wrap; gap:10px 26px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); }
.hero-pillars span{ position:relative; padding-left:16px; }
.hero-pillars span::before{ content:''; position:absolute; left:0; top:50%; translate:0 -50%; width:6px; height:6px; border-radius:50%; background:var(--cyan); }

.hero-orbit{ position:absolute; right:4%; top:50%; translate:0 -50%; z-index:1; display:flex; flex-direction:column; gap:22px; text-align:right; }
.hero-orbit span{ font-family: 'Allura', cursive; font-size:13px; letter-spacing:.08em; color:rgb(255, 255, 255); }
@media (max-width:1100px){ .hero-orbit{ display:none; } }

.scroll-cue{ position:absolute; left:var(--pad); bottom:34px; display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dimmer); z-index:2; }
.scroll-cue span{ width:1px; height:34px; background:linear-gradient(var(--cyan), transparent); position:relative; overflow:hidden; }

/* ===================================================================
   02 THE SHIFT
=================================================================== */
/* ==========================================
   AI COMPARISON SECTION
========================================== */


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

.ai-comparison {
    width: 90%;
    max-width: 1250px;
    margin: 60px auto;
    position: relative;
    color: #fff;
    font-family: Arial, sans-serif;
}


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

.ai-comparison-head {
    text-align: left;
    margin-bottom: 45px;
}

.ai-eyebrow {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 3px;
    color: #00eaff;
    margin-bottom: 5px;

    opacity: 0;
    transform: translateY(25px);
}

.main-heading-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
}

.ai-comparison-head h2 {
    margin: 0;
    max-width: 800px;
    font-size: clamp(28px, 5vw, 52px);
    line-height: .94;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -3px;
    opacity: 0;
    transform: translateY(45px);
}

.ai-comparison-head h2 span {
 background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #ffa52e 100%
    );    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================================
   SIGNATURE
===================================================== */

.growth-text {
    flex-shrink: 0;

    margin-bottom: 7px;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: clamp(30px, 3.5vw, 52px);
    line-height: .82;

    color: #00eaff;

    white-space: nowrap;

    opacity: 0;
    transform:
        translateX(40px)
        translateY(20px)
        rotate(-8deg);

    text-shadow:
        0 0 10px rgba(0,234,255,.3),
        0 0 30px rgba(0,234,255,.15);
}

.growth-text span {
    color: #ff28d9;
}


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

.ai-comparison-head p {
    max-width: 650px;
    margin-top: 25px;

    color: #aeb4c8;
    font-size: 17px;
    line-height: 1.5;

    opacity: 0;
    transform: translateY(25px);
}

.ai-comparison-head p strong {
    color: #00eaff;
}


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

.ai-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


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

.compare-card {
    min-height: 540px;
    position: relative;
    overflow: hidden;

    border-radius: 16px;
    padding: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(20,25,42,.96),
            rgba(5,7,14,.99)
        );

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

    box-shadow:
        0 20px 70px rgba(0,0,0,.4);

    opacity: 0;
    transform:
        translateY(70px)
        scale(.97);
}


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

.traditional-card {
    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;
}


.traditional-card-image {
    position: absolute;
    inset: 0;
    background-image: url("../img/post1.jpeg");
    background-size: cover;
    background-position: center;
    /* opacity: .28; */
    transform: scale(1.05);
    transition: transform 1.2s ease, opacity .7s ease;
    z-index: 0;
}


/* LEFT CARD OVERLAY */

.traditional-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,.92),
            rgba(20,20,20,.78)
        );

    z-index: 1;
}


/* CONTENT ABOVE IMAGE */

.traditional-card .card-content {
    position: relative;
    z-index: 2;
}


/* HOVER */

.traditional-card:hover .traditional-card-image {
    transform: scale(1.12);
    opacity: .38;
}

.traditional-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(255,255,255,.22);

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


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

.ai-card {
    background: #050914;

    border-color:
        rgba(0,234,255,.55);

    box-shadow:
        0 0 35px rgba(0,220,255,.09),
        0 25px 90px rgba(0,0,0,.55);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.ai-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 0 50px rgba(0,234,255,.13),
        0 30px 100px rgba(0,0,0,.6);
}


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

.ai-card-image {
    position: absolute;
    inset: 0;
 background-image: url("../img/post2.jpeg");
    background-size: cover;
    background-position: center;
    /* opacity: .30; */
    transform: scale(1.05);
    transition:
        transform 1.2s ease,
        opacity .7s ease;
}

.ai-card:hover .ai-card-image {
    transform: scale(1.12);
    opacity: .90;
}


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

.ai-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,8,18,.98) 0%,
            rgba(3,8,18,.88) 40%,
            rgba(3,8,18,.55) 75%,
            rgba(3,8,18,.82) 100%
        );

    z-index: 1;
}


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

.ai-glow {
    position: absolute;

    width: 300px;
    height: 300px;

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

    border-radius: 50%;

    background:
        rgba(0,234,255,.15);

    filter: blur(80px);

    z-index: 2;

    animation:
        glowMove 5s ease-in-out infinite alternate;
}

@keyframes glowMove {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform:
            translate(-80px,80px)
            scale(1.25);
    }
}


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

.card-content {
    position: relative;
    z-index: 3;
}

.card-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;

    margin-bottom: 38px;
}

.traditional-card .card-title {
    color: #d6d9e2;
}

.ai-card .card-title {
    color: #00eaff;

    text-shadow:
        0 0 15px rgba(0,234,255,.5);
}


/* =====================================================
   PROCESS
===================================================== */

.process-list {
    position: relative;
    z-index: 3;
}

.process-item {
    display: flex;
    align-items: center;
    gap: 16px;

    margin: 13px 0;

    opacity: 0;

    transform: translateX(-35px);

    filter: blur(5px);
}


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

.process-icon {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

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

    border-radius: 9px;

    color: #8f96a8;

    font-size: 18px;

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

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.process-item:hover .process-icon {
    transform: scale(1.08);
}

.ai-card .process-icon {
    color: #00eaff;

    border-color:
        rgba(0,234,255,.3);

    background:
        rgba(0,234,255,.05);

    box-shadow:
        0 0 15px rgba(0,234,255,.08);
}


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

.process-item span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #c8ccd7;
}

.ai-card .process-item span {
    color: #00eaff;
}


/* =====================================================
   ARROWS
===================================================== */

.process-arrow {
    margin-left: 14px;

    color: #626878;

    font-size: 17px;

    opacity: 0;
}


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

.ai-bottom-text {
    text-align: center;
    margin-top: 45px;
    opacity: 0;
    transform: translateY(30px);
}

.ai-bottom-text span {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

.ai-bottom-text strong {
    display: block;
    margin-top: 6px;
    font-size:
        clamp(27px, 4vw, 30px);
    font-weight: 900;
    letter-spacing: -1px;
}

.ai-bottom-text b {
    color: #00e5ff ;

    text-shadow:
        0 0 20px
        rgba(1, 187, 162, 0.35);
}


/* =====================================================
   ACTIVE ANIMATIONS
===================================================== */

.ai-comparison.active .ai-eyebrow {
    animation:
        eyebrowReveal
        .8s
        ease
        forwards;
}

.ai-comparison.active h2 {
    animation:
        headingReveal
        1s
        .15s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active .growth-text {
    animation:
        signatureReveal
        1s
        .55s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active .ai-comparison-head p {
    animation:
        paragraphReveal
        .8s
        .5s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


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

.ai-comparison.active .traditional-card {
    animation:
        cardReveal
        1s
        .65s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active .ai-card {
    animation:
        cardReveal
        1s
        .8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


/* =====================================================
   PROCESS ANIMATION
===================================================== */

.ai-comparison.active
.traditional-card
.process-item:nth-child(1) {
    animation:
        processReveal .6s 1.15s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.traditional-card
.process-item:nth-child(3) {
    animation:
        processReveal .6s 1.30s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.traditional-card
.process-item:nth-child(5) {
    animation:
        processReveal .6s 1.45s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.traditional-card
.process-item:nth-child(7) {
    animation:
        processReveal .6s 1.60s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.traditional-card
.process-item:nth-child(9) {
    animation:
        processReveal .6s 1.75s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


/* RIGHT */

.ai-comparison.active
.ai-card
.process-item:nth-child(1) {
    animation:
        processReveal .6s 1.10s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(2) {
    animation:
        processReveal .6s 1.22s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(3) {
    animation:
        processReveal .6s 1.34s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(4) {
    animation:
        processReveal .6s 1.46s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(5) {
    animation:
        processReveal .6s 1.58s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(6) {
    animation:
        processReveal .6s 1.70s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(7) {
    animation:
        processReveal .6s 1.82s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.ai-comparison.active
.ai-card
.process-item:nth-child(8) {
    animation:
        processReveal .6s 1.94s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


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

.ai-comparison.active .process-arrow {
    animation:
        arrowReveal
        .5s
        1.45s
        ease
        forwards;
}


/* =====================================================
   BOTTOM ANIMATION
===================================================== */

.ai-comparison.active .ai-bottom-text {
    animation:
        bottomReveal
        .9s
        2.2s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes eyebrowReveal {

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

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

@keyframes headingReveal {

    from {
        opacity: 0;

        transform:
            translateY(45px);

        filter: blur(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter: blur(0);
    }
}

@keyframes signatureReveal {

    from {
        opacity: 0;

        transform:
            translateX(40px)
            translateY(20px)
            rotate(-8deg)
            scale(.8);

        filter: blur(6px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0)
            rotate(-8deg)
            scale(1);

        filter: blur(0);
    }
}

@keyframes paragraphReveal {

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

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

@keyframes cardReveal {

    from {
        opacity: 0;

        transform:
            translateY(70px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes processReveal {

    from {
        opacity: 0;

        transform:
            translateX(-35px);

        filter: blur(5px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        filter: blur(0);
    }
}

@keyframes arrowReveal {

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

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

@keyframes bottomReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px);

        filter: blur(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter: blur(0);
    }
}


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

@media (max-width: 900px) {

    .main-heading-wrap {
        gap: 20px;
    }

    .growth-text {
        font-size: 30px;
    }

}


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

@media (max-width: 768px) {

    .ai-comparison {
        width: 92%;
        margin: 70px auto;
    }

    .main-heading-wrap {
        display: block;
    }

    .ai-comparison-head h2 {
        font-size:
            clamp(38px, 10vw, 52px);

        letter-spacing: -2px;
    }

    .growth-text {
        display: inline-block;

        margin-top: 22px;
        margin-left: 10px;

        font-size: 34px;
    }

    .ai-comparison-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .compare-card {
        min-height: 490px;
        padding: 25px;
    }

    .ai-card-image {
        opacity: .25;
    }

    .process-item {
        margin: 12px 0;
    }

    .process-item span {
        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .ai-comparison-head h2 {
        font-size: 36px;
    }

    .growth-text {
        font-size: 29px;
    }

    .compare-card {
        min-height: 460px;
        padding: 22px;
    }

    .card-title {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .process-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .process-item {
        gap: 12px;
    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

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

    .ai-comparison *,
    .ai-comparison *::before,
    .ai-comparison *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;

    }

}

/* =========================================================
   AI SOCH SECTION
========================================================= */

.aisoch-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 90px 0;

    background:
        radial-gradient(
            ellipse at top left,
            #0d1b2a 0%,
            #05070d 55%,
            #020308 100%
        );

    font-family: 'Segoe UI', Arial, sans-serif;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}


/* =========================================================
   90% INNER WIDTH
========================================================= */
/* =========================================================
   AI SOCH SECTION
========================================================= */

.aisoch-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 90px 0;

    background:
        radial-gradient(
            ellipse at top left,
            #0d1b2a 0%,
            #05070d 55%,
            #020308 100%
        );

    font-family: 'Segoe UI', Arial, sans-serif;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}


/* =========================================================
   90% INNER WIDTH
========================================================= */

.aisoch-head,
.aisoch-cards,
.aisoch-tagline {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


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

.aisoch-head {
    margin-bottom: 55px;
}


.aisoch-eyebrow {
    display: block;
    color: #34d3ff;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 13px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(20px);
    animation:aisochFadeUp .8s ease forwards;
    text-align:left;
}


/* =========================================================
   HEADING + SIGNATURE
========================================================= */

.aisoch-heading-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
}


/* =========================================================
   MAIN HEADING - LEFT
========================================================= */

.aisoch-heading {
    margin: 0;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    text-align: left;
    opacity: 0;
    transform: translateY(35px);
    animation:
        aisochHeadingReveal 1s .2s ease forwards;
}


.aisoch-heading-accent span{
    display: block;
    background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #ffa52e  100%
    );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


/* =========================================================
   SIGNATURE - RIGHT
========================================================= */

.aisoch-growth-text {

    flex-shrink: 0;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:
        clamp(28px, 3.2vw, 48px);

    line-height: .85;

    font-weight: 500;

    color: #34d3ff;

    text-align: right;

    white-space: nowrap;

    transform:
        rotate(-8deg)
        translateY(25px);

    opacity: 0;

    animation:
        signatureReveal 1s .8s ease forwards;
}


.aisoch-growth-text span {
    color: #ff28d9;
}


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

.aisoch-subtext {

    max-width:
        100%;
    font-size:
        16px;
    line-height:
        1.7;
    color:
        #b9c6d5;
    text-align:
        LEFT;

    opacity:
        0;

    transform:
        translateY(20px);

    animation:
        aisochFadeUp .8s 1s ease forwards;
}


.aisoch-subtext strong {
    color: #ffffff;
}


/* =========================================================
   CARDS GRID - 90%
========================================================= */

.aisoch-cards {

    display:
        grid;

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

    gap:
        24px;

    margin-top:
        0;
}


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

.aisoch-card {

    position:
        relative;

    min-height:
        480px;

    border-radius:
        18px;

    overflow:
        hidden;

    text-align:
        left;

    background:
        #080b12;

    isolation:
        isolate;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        inset 0 0 70px rgba(0,0,0,.65);

    opacity:
        0;

    transform:
        translateY(60px);

    transition:
        transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;

    animation:
        cardReveal .9s ease forwards;
}


/* CARD DELAY */

.aisoch-card:nth-child(1) {
    animation-delay:
        .3s;
}


.aisoch-card:nth-child(2) {
    animation-delay:
        .5s;
}


.aisoch-card:nth-child(3) {
    animation-delay:
        .7s;
}


/* =========================================================
   FULL CARD IMAGE
========================================================= */

.aisoch-card-image {

    position:
        absolute;

    inset:
        0;

    width:
        80%;

    height:
        70%;

    background-size:
        cover;

    background-position:
        center;

    transform:
        scale(1.06);

    transition:
        transform 1.2s ease;

    z-index:
        0;
}


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

.aisoch-card-think
.aisoch-card-image {

    background-image:
        url(
        "../img/card 1.PNG"
        );
}


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

.aisoch-card-create
.aisoch-card-image {

    background-image:
        url(
        "../img/card2.PNG"
        );
}


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

.aisoch-card-grow
.aisoch-card-image {

    background-image:
        url(
        "../img/card3.PNG"
        );
}


/* =========================================================
   DARK GRADIENT OVERLAY
========================================================= */

.aisoch-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;
}


/* THINK */

.aisoch-card-think::before {

    background:
        linear-gradient(
            180deg,
            rgba(3,13,23,.97) 0%,
            rgba(3,13,23,.68) 28%,
            rgba(3,13,23,.20) 52%,
            rgba(3,13,23,.65) 76%,
            rgba(3,13,23,.98) 100%
        );
}


/* CREATE */

.aisoch-card-create::before {

    background:
        linear-gradient(
            180deg,
            rgba(20,3,28,.97) 0%,
            rgba(20,3,28,.68) 28%,
            rgba(20,3,28,.20) 52%,
            rgba(20,3,28,.65) 76%,
            rgba(20,3,28,.98) 100%
        );
}


/* GROW */

.aisoch-card-grow::before {

    background:
        linear-gradient(
            180deg,
            rgba(28,16,3,.97) 0%,
            rgba(28,16,3,.68) 28%,
            rgba(28,16,3,.20) 52%,
            rgba(28,16,3,.65) 76%,
            rgba(28,16,3,.98) 100%
        );
}


/* =========================================================
   INNER CARD SHADOW
========================================================= */

.aisoch-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    box-shadow:
        inset 0 0 90px rgba(0,0,0,.85),
        inset 0 -100px 120px rgba(0,0,0,.75),
        inset 0 50px 80px rgba(0,0,0,.45);
}


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

.aisoch-card-top {

    position:
        relative;

    z-index:
        3;

    padding:
        28px 25px 0;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;
}


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

.aisoch-card-icon {
    width:
        62px;
    height:
        62px;
    flex-shrink:
        0;

    border-radius:
        14px;

    overflow:
        hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.55),
        inset 0 0 20px rgba(0,0,0,.4);
}


.aisoch-card-icon img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .5s ease;
}


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

.aisoch-card-headtext {

    display:
        flex;

    flex-direction:
        column;
}


.aisoch-card-num {

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        4px;
}


.aisoch-card-think
.aisoch-card-num {

    color:
        #34d3ff;
}


.aisoch-card-create
.aisoch-card-num {

    color:
        #d94fff;
}


.aisoch-card-grow
.aisoch-card-num {

    color:
        #ff9d2e;
}


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

.aisoch-card-title {

    font-size:
        28px;

    font-weight:
        800;

    margin:
        0 0 4px;

    line-height:
        1;
}


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

.aisoch-card-sub {

    font-size:
        15px;

    color:
        #fff;

    margin:
        0;

    line-height:
        1.5;
        font-weight: 600;
}


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

.aisoch-card-bottom {

    position:
        relative;

    z-index:
        3;

    padding:
        0 25px 28px;
}


.aisoch-card-footer {

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.45;

    margin:
        0;

    letter-spacing:
        .5px;

    text-shadow:
        0 2px 12px rgba(0,0,0,.9);
}


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

.aisoch-card-think {

    border-color:
        rgba(52,211,255,.50);

    box-shadow:
        0 20px 60px rgba(52,211,255,.14),
        inset 0 0 70px rgba(0,0,0,.65);
}


.aisoch-card-create {

    border-color:
        rgba(217,79,255,.50);

    box-shadow:
        0 20px 60px rgba(217,79,255,.14),
        inset 0 0 70px rgba(0,0,0,.65);
}


.aisoch-card-grow {

    border-color:
        rgba(255,157,46,.50);

    box-shadow:
        0 20px 60px rgba(255,157,46,.14),
        inset 0 0 70px rgba(0,0,0,.65);
}


/* =========================================================
   HOVER
========================================================= */

.aisoch-card:hover {

    transform:
        translateY(-10px);
}


.aisoch-card:hover
.aisoch-card-image {

    transform:
        scale(1.14);
}


.aisoch-card:hover
.aisoch-card-icon img {

    transform:
        scale(1.12);
}


/* =========================================================
   BOTTOM TAGLINE
========================================================= */

.aisoch-tagline {

    margin-top:
        50px;

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        1px;

    opacity:
        0;

    transform:
        translateY(20px);

    animation:
        aisochFadeUp .8s 1.3s ease forwards;
}


.aisoch-tagline span:nth-child(1) {

    color:
        #34d3ff;
}


.aisoch-tagline span:nth-child(2) {

    color:
        #d94fff;

    margin:
        0 12px;
}


.aisoch-tagline span:nth-child(3) {

    color:
        #ff9d2e;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aisochFadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(25px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes aisochHeadingReveal {

    from {

        opacity:
            0;

        transform:
            translateY(40px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes signatureReveal {

    from {

        opacity:
            0;

        transform:
            rotate(-8deg)
            translateY(30px)
            scale(.85);
    }

    to {

        opacity:
            1;

        transform:
            rotate(-8deg)
            translateY(0)
            scale(1);
    }
}


@keyframes cardReveal {

    from {

        opacity:
            0;

        transform:
            translateY(70px)
            scale(.97);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

@media (max-width: 1000px) {

    .aisoch-head,
    .aisoch-cards,
    .aisoch-tagline {

        width:
            92%;
    }


    .aisoch-heading-wrap {

        gap:
            25px;
    }


    .aisoch-heading {

        font-size:
            48px;
    }


    .aisoch-growth-text {

        font-size:
            36px;
    }


    .aisoch-cards {

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


    .aisoch-card:last-child {

        grid-column:
            1 / -1;

        max-width:
            480px;

        width:
            100%;

        margin-left:
            auto;

        margin-right:
            auto;
    }
}


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

@media (max-width: 700px) {

    .aisoch-section {

        width:
            100%;

        padding:
            65px 0;
    }


    .aisoch-head,
    .aisoch-cards,
    .aisoch-tagline {

        width:
            92%;
    }


    /* HEADING + SIGNATURE */

    .aisoch-heading-wrap {

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            25px;
    }


    .aisoch-heading {

        width:
            100%;

        font-size:
            38px;

        letter-spacing:
            -1px;

        text-align:
            left;
    }


    .aisoch-growth-text {

        align-self:
            flex-end;

        margin-right:
            15px;

        font-size:
            38px;

        text-align:
            right;
    }


    .aisoch-subtext {

        text-align:
            left;
    }


    /* CARDS */

    .aisoch-cards {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .aisoch-card {

        min-height:
            430px;
    }


    .aisoch-card:last-child {

        grid-column:
            auto;

        max-width:
            none;
    }


    /* TAGLINE */

    .aisoch-tagline {

        font-size:
            14px;

        line-height:
            2;
    }


    .aisoch-tagline span {

        display:
            block;
    }


    .aisoch-tagline span:nth-child(2) {

        margin:
            0;
    }
}


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

@media (max-width: 400px) {

    .aisoch-heading {

        font-size:
            32px;
    }


    .aisoch-growth-text {

        font-size:
            32px;
    }


    .aisoch-card {

        min-height:
            400px;
    }


    .aisoch-card-title {

        font-size:
            24px;
    }


    .aisoch-card-icon {

        width:
            55px;

        height:
            55px;
    }
}



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

.ai-services-section {
    position: relative;
    width: 100%;
    padding: 90px 0 100px;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 229, 255, .08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255, 0, 153, .08),
            transparent 30%
        ),
        #05070d;

    overflow: hidden;
    color: #fff;
}


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

.ai-services-head {
    width: 90%;
    margin: 0 auto 55px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.ai-heading-left {
    max-width: 700px;
}

.ai-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #00e5ff;
}

.ai-heading-left h2 {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(28px, 5vw, 52px);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -3px;
}

.ai-heading-left h2 span {
    display: block;

     background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #ffa52e  100%
    );

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


/* =====================================================
   SIGNATURE
===================================================== */

.ai-signature {
    flex-shrink: 0;

    margin-bottom: 4px;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: clamp(34px, 4vw, 58px);
    line-height: .75;

    color: #00e5ff;

    transform: rotate(-7deg);
    text-align: left;

    text-shadow:
        0 0 25px rgba(0,229,255,.25);
}

.ai-signature span {
    color: #ff4fc3;
}


/* =====================================================
   CAROUSEL WRAPPER
===================================================== */

.ai-carousel-wrapper {
    position: relative;

    width: 100%;

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


/* =====================================================
   VIEWPORT
===================================================== */

.ai-carousel-viewport {
    width: 90%;
    overflow: hidden;

    position: relative;

    padding: 25px 0 30px;
}


/* =====================================================
   TRACK
===================================================== */

.ai-carousel-track {
    display: flex;
    align-items: center;

    gap: 22px;

    width: max-content;

    will-change: transform;

    transition:
        transform .75s cubic-bezier(.22,.61,.36,1);
}


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

.ai-service-card {

    position: relative;

    flex: 0 0 calc((90vw - 44px) / 3);
    width: calc((90vw - 44px) / 3);

    height: 315px;

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    background: #0b0f18;

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

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 0 40px rgba(255,255,255,.02);

    transform:
        scale(.92);

    opacity: .62;

    filter: brightness(.70);

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1),
        opacity .7s ease,
        filter .7s ease,
        border-color .7s ease,
        box-shadow .7s ease;

    transform-origin: center center;
}


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

.ai-service-card.is-active {

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

    opacity: 1;

    filter: brightness(1);

    z-index: 10;

    border-color:
        rgba(0,229,255,.45);

    box-shadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 45px rgba(0,229,255,.10),
        inset 0 0 35px rgba(255,255,255,.04);
}


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

.ai-service-image {

    position: absolute;
    inset: 0;

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

    transition:
        transform .8s ease;
}

.ai-service-card:hover .ai-service-image {
    transform: scale(1.06);
}


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

.ai-card-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.25) 35%,
            rgba(0,0,0,.90) 100%
        );
}


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

.ai-card-content {

    position: absolute;
    inset: 0;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    z-index: 2;
}


.ai-card-top {

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-card-top > span {

    font-family: "Inter", Arial, sans-serif;

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

    letter-spacing: 2px;

    color: rgba(255,255,255,.65);
}


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

.ai-service-icon {

    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    font-size: 20px;

    color: #00e5ff;

    background:
        rgba(0,0,0,.35);

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

    backdrop-filter: blur(10px);

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


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

.ai-card-content h3 {

    margin: 0 0 8px;

    font-family: "Inter", Arial, sans-serif;

    font-size: 23px;
    line-height: 1.05;

    font-weight: 750;

    letter-spacing: -.7px;
}

.ai-card-content p {

    max-width: 330px;

    margin: 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;
    line-height: 1.55;

    color: rgba(255,255,255,.72);
}


/* =====================================================
   SLIDER BUTTONS
===================================================== */

.ai-carousel-btn {

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    background:
        rgba(10,13,22,.80);

    color: #fff;

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

    cursor: pointer;

    z-index: 30;

    backdrop-filter: blur(12px);

    transition:
        .3s ease;
}

.ai-carousel-btn:hover {

    background: #00e5ff;

    color: #05070d;

    border-color: #00e5ff;

    box-shadow:
        0 0 25px rgba(0,229,255,.35);
}

.ai-carousel-btn span {

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

    margin-top: -3px;
}

.ai-carousel-prev {
    left: 1.5%;
}

.ai-carousel-next {
    right: 1.5%;
}


/* =====================================================
   MODAL
===================================================== */

.ai-service-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

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

    padding: 25px;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(14px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.ai-service-modal.active {

    opacity: 1;
    visibility: visible;
}


.ai-modal-box {
    position: relative;
    width: min(900px, 95vw);
    height: min(650px, 85vh);

    overflow: hidden;
    border-radius: 24px;

    background: #090d16;
    border: 1px solid rgba(255,255,255,.12);

    box-shadow: 0 40px 100px rgba(0,0,0,.65);

    transform: scale(.94) translateY(20px);
    transition: transform .4s ease;
}

.ai-modal-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

/* Close button */
.ai-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;

    z-index: 20;

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

    background: rgba(0,0,0,.65);
    color: #fff;

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

    cursor: pointer;

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

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

    .ai-modal-box {
        width: 94vw;
        height: 75vh;
        border-radius: 18px;
    }

    .ai-modal-image {
        background-size: cover;
        background-position: center;
    }

    .ai-modal-close {
        width: 36px;
        height: 36px;
        top: 10px;
        right: 10px;
        font-size: 23px;
    }
}

.ai-service-modal.active .ai-modal-box {

    transform:
        scale(1)
        translateY(0);
}


.ai-modal-image {

    min-height: 420px;

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


.ai-modal-content {

    padding: 55px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-modal-content > span {

    margin-bottom: 15px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    color: #00e5ff;
}

.ai-modal-content h2 {

    margin: 0 0 18px;

    font-family: "Inter", Arial, sans-serif;

    font-size: 42px;

    line-height: 1;

    letter-spacing: -1.5px;
}

.ai-modal-content p {

    margin: 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255,255,255,.65);
}


.ai-modal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

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

    background: rgba(0,0,0,.55);

    color: #fff;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    z-index: 5;

    transition: .3s ease;
}

.ai-modal-close:hover {

    background: #ff3cae;

    border-color: #ff3cae;
}


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

@media (max-width: 1000px) {

    .ai-service-card {

        flex: 0 0 30vw;
        width: 30vw;

        height: 300px;
    }

    .ai-carousel-btn {

        width: 38px;
        height: 38px;
    }

    .ai-carousel-prev {
        left: 1%;
    }

    .ai-carousel-next {
        right: 1%;
    }

}


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

@media (max-width: 767px) {

    .ai-services-section {

        padding: 65px 0 75px;
    }

    .ai-services-head {

        width: 88%;

        flex-direction: column;

        align-items: flex-start;

        gap: 28px;

        margin-bottom: 35px;
    }

    .ai-heading-left h2 {

        font-size: 43px;

        letter-spacing: -2px;
    }

    .ai-signature {

        font-size: 42px;

        margin-left: 20px;
    }

    .ai-carousel-viewport {

        width: 82%;

        padding:
            20px 0 25px;
    }

    .ai-carousel-track {

        gap: 16px;
    }

    .ai-service-card {

        flex: 0 0 82vw;

        width: 82vw;

        height: 330px;

        border-radius: 18px;

        transform: scale(.94);
    }

    .ai-service-card.is-active {

        transform:
            scale(1.01)
            translateY(-4px);
    }

    .ai-card-content {

        padding: 20px;
    }

    .ai-card-content h3 {

        font-size: 22px;
    }

    .ai-card-content p {

        font-size: 12px;
    }

    .ai-carousel-btn {

        width: 36px;
        height: 36px;
    }

    .ai-carousel-btn span {

        font-size: 25px;
    }

    .ai-carousel-prev {
        left: 2%;
    }

    .ai-carousel-next {
        right: 2%;
    }

    .ai-modal-box {

        width: 94vw;

        min-height: auto;

        display: block;

        border-radius: 20px;
    }

    .ai-modal-image {

        height: 260px;

        min-height: 260px;
    }

    .ai-modal-content {

        padding: 30px 25px 35px;
    }

    .ai-modal-content h2 {

        font-size: 32px;
    }

}


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

@media (max-width: 480px) {

    .ai-heading-left h2 {

        font-size: 36px;
    }

    .ai-signature {

        font-size: 36px;
    }

    .ai-service-card {

        height: 310px;
    }

}


/* ======================card==6== */

.audx-pm-section {
    width: 100%;
    padding: 45px 0 65px;
    background: #03050a;
    color: #fff;
    overflow: hidden;
}

.audx-pm-wrap {
    width: 90%;
    max-width: 1280px;
    margin: auto;
}


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

.audx-pm-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.audx-pm-heading h2 {
    margin: 0;
    font-family: Impact, "Arial Narrow", Arial, sans-serif;
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1;
    /* letter-spacing: -2px; */
    font-weight: 400;
}

.audx-pm-heading h2 span {
   background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #ffa52e  100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.audx-pm-powered {
    margin-top: 12px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
    color: #00eaff;
}


/* ================= SIGNATURE ================= */

.audx-pm-signature {
    margin-top: 14px;
    margin-right: 12px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    transform: rotate(-7deg);

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: clamp(28px, 3vw, 42px);
    line-height: .85;

    color: #00eaff;

    text-shadow:
        0 0 8px rgba(0,234,255,.65);
}

.audx-pm-signature span:last-child {
    margin-top: 9px;
    margin-right: 12px;
}


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

.audx-pm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


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

.audx-pm-card {
    position: relative;
    height: 415px;
    overflow: hidden;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}


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

.audx-pm-meta {
    border: 1px solid rgba(0,225,255,.75);

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.651) 0%,
            rgba(0, 0, 0, 0.712) 45%,
            rgba(0,0,0,.90) 100%
        ),
        url("../img/baner1.jpeg");

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

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

.audx-pm-hotstar {
    border: 1px solid rgba(238,0,204,.75);

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.651) 0%,
            rgba(0, 0, 0, 0.712) 45%,
            rgba(0,0,0,.90) 100%
        ),
        url("../img/banner2.jpeg");

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

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

.audx-pm-card-content {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    padding: 32px 28px 30px 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;

}


/* CARD HEADING */

.audx-pm-card-content h3 {

    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
}


/* JIO HOTSTAR */

.audx-pm-card-content h4 {
    margin: 5px 0 0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}


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

.audx-pm-card-content ul {

    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.audx-pm-card-content li {

    position: relative;
    margin-bottom: 12px;
    padding-left: 14px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;

    color: rgba(255,255,255,.95);
}


/* BULLET */

.audx-pm-card-content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00eaff;
    box-shadow: 0 0 8px #00eaff;
}


/* ================= HOVER ================= */

.audx-pm-card {
    transition: .35s ease;
}

.audx-pm-card:hover {
    transform: translateY(-4px);
}


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

@media (max-width: 900px) {

    .audx-pm-wrap {
        width: 92%;
    }

    .audx-pm-heading h2 {
        font-size: 58px;
    }

    .audx-pm-card {
        height: 350px;
    }

    .audx-pm-card-content {
        width: 55%;
        padding: 27px 22px 25px 12px;
    }

}


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

@media (max-width: 650px) {

    .audx-pm-section {
        padding: 30px 0 45px;
    }

    .audx-pm-top {
        position: relative;
        display: block;
    }

    .audx-pm-heading h2 {
        font-size: clamp(42px, 11vw, 58px);
        line-height: .88;
    }

    .audx-pm-powered {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .audx-pm-signature {
        position: absolute;
        right: 0;
        top: 0;

        margin: 0;

        font-size: 21px;
    }

    .audx-pm-cards {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .audx-pm-card {
        height: 320px;
    }

    .audx-pm-card-content {
        width: 55%;
        padding: 24px 20px 20px 10px;
    }

    .audx-pm-card-content h3 {
        font-size: 18px;
    }

    .audx-pm-card-content h4 {
        font-size: 18px;
    }

    .audx-pm-card-content ul {
        margin-top: 17px;
    }

    .audx-pm-card-content li {
        font-size: 12px;
        margin-bottom: 9px;
    }

}


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

@media (max-width: 400px) {

    .audx-pm-heading h2 {
        font-size: 37px;
    }

    .audx-pm-signature {
        font-size: 18px;
    }

    .audx-pm-card {
        height: 295px;
    }

    .audx-pm-card-content {
        width: 58%;
    }

}

/* CARD ANIMATION */
.card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    will-change: transform;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* IMAGE ANIMATION */
.card img {
    transition: transform 0.5s ease;
}

.card:hover img {
    transform: scale(1.06);
}

/* OPTIONAL: CARD CONTENT */
.card .card-content {
    transition: transform 0.4s ease;
}

.card:hover .card-content {
    transform: translateY(-3px);
}

.card {
    animation: cardReveal 0.8s ease both;
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

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

@media (max-width: 768px) {

    .audx-pm-meta,
    .audx-pm-hotstar {
        min-height: 220px;
        padding: 20px;
        background-position: center;
    }

    .audx-pm-meta h2,
    .audx-pm-hotstar h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .audx-pm-meta h3,
    .audx-pm-hotstar h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .audx-pm-meta p,
    .audx-pm-hotstar p {
        font-size: 14px;
        line-height: 1.5;
    }

    .audx-pm-meta span,
    .audx-pm-hotstar span {
        font-size: 12px;
    }
}


/* SMALL PHONES */
@media (max-width: 480px) {

    .audx-pm-meta,
    .audx-pm-hotstar {
        min-height: 200px;
        padding: 16px;
    }

    .audx-pm-meta h2,
    .audx-pm-hotstar h2 {
        font-size: 20px;
    }

    .audx-pm-meta h3,
    .audx-pm-hotstar h3 {
        font-size: 16px;
    }

    .audx-pm-meta p,
    .audx-pm-hotstar p {
        font-size: 13px;
    }

    .audx-pm-meta span,
    .audx-pm-hotstar span {
        font-size: 11px;
    }
}

/* =================================== */


/* =====================================================
   MAIN SECTION
===================================================== */

.ai-foundation-section {

    position: relative;
    width: 100%;
    min-height: 680px;

    padding: 80px 0 55px;

    overflow: hidden;

    color: #fff;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,5,22,.96),
            rgba(5,7,28,.82)
        ),
        url("../img/bnner3.jpg");

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

    font-family: "Inter", Arial, sans-serif;
}


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

.ai-foundation-overlay {

    position: absolute;
    inset: 0;

    pointer-events: none;

}


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

.ai-foundation-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -220px;
    left: -180px;

    border-radius: 50%;

    background: rgba(0, 220, 255, .16);

    filter: blur(120px);

}


.ai-foundation-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    bottom: -260px;

    border-radius: 50%;

    background: rgba(255, 0, 220, .15);

    filter: blur(130px);

}


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

.ai-foundation-container {

    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 1250px;

    margin: auto;

}


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

.ai-foundation-top {

    width: 100%;

    display: flex;

    justify-content: flex-start;

    text-align: left;

    margin-bottom: 50px;

}


.ai-foundation-content {

    width: 100%;

    max-width: 950px;

    text-align: left;

}


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

.ai-small-title {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #fff;

}


.ai-small-title::before {

    content: "";

    width: 28px;
    height: 2px;

    background: #00eaff;

}


.ai-small-title::after {

    content: "";

    width: 28px;
    height: 2px;

    background: #ff00d9;

}


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

.ai-foundation-content h2 {

    margin: 0;

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

    line-height: .94;

    font-weight: 900;

    letter-spacing: -2px;

    text-transform: uppercase;

}


.ai-foundation-content h2 span {

    color: #00eaff;

}


.ai-foundation-content h2 strong {
    background: linear-gradient(
        90deg,
        #19e8ef 0%,
        #df16e3 55%,
        #e2a82b 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}


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

.ai-foundation-content p {

    max-width: 680px;

    margin: 25px 0 0;

    font-size: 16px;

    line-height: 1.7;

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

}


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

.ai-foundation-cards {
    width: 90%;
    max-width: 950px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}


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

.ai-foundation-card {

    position: relative;

    min-height: 190px;

    padding: 22px 18px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(10,14,40,.94),
            rgba(3,5,20,.97)
        );

    overflow: hidden;

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

    /* CENTER CARD CONTENT */
    text-align: center;

}


/* =====================================================
   TOP GLOW LINE
===================================================== */

.ai-foundation-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

}


/* =====================================================
   BLUE
===================================================== */

.card-blue {

    border: 1px solid rgba(0,234,255,.85);

    box-shadow:
        inset 0 0 25px rgba(0,234,255,.06);

}


.card-blue::before {

    background: #00eaff;

}


/* =====================================================
   PINK
===================================================== */

.card-pink {

    border: 1px solid rgba(255,0,217,.85);

    box-shadow:
        inset 0 0 25px rgba(255,0,217,.06);

}


.card-pink::before {

    background: #ff00d9;

}


/* =====================================================
   YELLOW
===================================================== */

.card-yellow {

    border: 1px solid rgba(255,177,0,.9);

    box-shadow:
        inset 0 0 25px rgba(255,177,0,.06);

}


.card-yellow::before {

    background: #ffb100;

}


/* =====================================================
   PURPLE
===================================================== */

.card-purple {

    border: 1px solid rgba(193,0,255,.9);

    box-shadow:
        inset 0 0 25px rgba(193,0,255,.06);

}


.card-purple::before {

    background: #c100ff;

}


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

.ai-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    /* border-radius: 8px; */

    /* background: rgba(255,255,255,.035); */

    font-size: 25px;

}


.card-blue .ai-card-icon {

    color: #00eaff;

}


.card-pink .ai-card-icon {

    color: #ff00d9;

}


.card-yellow .ai-card-icon {

    color: #ffb100;

}


.card-purple .ai-card-icon {

    color: #c100ff;

}


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

.ai-foundation-card h3 {

    margin: 0;

    font-size: 17px;

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: .5px;

    color: #fff;

    text-align: center;

}


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

.ai-foundation-card p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: rgb(255, 255, 255);
    text-align: center;

}


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

.ai-foundation-card:hover {

    transform: translateY(-7px);

}


.card-blue:hover {

    box-shadow:
        0 12px 35px rgba(0,234,255,.20),
        inset 0 0 25px rgba(0,234,255,.10);

}


.card-pink:hover {

    box-shadow:
        0 12px 35px rgba(255,0,217,.20),
        inset 0 0 25px rgba(255,0,217,.10);

}


.card-yellow:hover {

    box-shadow:
        0 12px 35px rgba(255,177,0,.20),
        inset 0 0 25px rgba(255,177,0,.10);

}


.card-purple:hover {

    box-shadow:
        0 12px 35px rgba(193,0,255,.20),
        inset 0 0 25px rgba(193,0,255,.10);

}


/* =====================================================
   SIGNATURE
===================================================== */

.ai-foundation-signature {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 35px;

    transform: rotate(-3deg);

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

}


.ai-foundation-signature span {

    font-size: 22px;

    color: #fff;

}


.ai-foundation-signature strong {

    font-size: 27px;

    font-weight: 600;

    color: #ff00d9;

}


.ai-foundation-signature small {

    margin-left: 5px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    color: #00eaff;

}


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

@media (max-width: 900px) {

    .ai-foundation-section {

        padding: 65px 0 45px;

    }


    .ai-foundation-content h2 {

        font-size: 50px;

    }


    .ai-foundation-cards {

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

        max-width: 700px;

    }


    .ai-foundation-card {

        min-height: 175px;

    }

}


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

@media (max-width: 600px) {

    .ai-foundation-section {

        min-height: auto;

        padding: 45px 0 35px;

        background-position: center center;

    }


    .ai-foundation-container {

        width: 92%;

    }


    /* TOP CONTENT REMAINS LEFT */

    .ai-foundation-top {

        margin-bottom: 30px;

        justify-content: flex-start;

        text-align: left;

    }


    .ai-foundation-content {

        text-align: left;

    }


    .ai-small-title {

        font-size: 9px;

        letter-spacing: 1.3px;

        gap: 6px;

    }


    .ai-small-title::before,
    .ai-small-title::after {

        width: 17px;

    }


    .ai-foundation-content h2 {

        font-size: 34px;

        line-height: .98;

        letter-spacing: -1px;

    }


    .ai-foundation-content p {

        margin-top: 17px;

        margin-left: 0;

        margin-right: 0;

        font-size: 12px;

        line-height: 1.55;

    }


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

    .ai-foundation-cards {

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

        gap: 9px;

    }


    .ai-foundation-card {

        min-height: 145px;

        padding: 14px 11px;

        text-align: center;

    }


    .ai-card-icon {
        width: 38px;
        height: 38px;
        margin: 0 auto 10px;
        font-size: 18px;

    }


    .ai-foundation-card h3 {
        font-size: 12px;
        text-align: center;

    }


    .ai-foundation-card p {
        margin-top: 7px;
        font-size: 8.5px;
        line-height: 1.4;
        text-align: center;

    }


    /* =================================================
       SIGNATURE
    ================================================= */

    .ai-foundation-signature {

        margin-top: 27px;

        gap: 4px;

    }


    .ai-foundation-signature span {

        font-size: 17px;

    }


    .ai-foundation-signature strong {

        font-size: 21px;

    }


    .ai-foundation-signature small {

        font-size: 9px;

        letter-spacing: .5px;

    }

}


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

@media (max-width: 380px) {

    .ai-foundation-content h2 {

        font-size: 29px;

    }


    .ai-foundation-content p {

        font-size: 11px;

    }


    .ai-foundation-card {

        min-height: 135px;

    }


    .ai-foundation-card h3 {

        font-size: 11px;

    }


    .ai-foundation-card p {

        font-size: 8px;

    }

}


/* ==============section =============== */



/* =====================================================
   AI SALES BANNER
===================================================== */

.ai-sales-banner {

    position: relative;

    width: 100%;

    min-height: 560px;

    padding: 80px 0;

    overflow: hidden;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            #050719 0%,
            #080b20 45%,
            rgba(8,11,32,.75) 70%,
            rgba(8,11,32,.35) 100%
        );

    font-family: "Inter", Arial, sans-serif;

}


/* =====================================================
   IMAGE AREA
   BAAD ME URL CHANGE KAR DENA
===================================================== */

.ai-sales-banner::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 52%;
    height: 100%;

    background-image:
        linear-gradient(
            90deg,
            #080b20 0%,
            rgba(8,11,32,.45) 35%,
            rgba(8,11,32,.08) 100%
        ),
        url("../img/sectio6.png");

    background-size: cover;

    background-position: center;

    z-index: 0;

}

/* =====================================================
   MOBILE - FULL IMAGE COVER
===================================================== */

@media (max-width: 600px) {

    .ai-sales-banner::after {
 .ai-sales-banner {
        min-height: 390px !important;
        height: 390px !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(8,11,32,.80),
                rgba(8,11,32,.35)
            ),
            url("../img/sectio6.png") !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .ai-sales-container {
        position: relative !important;
        z-index: 5 !important;
    }
}


    .ai-sales-container {

        position: relative !important;

        z-index: 2 !important;

    }

}


/* =====================================================
   SMALL PHONE
===================================================== */

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

.ai-sales-banner::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -150px;
    top: -160px;

    border-radius: 50%;

    background: rgba(0,234,255,.13);

    filter: blur(120px);

}


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

.ai-sales-container {

    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1250px;

    min-height: 400px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


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

.ai-sales-content {

    width: 58%;

    text-align: left;

}


.ai-sales-label {

    display: inline-block;

    margin-bottom: 18px;

    padding-left: 14px;

    border-left: 3px solid #00eaff;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #fff;

}


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

.ai-sales-content h1 {

    margin: 0;

    font-size: clamp(48px, 6vw, 78px);

    line-height: .92;

    font-weight: 900;

    letter-spacing: -3px;

    text-transform: uppercase;

}


.ai-sales-content h1 span {

    color: #00eaff;

}


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

.ai-sales-content h2 {
    margin: 18px 0 0;

    font-size: clamp(25px, 3vw, 52px) !important;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    text-transform: uppercase;

    background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #fc9d21 100%
    ) !important;

    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

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

.ai-sales-content p {

    max-width: 590px;

    margin: 25px 0 0;

    font-size: 16px;

    line-height: 1.7;

    color: rgb(255, 255, 255);

}


/* =====================================================
   SIGNATURE
===================================================== */

.ai-sales-signature {

    width: 35%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    text-align: right;

    transform: rotate(-5deg);

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

}


.ai-sales-signature span {

    font-size: 38px;

    line-height: 1;

    color: #fff;

}


.ai-sales-signature strong {

    margin-top: 3px;

    font-size: 48px;

    line-height: 1;

    font-weight: 500;

    color: #ff00d9;

}


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

@media (max-width: 900px) {

    .ai-sales-banner {

        min-height: 500px;

        padding: 65px 0;

    }


    .ai-sales-container {

        min-height: 370px;

    }


    .ai-sales-content {

        width: 62%;

    }


    .ai-sales-content h1 {

        font-size: 52px;

    }


    .ai-sales-content h2 {

        font-size: 30px;

    }


    .ai-sales-content p {

        font-size: 14px;

    }


    .ai-sales-signature {

        width: 32%;

    }


    .ai-sales-signature span {

        font-size: 28px;

    }


    .ai-sales-signature strong {

        font-size: 35px;

    }

}


/* =====================================================
   MOBILE
===================================================== */
/* =====================================================
   FORCE MOBILE IMAGE + RESPONSIVE
===================================================== */

@media (max-width: 600px) {

    .ai-sales-banner {

        position: relative !important;

        width: 100% !important;

        min-height: 390px !important;

        height: auto !important;

        padding: 35px 0 30px !important;

        overflow: hidden !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(5,7,25,.82),
                rgba(5,7,25,.40)
            ),
            url("../img/ai-sales-banner.jpg") !important;

        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

    }


    /* DESKTOP IMAGE LAYER COMPLETELY OFF */

    .ai-sales-banner::after {

        display: none !important;

        content: none !important;

    }


    .ai-sales-container {

        position: relative !important;

        z-index: 10 !important;

        width: 92% !important;

        max-width: 100% !important;

        min-height: 320px !important;

        height: auto !important;

        margin: 0 auto !important;

        display: block !important;

    }


    /* =================================================
       SIGNATURE TOP RIGHT
    ================================================= */

    .ai-sales-signature {

        position: absolute !important;

        top: 0 !important;

        right: 0 !important;

        width: auto !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-end !important;

        justify-content: flex-start !important;

        text-align: right !important;

        transform: rotate(-5deg) !important;

        z-index: 20 !important;

    }


    .ai-sales-signature span {

        font-size: 21px !important;

        line-height: 1 !important;

        color: #fff !important;

    }


    .ai-sales-signature strong {

        margin-top: 3px !important;

        font-size: 27px !important;

        line-height: 1 !important;

        color: #ff00d9 !important;

    }


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

    .ai-sales-content {

        position: relative !important;

        z-index: 15 !important;

        width: 70% !important;

        max-width: 70% !important;

        padding-top: 65px !important;

        text-align: left !important;

    }


    .ai-sales-label {

        display: inline-block !important;

        margin-bottom: 12px !important;

        padding-left: 8px !important;

        font-size: 8px !important;

        letter-spacing: 1.5px !important;

    }


    .ai-sales-content h1 {

        margin: 0 !important;

        font-size: 32px !important;

        line-height: .95 !important;

        letter-spacing: -1.2px !important;

    }


    .ai-sales-content h2 {

        margin: 12px 0 0 !important;

        font-size: 19px !important;

        line-height: 1.05 !important;

        letter-spacing: -.3px !important;

    }


    .ai-sales-content p {

        max-width: 280px !important;

        margin: 15px 0 0 !important;

        font-size: 10px !important;

        line-height: 1.5 !important;

    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .ai-sales-banner {

        min-height: 360px !important;

        padding: 30px 0 25px !important;

        background-position: center center !important;

    }


    .ai-sales-container {

        min-height: 300px !important;

    }


    .ai-sales-signature {

        top: 0 !important;

        right: 0 !important;

    }


    .ai-sales-signature span {

        font-size: 18px !important;

    }


    .ai-sales-signature strong {

        font-size: 24px !important;

    }


    .ai-sales-content {

        width: 73% !important;

        max-width: 73% !important;

        padding-top: 58px !important;

    }


    .ai-sales-content h1 {

        font-size: 28px !important;

    }


    .ai-sales-content h2 {

        font-size: 17px !important;

    }


    .ai-sales-content p {

        font-size: 9px !important;

        max-width: 235px !important;

    }

}
@media (max-width: 600px) {

    .ai-sales-banner {

        min-height: 580px;

        padding: 55px 0;

    }


    /* IMAGE AREA */

    .ai-sales-banner::after {

        width: 100%;

        opacity: .25;

        background-image:
            linear-gradient(
                90deg,
                #050719,
                rgba(5,7,25,.75)
            ),
            url("../img/ai-sales-banner.jpg");

        background-position: center;

    }


    .ai-sales-container {

        width: 92%;

        min-height: 470px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: space-between;

    }


    /* LEFT CONTENT */

    .ai-sales-content {

        width: 100%;

        text-align: left;

    }


    .ai-sales-label {

        margin-bottom: 14px;

        font-size: 9px;

        letter-spacing: 2px;

    }


    .ai-sales-content h1 {

        font-size: 38px;

        line-height: .95;

        letter-spacing: -1.5px;

    }


    .ai-sales-content h2 {

        margin-top: 14px;

        font-size: 22px;

        line-height: 1.05;

    }


    .ai-sales-content p {

        max-width: 330px;

        margin-top: 17px;

        font-size: 11px;

        line-height: 1.55;

    }


    /* SIGNATURE */

    .ai-sales-signature {

        width: 100%;

        align-items: flex-end;

        text-align: right;

        transform: rotate(-5deg);

    }


    .ai-sales-signature span {

        font-size: 25px;

    }


    .ai-sales-signature strong {

        font-size: 32px;

    }

}


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

@media (max-width: 380px) {

    .ai-sales-banner {

        min-height: 530px;

    }


    .ai-sales-content h1 {

        font-size: 32px;

    }


    .ai-sales-content h2 {

        font-size: 19px;

    }


    .ai-sales-content p {

        font-size: 10px;

    }


    .ai-sales-signature span {

        font-size: 22px;

    }


    .ai-sales-signature strong {

        font-size: 28px;

    }

}




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

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

.aiso-final-cta {
    position: relative;

    margin-top: 100px;
    min-height: 330px;

    padding: 65px 70px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    overflow: hidden;
}

.aiso-final-glow {
    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -260px;

    border-radius: 50%;

    background: rgba(190, 0, 255, .25);
    filter: blur(90px);
}


/* CTA CONTENT */

.aiso-final-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.aiso-final-label {
    margin-bottom: 18px;

    color: #fcfcfc;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.aiso-final-content h3 {
    margin: 0;

    font-family: "Outfit", sans-serif;

    font-size: clamp(42px, 5vw, 70px);
    line-height: .98;
    letter-spacing: -2px;
    font-weight: 800;
}

.aiso-final-content h3 span {
    display: block;

    color: transparent;
    -webkit-text-stroke: 1px #2fe6e0;
}

.aiso-final-content p {
    max-width: 600px;

    margin: 24px 0 30px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.8;
}


/* BUTTON */

.aiso-final-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 28px;

    border: 1px solid #fff;
    border-radius: 50px;

    background: #fff;
    color: #080914;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;

    transition: all .3s ease;
}

.aiso-final-btn:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-3px);
}


/* SIGNATURE */

.aiso-final-signature {
    position: absolute;

    right: 55px;
    bottom: 45px;

    z-index: 3;

    color: #2fe6e0;
    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 27px;
    font-style: italic;

    transform: rotate(-5deg);
}


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

@media (max-width: 900px) {

    .aiso-faq-section {
        padding: 80px 0;
    }

    .aiso-faq-question-text {
        font-size: 17px;
    }

    .aiso-faq-answer {
        padding-left: 45px;
        padding-right: 30px;
    }

    .aiso-final-cta {
        padding: 50px 40px;
        margin-top: 75px;
    }

}


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

@media (max-width: 600px) {

    .aiso-faq-section {
        padding: 65px 0 60px;
    }

    .aiso-faq-wrap {
        width: 91%;
    }


    /* HEADING */

    .aiso-faq-top {
        margin-bottom: 40px;
    }

    .aiso-faq-label {
        padding: 6px 12px;
        margin-bottom: 18px;

        font-size: 8px;
        letter-spacing: 2px;
    }

    .aiso-faq-top h2 {
        font-size: 29px;
        line-height: 1;
        letter-spacing: -1.4px;
    }

    .aiso-faq-top p {
        margin-top: 20px;

        font-size: 13px;
        line-height: 1.75;
    }


    /* QUESTION */

    .aiso-faq-question {
        min-height: 75px;
        padding: 18px 0;

        gap: 12px;
    }

    .aiso-faq-question-text {
        gap: 11px;

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

    .aiso-faq-question-text small {
        min-width: 23px;
        font-size: 13px;
    }

    .aiso-faq-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;

        font-size: 18px;
    }


    /* ANSWER */

    .aiso-faq-answer {
        padding-left: 34px;
        padding-right: 5px;
    }

    .aiso-faq-answer p {
        font-size: 12.5px;
        line-height: 1.75;
    }

    .aiso-faq-item.active .aiso-faq-answer {
        padding-bottom: 22px;
    }


    /* CTA */

    .aiso-final-cta {
        margin-top: 60px;

        min-height: auto;

        padding: 38px 24px 85px;

        border-radius: 22px;
    }

    .aiso-final-label {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .aiso-final-content h3 {
        font-size: 37px;
        line-height: 1;
        letter-spacing: -1.2px;
    }

    .aiso-final-content p {
        margin: 20px 0 25px;

        font-size: 12.5px;
        line-height: 1.7;
    }

    .aiso-final-btn {
        width: 100%;
        min-height: 50px;
    }

    .aiso-final-signature {
        right: 22px;
        bottom: 23px;

        font-size: 19px;
    }

}


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

@media (max-width: 380px) {

    .aiso-faq-top h2 {
        font-size: 24px;
    }

    .aiso-faq-question-text {
        font-size: 13px;
    }

    .aiso-final-content h3 {
        font-size: 33px;
    }

    .aiso-final-signature {
        font-size: 17px;
    }

}

/* ===================== */


.ai-sales-flow-box{
    width:100%;
    /* max-width:1250px; */
   
    margin:0 auto;
    padding:10px 20px;
    font-family:Arial,Helvetica,sans-serif;
}

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

.ai-sales-flow-cards{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:28px;
}

.ai-sales-flow-card{
    flex:1;
    max-width:220px;
    min-height:190px;

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    padding:13px 12px 16px;

    border:1px solid rgba(67,184,255,.55);
    border-radius:7px;

    background:
        linear-gradient(
            145deg,
            rgba(7,25,52,.98),
            rgba(2,7,19,.99)
        );

    box-shadow:
        0 0 15px rgba(0,174,255,.08),
        inset 0 0 25px rgba(0,150,255,.035);

    overflow:hidden;

    transition:.35s ease;
}

.ai-sales-flow-card:hover{
    transform:translateY(-8px);

    border-color:#00eaff;

    box-shadow:
        0 0 25px rgba(0,234,255,.25),
        inset 0 0 30px rgba(0,234,255,.06);
}

/* TOP GLOW */

.ai-sales-flow-card::before{
    content:"";
    position:absolute;

    top:-80px;
    left:50%;

    width:100px;
    height:100px;

    transform:translateX(-50%);

    border-radius:50%;

    background:#00d9ff;

    opacity:.08;

    filter:blur(25px);
}

/* MOVING BOTTOM LINE */

.ai-sales-flow-card::after{
    content:"";

    position:absolute;

    left:-100%;
    bottom:0;

    width:100%;
    height:2px;

    background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #ffa52e  100%
    );

    animation:aiCardLine 3s linear infinite;
}

@keyframes aiCardLine{
    0%{
        left:-100%;
    }

    100%{
        left:100%;
    }
}

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

.ai-sales-number{
    width:100%;
    text-align:left;

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

    color:#ff3bdb;

    letter-spacing:1px;

    margin-bottom:5px;
}

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

.ai-sales-icon{
    width:42px;
    height:42px;

    border-radius:50%;

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

    margin-bottom:11px;

    border:1px solid currentColor;

    font-size:18px;

    box-shadow:
        0 0 10px currentColor,
        inset 0 0 10px rgba(255,255,255,.03);

    animation:aiIconPulse 2.5s ease-in-out infinite;
}

@keyframes aiIconPulse{

    0%,100%{
        transform:scale(1);
        box-shadow:0 0 8px currentColor;
    }

    50%{
        transform:scale(1.06);
        box-shadow:0 0 20px currentColor;
    }

}

.ai-icon-blue{
    color:#00d9ff;
}

.ai-icon-green{
    color:#00ff9d;
}

.ai-icon-purple{
    color:#d847ff;
}

.ai-icon-cyan{
    color:#00eaff;
}

.ai-icon-pink{
    color:#ff35d9;
}

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

.ai-sales-flow-card h3{
    margin:0 0 9px;

    color:#fff;

    font-size:15px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.ai-sales-flow-card p{
    margin:0;
    color:#aeb9c9;
    font-size:14px;
    line-height:1.55;
}

.ai-sales-flow-card p strong{
    color:#fff;
}

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

.ai-sales-bottom{
    width:100%;

    margin-top:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:55px;
}

/* ================= FEATURES ================= */

.ai-sales-features{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:32px;
}

.ai-sales-feature{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    color:#aeb8c7;

    font-size:8px;

    line-height:1.35;

    text-align:left;

    text-transform:uppercase;
}

.ai-sales-feature strong{
    color:#fff;
}

.ai-sales-feature-icon{
    font-size:17px;

    color:#00eaff;

    text-shadow:0 0 10px currentColor;
}

.ai-sales-feature:nth-child(2)
.ai-sales-feature-icon{
    color:#00ff9d;
}

.ai-sales-feature:nth-child(3)
.ai-sales-feature-icon{
    color:#ff38d9;
}

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

.ai-sales-button{
    display:inline-flex;

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

    gap:8px;

    padding:10px 20px;

    border-radius:30px;

    background:#00eaff;

    color:#001018;

    font-size:9px;

    font-weight:900;

    text-decoration:none;

    text-transform:uppercase;

    white-space:nowrap;

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

    transition:.3s ease;
}

.ai-sales-button:hover{
    transform:translateY(-3px) scale(1.04);

    box-shadow:
        0 0 28px rgba(0,234,255,.75);
}

.ai-sales-button i{
    font-size:12px;
}

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

.ai-sales-hand{
    color:#00eaff;

    font-family:cursive;

    font-size:19px;

    line-height:1.05;

    text-align:left;

    transform:rotate(-7deg);

    text-shadow:
        0 0 8px rgba(0,234,255,.7);

    animation:aiHandFloat 3s ease-in-out infinite;
}

.ai-sales-hand span{
    display:block;

    margin-left:16px;
}

@keyframes aiHandFloat{

    0%,100%{
        transform:rotate(-7deg) translateY(0);
    }

    50%{
        transform:rotate(-5deg) translateY(-4px);
    }

}


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

@media(max-width:1050px){

    .ai-sales-flow-cards{
        gap:15px;
    }

    .ai-sales-flow-card{
        max-width:none;
    }

    .ai-sales-bottom{
        gap:25px;
        flex-wrap:wrap;
    }

}


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

@media(max-width:700px){

    .ai-sales-flow-box{
        padding:5px 10px;
    }

    .ai-sales-flow-cards{
        display:grid;

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

        gap:15px;
    }

    .ai-sales-flow-card{
        max-width:none;
        min-height:185px;
    }

    .ai-sales-bottom{
        flex-direction:column;

        gap:20px;
    }

    .ai-sales-features{
        width:100%;

        gap:15px;

        justify-content:center;
    }

    .ai-sales-button{
        order:2;
    }

    .ai-sales-hand{
        order:3;

        text-align:center;

        margin:auto;
    }

}


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

@media(max-width:430px){

    .ai-sales-flow-cards{
        gap:12px;
    }

    .ai-sales-flow-card{
        min-height:175px;

        padding:11px 8px;
    }

    .ai-sales-flow-card h3{
        font-size:16px;
    }

    .ai-sales-flow-card p{
        font-size:12.5px;
    }

    .ai-sales-icon{
        width:36px;
        height:36px;

        font-size:15px;
    }

    .ai-sales-feature{
        font-size:7px;
    }

    .ai-sales-features{
        gap:9px;
    }

    .ai-sales-hand{
        font-size:17px;
    }

}


/* =========================================================
   CYAN + PURPLE GRADIENT WHATSAPP CHATBOT
========================================================= */

.sticky-whatsapp-chatbot {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 99999;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 8px 18px 8px 8px;

    background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #ffa52e  100%
    );

    color: #fff;

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

    text-decoration: none;

    box-shadow:
        0 8px 30px rgba(123,44,255,.35),
        0 0 25px rgba(0,229,255,.12);

    transition: all .35s ease;
}

.sticky-whatsapp-chatbot:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.02);

    box-shadow:
        0 14px 40px rgba(123,44,255,.5),
        0 0 30px rgba(0,229,255,.2);
}


/* WHATSAPP ICON */

.sticky-whatsapp-icon {
    width: 42px;
    height: 42px;

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

    background: rgba(0,0,0,.28);

    color: #fff;

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

    border-radius: 50%;

    font-size: 23px;

    flex-shrink: 0;

    backdrop-filter: blur(8px);

    transition: .3s ease;
}

.sticky-whatsapp-chatbot:hover .sticky-whatsapp-icon {
    background: #fff;
    color: #7b2cff;

    transform: scale(1.08);
}


/* CHATBOT TEXT */

.sticky-whatsapp-text {
    font-family: "Inter", sans-serif;

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

    letter-spacing: 2px;

    color: #fff;

    white-space: nowrap;
}


/* GLOW */

.sticky-whatsapp-chatbot::before {
    content: "";

    position: absolute;
    inset: -5px;

    border-radius: 50px;

     background: linear-gradient(
        90deg,
        #a56aeb 0%,
        #df16e3 50%,
        #fc9d21 100%
    );

    opacity: .35;
    filter: blur(8px);

    z-index: -1;

    animation: chatbotGlow 3s ease-in-out infinite;
}

@keyframes chatbotGlow {

    0%, 100% {
        opacity: .25;
        transform: scale(.98);
    }

    50% {
        opacity: .55;
        transform: scale(1.04);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .sticky-whatsapp-chatbot {
        right: 14px;
        bottom: 14px;

        padding: 7px 14px 7px 7px;
        gap: 8px;
    }

    .sticky-whatsapp-icon {
        width: 38px;
        height: 38px;
        font-size: 21px;
    }

    .sticky-whatsapp-text {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

}


/* =============================== */

.real-brands-section {
    width: 90%;
    margin: 0 auto;
    padding: 28px 20px;
    background: #02050b;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}


.real-brands-section *{
    box-sizing:border-box;
}

.real-brands-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;

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

    gap:28px;
}


/* TITLE */

.real-brands-heading{
    flex:0 0 180px;
}

.real-brands-heading h2{
    margin:0;

    color:#00eaff;

    font-size:17px;
    line-height:1.05;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;

    text-shadow:0 0 10px rgba(0,234,255,.4);
}


/* IMAGE ROW */

.real-brands-gallery{
    flex:1;
    min-width:0;

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

    gap:12px;
}


/* IMAGE */

.real-brand-box{
    width:135px;
    height:78px;

    flex:0 0 135px;

    overflow:hidden;

    position:relative;

    border-radius:7px;

    border:1px solid rgba(0,220,255,.7);

    background:#07111d;

    box-shadow:
        0 0 12px rgba(0,220,255,.12);

    transition:.35s ease;
}

.real-brand-box:hover{
    transform:translateY(-5px) scale(1.04);

    border-color:#00eaff;

    box-shadow:
        0 0 22px rgba(0,234,255,.4);
}

.real-brand-box img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:.45s ease;
}

.real-brand-box:hover img{
    transform:scale(1.1);
}


/* IMAGE OVERLAY */

.real-brand-box::after{
    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        transparent 50%,
        rgba(0,0,0,.4)
    );

    pointer-events:none;
}


/* INSTAGRAM */

.real-brands-instagram{
    width:275px;
    height:54px;

    flex:0 0 275px;

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

    gap:12px;

    padding:7px 14px;

    border-radius:40px;

    text-decoration:none !important;

    background:
        linear-gradient(
            100deg,
            #ff8a00 0%,
            #ff3b81 32%,
            #c43cff 65%,
            #1edfff 100%
        );

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

    box-shadow:
        0 0 18px rgba(218,55,255,.35),
        0 0 35px rgba(0,220,255,.12);

    position:relative;

    overflow:hidden;

    transition:.35s ease;
}


/* SHINE */

.real-brands-instagram::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

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

    transform:skewX(-20deg);

    transition:.7s ease;
}

.real-brands-instagram:hover::before{
    left:140%;
}

.real-brands-instagram:hover{
    transform:translateY(-3px) scale(1.025);

    box-shadow:
        0 0 28px rgba(218,55,255,.55),
        0 0 45px rgba(0,220,255,.25);
}


/* INSTAGRAM ICON */

.real-brands-instagram-icon{
    width:43px;
    height:43px;

    flex:0 0 43px;

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

    border:2px solid #fff;

    border-radius:12px;

    color:#fff;

    font-size:25px;

    position:relative;
    z-index:2;

    box-shadow:
        0 0 8px rgba(255,255,255,.4);
}


/* BUTTON TEXT */

.real-brands-instagram-text {
    flex: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .5px;
    /* text-transform: uppercase; */
    white-space: nowrap;
    position: relative;
    z-index: 2;
}


/* ARROW */
.real-brands-instagram-arrow {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

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

    color: #fff;
    font-size: 18px;
    font-weight: 600;

    position: relative;
    z-index: 2;

    margin-left: auto;
    transition: transform .3s ease;
}


/* BUTTON */
.real-brands-instagram-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 20px 24px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;

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

    text-decoration: none;
    box-sizing: border-box;

    transition: .3s ease;
}


/* INSTAGRAM ICON */
.real-brands-instagram-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

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

    color: #fff;
    font-size: 18px;

    position: relative;
    z-index: 2;
}


/* HOVER */
.real-brands-instagram-btn:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.35);
}

.real-brands-instagram-btn:hover .real-brands-instagram-arrow {
    transform: translateX(4px);
}

.real-brands-instagram:hover
.real-brands-instagram-arrow{
    transform:translateX(5px);
}


/* TABLET */

@media(max-width:1100px){

    .real-brands-container{
        gap:15px;
    }

    .real-brands-heading{
        flex-basis:145px;
    }

    .real-brands-heading h2{
        font-size:14px;
    }

    .real-brands-gallery{
        gap:8px;
    }

    .real-brand-box{
        width:110px;
        flex-basis:110px;
        height:68px;
    }

    .real-brands-instagram{
        width:235px;
        flex-basis:235px;
    }

}


/* MOBILE */

@media(max-width:800px){

    .real-brands-section{
        padding:25px 12px;
    }

    .real-brands-container{
        flex-direction:column;
        gap:20px;
    }

    .real-brands-heading{
        width:100%;
        flex:none;
        text-align:center;
    }

    .real-brands-heading h2{
        font-size:18px;
    }

    .real-brands-gallery{
        width:100%;

        display:grid;

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

        gap:10px;
    }

    .real-brand-box{
        width:100%;
        height:75px;
        flex:none;
    }

    .real-brands-instagram{
        width:100%;
        max-width:360px;

        flex:none;

        height:62px;
    }

}


/* SMALL MOBILE */

@media(max-width:480px){

    .real-brands-gallery{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .real-brand-box{
        height:85px;
    }

    .real-brands-instagram{
        max-width:340px;
        height:60px;
    }

    .real-brands-instagram-icon{
        width:39px;
        height:39px;
        flex-basis:39px;

        font-size:22px;
        border-radius:10px;
    }

    .real-brands-instagram-text{
        font-size:14px;
    }

    .real-brands-instagram-arrow{
        font-size:16px;
    }

}

/* =====================section 8 ====================== */


/* =========================================================
   JSS PROCESS CARDS SECTION — UNIQUE
========================================================= */

.jss-proc-cards-section{
    position:relative;

    width:100%;

    padding:55px 28px 45px;

    overflow:hidden;

    font-family:Arial,Helvetica,sans-serif;

    background:
        linear-gradient(
            135deg,
            #05091c 0%,
            #080d24 45%,
            #100620 100%
        );
}


/* =========================================================
   SECTION GLOW
========================================================= */

.jss-proc-cards-section::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    left:-300px;
    bottom:-380px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.28),
            transparent 68%
        );

    filter:blur(75px);

    animation:jssProcCardsBlue 12s ease-in-out infinite;

    pointer-events:none;
}


.jss-proc-cards-section::after{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-320px;
    bottom:-350px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(220,0,210,.25),
            transparent 68%
        );

    filter:blur(80px);

    animation:jssProcCardsPink 15s ease-in-out infinite;

    pointer-events:none;
}


@keyframes jssProcCardsBlue{

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

    50%{
        transform:translate(100px,-60px);
    }

}


@keyframes jssProcCardsPink{

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

    50%{
        transform:translate(-100px,-70px);
    }

}


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

.jss-proc-cards-band{
    position:relative;

    z-index:4;

    width:90%;
    max-width:1500px;

    margin:0 auto;

    padding:32px 28px;

    border-radius:22px;

    border:1px solid rgba(40,200,255,.45);

    background:
        linear-gradient(
            135deg,
            rgba(6,15,36,.90),
            rgba(19,7,42,.85)
        );

    box-shadow:
        0 0 45px rgba(0,160,255,.08),
        inset 0 0 45px rgba(60,80,255,.04);

    backdrop-filter:blur(12px);

    overflow:hidden;
}


/* BAND BLUE GLOW */

.jss-proc-cards-band::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-180px;
    top:-300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,210,255,.27),
            transparent 65%
        );

    filter:blur(55px);

    animation:jssProcBandBlueNew 10s ease-in-out infinite;

    pointer-events:none;
}


/* BAND PINK GLOW */

.jss-proc-cards-band::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    bottom:-300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(220,0,220,.25),
            transparent 65%
        );

    filter:blur(60px);

    animation:jssProcBandPinkNew 12s ease-in-out infinite;

    pointer-events:none;
}


@keyframes jssProcBandBlueNew{

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

    50%{
        transform:translate(150px,100px);
    }

}


@keyframes jssProcBandPinkNew{

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

    50%{
        transform:translate(-130px,-80px);
    }

}


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

.jss-proc-cards-grid{
    position:relative;

    z-index:5;

    display:grid;

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

    gap:16px;
}


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

.jss-proc-single-card{

    --jss-card-color:#18cfff;

    position:relative;

    min-height:300px;

    padding:24px 15px 25px;

    text-align:center;

    border-radius:14px;

    border:1px solid var(--jss-card-color);

    background:
        linear-gradient(
            180deg,
            rgba(17,25,58,.86),
            rgba(5,10,31,.80)
        );

    box-shadow:
        inset 0 0 30px rgba(255,255,255,.015);

    backdrop-filter:blur(8px);

    overflow:hidden;

    opacity:0;

    transform:translateY(25px);

    animation:jssProcCardRevealNew .7s ease forwards;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* CARD DOT PATTERN */

.jss-proc-single-card::before{
    content:"";

    position:absolute;

    inset:0;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.09) 1px,
            transparent 1px
        );

    background-size:13px 13px;

    opacity:.35;

    pointer-events:none;
}


/* CARD GLOW */

.jss-proc-single-card::after{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    top:-100px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--jss-card-color),
            transparent 70%
        );

    filter:blur(35px);

    opacity:.25;

    pointer-events:none;
}


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

.jss-proc-single-card:nth-child(1){
    --jss-card-color:#18cfff;

    animation-delay:.1s;
}


.jss-proc-single-card:nth-child(2){
    --jss-card-color:#ff45c8;

    animation-delay:.2s;
}


.jss-proc-single-card:nth-child(3){
    --jss-card-color:#8b4cff;

    animation-delay:.3s;
}


.jss-proc-single-card:nth-child(4){
    --jss-card-color:#ff9d00;

    animation-delay:.4s;
}


.jss-proc-single-card:nth-child(5){
    --jss-card-color:#ff3d75;

    animation-delay:.5s;
}


.jss-proc-single-card:nth-child(6){
    --jss-card-color:#00e5aa;

    animation-delay:.6s;
}


@keyframes jssProcCardRevealNew{

    to{
        opacity:1;

        transform:translateY(0);
    }

}


/* =========================================================
   HOVER
========================================================= */

.jss-proc-single-card:hover{

    transform:translateY(-9px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.45),
        0 0 25px var(--jss-card-color);
}


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

.jss-proc-card-number{

    position:absolute;

    top:10px;
    right:13px;

    z-index:5;

    color:#c7d0e3;

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

    letter-spacing:1px;
}


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

.jss-proc-card-icon{

    position:relative;

    z-index:5;

    width:70px;
    height:70px;

    margin:15px auto 23px;

    border-radius:50%;

    display:flex;

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

    border:2px solid var(--jss-card-color);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            rgba(0,0,0,.25)
        );

    box-shadow:
        0 0 13px var(--jss-card-color),
        inset 0 0 15px var(--jss-card-color);

    animation:jssProcIconPulseNew 3s ease-in-out infinite;
}


.jss-proc-card-icon svg{

    width:30px;
    height:30px;

    fill:none;

    stroke:var(--jss-card-color);

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
        drop-shadow(
            0 0 5px var(--jss-card-color)
        );
}


@keyframes jssProcIconPulseNew{

    0%,100%{

        box-shadow:
            0 0 12px var(--jss-card-color),
            inset 0 0 14px var(--jss-card-color);
    }

    50%{

        box-shadow:
            0 0 25px var(--jss-card-color),
            inset 0 0 20px var(--jss-card-color);
    }

}


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

.jss-proc-card-title{

    position:relative;

    z-index:5;

    margin:0 0 14px;

    color:#ffffff;

    font-size:17px;

    font-weight:800;

    letter-spacing:1.5px;
}


.jss-proc-card-description{

    position:relative;

    z-index:5;

    margin:0;

    color:#c2cee5;

    font-size:14px;

    line-height:1.6;
}


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

.jss-proc-cards-bottom{

    position:relative;

    z-index:5;

    margin:0 auto;

    padding:42px 20px 5px;

    text-align:center;

    color:#18cfff;

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-shadow:
        0 0 15px rgba(0,210,255,.25);
}


.jss-proc-cards-bottom::before,
.jss-proc-cards-bottom::after{

    content:"";

    display:inline-block;

    width:70px;
    height:1px;

    vertical-align:middle;

    margin:0 22px;

    background:#18cfff;

    box-shadow:
        0 0 8px #18cfff;
}


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

@media(max-width:1100px){

    .jss-proc-cards-section{
        padding:45px 22px 40px;
    }

    .jss-proc-cards-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


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

@media(max-width:700px){

    .jss-proc-cards-section{
        padding:35px 15px 30px;
    }


    .jss-proc-cards-band{
        padding:20px 15px;

        border-radius:16px;
    }


    .jss-proc-cards-grid{
        grid-template-columns:repeat(2,1fr);

        gap:12px;
    }


    .jss-proc-single-card{
        min-height:265px;

        padding:20px 10px;
    }


    .jss-proc-card-icon{
        width:58px;
        height:58px;

        margin:15px auto 18px;
    }


    .jss-proc-card-icon svg{
        width:25px;
        height:25px;
    }


    .jss-proc-card-title{
        font-size:14px;

        margin-bottom:10px;
    }


    .jss-proc-card-description{
        font-size:12px;

        line-height:1.5;
    }


    .jss-proc-cards-bottom{
        font-size:9px;

        letter-spacing:2px;

        padding-top:32px;
    }


    .jss-proc-cards-bottom::before,
    .jss-proc-cards-bottom::after{

        width:25px;

        margin:0 8px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media(max-width:420px){

    .jss-proc-cards-section{
        padding-left:10px;
        padding-right:10px;
    }


    .jss-proc-cards-band{
        padding:15px 10px;
    }


    .jss-proc-cards-grid{
        grid-template-columns:1fr;
    }


    .jss-proc-single-card{
        min-height:240px;

        padding:20px;
    }


    .jss-proc-cards-bottom::before,
    .jss-proc-cards-bottom::after{
        display:none;
    }

}



/* =========================================================
   JSS PROCESS INTRO — UNIQUE
========================================================= */

.jss-proc-intro{
    position:relative;
    width:100%;
    min-height:560px;
    padding:5px 55px 180px;
    display:flex;
    align-items:center;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
    background:url("../img/section8.jpeg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


/* BLUE GLOW */

.jss-proc-intro::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    left:-280px;
    bottom:-350px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.32),
            transparent 68%
        );

    filter:blur(70px);

    animation:jssProcIntroBlue 12s ease-in-out infinite;

    pointer-events:none;
}


/* PINK GLOW */

.jss-proc-intro::after{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-300px;
    bottom:-330px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(220,0,210,.28),
            transparent 68%
        );

    filter:blur(80px);

    animation:jssProcIntroPink 15s ease-in-out infinite;

    pointer-events:none;
}


@keyframes jssProcIntroBlue{

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

    50%{
        transform:translate(100px,-50px);
    }

}


@keyframes jssProcIntroPink{

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

    50%{
        transform:translate(-100px,-60px);
    }

}


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

.jss-proc-intro-content{
    position:relative;
    z-index:5;
    width:100%;
    max-width:850px;
    margin-top: 0%;
}


.jss-proc-intro-eyebrow{
    margin:0 0 22px;

    color:#18cfff;

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

    letter-spacing:5px;

    text-transform:uppercase;
}


.jss-proc-intro-heading{
    margin:0 0 25px;

    color:#ffffff;

    font-size:clamp(40px,5vw,70px);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;
}


.jss-proc-intro-highlight {
    background: linear-gradient(
        90deg,
        #a56aeb,
        #df16e3,
        #ffb71c
    ) !important;

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


.jss-proc-intro-description{
    max-width:650px;

    margin:0;

    color:#bfcbe0;

    font-size:18px;

    line-height:1.6;
}


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

@media(max-width:1100px){

    .jss-proc-intro{
        padding:70px 35px 75px;
    }

}


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

@media(max-width:700px){

    .jss-proc-intro{
        min-height:360px;

        padding:60px 22px 65px;

        background-position:center;
    }


    .jss-proc-intro-eyebrow{
        font-size:11px;

        letter-spacing:3px;

        margin-bottom:18px;
    }


    .jss-proc-intro-heading{
        font-size:clamp(34px,10vw,48px);

        letter-spacing:-1px;

        margin-bottom:20px;
    }


    .jss-proc-intro-description{
        font-size:15px;

        line-height:1.55;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media(max-width:420px){

    .jss-proc-intro{
        padding:55px 18px 60px;
    }


    .jss-proc-intro-heading{
        font-size:36px;
    }

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

/* ===== Advertising CTA Section ===== */
.ad-cta {
  width: 100%;
  padding: 14px 0;
  background: transparent; /* NO BACKGROUND */
}

.ad-cta-content {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;

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

/* Heading */
.ad-cta h2 {
  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.8px;
  text-transform: uppercase;
}

.ad-cta h2 span:first-child {
  background: linear-gradient(
    90deg,
    #ff27c8,
    #a62cff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ad-cta h2 span:last-child {
  background: linear-gradient(
    90deg,
    #00eaff,
    #ff7b00
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Button */
.ad-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-width: 205px;
  height: 42px;
  padding: 0 17px;

  border-radius: 30px;
  background: #08dff2;
  color: #07111b;

  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;

  box-shadow:
    0 0 12px rgba(0, 230, 255, 0.75),
    0 0 25px rgba(0, 230, 255, 0.35);

  transition: all 0.25s ease;
}

.ad-cta-btn span {
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
}

.ad-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 18px rgba(0, 230, 255, 0.9),
    0 0 35px rgba(0, 230, 255, 0.45);
}

/* Mobile */
@media (max-width: 600px) {
  .ad-cta {
    padding: 18px 15px;
  }

  .ad-cta-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .ad-cta h2 {
    font-size: 20px;
  }

  .ad-cta-btn {
    width: auto;
    min-width: 190px;
  }
}




/* =========================================================
   AI SOCH FAQ SECTION
========================================================= */

.aiso-faq-final {
    position: relative !important;
    width: 100% !important;
    min-height: 760px !important;
    padding: 20px 2% !important;
    overflow: hidden !important;
    background: #050812 !important;

    box-sizing: border-box !important;
}


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

.aiso-faq-final-bg {
    width: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background-image: url("../img/banner11.jpeg") !important;
    background-size: cover !important;

    /* Image bilkul center */
    background-position: center center !important;

    background-repeat: no-repeat !important;
    opacity: .58 !important;
    transform: scale(1.03);
}

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

.aiso-faq-final-overlay {
    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;


}


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

.aiso-faq-final-wrap {
    position: relative !important;
    z-index: 5 !important;

    width: 90% !important;
    max-width: 1400px !important;

    margin: 30px auto !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, .8fr) !important;

    gap: 70px !important;

    align-items: center !important;

    box-sizing: border-box !important;
}


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

.aiso-faq-final-left {
    width: 100% !important;
}


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

.aiso-faq-final-eyebrow {
    margin: 0 0 16px !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    letter-spacing: 4px !important;

    text-transform: uppercase !important;

    background:
        linear-gradient(
            90deg,
            #a56aeb,
            #df16e3,
            #ee4f66
        ) !important;

    -webkit-background-clip: text !important;

    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    color: transparent !important;
}


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

.aiso-faq-final-heading {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: clamp(40px, 4.5vw, 70px) !important;

    line-height: .94 !important;

    font-weight: 900 !important;

    letter-spacing: -2px !important;

    text-transform: uppercase !important;
}


.aiso-faq-final-heading span {
    display: block !important;

    background:
        linear-gradient(
            90deg,
            #a56aeb,
            #df16e3,
            #ee4f66
        ) !important;

    -webkit-background-clip: text !important;

    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    color: transparent !important;
}


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

.aiso-faq-final-intro {
    max-width: 620px !important;

    margin: 20px 0 28px !important;

    color: rgba(255,255,255,.72) !important;

    font-size: 14px !important;

    line-height: 1.65 !important;
}


/* =========================================================
   FAQ LIST
========================================================= */

.aiso-faq-final-list {
    width: 100% !important;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.aiso-faq-final-item {
    width: 100% !important;

    margin: 0 0 7px !important;

    border: 1px solid rgba(165,106,235,.35) !important;

    border-radius: 6px !important;

    background: rgba(3,8,20,.70) !important;

    backdrop-filter: blur(10px) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease !important;
}


.aiso-faq-final-item:hover {
    border-color: rgba(223,22,227,.80) !important;

    background: rgba(8,10,30,.78) !important;
}


/* OPEN ITEM */

.aiso-faq-final-item[open] {
    border-color: rgba(223,22,227,.70) !important;

    box-shadow:
        0 8px 30px rgba(223,22,227,.08) !important;
}


/* =========================================================
   QUESTION
========================================================= */

.aiso-faq-final-question {
    width: 100% !important;

    min-height: 51px !important;

    padding: 11px 14px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 15px !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    cursor: pointer !important;

    text-align: left !important;

    list-style: none !important;

    box-sizing: border-box !important;
}


/* REMOVE DEFAULT DETAILS ARROW */

.aiso-faq-final-question::-webkit-details-marker {
    display: none !important;
}

.aiso-faq-final-question::marker {
    display: none !important;
}


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

.aiso-faq-final-question > span:first-child {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    flex: 1 !important;
}


/* NUMBER */

.aiso-faq-final-question small {
    min-width: 25px !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    opacity: .5 !important;
}


/* =========================================================
   PLUS BUTTON
========================================================= */

.aiso-faq-final-plus {
    width: 27px !important;

    height: 27px !important;

    min-width: 27px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: 1px solid rgba(165,106,235,.70) !important;

    border-radius: 50% !important;

    color: #ffffff !important;

    font-size: 20px !important;

    font-weight: 300 !important;

    line-height: 1 !important;

    transition: all .35s ease !important;
}


/* =========================================================
   OPEN PLUS → CROSS
========================================================= */

.aiso-faq-final-item[open] .aiso-faq-final-plus {
    transform: rotate(45deg) !important;

    border-color: transparent !important;

    background:
        linear-gradient(
            135deg,
            #a56aeb,
            #df16e3,
            #ee4f66
        ) !important;

    box-shadow:
        0 0 18px rgba(223,22,227,.35) !important;
}


/* =========================================================
   ANSWER
========================================================= */

.aiso-faq-final-answer {
    padding: 0 55px 18px 50px !important;

    animation:
        aisoFaqFinalAnswer .3s ease !important;
}


.aiso-faq-final-answer p {
    margin: 0 !important;

    color: rgba(255,255,255,.64) !important;

    font-size: 12px !important;

    line-height: 1.7 !important;
}


.aiso-faq-final-answer strong {
    color: #df16e3 !important;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.aiso-faq-final-right {
    position: relative !important;

    min-height: 560px !important;

    display: flex !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    padding-top: 35px !important;

    padding-left: 10px !important;

    box-sizing: border-box !important;
}


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

.aiso-faq-final-glow {
    position: absolute !important;

    width: 350px !important;

    height: 350px !important;

    top: 15px !important;

    left: -15px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(223,22,227,.30) 0%,
            rgba(165,106,235,.18) 35%,
            transparent 72%
        ) !important;

    filter: blur(18px) !important;

    animation:
        aisoFaqFinalGlow
        4s ease-in-out infinite !important;
}


/* =========================================================
   BIG QUESTION MARK
========================================================= */

/* .aiso-faq-final-mark {
    position: relative !important;
    z-index: 3 !important;
    width: 205px !important;
    height: 245px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid #a56aeb !important;

    border-radius: 42px !important;

    font-family: Arial, sans-serif !important;

    font-size: 180px !important;

    font-weight: 300 !important;

    line-height: 1 !important;

    color: transparent !important;

    -webkit-text-stroke: 2px #df16e3 !important;

  

    box-shadow:
        0 0 20px rgba(165,106,235,.55),
        0 0 60px rgba(223,22,227,.35),
        inset 0 0 35px rgba(165,106,235,.10) !important;

    transform: rotate(-3deg) !important;
} */


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aisoFaqFinalGlow {

    0%,
    100% {
        transform: scale(.90);
        opacity: .60;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


@keyframes aisoFaqFinalAnswer {

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

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


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

@media (max-width: 900px) {

    .aiso-faq-final {
        padding: 70px 20px !important;
    }

    .aiso-faq-final-wrap {
        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }

    .aiso-faq-final-right {
        min-height: 280px !important;

        order: -1 !important;

        padding-top: 0 !important;

        padding-left: 0 !important;

        justify-content: center !important;

        align-items: flex-start !important;
    }

    .aiso-faq-final-glow {
        top: -20px !important;

        left: 50% !important;

        transform: translateX(-50%) !important;
    }

    .aiso-faq-final-mark {
        width: 150px !important;

        height: 180px !important;

        font-size: 130px !important;
    }
}


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

@media (max-width: 600px) {

    .aiso-faq-final {
        padding: 55px 15px !important;
    }

    .aiso-faq-final-heading {
        font-size: 38px !important;

        letter-spacing: -1px !important;

        line-height: .96 !important;
    }

    .aiso-faq-final-eyebrow {
        font-size: 10px !important;

        letter-spacing: 2.5px !important;
    }

    .aiso-faq-final-intro {
        font-size: 13px !important;

        margin: 17px 0 22px !important;
    }

    .aiso-faq-final-question {
        min-height: 55px !important;

        padding: 10px 10px !important;

        gap: 8px !important;
    }

    .aiso-faq-final-question > span:first-child {
        font-size: 11px !important;

        gap: 7px !important;
    }

    .aiso-faq-final-question small {
        min-width: 20px !important;

        font-size: 9px !important;
    }

    .aiso-faq-final-plus {
        width: 24px !important;

        height: 24px !important;

        min-width: 24px !important;

        font-size: 18px !important;
    }

    .aiso-faq-final-answer {
        padding: 0 15px 17px 37px !important;
    }

    .aiso-faq-final-answer p {
        font-size: 11px !important;

        line-height: 1.65 !important;
    }

    .aiso-faq-final-right {
        min-height: 220px !important;
    }

    .aiso-faq-final-mark {
        width: 125px !important;

        height: 155px !important;

        font-size: 105px !important;

        border-radius: 30px !important;
    }

    .aiso-faq-final-glow {
        width: 250px !important;

        height: 250px !important;
    }
}



/* =========================================================
   AI SOCH - NEXT STEP CTA
========================================================= */

.ai-next-step-section{
    position:relative !important;
    width:100% !important;
    min-height:420px !important;
    overflow:hidden !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,8,30,.96) 0%,
            rgba(3,8,30,.86) 35%,
            rgba(3,8,30,.45) 62%,
            rgba(3,8,30,.08) 100%
        ),
        url("../img/banner10.jpeg") !important;

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
}


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

.ai-next-step-wrap{
    position:relative !important;
    z-index:5 !important;

    width:min(1200px,92%) !important;

    /* 620px hatao */
    min-height:auto !important;

    margin:0 auto !important;
    padding:35px 0 25px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
}


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

.ai-next-step-top{
    max-width:720px !important;
}

.ai-next-step-eyebrow{
    margin:0 0 10px !important;

    color:#18e8ef !important;

    font-size:13px !important;
    line-height:1 !important;
    font-weight:800 !important;

    letter-spacing:3px !important;
    text-transform:uppercase !important;
}

.ai-next-step-heading{
    margin:0 !important;

    color:#fff !important;

    font-size:clamp(40px,5vw,52px) !important;
    line-height:.94 !important;

    font-weight:900 !important;
    letter-spacing:-2px !important;

    text-transform:uppercase !important;
}

.ai-next-step-heading .white-line{
    display:block !important;
    color:#fff !important;
}

.ai-next-step-heading .gradient-line{
    display:block !important;

    background:linear-gradient(
        90deg,
        #19e8ef 0%,
        #df16e3 55%,
        #ee4f66 100%
    ) !important;

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

.ai-next-step-subtitle{
    margin:12px 0 0 !important;

    color:#fff !important;

    font-size:16px !important;
    line-height:1.4 !important;
    font-weight:500 !important;
}


/* =========================================================
   FEATURES
========================================================= */

.ai-next-step-features{
    display:grid !important;

    grid-template-columns:repeat(4,135px) !important;

    gap:0 !important;

    margin-top:25px !important;
}

.ai-next-feature{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
}


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

.ai-next-feature-icon{
    width:50px !important;
    height:50px !important;

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

    margin-bottom:7px !important;

    color:#19e8ef !important;
}

.ai-next-feature-icon svg{
    width:46px !important;
    height:46px !important;

    display:block !important;
}


/* Icon colors */

.ai-next-feature:nth-child(1) .ai-next-feature-icon{
    color:#19e8ef !important;
}

.ai-next-feature:nth-child(2) .ai-next-feature-icon{
    color:#ff32df !important;

    filter:
        drop-shadow(0 0 9px rgba(255,50,223,.8)) !important;
}

.ai-next-feature:nth-child(3) .ai-next-feature-icon{
    color:#19e8ef !important;

    filter:
        drop-shadow(0 0 9px rgba(25,232,239,.8)) !important;
}

.ai-next-feature:nth-child(4) .ai-next-feature-icon{
    color:#63ffb1 !important;

    filter:
        drop-shadow(0 0 9px rgba(99,255,177,.75)) !important;
}


.ai-next-feature-title{
    margin:0 !important;

    color:#fff !important;

    font-size:12px !important;
    line-height:1.12 !important;

    font-weight:800 !important;

    text-transform:uppercase !important;
}


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

.ai-next-step-actions{
    display:flex !important;
    align-items:center !important;

    gap:13px !important;

    margin-top:18px !important;
}

.ai-next-step-btn{
    min-width:190px !important;
    height:43px !important;

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

    gap:9px !important;

    padding:0 20px !important;

    border-radius:30px !important;

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

    text-decoration:none !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease !important;
}

.ai-next-step-btn:hover{
    transform:translateY(-3px) !important;
}


/* PRIMARY */

.ai-next-step-btn-primary{
    color:#031522 !important;

    background:#19e8ef !important;

    box-shadow:
        0 0 20px rgba(25,232,239,.35) !important;
}

.ai-next-step-btn-primary:hover{
    box-shadow:
        0 0 30px rgba(25,232,239,.7) !important;
}


/* WHATSAPP */

.ai-next-step-btn-whatsapp{
    color:#fff !important;

    background:rgba(0,0,0,.15) !important;

    border:1px solid #25ee91 !important;

    box-shadow:
        0 0 15px rgba(37,238,145,.15) !important;
}

.ai-next-step-btn-whatsapp:hover{
    box-shadow:
        0 0 25px rgba(37,238,145,.4) !important;
}

.ai-whatsapp-icon{
    width:21px !important;
    height:21px !important;

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

    border:2px solid #25ee91 !important;
    border-radius:50% !important;

    color:#25ee91 !important;

    font-size:12px !important;
}


/* =========================================================
   RIGHT SIDE TEXT
========================================================= */

.ai-next-right-copy{
    position:absolute !important;

    top:35px !important;
    right:80px !important;

    z-index:7 !important;

    width:110px !important;
}

.ai-next-right-copy span{
    display:block !important;

    color:#fff !important;

    font-size:14px !important;
    line-height:1.18 !important;

    font-weight:800 !important;

    text-transform:uppercase !important;
}


/* =========================================================
   BOTTOM POINTS
   FIXED: NOW DIRECTLY BELOW BUTTONS
========================================================= */

.ai-next-step-bottom{
    display:flex !important;
    align-items:center !important;

    flex-wrap:wrap !important;

    gap:28px !important;

    /* buttons ke just niche */
    margin-top:22px !important;

    padding-top:0 !important;

    /* TOP LINE REMOVED */
    border-top:none !important;

    max-width:700px !important;
}

.ai-next-bottom-item{
    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    color:rgba(255,255,255,.85) !important;

    font-size:11px !important;
    font-weight:500 !important;
}

.ai-next-bottom-icon{
    width:23px !important;
    height:23px !important;

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

    color:#fff !important;

    font-size:20px !important;
}


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

.ai-next-step-glow{
    position:absolute !important;

    width:500px !important;
    height:500px !important;

    right:2% !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(0,220,255,.13),
            rgba(220,20,227,.06) 40%,
            transparent 70%
        ) !important;

    pointer-events:none !important;
}


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

@media(max-width:700px){

    .ai-next-step-section{
        min-height:auto !important;
    }

    .ai-next-step-wrap{
        min-height:auto !important;

        padding:40px 0 25px !important;

        justify-content:flex-start !important;
    }

    .ai-next-step-heading{
        font-size:28px !important;
        letter-spacing:-1px !important;
    }

    .ai-next-step-features{
        grid-template-columns:repeat(2,125px) !important;

        gap:22px 20px !important;
    }

    .ai-next-step-actions{
        flex-direction:column !important;
        align-items:flex-start !important;

        margin-top:20px !important;
    }

    .ai-next-step-btn{
        width:220px !important;
    }

    .ai-next-right-copy{
        display:none !important;
    }

    /* MOBILE BOTTOM POINTS */
    .ai-next-step-bottom{
        gap:14px !important;

        margin-top:22px !important;

        padding-top:0 !important;

        border-top:none !important;
    }

}


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

@media(max-width:400px){

    .ai-next-step-features{
        grid-template-columns:repeat(2,1fr) !important;
        gap:20px 10px !important;
    }

    .ai-next-step-actions{
        width:100% !important;
    }

    .ai-next-step-btn{
        width:100% !important;
        min-width:0 !important;
    }

    .ai-next-step-bottom{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:10px !important;
    }

}

/* ===================== */

/* =========================================================
   AI SOCH - NEXT STEP CTA
========================================================= */

.ai-next-step-section{
    position:relative !important;
    width:100% !important;
    min-height:420px !important;
    overflow:hidden !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,8,30,.96) 0%,
            rgba(3,8,30,.86) 35%,
            rgba(3,8,30,.45) 62%,
            rgba(3,8,30,.08) 100%
        ),
        url("img/banner10.jpeg") !important;

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
}


/* MAIN WRAPPER */

.ai-next-step-wrap{
    position:relative !important;
    z-index:5 !important;

    width:min(1200px,92%) !important;
    min-height:620px !important;

    margin:0 auto !important;
    padding:35px 0 7px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
}


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

.ai-next-step-top{
    max-width:720px !important;
}

.ai-next-step-eyebrow{
    margin:0 0 10px !important;

    color:#18e8ef !important;

    font-size:13px !important;
    line-height:1 !important;
    font-weight:800 !important;

    letter-spacing:3px !important;
    text-transform:uppercase !important;
}

.ai-next-step-heading{
    margin:0 !important;

    color:#fff !important;

    font-size:clamp(40px,5vw,52px) !important;
    line-height:.94 !important;

    font-weight:900 !important;
    letter-spacing:-2px !important;

    text-transform:uppercase !important;
}

.ai-next-step-heading .white-line{
    display:block !important;
    color:#fff !important;

}

.ai-next-step-heading .gradient-line{
    display:block !important;

    background:linear-gradient(
        90deg,
        #19e8ef 0%,
        #df16e3 55%,
        #ee4f66 100%
    ) !important;

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

.ai-next-step-subtitle{
    margin:12px 0 0 !important;

    color:#fff !important;

    font-size:16px !important;
    line-height:1.4 !important;
    font-weight:500 !important;
}


/* =========================================================
   FEATURES
========================================================= */

.ai-next-step-features{
    display:grid !important;

    grid-template-columns:
        repeat(4,135px) !important;

    gap:-10px !important;

    margin-top:25px !important;
}

.ai-next-feature{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
}


/* REAL SVG ICON */

.ai-next-feature-icon{
    width:50px !important;
    height:50px !important;

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

    margin-bottom:7px !important;

    color:#19e8ef !important;

    /* filter:
        drop-shadow(0 0 8px rgba(25,232,239,.75)) !important; */
}

.ai-next-feature-icon svg{
    width:46px !important;
    height:46px !important;

    display:block !important;
}


/* Icon colors */

.ai-next-feature:nth-child(1)
.ai-next-feature-icon{
    color:#19e8ef !important;
}

.ai-next-feature:nth-child(2)
.ai-next-feature-icon{
    color:#ff32df !important;

    filter:
        drop-shadow(0 0 9px rgba(255,50,223,.8)) !important;
}

.ai-next-feature:nth-child(3)
.ai-next-feature-icon{
    color:#19e8ef !important;

    filter:
        drop-shadow(0 0 9px rgba(25,232,239,.8)) !important;
}

.ai-next-feature:nth-child(4)
.ai-next-feature-icon{
    color:#63ffb1 !important;

    filter:
        drop-shadow(0 0 9px rgba(99,255,177,.75)) !important;
}


.ai-next-feature-title{
    margin:0 !important;

    color:#fff !important;

    font-size:12px !important;
    line-height:1.12 !important;

    font-weight:800 !important;

    text-transform:uppercase !important;
}


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

.ai-next-step-actions{
    display:flex !important;
    align-items:center !important;

    gap:13px !important;

    margin-top:18px !important;
}

.ai-next-step-btn{
    min-width:190px !important;
    height:43px !important;

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

    gap:9px !important;

    padding:0 20px !important;

    border-radius:30px !important;

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

    text-decoration:none !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease !important;
}

.ai-next-step-btn:hover{
    transform:translateY(-3px) !important;
}


/* PRIMARY */

.ai-next-step-btn-primary{
    color:#031522 !important;

    background:#19e8ef !important;

    box-shadow:
        0 0 20px rgba(25,232,239,.35) !important;
}

.ai-next-step-btn-primary:hover{
    box-shadow:
        0 0 30px rgba(25,232,239,.7) !important;
}


/* WHATSAPP */

.ai-next-step-btn-whatsapp{
    color:#fff !important;

    background:rgba(0,0,0,.15) !important;

    border:1px solid #25ee91 !important;

    box-shadow:
        0 0 15px rgba(37,238,145,.15) !important;
}

.ai-next-step-btn-whatsapp:hover{
    box-shadow:
        0 0 25px rgba(37,238,145,.4) !important;
}

.ai-whatsapp-icon{
    width:21px !important;
    height:21px !important;

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

    border:2px solid #25ee91 !important;
    border-radius:50% !important;

    color:#25ee91 !important;

    font-size:12px !important;
}


/* =========================================================
   RIGHT SIDE TEXT
========================================================= */

.ai-next-right-copy{
    position:absolute !important;

    top:35px !important;
    right:80px !important;

    z-index:7 !important;

    width:110px !important;
}

.ai-next-right-copy span{
    display:block !important;

    color:#fff !important;

    font-size:14px !important;
    line-height:1.18 !important;

    font-weight:800 !important;

    text-transform:uppercase !important;
}


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

.ai-next-step-bottom{
    display:flex !important;
    align-items:center !important;

    flex-wrap:wrap !important;

    gap:28px !important;

    padding-top:1px !important;

    border-top:1px solid rgba(255,255,255,.12) !important;

    max-width:700px !important;
}

.ai-next-bottom-item{
    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    color:rgba(255,255,255,.85) !important;

    font-size:11px !important;
    font-weight:500 !important;
}

.ai-next-bottom-icon{
    width:23px !important;
    height:23px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#fff !important;
    font-size:20px !important;
}


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

.ai-next-step-glow{
    position:absolute !important;

    width:500px !important;
    height:500px !important;

    right:2% !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(0,220,255,.13),
            rgba(220,20,227,.06) 40%,
            transparent 70%
        ) !important;

    pointer-events:none !important;
}


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

@media(max-width:700px){

    .ai-next-step-section{
        min-height:auto !important;
    }

    .ai-next-step-wrap{
        min-height:auto !important;

        padding:40px 0 25px !important;
    }

    .ai-next-step-heading{
        font-size:28px !important;
        letter-spacing:-1px !important;
    }

    .ai-next-step-features{
        grid-template-columns:repeat(2,125px) !important;
        gap:22px 20px !important;
    }

    .ai-next-step-actions{
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .ai-next-step-btn{
        width:220px !important;
    }

    .ai-next-right-copy{
        display:none !important;
    }

    .ai-next-step-bottom{
        gap:14px !important;
        margin-top:35px !important;
    }
}



/* ================privacy policy========== */