/* SECTION-2 */
/* SECTION-2 */
 .Ai_services_sec {
      background: #07080f;
      padding: 90px 0 80px;
      overflow: hidden;
    }

    /* ---------- SECTION HEADER (centered top) ---------- */
    .sec-header {
      text-align: center;
      margin-bottom: 60px;
      opacity: 0;
      transform: translateY(22px);
      animation: s2Up 0.65s ease forwards 0.1s;
    }

    .sec-header .tag {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #4f8aff;
      border: 1px solid rgba(79,138,255,0.35);
      border-radius: 30px;
      padding: 5px 18px;
      margin-bottom: 18px;
    }

    .sec-header h2 {

      font-size: 3rem;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.15;
      letter-spacing: -0.7px;
     
      margin: 0 auto 16px;
    }

    .sec-header p {
      font-size: 0.93rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.75;
      max-width: 580px;
      margin: 0 auto 28px;
    }

    .btn-sec {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: #4f8aff;
      color: #fff;

      font-size: 0.86rem;
      font-weight: 700;
      padding: 12px 26px;
      border-radius: 8px;
      text-decoration: none;
      box-shadow: 0 6px 28px rgba(79,138,255,0.35);
      transition: background 0.22s, transform 0.2s, box-shadow 0.22s;
    }

    .btn-sec:hover {
      background: #2d6de0;
      transform: translateY(-2px);
      box-shadow: 0 10px 36px rgba(79,138,255,0.5);
      color: #fff;
      text-decoration: none;
    }

    /* ---------- GRID ---------- */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    /* ---------- CARD ---------- */
    .svc-card {
      position: relative;
      background: #0f1120;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      padding: 28px 24px 24px;
      overflow: hidden;
      cursor: pointer;

      /* spin-burst: starts as tiny rotated circle */
      opacity: 0;
      transform: scale(0.06) rotate(-30deg);
      border-radius: 50%;
      transition:
        opacity       0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform     0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-radius 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color  0.3s ease,
        background    0.3s ease;
    }

    .svc-card.visible {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      border-radius: 18px;
    }


    /* Glow orb — blurred circle behind card content */
    .svc-card::after {
      content: '';
      position: absolute;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(79,138,255,0.10);
      filter: blur(48px);
      top: -40px;
      right: -40px;
      pointer-events: none;
      transition: background 0.3s ease;
      z-index: 0;
    }

    /* Hover: bright border + stronger glow */
    .svc-card:hover {
      border-color: rgba(79,138,255,0.55);
      background: #111528;
    }

    .svc-card:hover::after {
      background: rgba(79,138,255,0.22);
    }

    /* Content stays above orb */
    .svc-card .card-inner {
      position: relative;
      z-index: 1;
    }

    /* Large number accent */
    .svc-card .num {

      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #4f8aff;
      background: rgba(79,138,255,0.12);
      border: 1px solid rgba(79,138,255,0.22);
      border-radius: 6px;
      padding: 3px 10px;
      display: inline-block;
      margin-bottom: 16px;
    }

    /* Icon row */
    .svc-card .icon-wrap {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: rgba(79,138,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      transition: background 0.25s;
    }

    .svc-card:hover .icon-wrap {
      background: rgba(79,138,255,0.22);
    }

    .icon-wrap i{
    font-size:30px;
    color:#fff;
    display:block;
}

    .svc-card h3 {

      font-size: 0.97rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.35;
      margin-bottom: 10px;
    }

    .svc-card p {
      font-size: 0.82rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.48);
      margin: 0;
    }

    /* ---------- KEYFRAMES ---------- */
    @keyframes s2Up {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 767px) {
      .cards-grid { grid-template-columns: 1fr; }
      .Ai_services_sec { padding: 70px 0 60px; }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    }
    @media (max-width: 767px){

    .sec-header h2{
        font-size: 1.8rem;
        line-height: 1.3;
    }

}

@media (max-width: 575px){

    .sec-header h2{
        font-size: 1.5rem;
        line-height: 1.4;
    }

}
/* TABLET = 2 CARDS */
@media (max-width: 991px){

    .Ai_services_sec .cards-grid{
        display:grid;
        grid-template-columns: repeat(2,1fr);
        gap:20px;
    }

}

/* MOBILE = 1 CARD */
@media (max-width: 575px){

    .Ai_services_sec .cards-grid{
        grid-template-columns:1fr;
    }

}
/* MOBILE */
@media (max-width: 575px){

    .Ai_services_sec .cards-grid{
        grid-template-columns:1fr;
    }

    .Ai_services_sec .svc-card .num{
        display:none;
    }

}

    .cards-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12-column grid */
  gap: 18px;
}

.svc-card {
  grid-column: span 3; /* default: 4 cards per row (12/3=4) */
}

/* First 4 cards — 1st row mein 4 aayenge */
.svc-card:nth-child(1),
.svc-card:nth-child(2),
.svc-card:nth-child(3),
.svc-card:nth-child(4) {
  grid-column: span 3;
}

/* Card 5 onwards — 3 per row (12/4=3) */
.svc-card:nth-child(n+5) {
  grid-column: span 4;
}

/* SECTION-2 */

        .create_chatbot_section {
            background: #ffffff;
            padding: 90px 0 100px;
            overflow: hidden;
           
        }

        /* ── HEADER ── */
        .create_chatbot_section .head_sec {
            text-align: center;
            max-width: 820px;
            margin: 0 auto 70px;
        }

        .create_chatbot_section .head_sec h2 {
           
            font-weight: 800;
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            color: #0a0f2e;
            line-height: 1.2;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .create_chatbot_section .head_sec h2::after {
            content: '';
            display: block;
            height: 4px;
            width: 60px;
            background: #1a6bff;
            margin: 14px auto 0;
            border-radius: 2px;
        }

        .create_chatbot_section .head_sec p {
            font-size: 1rem;
            line-height: 1.8;
            color: #555e7a;
            margin-top: 18px;
        }

        .create_chatbot_section .head_sec p a {
            color: #1a6bff;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        /* ── TIMELINE RAIL ── */
        .ai-timeline {
            position: relative;
        }

        .ai-timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, transparent, #1a6bff 15%, #1a6bff 85%, transparent);
            transform: translateX(-50%);
            z-index: 0;
        }

        /* ── EACH ITEM ROW ── */
        .ai-item {
            display: flex;
            align-items: center;
            margin-bottom: 56px;
            position: relative;
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .ai-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* alternating sides */
        .ai-item:nth-child(odd) {
            flex-direction: row;
        }

        .ai-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* ── CENTER NODE ── */
        .ai-node {
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #1a6bff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            box-shadow: 0 0 0 6px #dce8ff;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            flex-shrink: 0;
        }

        .ai-node:hover {
            transform: scale(1.15);
            box-shadow: 0 0 0 10px #c2d8ff;
        }

        .ai-node .node-num {
           
            font-weight: 800;
            font-size: 1.1rem;
            color: #fff;
        }

        /* ── CARD ── */
        .ai-card {
            flex: 0 0 calc(50% - 50px);
            max-width: calc(50% - 50px);
            background: #1132a8;
            border-radius: 18px;
            padding: 30px 28px;
            position: relative;
            overflow: hidden;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
            box-shadow: 0 8px 30px rgba(17, 50, 168, 0.18);
        }

        .ai-item:nth-child(odd) .ai-card {
            margin-right: 40px;
        }

        .ai-item:nth-child(even) .ai-card {
            margin-left: 40px;
        }

        /* card hover lift */
        .ai-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 50px rgba(17, 50, 168, 0.32);
        }

        /* shimmer sweep on hover */
        .ai-card::before {
            content: '';
            position: absolute;
            top: -60%;
            left: -60%;
            width: 60%;
            height: 220%;
            background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.09) 50%, transparent 65%);
            transform: skewX(-20deg);
            transition: left 0.55s ease;
        }

        .ai-card:hover::before {
            left: 140%;
        }

        /* corner accent glow */
        .ai-card::after {
            content: '';
            position: absolute;
            top: -40px;
            right: -40px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(91, 152, 255, 0.15);
            pointer-events: none;
        }

        .ai-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(255,255,255,0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            transition: background 0.3s;
        }

        .ai-card:hover .ai-card-icon {
            background: rgba(255,255,255,0.22);
        }

        .ai-card-icon svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: #a8c4ff;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .ai-card h3 {
           
            font-weight: 700;
            font-size: 1.05rem;
            color: #ffffff;
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .ai-card p {
            font-size: 0.875rem;
            line-height: 1.7;
            color: rgba(200, 216, 255, 0.88);
            margin: 0;
        }

        /* connector line from card to node */
        .ai-connector {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, #1a6bff, rgba(26,107,255,0.3));
            position: relative;
        }

        .ai-item:nth-child(even) .ai-connector {
            background: linear-gradient(270deg, #1a6bff, rgba(26,107,255,0.3));
        }

        /* ───────── MOBILE ───────── */
        @media (max-width: 767.98px) {
            .create_chatbot_section {
                padding: 30px 0!important;
            }

            .ai-timeline::before {
                left: 28px;
            }

            .ai-item,
            .ai-item:nth-child(even) {
                flex-direction: row !important;
                align-items: flex-start;
                margin-bottom: 36px;
            }

            .ai-node {
                width: 48px;
                height: 48px;
                flex: 0 0 48px;
                margin-right: 0;
            }

            .ai-connector {
                display: none;
            }

            .ai-card,
            .ai-item:nth-child(odd) .ai-card,
            .ai-item:nth-child(even) .ai-card {
                flex: 1;
                max-width: 100%;
                margin-left: 18px !important;
                margin-right: 0 !important;
            }
        }

        @media (min-width: 768px) and (max-width: 991.98px) {
            .ai-card {
                padding: 24px 20px;
            }

            .ai-card h3 {
                font-size: 0.97rem;
            }
        }
   
        /* SECTION-3 */
       
.ai_agent_cta_sec{
    background:#07142b;
    padding:30px 0;
    overflow:hidden;
}

.ai_agent_cta_sec .container{
    max-width:1100px;
}

.ai_agent_cta_box{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:35px 40px;
    border-radius:20px;
    background:linear-gradient(135deg,#0b1d3f,#102a5c);
    border:1px solid rgba(255,255,255,0.08);
}

/* Glow */

.ai_agent_cta_box::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-100px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(0,102,255,0.15);
    filter:blur(20px);
}

/* Heading */

.ai_agent_title{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:2.4rem;
    font-weight:700;
    line-height:1.3;
    margin-bottom:18px;

    opacity:0;
    transform:translateX(-140px);
}

/* Paragraph */

.ai_agent_desc{
    position:relative;
    z-index:2;
    color:#d8e3ff;
    font-size:1rem;
    line-height:1.9;
    max-width:900px;
    margin:0 auto 25px;

    opacity:0;
    transform:translateX(140px);
}

/* Active Animation */

.ai_agent_title.active{
    animation:headingSlide 1s ease forwards;
}

.ai_agent_desc.active{
    animation:paraSlide 1s ease forwards;
    animation-delay:.2s;
}

/* Keyframes */

@keyframes headingSlide{
    from{
        opacity:0;
        transform:translateX(-140px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes paraSlide{
    from{
        opacity:0;
        transform:translateX(140px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Button */

.ai_agent_btn{
    position:relative;
    z-index:2;
    border:none;
    outline:none;
    background:#0066ff;
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-size:.95rem;
    font-weight:600;
    transition:.4s ease;
}

.ai_agent_btn:hover{
    background:#fff;
    color:#0066ff;
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,102,255,0.25);
}

/* Responsive */

@media(max-width:991px){

    .ai_agent_title{
        font-size:2rem;
    }

    .ai_agent_cta_box{
        padding:30px;
    }
}

@media(max-width:767px){

    .ai_agent_cta_sec{
        padding:25px 0;
    }

    .ai_agent_cta_box{
        padding:28px 20px;
        border-radius:16px;
    }

    .ai_agent_title{
        font-size:1.6rem;
        margin-bottom:15px;
    }

    .ai_agent_desc{
        font-size:.93rem;
        line-height:1.7;
        margin-bottom:22px;
    }

    .ai_agent_btn{
        width:100%;
        padding:13px 20px;
        font-size:.9rem;
    }
}

/* SECTION-4 */
/* =========================
TESTIMONIAL SECTION
========================= */

.testimonial_section{
    background:#ffffff;
    padding:30px 0;
    overflow:hidden;
}

/* HEADER */

.testimonial_section .ai_testimonials_head{
    text-align:center;
    max-width:950px;
    margin:0 auto 28px;
}

.testimonial_section .ai_testimonials_head h2{
    font-size:2.2rem;
    font-weight:700;
    color:#07142b;
    margin-bottom:14px;
    line-height:1.3;
}

.testimonial_section .ai_testimonials_head p{
    font-size:1rem;
    color:#555;
    line-height:1.8;
    margin:0;
}

/* TABS */

.testimonial_tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:30px;
}

.testimonial_tab{
    background:#eef4ff;
    border:1px solid #d7e5ff;
    color:#07142b;
    padding:12px 28px;
    border-radius:50px;
    font-size:.95rem;
    font-weight:600;
    transition:.4s ease;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}

.testimonial_tab::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    transition:.5s;
}

.testimonial_tab:hover::before{
    left:100%;
}

.testimonial_tab.active,
.testimonial_tab:hover{
    background:#0066ff;
    color:#fff;
    border-color:#0066ff;
    transform:translateY(-2px);
}

/* CARD */

.testimonial_card{
    display:none;
    background:linear-gradient(135deg,#07142b,#0c2147);
    border-radius:22px;
    padding:35px;
    border:1px solid rgba(255,255,255,0.08);
    animation:fadeSlide .6s ease;
}

.testimonial_card.active{
    display:block;
}

@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* CONTENT */

.testimonial_content h3{
    color:#fff;
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.4;
}

.testimonial_content p{
    color:#dce7ff;
    font-size:.96rem;
    line-height:1.9;
    margin-bottom:18px;
}

.testimonial_meta{
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:18px;
}

.testimonial_meta p{
    margin-bottom:10px;
    font-size:.93rem;
}

.testimonial_meta strong{
    color:#ffffff;
}

/* IMAGE */

.testimonial_img{
    position:relative;
    overflow:hidden;
    border-radius:18px;
}

.testimonial_img img{
    width:100%;
    border-radius:18px;
    transition:.5s ease;
    display:block;
}

.testimonial_card:hover .testimonial_img img{
    transform:scale(1.04);
}

/* RESPONSIVE */

@media(max-width:991px){

    .testimonial_card{
        padding:28px;
    }

    .testimonial_content{
        margin-bottom:25px;
    }

    .testimonial_content h3{
        font-size:1.5rem;
    }
}

@media(max-width:767px){

    .testimonial_section{
        padding:25px 0;
    }

    .testimonial_section .ai_testimonials_head h2{
        font-size:1.7rem;
    }

    .testimonial_section .ai_testimonials_head p{
        font-size:.92rem;
        line-height:1.7;
    }

    .testimonial_tabs{
        gap:10px;
    }

    .testimonial_tab{
        width:100%;
        text-align:center;
        padding:11px 18px;
        font-size:.9rem;
    }

    .testimonial_card{
        padding:22px 18px;
        border-radius:18px;
    }

    .testimonial_content h3{
        font-size:1.3rem;
    }

    .testimonial_content p{
        font-size:.9rem;
        line-height:1.7;
    }
}

 /* SECTION-5 */


.developmen_process_sec {
    background: #030a1a;
    padding: 90px 20px 100px;
   
    position: relative;
    overflow: hidden;
}

/* Subtle background grid */
.developmen_process_sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,120,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,120,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Glow orbs */
.developmen_process_sec::after {
    content: '';
    position: absolute;
    top: 10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 90, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/*HEADER */
.development_process_sec_head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 70px;
    position: relative;
    z-index: 2;
}

.development_process_sec_head .fst_head {
   
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 14px;
    display: block;
}

.development_process_sec_head .sub_head {
    
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 18px;
}

.development_process_sec_head p {
    font-size: clamp(14px, 1.8vw, 16px);
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    margin: 0;
    font-weight: 300;
}

/*  SNAKE TIMELINE */
.development-process {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    z-index: 2;
}

/* SVG snake path behind cards */
.snake-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/*  PROCESS CARD  */
.process-card {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.process-card.animate-hidden {
    opacity: 0;
    transform: translateY(40px);
}

.process-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Even cards: right-aligned */
.process-card.card-right {
    flex-direction: row-reverse;
    text-align: right;
}

.process-card.card-right .card-content {
    align-items: flex-end;
}

/* Node circle */
.card-node {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.card-node-inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
   
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #0f4adb, #1e6bff);
    box-shadow: 0 0 0 3px rgba(30,107,255,0.3), 0 0 30px rgba(30,107,255,0.4);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.process-card:hover .card-node-inner {
    box-shadow: 0 0 0 4px rgba(30,107,255,0.5), 0 0 50px rgba(30,107,255,0.6);
    transform: scale(1.06);
}

.card-node-inner svg {
    width: 34px;
    height: 34px;
    color: #fff;
    opacity: 0.95;
}

.card-node-inner img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    
}

/* Card text block */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 30px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    position: relative;
    transition: border-color 0.3s ease, background 0.3s ease;
    max-width: calc(100% - 120px);
}

.process-card:hover .card-content {
    background: rgba(30,107,255,0.06);
    border-color: rgba(30,107,255,0.25);
}

/* Step label */
.card-step {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 6px;
   
}

.card-title {
    
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}

.card-desc {
    font-size: clamp(13px, 1.5vw, 14.5px);
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    margin: 0;
    font-weight: 300;
}

/* Connector line between cards */
.card-connector {
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(30,107,255,0.6), rgba(30,107,255,0.15));
    margin: 0 auto;
    position: relative;
    z-index: 1;
    margin-left: 44px;
}

.card-right + .card-connector {
    margin-left: auto;
    margin-right: 44px;
}

/* Animated dot on connector */
.card-connector::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    top: 0;
    animation: travelDot 2s ease-in-out infinite;
}

@keyframes travelDot {
    0%   { top: 0; opacity: 1; }
    100% { top: calc(100% - 6px); opacity: 0; }
}

/* PULSE RING on node  */
.card-node::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(30,107,255,0.2);
    animation: pulseRing 2.5s ease-out infinite;
}

@keyframes pulseRing {
    0%   { transform: scale(1); opacity: 0.7; }
    70%  { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* 
   RESPONSIVE
 */
@media (max-width: 768px) {
    .developmen_process_sec {
        padding: 30px 0;
    }

    .process-card,
    .process-card.card-right {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .process-card.card-right .card-content {
        align-items: flex-start;
    }

    .card-content {
        max-width: 100%;
        padding: 22px 20px;
    }

    .card-connector {
        margin-left: 35px !important;
        margin-right: 0 !important;
    }

    .card-node {
        width: 70px;
        height: 70px;
    }

    .card-node-inner {
        width: 62px;
        height: 62px;
        font-size: 18px;
    }
}

/* SECTION-6 */
.ai_industires_section {
    background: #ffffff;
    padding: 90px 0 100px;
    
    position: relative;
    overflow: hidden;
}
 
/* ---- HEADER ---- */
.ai_industires_head {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
}
 
.ai_industires_head h2 {
   
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 800;
    color: #0a0f1e;
    line-height: 1.2;
    margin-bottom: 18px;
}
 
.ai_industires_head p {
    font-size: clamp(14px, 1.6vw, 16px);
    color: #555e78;
    line-height: 1.8;
    font-weight: 300;
    margin: 0;
}
 
/* ---- 3D GRID STAGE ---- */
.industries-3d-stage {
    perspective: 800px;
    perspective-origin: 50% -30%;
    padding: 0 15px 20px;
    position: relative;
}
 
.industries-grid-plane {
    transform: none;
    transform-style: preserve-3d;
    position: relative;
}
 
/* ---- ROW OVERRIDES ---- */
.ai_industires_section .row {
    margin: 0 -6px;
}
 
.ai_industires_section .col-lg-3 {
    padding: 6px;
}
 
/* ---- CARD ---- */
.ai_industires_box {
    background: #0d1f4a;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 20px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 105px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
    opacity: 0;
    transform: translateY(20px);
    will-change: transform;
}
 
.ai_industires_box.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}
 
/* Shimmer line on top */
.ai_industires_box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
 
.ai_industires_box:hover::before {
    opacity: 1;
}
 
/* Inner glow */
.ai_industires_box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(59,130,246,0.12) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
 
.ai_industires_box:hover::after {
    opacity: 1;
}
 
.ai_industires_box:hover {
    background: #1a3472;
    border-color: rgba(59,130,246,0.35);
    transform: translateY(-6px) translateZ(20px) scale(1.03);
    box-shadow: 0 16px 40px rgba(14, 60, 180, 0.4), 0 4px 12px rgba(0,0,0,0.3);
}
 
/* Image */
.ai_industires_box img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 1;
}
 
.ai_industires_box:hover img {
    opacity: 1;
    transform: scale(1.1);
}
 
/* Label */
.ai_industires_box p {
    
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}
 
.ai_industires_box:hover p {
    color: #ffffff;
}
 
/* Link reset */
.ai_industires_section a {
    text-decoration: none;
    display: block;
}
 
/* ---- RESPONSIVE ---- */
@media (max-width: 767px) {
    .ai_industires_section {
        padding: 30px 0;
    }
    .industries-3d-stage {
        padding: 0 0 20px;
    }
    .ai_industires_box {
        min-height: 100px;
        padding: 18px 10px 14px;
    }
    .ai_industires_section .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
 
@media (max-width: 480px) {
    .ai_industires_section .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .ai_industires_box img {
        width: 30px;
        height: 30px;
    }
    .ai_industires_box p {
        font-size: 11px;
    }
}

/* SECTION-7 */
.ai_related_sec {
    background: #030a1a;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
}

.ai_related_sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,100,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,100,255,0.03) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

/* ---- HEADER ---- */
.ai_related_sec_head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 70px;
    position: relative;
    z-index: 2;
}

.ai_related_sec_head h2 {
  
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 16px;
}

.ai_related_sec_head p {
   
    font-size: clamp(14px, 1.6vw, 15px);
    color: rgba(255,255,255,0.45);
    line-height: 1.8;
    font-weight: 300;
    margin: 0;
}

/* ---- STACK WRAPPER ---- */
.stack-wrapper {
    position: relative;
    cursor: pointer;
    padding-bottom: 16px;
}

/* Ghost card — deepest layer */
.stack-wrapper .ghost2 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 26px);
    height: calc(100% - 16px);
    background: rgba(30, 60, 120, 0.35);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    z-index: 1;
    transition: all 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Ghost card — middle layer */
.stack-wrapper .ghost1 {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 14px);
    height: calc(100% - 16px);
    background: rgba(20, 45, 100, 0.55);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    z-index: 2;
    transition: all 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover: fan out ghost cards */
.stack-wrapper:hover .ghost2 {
    bottom: -10px;
    transform: translateX(-50%) rotate(3.5deg);
}

.stack-wrapper:hover .ghost1 {
    bottom: -4px;
    transform: translateX(-50%) rotate(1.5deg);
}

/* ---- MAIN CARD ---- */
.ai_related_sec_box {
    position: relative;
    z-index: 3;
    background: #0d1f4a;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 26px 22px 24px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.42s ease,
                border-color 0.3s ease;
    opacity: 0;
    transform: translateY(28px);
}

.ai_related_sec_box.visible {
    opacity: 1;
    transform: translateY(0);
}

/* top shimmer */
.ai_related_sec_box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6 50%, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* glow spot */
.ai_related_sec_box::after {
    content: '';
    position: absolute;
    top: -30px; left: -30px;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.stack-wrapper:hover .ai_related_sec_box {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(8,30,110,0.65);
    border-color: rgba(59,130,246,0.35);
}

.stack-wrapper:hover .ai_related_sec_box::before { opacity: 1; }
.stack-wrapper:hover .ai_related_sec_box::after  { opacity: 1; }

/* ---- CARD CONTENT ---- */
.card-num {
  
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
}

.ai_related_sec_box h3 {
  
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.35;
}

.ai_related_sec_box p {
   
    font-size: clamp(12px, 1.1vw, 13px);
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    margin: 0;
    font-weight: 300;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 575px) {
    .ai_related_sec {
        padding: 30px 0;
    }
    .ai_related_sec_box {
        min-height: auto;
    }
}

/* SECTION-8 */

.technology_sec {
    background: #fff;
    position: relative;
    overflow: hidden;
    padding: 30px 0;
}

.technology_sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,100,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,100,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ---- HEADER ---- */
.technology_desp {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}

.technology_desp h2 {
  
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 800;
    color: #1B5EF7;
    line-height: 1.25;
    margin-bottom: 18px;
}

.technology_desp p {
   
    font-size: clamp(14px, 1.5vw, 15px);
    color: #000;
    line-height: 1.85;
    font-weight: 300;
    margin: 0;
}

.technology_desp p a {
    color: #3b82f6;
    text-decoration: none;
    border-bottom: 1px solid rgba(59,130,246,0.4);
    transition: border-color 0.2s;
}
.technology_desp p a:hover { border-color: #3b82f6; }

/* ===================== HEX TAB RING ===================== */
.hex-tab-ring {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 56px;
}

/* Individual hex tab button */
.hex-tab-btn {
    position: relative;
    width: 130px;
    height: 148px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}

/* Hex clip via SVG background */
.hex-tab-btn .hex-shape {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ffffff;
    border: none;
    transition: background 0.35s ease, transform 0.35s cubic-bezier(0.23,1,0.32,1);
}

.hex-tab-btn .hex-border {
    position: absolute;
    inset: -2px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(59,130,246,0.18);
    z-index: -1;
    transition: background 0.35s ease;
}



.hex-tab-btn .hex-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    z-index: 2;
    gap: 8px;
}

.hex-tab-btn .hex-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0.85);
    transition: filter 0.3s;
}

.hex-tab-btn.active .hex-icon,
.hex-tab-btn:hover .hex-icon {
    filter: brightness(1.2);
}

.hex-tab-btn .hex-label {
   
    font-size: 10px;
    font-weight: 600;
    color: #000;
    text-align: center;
    line-height: 1.35;
    letter-spacing: 0.3px;
    transition: color 0.3s;
}

.hex-tab-btn.active .hex-label,
.hex-tab-btn:hover .hex-label {
    color: #000;
}

/* Active indicator dot */
.hex-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50%       { transform: translateX(-50%) scale(1.6); opacity: 0.5; }
}

/* ===================== CONTENT PANEL ===================== */
.tech-panel-wrap {
    position: relative;
    z-index: 2;
    background: #0a1a3d;
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 20px;
    overflow: hidden;
    min-height: 340px;
}

/* Panel header strip */
.tech-panel-header {
    background: linear-gradient(90deg, #0d2657, #0a1a3d);
    border-bottom: 1px solid rgba(59,130,246,0.2);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tech-panel-header .panel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59,130,246,0.6);
    flex-shrink: 0;
}

.tech-panel-header .panel-title {
  
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Tab content panels */
.technology_tabcontent {
    display: none;
    padding: 32px 24px 28px;
    animation: panelFadeIn 0.45s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.technology_tabcontent.active-tab {
    display: block;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===================== TECH ITEM BOXES ===================== */
.hitech_box {
    background: #ffffff;
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 14px;
   padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    transition: transform 0.32s cubic-bezier(0.23,1,0.32,1),
                border-color 0.3s ease,
                box-shadow 0.32s ease;
    cursor: default;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
     margin-bottom: 14px;
}

.hitech_box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.hitech_box:hover {
    transform: translateY(-6px);
    border-color: rgba(59,130,246,0.45);
    box-shadow: 0 16px 40px rgba(8,30,110,0.5);
}

.hitech_box:hover::before { opacity: 1; }

.hitech_box img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.hitech_box:hover img { transform: scale(1.12); }

.hitech_box p {
   
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,0,0,0.75);
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s;
}

.hitech_box:hover p { color: #000000; }

/* Staggered entry animation for cards */
.technology_tabcontent.active-tab .hitech_box {
    animation: cardReveal 0.4s cubic-bezier(0.23,1,0.32,1) both;
}

.technology_tabcontent .row {
    justify-content: center;
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991px) {
    .hex-tab-btn { width: 110px; height: 126px; }
    .hex-tab-btn .hex-icon { width: 30px; height: 30px; }
    .hex-tab-btn .hex-label { font-size: 9px; }
}

@media (max-width: 767px) {
    .hex-tab-ring { gap: 10px; }
    .hex-tab-btn { width: 96px; height: 110px; }
    .hex-tab-btn .hex-icon { width: 26px; height: 26px; }
    .hex-tab-btn .hex-label { font-size: 8.5px; }
    .technology_tabcontent { padding: 24px 14px 20px; }
    .tech-panel-header { padding: 16px 18px; }
}

@media (max-width: 480px) {
    .hex-tab-ring { gap: 8px; }
    .hex-tab-btn { width: 82px; height: 94px; }
    .hex-tab-btn .hex-icon { width: 22px; height: 22px; }
    .hex-tab-btn .hex-label { font-size: 7.5px; }
}

/* SECTION-9 */
.ai-kpi-band_sec {
    background: #020b1a;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* Animated moving grid lines */
.ai-kpi-band_sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,100,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,100,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 12s linear infinite;
    pointer-events: none;
    z-index: 0;
}

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

/* Glowing orb left */
.ai-kpi-band_sec::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

/* ---- TITLE ---- */
.ai-kpi-title {
  
    font-size: clamp(20px, 2.8vw, 34px);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin-bottom: 44px;
    position: relative;
    z-index: 2;
    line-height: 1.25;
}

.ai-kpi-title span {
    color: #3b82f6;
}

/* ---- ROW ---- */
.ai-kpi-row {
    position: relative;
    z-index: 2;
    align-items: stretch;
}

/* ---- CARD ---- */
.ai-kpi-card {
    position: relative;
    background: #0a1a3d;
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 14px;
    padding: 28px 16px 24px;
    overflow: hidden;
    transition: transform 0.36s cubic-bezier(0.23,1,0.32,1),
                border-color 0.3s ease,
                box-shadow 0.36s ease;
    /* entry: start hidden */
    opacity: 0;
    transform: translateY(30px);
}

.ai-kpi-card.kpi-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.23,1,0.32,1),
                border-color 0.3s ease, box-shadow 0.36s ease;
}

/* Top shimmer line */
.ai-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    transition: left 0.5s ease;
}

.ai-kpi-card:hover::before {
    left: 100%;
}

/* Corner glow */
.ai-kpi-card::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-kpi-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59,130,246,0.5);
    box-shadow: 0 20px 50px rgba(8,30,110,0.55);
}

.ai-kpi-card:hover::after { opacity: 1; }

/* ---- NUMBER ---- */
.ai-kpi-value {
  
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: #3b82f6;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1px;
    /* Glowing text */
    text-shadow: 0 0 20px rgba(59,130,246,0.45);
    transition: text-shadow 0.3s ease;
}

.ai-kpi-card:hover .ai-kpi-value {
    text-shadow: 0 0 30px rgba(59,130,246,0.8);
}

/* Pulse ring around number on hover */
.ai-kpi-value-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.ai-kpi-value-wrap::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(59,130,246,0.3);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ai-kpi-card:hover .ai-kpi-value-wrap::before {
    opacity: 1;
    transform: scale(1.1);
}

/* ---- LABEL ---- */
.ai-kpi-label {
   
    font-size: clamp(11px, 1.1vw, 13px);
    color: rgba(255,255,255,0.55);
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.3s;
}

.ai-kpi-card:hover .ai-kpi-label {
    color: rgba(255,255,255,0.85);
}

/* Divider between cards (desktop) */
.ai-kpi-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ai-kpi-divider-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(59,130,246,0.4), transparent);
}

/* ---- BOTTOM GLOW BAR ---- */
.ai-kpi-glow-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5) 30%, rgba(59,130,246,0.5) 70%, transparent);
    z-index: 1;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {
    .ai-kpi-band_sec { padding: 50px 0; }
    .ai-kpi-card { padding: 22px 14px 20px; }
}

@media (max-width: 575px) {
    .ai-kpi-band_sec { padding: 40px 0; }
    .ai-kpi-title { margin-bottom: 30px; }
    .ai-kpi-card { padding: 20px 12px 18px; border-radius: 12px; }
}

/* SECTION-10 */
.ai-leader {
    background: #ffffff;
    
    position: relative;
    overflow: hidden;
}

/* ---- HEADER BAND ---- */
.ai-leader__band {
    background: #020b1a;
    padding: 80px 0 70px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    margin-bottom: 70px;
}

.ai-leader__band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,100,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,100,255,0.05) 1px, transparent 1px);
    background-size: 55px 55px;
    pointer-events: none;
}

.ai-leader__band::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ai-leader__title {
  
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.ai-leader__sub {
   
    font-size: clamp(13px, 1.5vw, 15px);
    color: rgba(255,255,255,0.5);
    line-height: 1.85;
    font-weight: 300;
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ---- CARDS WRAPPER ---- */
.ai-leader__cards {
    position: relative;
    z-index: 2;
}

/* ---- TRIANGLE CARD ---- */
.ai-feature-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid rgba(59,130,246,0.18);
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Entry animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23,1,0.32,1);
}

.ai-feature-card.card-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Triangle shape via clip-path on inner body */
.ai-feature-card__body {
    position: relative;
    background: #ffffff;
    border: 1.5px solid rgba(59,130,246,0.18);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    padding: 36px 28px 70px;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
    min-height: 260px;
}

.ai-feature-card:hover .ai-feature-card__body {
    background: #020b1a;
    border-color: #3b82f6;
    box-shadow: 0 20px 60px rgba(8,30,110,0.25);
}

/* Number badge top-left */
.ai-feature-card__num {
  
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    letter-spacing: 2.5px;
    display: block;
    margin-bottom: 14px;
    transition: color 0.3s;
}

/* Triangle arrow accent top-right */
.ai-feature-card__body::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 44px 44px 0;
    border-color: transparent #3b82f6 transparent transparent;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.ai-feature-card:hover .ai-feature-card__body::before {
    opacity: 0.6;
}

/* Title */
.ai-feature-card__title {
  
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 12px;
    line-height: 1.35;
    transition: color 0.35s;
}

.ai-feature-card:hover .ai-feature-card__title {
    color: #ffffff;
}

/* Desc */
.ai-feature-card__desc {
   
    font-size: clamp(12px, 1.1vw, 13.5px);
    color: rgba(0,0,0,0.6);
    line-height: 1.78;
    font-weight: 300;
    margin: 0;
    transition: color 0.35s;
}

.ai-feature-card:hover .ai-feature-card__desc {
    color: rgba(255,255,255,0.65);
}

/* Bottom triangle tip glow on hover */
.ai-feature-card__tip {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 16px solid #3b82f6;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ai-feature-card:hover .ai-feature-card__tip {
    opacity: 1;
}

/* Blue connecting line row between rows */
.ai-leader__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 6px;
}

.ai-leader__connector-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, rgba(59,130,246,0.5), transparent);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {
    .ai-leader__band {
        clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
       
        margin-bottom: 50px;
    }
    .ai-feature-card__body {
        min-height: 240px;
        padding: 30px 22px 65px;
    }
}
@media (max-width: 575px) {
    .ai-leader{
        padding: 0px;
    }
}
@media (max-width: 575px) {
    @media (max-width: 575px) {
        .ai-leader {
            padding-bottom: 0!important;
        }
    }
}

@media (max-width: 575px) {
    .ai-leader__band {
        clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
        padding: 50px 0 70px;
        margin-bottom: 36px;
    }
    .ai-leader { padding-bottom: 60px; }
    .ai-feature-card__body {
        min-height: auto;
        padding: 26px 20px 60px;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    }
}

/* SECTION-11 */
.fs{
    padding: 30px 0;
     background: #020b1a;
}
.fh h2{
    color: #fff;
    text-align: center;
}
.faq-two-col {
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}

.faq-item-new {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.faq-q-new {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: none;
  text-align: left;
  padding: 18px 20px;
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}

.faq-q-new:hover {
  background: rgba(29,78,216,0.1);
  color: #fff;
}

.faq-item-new.open .faq-q-new {
  background: rgba(29,78,216,0.15);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.faq-plus {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(29,78,216,0.2);
  border: 1px solid rgba(59,130,246,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #60a5fa;
  transition: transform 0.3s, background 0.2s;
  line-height: 1;
}

.faq-item-new.open .faq-plus {
  transform: rotate(45deg);
  background: rgba(29,78,216,0.4);
}

.faq-a-new {
  display: none;
  padding: 18px 20px;
  color: #94a3b8;
  font-size: 0.83rem;
  line-height: 1.7;
  background: rgba(0,0,0,0.2);
}

.faq-item-new.open .faq-a-new {
  display: block;
  animation: sg-fade-in 0.3s ease;
}

@media(max-width: 767px) {
  .faq-two-col {
    grid-template-columns: 1fr;
  }
}

   /* SECTION-1 */
   
    @keyframes hhs_fromLeft {
      0%   { opacity:0; transform: translateX(-60px) skewX(-4deg); }
      65%  { opacity:1; transform: translateX(6px)   skewX(1deg);  }
      100% { opacity:1; transform: translateX(0)      skewX(0);    }
    }

    @keyframes hhs_fromBottom {
      0%   { opacity:0; transform: translateY(70px) scale(0.95); }
      60%  { opacity:1; transform: translateY(-8px) scale(1.01); }
      100% { opacity:1; transform: translateY(0)    scale(1);    }
    }

    @keyframes hhs_fromRight {
      0%   { opacity:0; transform: translateX(60px) skewX(4deg);  }
      65%  { opacity:1; transform: translateX(-6px) skewX(-1deg); }
      100% { opacity:1; transform: translateX(0)     skewX(0);    }
    }

    @keyframes hhs_zoomIn {
      0%   { opacity:0; transform: scale(0.80) translateY(20px); }
      65%  { opacity:1; transform: scale(1.03) translateY(-4px); }
      100% { opacity:1; transform: scale(1)    translateY(0);    }
    }

    @keyframes hhs_iconFloat {
      0%,100% { transform: translateY(0)     rotate(0deg);  opacity:.6; }
      40%      { transform: translateY(-18px) rotate(5deg);  opacity:1;  }
      70%      { transform: translateY(-7px)  rotate(-4deg); opacity:.4; }
    }

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

    @keyframes hhs_dotPulse {
      0%,100% { box-shadow: 0 0 0 0   rgba(29,78,216,.4); }
      50%      { box-shadow: 0 0 0 5px rgba(29,78,216,0);  }
    }


    .home_hero_section {
      position: relative;
      display: flex;
      align-items: center;
      background: #fff;
      overflow: hidden;
      
    }

    .home_hero_section *,
    .home_hero_section *::before,
    .home_hero_section *::after {
      box-sizing: border-box;
    }

    .home_hero_section .container {
      position: relative;
      z-index: 4;
      padding-top: 100px;
      padding-bottom: 100px;
    }

    .home_hero_section .hero-inner {
      text-align: center;
      width: 100%;
    }


    .home_hero_section .hhs-bg-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .home_hero_section .hhs-orb-1 {
      position: absolute;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(29,78,216,.07) 0%, transparent 65%);
      bottom: -200px;
      right: -100px;
      z-index: 1;
      pointer-events: none;
      animation: hhs_orbFloat 10s ease-in-out infinite;
    }

    .home_hero_section .hhs-orb-2 {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(96,165,250,.06) 0%, transparent 65%);
      top: -80px;
      left: 40%;
      z-index: 1;
      pointer-events: none;
      animation: hhs_orbFloat 13s ease-in-out infinite reverse;
    }


    /* ── ICON CLOUD ────────────────────────────────────── */

    .home_hero_section .icon-cloud {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .home_hero_section h1{
    max-width: 950px;
    margin: 0 auto 24px;
}

    .home_hero_section .icon-cloud i {
      position: absolute;
      color: rgba(29,78,216,.07);
      filter: blur(1px);
      animation: hhs_iconFloat ease-in-out infinite;
    }

    .home_hero_section .icon-cloud .icon-1 { font-size:48px; top:10%; left:4%;  animation-duration:9s;  animation-delay:0s;  }
    .home_hero_section .icon-cloud .icon-2 { font-size:34px; top:20%; left:88%; animation-duration:11s; animation-delay:-2s; }
    .home_hero_section .icon-cloud .icon-3 { font-size:52px; top:60%; left:3%;  animation-duration:13s; animation-delay:-4s; }
    .home_hero_section .icon-cloud .icon-4 { font-size:30px; top:72%; left:91%; animation-duration:10s; animation-delay:-1s; }
    .home_hero_section .icon-cloud .icon-5 { font-size:40px; top:40%; left:2%;  animation-duration:14s; animation-delay:-6s; }
    .home_hero_section .icon-cloud .icon-6 { font-size:32px; top:28%; left:93%; animation-duration:12s; animation-delay:-3s; }
    .home_hero_section .icon-cloud .icon-7 { font-size:26px; top:80%; left:13%; animation-duration:8s;  animation-delay:-5s; }

    .home_hero_section .hhs-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f0f5ff;
      border: 1px solid rgba(29,78,216,.20);
      border-radius: 99px;
      padding: 6px 18px 6px 10px;
      margin-bottom: 22px;
      opacity: 0;
      animation: hhs_fromLeft .75s cubic-bezier(.22,1,.36,1) .15s forwards;
    }

    .home_hero_section .hhs-tag-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1d4ed8;
      flex-shrink: 0;
      animation: hhs_dotPulse 2s ease-in-out infinite;
    }

    .home_hero_section .hhs-tag .tag-lbl {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: #1d4ed8;
    }


    /* ── HEADING ───────────────────────────────────────── */

    .home_hero_section h1 {
      
      font-size: clamp(36px, 5.5vw, 72px);
      font-weight: 900;
      line-height: 1.03;
      letter-spacing: -.03em;
      margin: 0 0 24px;
      padding: 0;
      border: none;
      background: none;
      opacity: 0;
      animation: hhs_fromBottom .85s cubic-bezier(.22,1,.36,1) .35s forwards;
    }

    .home_hero_section .gradient-title {
        
      display: block;
      background: linear-gradient(125deg, #0a0f1e 10%, #1d4ed8 55%, #60a5fa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }


    /* ── SUBHEADING ────────────────────────────────────── */

    .home_hero_section .subhead {
      font-size: clamp(14.5px, 1.5vw, 16.5px);
      font-weight: 400;
      line-height: 1.80;
      color: #4b5563;
      margin: 0 auto 38px;
      max-width: 680px;
      
      opacity: 0;
      animation: hhs_fromRight .80s cubic-bezier(.22,1,.36,1) .60s forwards;
    }


    /* ── CTA BUTTON ────────────────────────────────────── */

    .home_hero_section .cta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      opacity: 0;
      animation: hhs_zoomIn .70s cubic-bezier(.34,1.56,.64,1) .88s forwards;
    }

    .home_hero_section .btn-primary-hero {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 30px;
      background: #0a0f1e;
      color: #fff;
      
      font-size: 15px;
      font-weight: 700;
      border-radius: 10px;
      text-decoration: none;
      border: 2px solid #0a0f1e;
      cursor: pointer;
      letter-spacing: -.01em;
      transition: background .22s, border-color .22s, transform .18s, box-shadow .22s;
      position: relative;
      overflow: hidden;
    }

    .home_hero_section .btn-primary-hero:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(29,78,216,.30);
      color: #fff;
      text-decoration: none;
    }

    .home_hero_section .btn-primary-hero img {
      width: 28px;
      height: auto;
      flex-shrink: 0;
    }


    /* ── RESPONSIVE ────────────────────────────────────── */

    @media (max-width: 991px) {
      .home_hero_section .container {
        padding: 30px 0;
      }
    }

    @media (max-width: 575px) {
      .home_hero_section h1           { font-size: 34px; }
      .home_hero_section .subhead     { font-size: 14px;  padding: 0 20px;}
      .home_hero_section .btn-primary-hero { padding: 13px 22px; font-size: 14px; }
      .home_hero_section .icon-cloud .icon-2,
      .home_hero_section .icon-cloud .icon-4,
      .home_hero_section .icon-cloud .icon-6 { display: none; }
    }