* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}


body {
  background: #f5f7fa;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}


/* 🔥 ANIMATED BACKGROUND */
body::before,
body::after {
  content: "";
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
}

body::before {
  background: #9fdef0;
  top: 10%;
  left: 10%;
  animation: float1 12s infinite alternate;
}

body::after {
  background: #ba95f5;
  bottom: 10%;
  right: 10%;
  animation: float2 12s infinite alternate;
}

@keyframes float1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(80px, -60px);
  }
}

@keyframes float2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-80px, 60px);
  }
}


/* ***************************HERO section**************************/
.hero {
  margin-top: 140px;
  width: 100%;
  height: max-content;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.users {
  width: 23%;
  /* margin: auto; */
  padding: 12px;
  background: rgba(231, 229, 229, 0.836);
  color: rgb(8, 8, 8);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;

}

.user {
  width: 55px;
  height: 55px;
  position: relative;
}

.user img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid black;
}


/* Initial positions */
.user1 {
  left: 0;
  z-index: 3;
}

.user2 {
  left: -20px;
  z-index: 1;
}

.user3 {
  left: 20px;
  z-index: 1;
}

/* 🔥 SAME duration, NO delay */
.user1 {
  animation: move1 6s infinite ease-in-out;
}

.user2 {
  animation: move2 6s infinite ease-in-out;
}

.user3 {
  animation: move3 6s infinite ease-in-out;
}

@keyframes move1 {

  0%,
  33% {
    left: 0;
    z-index: 3;
    transform: scale(1.1);
  }

  33.1%,
  66% {
    left: 20px;
    z-index: 1;
    transform: scale(1);
  }

  66.1%,
  100% {
    left: -20px;
    z-index: 1;
    transform: scale(1);
  }
}

@keyframes move2 {

  0%,
  33% {
    left: -20px;
    z-index: 1;
    transform: scale(1);
  }

  33.1%,
  66% {
    left: 0;
    z-index: 3;
    transform: scale(1.1);
  }

  66.1%,
  100% {
    left: 20px;
    z-index: 1;
    transform: scale(1);
  }
}

@keyframes move3 {

  0%,
  33% {
    left: 20px;
    z-index: 1;
    transform: scale(1);
  }

  33.1%,
  66% {
    left: -20px;
    z-index: 1;
    transform: scale(1);
  }

  66.1%,
  100% {
    left: 0;
    z-index: 3;
    transform: scale(1.1);
  }
}

#typing-section {
  /* border: 1px solid black; */
  width: 70%;
  /* margin: auto; */
}

.hero h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.2;
  height: 20vh;
  text-align: center;
}

.hero p {
  /* margin-top: 35px; */
  color: #666;
  font-size: 18px;
}

.hero-action {
  width: max-content;
  height: max-content;
}

#typing::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.btn {
  padding: 12px 40px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.primary {
  background: rgb(61, 202, 207);
  color: white;
}

.ghost {
  background: transparent;
  border: 2px solid #080808;
  color: black;
  font-weight: bolder;
}

.ghost:hover {
  background: #044063;
  border: 1px solid #ccc;
  color: white;
}


/******************* ***** book demo section**********************************/

    .contact {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 40px 15%;
      margin-top: 30px;
    }

    .contact-show{
      display: none;
    }

    .contact-container {
      margin: auto;
      width: 50%;
      
    }
/* RIGHT SIDE FORM */
    .contact-right {
      flex: 1;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(20px);
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }

    /* INPUT */
    .input-group {
      position: relative;
      margin-bottom: 30px;
    }

input[type="date"]{
    color: transparent;
}

input[type="date"]::-webkit-calendar-picker-indicator{
    opacity: 1;
}



/*    input[type="time"]::-webkit-datetime-edit {
    color: transparent;
    
} */

    .input-group input,
    .input-group textarea {
      width: 100%;
      padding: 12px;
      border: none;
      border-bottom: 2px solid #ccc;
      outline: none;
      background: transparent;
      font-size: 16px;
    }

    .input-group label {
      position: absolute;
      left: 0;
      top: 10px;
      color: #888;
      transition: 0.3s;
      pointer-events: none;
    }

    /* FLOAT LABEL EFFECT */
    .input-group input:focus+label,
    .input-group input:valid+label,
    .input-group textarea:focus+label,
    .input-group textarea:valid+label {
      top: -12px;
      font-size: 12px;
      color: #007BFF;
    }

    /* BUTTON */
    .btnMsg {
      width: 100%;
      padding: 14px;
      border: none;
      background: black;
      color: white;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.3s;
    }

    .btnMsg:hover {
      background: #007BFF;
    }

    /* ANIMATION */
    .title,
    .subtitle,
    .info {
      opacity: 0;
      transform: translateY(30px);
      animation: fadeUp 1s forwards;
    }

    .subtitle {
      animation-delay: 0.3s;
    }

    .info {
      animation-delay: 0.6s;
    }

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

    /* RESPONSIVE */
    @media (max-width: 768px) {

      .contact {
        margin-top: 50px;
      }

      .contact-container {
        flex-direction: column;
        gap: 50px;
      }

      .title {
        font-size: 36px;
      }

      .title,
      .subtitle,
      .info {

        transform: translateX(30px);

      }

      @keyframes fadeUp {
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
    }


    i {
      font-size: 20px;
      color: #0bc6f5;
    }


   .mergeDateTime{
    display:flex;
    gap:40px;
}

.mergeDateTime .input-group{
    width:100%;
    position:relative;
}

/* DATE + TIME INPUT */
.mergeDateTime input{
    width:100%;
    border:none;
    border-bottom:2px solid #bdbdbd;
    background:transparent;
    font-size:18px;
    outline:none;
}

/* LABEL */
.mergeDateTime label{
    position:absolute;
    left:0;
    top:14px;
    color:#888;
    pointer-events:none;
}

.mergeDateTime .input-group{
    width:100%;
    position:relative;
}

/* DATE + TIME INPUT */
.mergeDateTime input{
    width:100%;
    border:none;
    border-bottom:2px solid #bdbdbd;
    background:transparent;
   
    font-size:18px;
    outline:none;
}

/* LABEL */
.mergeDateTime label{
    position:absolute;
    left:0;
    top:14px;
    color:#888;
    pointer-events:none;
}

/* DATE ICON */
input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer;
    margin-left:12px;
}

/* TIME ICON */
input[type="time"]::-webkit-calendar-picker-indicator{
    cursor:pointer;
    margin-left:12px;   /* spacing between icon and text */
    padding:0px 0px 0px 80px; /* creates icon spacing */
    onBlur: ;
}

/* Hide default placeholder look */
input[type="date"],
input[type="time"]{
    color:#777;
}

.timeBox{
    position:relative;
}

#time, #date{

    width:100%;

    border:none;

    border-bottom:2px solid #bdbdbd;

    background:transparent;

    height:40px;

    outline:none;

    color:transparent; /* hide HH:MM */
}
.timePlaceholder{

    position:absolute;

    left:0;

    top:8px;

    color:#888;

    font-size:18px;

    pointer-events:none;
}
#time:valid + .timePlaceholder{

    display:none;
}
#date:valid + .timePlaceholder{

    display:none;
}
/* show actual selected value */
#time:valid{

    color:#222;
}

#date:valid{

    color:#222;
}

/* SUCCESS TOAST */

#toastSuccess{

position:fixed;

top:30px;

right:30px;

z-index:9999;

display:flex;

flex-direction:column;

gap:15px;
}

.toast{

width:340px;

padding:18px 22px;

border-radius:18px;

background:
linear-gradient(
135deg,
#0f172a,
#111827
);

color:white;

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

display:flex;

align-items:center;

gap:16px;

animation:
slideIn .4s ease;

backdrop-filter:
blur(20px);

overflow:hidden;

position:relative;
}

.toast::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:
linear-gradient(
180deg,
#6366f1,
#06b6d4
);
}

.toastIcon{

width:52px;

height:52px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

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

.toastTitle{

font-size:16px;

font-weight:700;
}

.toastText{

font-size:13px;

opacity:.8;

margin-top:4px;
}

@keyframes slideIn{

from{

opacity:0;

transform:
translateX(60px);
}

to{

opacity:1;

transform:
translateX(0);
}
}

/*********************** chatGpt css ***********************************/
/* OVERLAY */

.popupOverlay{

position:fixed;
inset:0;

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

backdrop-filter: blur(6px);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

opacity:0;

animation:
fadeOverlay .4s ease forwards;
}


/* POPUP FORM */

.popupForm{

width:500px;

max-width:92%;

background:
rgba(255,255,255,0.96);

backdrop-filter:
blur(18px);

padding:42px;

border-radius:28px;

position:relative;

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

transform:
translateY(30px)
scale(.92);

opacity:0;

animation:
popupSmooth .5s ease forwards;
}


/* CLOSE BUTTON */

.closePopup{

position:absolute;

right:18px;

top:12px;

font-size:34px;

border:none;

background:none;

cursor:pointer;

color:#666;

transition:.3s;
}

.closePopup:hover{

transform:rotate(90deg);

color:#007BFF;
}


/* INPUT GROUP */

.popupForm .input-group{

position:relative;

margin-bottom:32px;
}


/* INPUTS */

.popupForm input,
.popupForm textarea{

width:100%;

padding:14px 0;

border:none;

border-bottom:
2px solid #d9d9d9;

background:transparent;

outline:none;

font-size:17px;

transition:.3s;

color:#111;
}


/* INPUT FOCUS */

.popupForm input:focus,
.popupForm textarea:focus{

border-bottom:
2px solid #007BFF;
}


/* TEXTAREA */

.popupForm textarea{

height:70px;

resize:none;
}


/* LABEL */

.popupForm label{

position:absolute;

left:0;

top:14px;

color:#888;

pointer-events:none;

transition:.3s;

font-size:16px;
}


/* FLOAT LABEL */

.popupForm input:focus+label,
.popupForm input:valid+label,
.popupForm textarea:focus+label,
.popupForm textarea:valid+label{

top:-14px;

font-size:12px;

color:#007BFF;
}


/* DATE + TIME */

.popupMerge{

display:flex;

justify-content:space-between;

gap:24px;
}

.popupMerge .input-group{

flex:1;
}


/* BUTTON */

.btnMsg{

width:100%;

padding:17px;

border:none;

background:
linear-gradient(
135deg,
#007BFF,
#0056d6
);

color:white;

font-size:17px;

font-weight:600;

border-radius:14px;

cursor:pointer;

transition:.35s;

margin-top:10px;

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


/* BUTTON HOVER */

.btnMsg:hover{

transform:
translateY(-3px);

box-shadow:
0 18px 40px rgba(0,123,255,.35);
}


/* OVERLAY FADE */

@keyframes fadeOverlay{

to{

opacity:1;
}
}


/* POPUP ANIMATION */

@keyframes popupSmooth{

to{

transform:
translateY(0)
scale(1);

opacity:1;
}
}

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

@media (max-width: 1024px){

  .popupForm{

    width: 460px;

    padding: 36px;

    border-radius: 24px;
  }

  .popupMerge{

    gap:18px;
  }

  .popupForm input,
  .popupForm textarea{

    font-size:16px;
  }

  .btnMsg{

    padding:16px;

    font-size:16px;
  }

}


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

@media (max-width: 768px){

  .popupOverlay{

    padding:20px;
  }

  .popupForm{

    width:100%;

    max-width:100%;

    padding:32px 24px;

    border-radius:22px;
  }

  .closePopup{

    right:14px;

    top:10px;

    font-size:30px;
  }

  .popupMerge{

    flex-direction:column;

    gap:10px;
  }

  .popupForm .input-group{

    margin-bottom:28px;
  }

  .popupForm input,
  .popupForm textarea{

    font-size:15px;

    padding:12px 0;
  }

  .popupForm label{

    font-size:15px;
  }

  .popupForm input:focus+label,
  .popupForm input:valid+label,
  .popupForm textarea:focus+label,
  .popupForm textarea:valid+label{

    font-size:11px;
  }

  .btnMsg{

    padding:15px;

    font-size:15px;

    border-radius:12px;
  }

}


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

@media (max-width: 480px){

  .popupOverlay{

    padding:14px;
  }

  .popupForm{

    padding:28px 18px;

    border-radius:18px;
  }

  .closePopup{

    font-size:26px;

    right:12px;

    top:8px;
  }

  .popupForm .input-group{

    margin-bottom:24px;
  }

  .popupForm input,
  .popupForm textarea{

    font-size:14px;

    padding:10px 0;
  }

  .popupForm textarea{

    height:60px;
  }

  .popupForm label{

    font-size:14px;
  }

  .popupForm input:focus+label,
  .popupForm input:valid+label,
  .popupForm textarea:focus+label,
  .popupForm textarea:valid+label{

    top:-12px;

    font-size:10px;
  }

  .btnMsg{

    padding:14px;

    font-size:14px;

    border-radius:10px;
  }

}
/*********************** chatGpt css end ***********************************/

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

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

.contact{

padding:40px 8%;
}

.contact-container{

width:75%;
}

.contact-right{

padding:32px;
}

}


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

.contact{

min-height:auto;

padding:40px 20px;

margin-top:40px;
}

.contact-container{

width:100%;
}

.contact-right{

width:100%;

padding:28px;

border-radius:18px;
}

/* Date + Time Stack */
.mergeDateTime{

flex-direction:column;

gap:22px;
}

.mergeDateTime .input-group{

width:100%;
}

/* Inputs */

.input-group input,

.input-group textarea{

font-size:15px;
}

/* labels */

.input-group label{

font-size:14px;
}

/* button */

.btnMsg{

padding:15px;

font-size:15px;
}

/* Toast */

#toastSuccess{

top:20px;

left:15px;

right:15px;
}

.toast{

width:100%;
}

}


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

.contact{

padding:20px;
}

.contact-container{

width:100%;
}

.contact-right{

padding:20px;

border-radius:16px;
}

.title{

font-size:30px;
}

.subtitle{

font-size:15px;
}

.input-group{

margin-bottom:22px;
}

.input-group input,

.input-group textarea{

font-size:14px;

padding:10px;
}

/* date + time */

.mergeDateTime{

gap:18px;
}

/* time placeholder */

.timePlaceholder{

font-size:14px;

top:12px;
}

/* icons */

input[type="date"]::-webkit-calendar-picker-indicator,

input[type="time"]::-webkit-calendar-picker-indicator{

transform:scale(.85);
}

/* button */

.btnMsg{

font-size:14px;

padding:14px;
}

/* Toast */

.toast{

padding:16px;

border-radius:14px;
}

.toastTitle{

font-size:14px;
}

.toastText{

font-size:12px;
}

.toastIcon{

width:44px;

height:44px;

font-size:18px;
}

}

/* SUCCESS POPUP */

.successPopup {

    position: fixed;
    top: 50%;
    left: 50%;

    transform:
    translate(-50%, -50%)
    scale(0.7);

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

    padding: 35px 30px;

    background: rgba(15, 23, 42, 0.95);

    backdrop-filter: blur(12px);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 24px;

    text-align: center;

    z-index: 999999;

    opacity: 0;

    transition: all 0.5s ease;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.4);
}

/* SHOW ANIMATION */

.successPopup.showSuccess {

    opacity: 1;

    transform:
    translate(-50%, -50%)
    scale(1);
}

/* HIDE ANIMATION */

.successPopup.hideSuccess {

    opacity: 0;

    transform:
    translate(-50%, -50%)
    scale(0.8);
}

/* ICON */

.successIcon {

    width: 80px;
    height: 80px;

    margin: auto;

    border-radius: 50%;

    background:
    linear-gradient(
        135deg,
        #00d26a,
        #00a651
    );

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

    font-size: 38px;
    color: white;

    margin-bottom: 20px;

    box-shadow:
    0 10px 30px rgba(0,210,106,0.4);

    animation:
    popIcon 0.5s ease;
}

/* TITLE */

.successPopup h2 {

    color: white;

    font-size: 28px;

    margin-bottom: 12px;
}

/* MESSAGE */

.successPopup p {

    color: rgba(255,255,255,0.75);

    line-height: 1.6;

    font-size: 15px;
}

/* FORM FADE OUT */

.popupFadeOut {

    opacity: 0;

    transform: scale(0.9);

    transition: all 0.6s ease;
}



/* ICON ANIMATION */

@keyframes popIcon {

    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ********************************* video section ************************* */
.hero-card {
  margin: auto;
  /* width: 78%; */
  margin-top: 100px;
  padding: 50px 10%;
}

.bg-video {
  border-radius: 20px;
  width: 100%;
  /* height: 100%; */
}

/* **************************** trust section**********************  */

.trust {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 50px 10%;
}

.head {
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
}

.logo-slider {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 20px 0;
  margin: auto;
  background: transparent;
}

.head span {
  color: #2563eb;
}

.logo-track {
  display: flex;
  gap: 60px;
  animation: scroll 20s linear infinite;
}

.logo-track img {
  height: 50px;
  object-fit: contain;
  opacity: 0.7;
  transition: 0.3s;
}

.logo-track img:hover {
  opacity: 1;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-80%);
  }
}

/***************************  problem and solution SECTION ********************************/
.flow-section {
  position: relative;
  padding: 40px;
  overflow: hidden;
  color: white;
  width: 80%;
  margin: auto;
  margin-top: 50px;
  border-radius: 40px;

  /* Deep AI Gradient */
  background: radial-gradient(circle at 20% 30%, #1e3a8a 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #0ea5e9 0%, transparent 40%),
    linear-gradient(135deg, #020617, #050816 60%, #020617);
}

.bg-shapes span {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25;
  animation: float 12s infinite ease-in-out alternate;
}

/* Shape 1 */
.bg-shapes span:nth-child(1) {
  width: 300px;
  height: 300px;
  background: #3b82f6;
  top: 10%;
  left: 5%;
}

/* Shape 2 */
.bg-shapes span:nth-child(2) {
  width: 400px;
  height: 400px;
  background: #0ea5e9;
  bottom: 10%;
  right: 5%;
  animation-delay: 2s;
}

/* Shape 3 */
.bg-shapes span:nth-child(3) {
  width: 250px;
  height: 250px;
  background: #6366f1;
  top: 50%;
  left: 40%;
  animation-delay: 4s;
}

/* Floating animation */
@keyframes float {
  0% {
    transform: translateY(0px) scale(1);
  }

  100% {
    transform: translateY(-40px) scale(1.1);
  }
}

.flow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 50px 10%;
}

/* LEFT */
.flow-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
}

.flow-title span {
  color: #4da6ff;
}

.pain-list p {
  opacity: 0;
  transform: translateY(30px);
  margin-top: 20px;
  font-size: 18px;
  color: #cbd5e1;
  transition: all 0.6s ease;
}


.pain-list i {
  color: #0bc6f5;
}

/* RIGHT */
.ai-card {
  background: rgba(255, 255, 255, 0.06);
  padding: 45px;
  border-radius: 24px;

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

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(255, 255, 255, 0.05);

  transform: scale(0.9);
  opacity: 0;
  transition: all 0.8s ease;
}

.ai-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: linear-gradient(120deg, #3b82f6, #0ea5e9, #6366f1);
  filter: blur(20px);
  opacity: 0.2;
  z-index: -1;
}

.ai-card:hover {
  transform: scale(1.03);
  box-shadow:
    0 20px 60px rgba(14, 165, 233, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.08);
}

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

.ai-card p {
  color: #cbd5e1;
  line-height: 1.6;
}

/* ACTIVE STATES */
.flow-section.active .flow-title {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeUp 2s forwards;
}

.flow-section.active .subtitle {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeUp 2s forwards;
}

.flow-section.active .flow-title {
  animation-delay: 0.2s;
}

.flow-section.active .subtitle {
  animation-delay: 0.4s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flow-section.active .pain-list p {
  opacity: 1;
  transform: translateY(0);
}


.flow-section.active .pain-list p:nth-child(1) {
  transition-delay: 0.6s;
}

.flow-section.active .pain-list p:nth-child(2) {
  transition-delay: 0.8s;
}

.flow-section.active .pain-list p:nth-child(3) {
  transition-delay: 0.9s;
}

.flow-section.active .pain-list p:nth-child(4) {
  transition-delay: 0.9s;
}

.flow-section.active .ai-card {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.7s;
}

/************************** feature section ***********************/

.features-section {
  padding: 50px 10%;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  text-align: center;
}

.section-title {
  font-size: 44px;
  font-weight: 700;
  color: #0f172a;
}

.section-title span {
  color: #2563eb;
}

/* GRID */
.features-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* CARDS */
.feature-card {
  background: white;
  padding: 30px;
  border-radius: 18px;

  text-align: left;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;

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

.fa-solid{
  color: #2563eb;
  font-size: 25px;
}

/* HOVER MICRO */
.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.15);
}

/* ACTIVE SCROLL */
.features-section.active .feature-card {
  opacity: 1;
  transform: translateY(0);
}

/* STAGGER EFFECT */
.features-section.active .feature-card:nth-child(1) {
  transition-delay: 0.2s;
}

.features-section.active .feature-card:nth-child(2) {
  transition-delay: 0.4s;
}

.features-section.active .feature-card:nth-child(3) {
  transition-delay: 0.6s;
}

.features-section.active .feature-card:nth-child(4) {
  transition-delay: 0.8s;
}

.features-section.active .feature-card:nth-child(5) {
  transition-delay: 1s;
}

.features-section.active .feature-card:nth-child(6) {
  transition-delay: 1.2s;
}


/* **********************How it works section *********************************** */
 /* ******************** section 1 ********************** */

    .section1 {
      padding: 50px 10%;
    }

    /* GRID */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
    }

    .card {
      padding: 30px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      backdrop-filter: blur(8px);
      transition: 0.3s;
    }

    /* SCROLLING BOX */
    .scroll-box {
      border: 1px solid rgba(0, 123, 255, 0.2);
      border-radius: 30px;
      padding: 40px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(10px);
      margin-top: 80px;
    }

    .scroll-wrapper {
      display: flex;
      gap: 40px;
    }

    .scroll-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 30px;
      animation: scrollUp 15s linear infinite;
    }

    .scroll-column.reverse {
      animation: scrollDown 15s linear infinite;
    }

    @keyframes scrollUp {
      0% {
        transform: translateY(0)
      }

      100% {
        transform: translateY(-50%)
      }
    }

    @keyframes scrollDown {
      0% {
        transform: translateY(-50%)
      }

      100% {
        transform: translateY(0)
      }
    }

    /* PAUSE ON HOVER */
    .scroll-column:hover {
      animation-play-state: paused;
    }

    .scroll-column .card:hover {
      transform: scale(1.05);
    }

    .animate {
      opacity: 0;
      transform: translateY(50px);
      transition: 0.9s;
    }

    .animate.show {
      opacity: 1;
      transform: translateY(0);
    }


/* ********************** Impact section *********************************** */
.impact-section {
  padding: 50px 10%;
  background:
    radial-gradient(circle at 20% 20%, #dbeafe, transparent 40%),
    radial-gradient(circle at 80% 80%, #e0f2fe, transparent 40%),
    #f8fafc;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.impact-grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.impact-card {
  background: rgba(255, 255, 255, 0.9);
  /* more visible */
  color: #0f172a;
  /* dark text */
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(15px);

  padding: 35px;
  border-radius: 20px;

  opacity: 0;
  transform: translateY(30px);
  animation: bouns 8s linear infinite;
}

.impact-card h3 {
  font-size: 36px;
  color: #2563eb;
}

.impact-card p {
  margin-top: 10px;
  font-size: 14px;
  color: #475569;
}

.impact-card {
  opacity: 1;
  /* TEMP fix */
  transform: translateY(0);
}

.impact-card:nth-child(1) {
  animation-delay: 0.2s;
}

.impact-card:nth-child(2) {
  animation-delay: 1s;
}

.impact-card:nth-child(3) {
  animation-delay: 1.8s;
}

.impact-card:nth-child(4) {
  animation-delay: 2.4s;
}

@keyframes bouns {
  0% {
    transform: translateY(0px) scale(0.7);
  }


  50% {
    transform: translateY(-8px) scale(1.02);
  }

  100% {
    transform: translateY(0px) scale(0.7);
  }

}


/* ****************************target section ****************************************** */
.audience-section {
  padding: 50px 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.audience-grid {
  /* border: 2px solid black; */
  padding: 20px;
  width: 100%;
  height: 150px;
  overflow-x: hidden;
  position: relative;
}

.audience-card-parent {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
}

.audience-card {
  /* border: 1px solid black; */
  border-radius: 20px;
  width: 350px;
  height: 100px;
  padding: 20px 10px;
  background: white;
  color: #2563eb;
  animation: moveLeft 30s linear infinite;
}

.audience-card span {
  color: rgb(34, 32, 32);
  /* font-weight: bold; */
}

@keyframes moveLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-360%);
  }

  
}


/* ****************************cta section ********************* */
.cta-advanced {
  position: relative;
  padding: 120px 10%;
  text-align: center;
  border-radius: 30px;
  overflow: hidden;
  margin: 80px 9%;
  color: white;
  border: 2px solid rgb(202, 198, 198);
  background: linear-gradient(135deg, #172950, #0ea5e9);
}

/* GRID + CURVE EFFECT */
.cta-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;

  opacity: 0.4;
}

/* SOFT GLOW SHAPES */
.cta-advanced::before,
.cta-advanced::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 400px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
}

.cta-advanced::before {
  background: #60a5fa;
  top: -100px;
  left: -100px;
}

.cta-advanced::after {
  background: #22d3ee;
  bottom: -100px;
  right: -100px;
}

/* CONTENT */
.cta-content {
  position: relative;
  z-index: 2;
}

/* LOGO */
.cta-logo img{
  /* border: 1px solid black; */
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

/* TITLE */
.cta-content h2 {
  font-size: 42px;
  font-weight: 700;
}

.cta-content span {
  color: #dbeafe;
}

/* TEXT */
.cta-content p {
  margin-top: 15px;
  font-size: 16px;
  color: #e0f2fe;
}

/* CHIPS */
.cta-features {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.chip {
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

/* BUTTON */
.cta-btn {
  margin-top: 40px;
  padding: 14px 30px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: rgb(250, 103, 50);
  color: white;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}

.chip {
  animation: float1 3s ease-in-out infinite alternate;
}

.chip:nth-child(2) {
  animation-delay: 0.5s;
}

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

@keyframes float1 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10px);
  }
}


.animate {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

/* ***********************Responsive ness******************************************** */

@media (max-width: 992px) {

  /* HERO */
  .hero h1 {
    font-size: 42px;
    height: auto;
  }

  #typing-section {
    width: 90%;
  }

  .users {
    width: 50%;
  }


 /* COMPARE */
  .compare-container {
    flex-direction: column;
  }

  .divider {
    display: none;
  }

  /* FLOW SECTION */
  .flow-container {
    flex-direction: column;
    text-align: center;
  }

  .flow-title {
    font-size: 36px;
  }

  /* FEATURES GRID */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* COMPARE */
  .compare-container {
    flex-direction: column;
  }

  .divider {
    display: none;
  }

  /* IMPACT */
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* AUDIENCE */
  .audience-grid {
    grid-template-columns: repeat(3, 1fr);
    width: 95%;
  }
  /* TIMELINE */
      .step {
        padding: 25px;
      }

      .scroll-wrapper {
        flex-direction: column;
      }

      .scroll-column {
        flex-direction: row;
      }

      /* SCROLL BOX */
      .scroll-box {
        padding: 30px;
      }

        @keyframes scrollUp {
        0% {
          transform: translateX(0)
        }

        100% {
          transform: translateX(-50%)
        }
      }

      @keyframes scrollDown {
        0% {
          transform: translateX(-50%)
        }

        100% {
          transform: translateX(0)
        }
      }

}

@media (max-width: 768px) {

  /* HERO */
  .hero {
    margin-top: 80px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 15px;
    text-align: center;
  }

  .users {
    width: 80%;
    gap: 20px;
  }

  .user {
    width: 45px;
    height: 45px;
  }

  /* VIDEO */
  .hero-card {
    /* width: 95%; */
    margin-top: 60px;
  }

  /* TRUST */
  .head {
    font-size: 28px;
    text-align: center;
  }

  .logo-track img {
    height: 35px;
  }

  /* FLOW */
  .flow-section {
    width: 95%;
    padding: 80px 20px;
  }

  .flow-title {
    font-size: 28px;
  }

  .ai-card {
    padding: 25px;
  }

  /* FEATURES */
  .features-grid {
    grid-template-columns: 1fr;
  }

   /* COMPARE */
  .compare-title {
    font-size: 30px;
  }

  .step {
    font-size: 14px;
  }
  /* IMPACT */
  .impact-grid {
    grid-template-columns: 1fr;
  }




      .scroll-wrapper {
        flex-direction: column;
      }

      .scroll-column {
        flex-direction: row;
      }

      /* SCROLL BOX */
      .scroll-box {
        padding: 30px;
      }

  /* AUDIENCE */
      @keyframes scrollUp {
        0% {
          transform: translateX(0)
        }

        100% {
          transform: translateX(-50%)
        }
      }

      @keyframes scrollDown {
        0% {
          transform: translateX(-50%)
        }

        100% {
          transform: translateX(0)
        }
      }
 

  /* CTA */
  .cta-content h2 {
    font-size: 28px;
  }

  .cta-btn {
    width: 100%;
  }

}

@media (max-width: 480px) {

  /* HERO */
  .hero h1 {
    font-size: 24px;
  }

  .users {
    width: 100%;
    gap: 40px;
  }

  .user {
    width: 35px;
    height: 35px;
  }

  /* TEXT */
  .hero p {
    font-size: 13px;
  }

  /* FLOW */
  .flow-title {
    font-size: 22px;
  }

  /* FEATURES */
  .section-title {
    font-size: 26px;
  }

  
  /* COMPARE */
  .compare-title {
    font-size: 24px;
  }


  /* *****zoom************* */
  .impact-grid{
    grid-template-columns: 100vw;
  }

  /* COMPARE */
  .compare-title {
    font-size: 24px;
  }

  /* CTA */
  .cta-content h2 {
    font-size: 22px;
  }

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

  .chip {
    font-size: 12px;
    padding: 8px 14px;
  }


 /* TIMELINE */
      .step {
        padding: 15px;
      }

      /* CARDS */
      .card {
        padding: 20px;
      }


      .scroll-wrapper {
        flex-direction: column;
      }

      .scroll-column {
        flex-direction: row;
      }

      /* SCROLL BOX */
      .scroll-box {
        padding: 15px;
      }

        @keyframes scrollUp {
        0% {
          transform: translateX(0)
        }

        100% {
          transform: translateX(-50%)
        }
      }

      @keyframes scrollDown {
        0% {
          transform: translateX(-50%)
        }

        100% {
          transform: translateX(0)
        }
      }

}