/* =========================================
   PREMIUM WHITE THEME SYSTEM
========================================= */
:root{
  /* backgrounds */
  --bg-main:#f5f7fb;
  --bg-section:#ffffff;
  --bg-soft:#f8fafc;
  --bg-card:#ffffff;
  /* text */
  --text-primary:#0f172a;
  --text-secondary:#64748b;
  --text-light:#94a3b8;
  /* brand */
  --accent:#22c55e;
  --accent-hover:#16a34a;
  /* gradients */
  --gradient-primary:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );
  --gradient-soft:linear-gradient( 135deg,rgba(34,197,94,0.08),rgba(6,182,212,0.08));
  /* borders */
  --border-color:#e2e8f0;
  /* shadows */
  --shadow-sm:
  0 2px 10px rgba(15,23,42,0.04);
  --shadow-md:
  0 10px 30px rgba(15,23,42,0.08);
  --shadow-lg:
  0 20px 60px rgba(15,23,42,0.12);
  --shadow-xl:
  0 30px 80px rgba(15,23,42,0.16);
  /* radius */
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-xl:40px;
}
/* =========================================
   GLOBAL RESET
========================================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
/* =========================================
   HTML
========================================= */
html{
overflow-x: hidden;
  scroll-behavior:smooth;
}
/* =========================================
   BODY
========================================= */
body{
font-family:'Inter',sans-serif,system-ui;
  background:var(--bg-main);
  color:var(--text-primary);
  line-height:1.75;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* =========================================
   SELECTION
========================================= */
::selection{
  background:#22c55e;
  color:white;
}
/* =========================================
   SECTIONS
========================================= */
section{
  position:relative;
  padding:120px 0;
  border-bottom:
  1px solid rgba(226,232,240,0.5);
}
/* =========================================
   CONTAINER
========================================= */
.container{
  width:90%;
  margin:auto;
}
/* =========================================
   IMAGES
========================================= */
img{
  max-width:100%;
  display:block;
}
/* =========================================
   BUTTON RESET
========================================= */
button{
  cursor:pointer;
  border:none;
  background:none;
  font-family:inherit;
}
/* =========================================
   LINKS
========================================= */
a{
  text-decoration:none;
  color:inherit;
}
/* =========================================
   PREMIUM SCROLLBAR
========================================= */
::-webkit-scrollbar{
  width:10px;
}
::-webkit-scrollbar-track{
  background:#edf2f7;
}
::-webkit-scrollbar-thumb{
  background:
  linear-gradient(180deg, #22c55e, #06b6d4);
  border-radius:20px;
}
/* =========================================
   GLOBAL TRANSITIONS
========================================= */
a,
button,
.btn-primary{
  transition:
  transform .35s ease,
  box-shadow .35s ease,
  background .35s ease,
  color .35s ease;
}
/* =========================================
   PREMIUM DESKTOP NAVBAR
========================================= */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  min-height: 60px;
  padding:18px 0;
  margin: 0;
  z-index:1300;
  background:
  rgba(255,255,255,0.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:
  1px solid rgba(255,255,255,0.7);
  box-shadow:
  0 4px 30px rgba(15,23,42,0.05);
  animation:
  navbarDrop .9s ease forwards;
  animation-delay:.2s;
  opacity:0;
}
/* nav wrapper */
.nav-wrapper{
  width: 90%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
/* =========================================
   LOGO
========================================= */
.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.logo img{
  width:100%;
  height:50px;
  object-fit:contain;
}
/* =========================================
   NAV LINKS
========================================= */
.nav-links{
  display:flex;
  align-items:center;
  list-style:none;
  gap:42px;
}
/* links */
.nav-links a{
  position:relative;
  font-size:.95rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:.35s ease;
}
/* underline */
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0%;
  height:2px;
  border-radius:20px;
  background:
  linear-gradient(
    90deg,
    #22c55e,
    #06b6d4
  );
  transition:.35s ease;
}
/* hover */
.nav-links a:hover{
  color:var(--text-primary);
}
.nav-links a:hover::after{
  width:100%;
}


/* =========================================
   HAMBURGER
========================================= */

.hamburger{

  display:none;

}


/* menu */

.menu7{

  width:42px;
  height:30px;

  position:relative;

  cursor:pointer;

}


/* lines */

.line7{

  position:absolute;

  left:0;

  width:32px;
  height:2px;

  background:var(--text-primary);

  border-radius:20px;

  transition:.35s ease;

}


/* positions */

.line7-top{
  top:6px;
}

.line7-middle{
  top:14px;
}

.line7-bottom{
  top:22px;
}


/* animation */

.menu7.active .line7-middle{

  opacity:0;

  transform:
  translateX(40px);

}

.menu7.active .line7-top{

  top:14px;

  transform:
  rotate(45deg);

}

.menu7.active .line7-bottom{

  top:14px;

  transform:
  rotate(-45deg);

}


/* =========================================
   SOCIAL ICONS
========================================= */

.socials{

  display:flex;

  align-items:center;

  gap:14px;

}


/* icon links */

.socials a{

  width:42px;
  height:42px;

  display:flex;

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

  border-radius:50%;

  background:white;

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

  color:var(--text-secondary);

  font-size:1rem;

  transition:.35s ease;

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

}


/* hover */

.socials a:hover{

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  color:white;

  transform:
  translateY(-5px);

  box-shadow:
  0 15px 30px rgba(34,197,94,0.25);

}


/* =========================================
   NAVBAR ANIMATION
========================================= */

@keyframes navbarDrop{

  0%{

    opacity:0;

    transform:
    translateY(-80px);

  }

  100%{

    opacity:1;

    transform:
    translateY(0);

  }

}

/* =========================================
   PREMIUM HERO SECTION (DESKTOP)
========================================= */

.hero{

  min-height:100vh;
  padding:
  100px 5% 40px;

  display:grid;

  grid-template-columns:
  1.3fr .7fr;

  align-items:center;

  gap:10px;

  position:relative;

  overflow:hidden;

}


/* soft background glow */

.hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:

  radial-gradient(
    circle at top left,
    rgba(34,197,94,0.10),
    transparent 30%
  ),

  radial-gradient(
    circle at bottom right,
    rgba(6,182,212,0.10),
    transparent 30%
  );

  z-index:-1;

}


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

.hero-content{

  position:relative;

  z-index:2;

}


/* =========================================
   BADGE
========================================= */

.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:12px 20px;

  background:
  rgba(34,197,94,0.08);

  border:
  1px solid rgba(34,197,94,0.15);

  border-radius:60px;

  color:#16a34a;

  font-size:.95rem;

  font-weight:600;

  margin-bottom:20px;

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


/* dot */

.hero-badge span{

  width:10px;
  height:10px;

  border-radius:50%;

  background:#22c55e;

  box-shadow:
  0 0 12px rgba(34,197,94,0.7);

}


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

.hero h1{

  font-size:3.5rem;

  line-height:1.05;

  letter-spacing:-4px;

  font-weight:800;

  margin-bottom:20px;

}


/* gradient text effect */

.hero h1 span{

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}


/* =========================================
   PARAGRAPH
========================================= */

.hero p{
  font-size:1.08rem;

  line-height:1.9;

  color:var(--text-secondary);
  margin-bottom:20px;

}


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

.hero-buttons{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:18px;

  margin-bottom:20px;

}

/* =========================================
   PREMIUM BUTTON SYSTEM
========================================= */

.btn-primary{

  display:inline-flex;

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

  gap:10px;

  padding:10px 20px;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  color:white;

  font-weight:700;

  border:none;

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

  box-shadow:
  0 18px 35px rgba(34,197,94,0.22);

}


.btn-primary:hover{

  transform:
  translateY(-6px);

  box-shadow:
  0 25px 50px rgba(34,197,94,0.30);

}

/* secondary */

.btn-secondary{

  padding:10px 20px;

  border-radius:16px;

  background:white;

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

  color:var(--text-primary);

  font-weight:600;

  transition:.35s ease;

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

.btn-secondary:hover{

  transform:
  translateY(-5px);

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

}


/* outline */

.btn-outline{

  padding:10px 20px;

  border-radius:16px;

  border:
  1px dashed #22c55e;

  color:#16a34a;

  font-weight:600;

  transition:.35s ease;

  background:white;

}

.btn-outline:hover{

  background:#22c55e;

  color:white;

  transform:
  translateY(-5px);

}


/* =========================================
   STATS
========================================= */

.hero-stats{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:24px;

}


/* stat cards */

.stat-card{

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

  backdrop-filter:blur(12px);

  padding:10px 20px;

  border-radius:22px;

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

  box-shadow:
  0 10px 30px rgba(15,23,42,0.06);

  min-width:190px;

  transition:.35s ease;

}


/* hover */

.stat-card:hover{

  transform:
  translateY(-8px);

  box-shadow:
  0 20px 40px rgba(15,23,42,0.10);

}


/* stat number */

.stat-card h3{

  font-size:2.2rem;

  line-height:1;

  margin-bottom:10px;

}


/* stat text */

.stat-card span{

  color:var(--text-secondary);

  font-size:.95rem;

}


/* =========================================
   HERO VISUAL
========================================= */

.hero-visual{

  position:relative;

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

}


/* glow */

.hero-glow{

  position:absolute;

  width:420px;
  height:420px;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,.25),
    transparent 70%
  );

  filter:blur(30px);

}


/* image */

.hero-main-image{

  position:relative;
  z-index:2;

}

.hero-main-image img{

max-width:420px;
width:100%;

  border-radius:50%;

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

}


/* floating cards */

.hero-card{

  position:absolute;

  background:white;

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

  border-radius:20px;

  padding:10px 12px;

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

  z-index:3;

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

}

.hero-card span{

  display:block;

  color:#22c55e;

  font-size:.85rem;

  margin-bottom:6px;

  font-weight:600;

}

.hero-card strong{

  font-size:1rem;

}


/* positions */

.card-1{

  top:5%;
  left:0;

}

.card-2{

  bottom:20%;
  right:0;

}


/* floating animation */

@keyframes floatCard{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0);
  }

}


/* =========================================
   PREMIUM ABOUT SECTION
========================================= */

.about{

  position:relative;
  background:white;
  overflow:hidden;

}


/* soft background glow */

.about::before{

  content:"";

  position:absolute;

  top:-200px;
  right:-200px;

  width:500px;
  height:500px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.08),
    transparent 70%
  );

  z-index:0;

}


/* container */

.about .container{

  position:relative;

  z-index:2;

}


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

.about-grid{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  align-items:start;

  gap:100px;

}


/* =========================================
   LEFT SIDE
========================================= */

.about-left{

  position:sticky;

  top:140px;

}


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

.section-tag{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:12px 20px;

  border-radius:60px;

  background:
  rgba(34,197,94,0.08);

  border:
  1px solid rgba(34,197,94,0.12);

  color:#16a34a;

  font-size:.92rem;

  font-weight:700;

  letter-spacing:.3px;

  margin-bottom:30px;

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


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

.about h2{

  font-size:3rem;

  line-height:1.05;

  letter-spacing:-3px;

  font-weight:800;

  color:var(--text-primary);

  max-width:100%;

}


/* gradient highlight */

.about h2 span{

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}


/* =========================================
   RIGHT SIDE
========================================= */

.about-right{

  position:relative;

}


/* glass content box */

.about-right::before{

  content:"";

  position:absolute;

  inset:-30px;

  background:
  linear-gradient(
    135deg,
    rgba(34,197,94,0.03),
    rgba(6,182,212,0.03)
  );

  border-radius:40px;

  z-index:-1;

}


/* paragraph */

.about-right p{

  font-size:1.05rem;

  line-height:2;

  color:var(--text-secondary);

  margin-bottom:28px;

}


/* highlight first paragraph */

.about-right p:first-child{

  font-size:1.12rem;

  color:var(--text-primary);

  font-weight:500;

}


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

.about-features{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:22px;

  margin-top:50px;

}


/* feature card */

.feature-item{

  position:relative;

  display:flex;

  align-items:center;

  gap:14px;

  padding:20px 22px;

  border-radius:22px;

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

  backdrop-filter:blur(14px);

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

  box-shadow:
  0 10px 30px rgba(15,23,42,0.05);

  transition:.35s ease;

  overflow:hidden;

}


/* hover glow */

.feature-item::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(34,197,94,0.08),
    transparent
  );

  opacity:0;

  transition:.35s ease;

}


/* hover */

.feature-item:hover{

  transform:
  translateY(-8px);

  box-shadow:
  0 20px 40px rgba(15,23,42,0.10);

}

.feature-item:hover::before{

  opacity:1;

}


/* icon */

.feature-item i{

  width:42px;
  height:42px;

  display:flex;

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

  border-radius:50%;

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  color:white;

  font-size:.95rem;

  flex-shrink:0;

  box-shadow:
  0 10px 25px rgba(34,197,94,0.25);

}


/* text */

.feature-item{

  font-size:.98rem;

  font-weight:600;

  color:var(--text-primary);

}


/* =========================================
   PREMIUM SERVICES SECTION
========================================= */

.service-section{

  position:relative;
  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );
  overflow:hidden;
}


/* background glow */

.service-section::before{

  content:"";

  position:absolute;

  top:-250px;
  left:-250px;

  width:600px;
  height:600px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.08),
    transparent 70%
  );

  z-index:0;

}


/* container */

.service-section .container{

  position:relative;

  z-index:2;

}


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

.section-header{

  text-align:center;

  max-width:780px;

  margin:
  0 auto 120px;

}


/* title */

.section-header h2{

  font-size:
  clamp(2.8rem,5vw,4.5rem);

  line-height:1.08;

  letter-spacing:-3px;

  font-weight:800;

  margin-bottom:25px;

  color:var(--text-primary);

}


/* paragraph */

.section-header p{

  font-size:1.08rem;

  line-height:1.9;

  color:var(--text-secondary);

}


/* =========================================
   SERVICE ROW
========================================= */

.service-row{

  position:relative;

  display:grid;

  grid-template-columns:
  1fr 1fr;

  align-items:center;

  gap:100px;

  margin-bottom:140px;

}


/* reverse */

.service-row.reverse{

  direction:rtl;

}

.service-row.reverse .service-content{

  direction:ltr;

}


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

.service-content{

  position:relative;

  padding:50px;

  border-radius:36px;

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

  backdrop-filter:blur(14px);

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

  box-shadow:
  0 20px 50px rgba(15,23,42,0.06);

  overflow:hidden;

  transition:.4s ease;

}


/* hover glow */

.service-content::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(34,197,94,0.06),
    transparent
  );

  opacity:0;

  transition:.4s ease;

}


/* hover */

.service-content:hover{

  transform:
  translateY(-10px);

  box-shadow:
  0 30px 60px rgba(15,23,42,0.10);

}

.service-content:hover::before{

  opacity:1;

}


/* =========================================
   BADGES
========================================= */

.badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:10px 18px;

  border-radius:50px;

  font-size:.85rem;

  font-weight:700;

  letter-spacing:.5px;

  text-transform:uppercase;

  margin-bottom:25px;

}


/* badge styles */

.badge-fintech{

  background:
  rgba(34,197,94,0.12);

  color:#16a34a;

}

.badge-edtech{

  background:
  rgba(6,182,212,0.12);

  color:#0891b2;

}

.badge-pharma{

  background:
  rgba(99,102,241,0.12);

  color:#4f46e5;

}


/* =========================================
   SERVICE TITLE
========================================= */

.service-content h3{

  font-size:2.2rem;

  line-height:1.2;

  font-weight:800;

  margin-bottom:22px;

  color:var(--text-primary);

}


/* paragraph */

.service-content p{

  font-size:1.02rem;

  line-height:1.9;

  color:var(--text-secondary);

  margin-bottom:35px;

  max-width:500px;

}



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

.service-image{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

}


/* image wrapper glow */

.service-image::before{

  content:"";

  position:absolute;

  width:420px;
  height:420px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.10),
    transparent 70%
  );

  filter:blur(20px);

}


/* image */

.service-image img{

  position:relative;

  z-index:2;

  width:100%;

  max-width:460px;

  border-radius:32px;

  object-fit:cover;

  box-shadow:
  0 30px 70px rgba(15,23,42,0.12);

  transition:.4s ease;

}


/* hover image */

.service-row:hover .service-image img{

  transform:
  translateY(-10px)
  scale(1.02);

}

/* ==============================
   TESTIMONIAL (UPGRADED)
============================== */
.testimonials-section{
  background: linear-gradient(180deg, var(--bg-main), var(--bg-dark));
  text-align: center;
}

/* ==============================
   SLIDER (FIX HEIGHT ISSUE)
============================== */
.testimonials-slider{
 position:relative;
  max-width:700px;
  margin:auto;
}

/* ==============================
   CARD (SMOOTH ANIMATION FIX)
============================== */
.testimonial-card{
  display:none;

  background: radial-gradient(circle at center,#22c55ea2, transparent 85%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--border-soft);

   transition:0.5s;
}

/* ACTIVE CARD */
.testimonial-card.active{
  display:block;
}

/* ==============================
   STARS
============================== */
.stars i{
  color: #facc15;
  margin-bottom: 15px;
}

/* ==============================
   TEXT
============================== */
.testimonial-card p{
  font-size: 16px;
  margin-bottom: 25px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==============================
   CLIENT
============================== */
.client{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.client img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.client h4{
  margin: 0;
  color: var(--text-primary);
}

/* =========================================
   PREMIUM TIMELINE SECTION
========================================= */

.seo-content{

  position:relative;
  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

  overflow:hidden;

}


/* background glow */

.seo-content::before{

  content:"";

  position:absolute;

  bottom:-250px;
  left:-250px;

  width:600px;
  height:600px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.08),
    transparent 70%
  );

  z-index:0;

}


/* container */

.seo-content .container{

  position:relative;

  z-index:2;

}


/* heading */

.seo-content h2{

  text-align:center;

  font-size:
  clamp(2.8rem,5vw,4.5rem);

  line-height:1.08;

  letter-spacing:-3px;

  font-weight:800;

  margin-bottom:90px;

  color:var(--text-primary);

}


/* =========================================
   TIMELINE
========================================= */

.seo-content .timeline{

  position:relative;

  max-width:1200px;

  margin:auto;

}


/* center line */

.seo-content .timeline::before{

  content:"";

  position:absolute;

  left:50%;
  top:0;

  width:4px;
  height:100%;

  transform:translateX(-50%);

  border-radius:50px;

  background:
  rgba(203,213,225,0.6);

}


/* =========================================
   PROGRESS LINE
========================================= */

.seo-content .progress-line{

  position:absolute;

  left:50%;
  top:0;

  width:4px;
  height:0%;

  transform:translateX(-50%);

  border-radius:50px;

  background:
  linear-gradient(
    180deg,
    #22c55e,
    #06b6d4
  );

  transition:
  height .15s linear;

  box-shadow:
  0 0 20px rgba(34,197,94,0.35);

}


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

.seo-content ul{

  list-style:none;

  padding:0;
  margin:0;

}


/* timeline item */

.seo-content ul li{

  position:relative;

  width:50%;

  padding:20px 50px;

  transition:.4s ease;

  opacity:.45;

}


/* left */

.seo-content ul li:nth-child(odd){

  left:0;

  text-align:right;

}


/* right */

.seo-content ul li:nth-child(even){

  left:50%;

}


/* active */

.seo-content ul li.active{

  opacity:1;

}


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

.seo-content ul li .card{

  position:relative;

  padding:35px;

  border-radius:28px;

  overflow:hidden;

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

  backdrop-filter:blur(14px);

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

  box-shadow:
  0 20px 50px rgba(15,23,42,0.06);

  transition:.4s ease;

}


/* hover glow */

.seo-content ul li .card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(34,197,94,0.06),
    transparent
  );

  opacity:0;

  transition:.4s ease;

}


/* hover */

.seo-content ul li .card:hover{

  transform:
  translateY(-10px);

  box-shadow:
  0 30px 70px rgba(15,23,42,0.10);

}

.seo-content ul li .card:hover::before{

  opacity:1;

}


/* title */

.seo-content ul li .card h3{

  font-size:1.6rem;

  font-weight:800;

  margin-bottom:16px;

  color:var(--text-primary);

}


/* paragraph */

.seo-content ul li .card p{

  font-size:1rem;

  line-height:1.9;

  color:var(--text-secondary);

}


/* =========================================
   DOTS
========================================= */

.seo-content ul li::before{

  content:"";

  position:absolute;

  top:45px;
  left:100%;

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

  width:18px;
  height:18px;

  border-radius:50%;

  background:white;

  border:
  4px solid #cbd5e1;

  z-index:3;

  transition:.4s ease;

}


/* right */

.seo-content ul li:nth-child(even)::before{

  left:0;

}


/* active */

.seo-content ul li.active::before{

  background:#22c55e;

  border-color:#22c55e;

  box-shadow:
  0 0 20px rgba(34,197,94,0.45);

}


/* =========================================
   PULSE
========================================= */

.seo-content ul li.active::after{

  content:"";

  position:absolute;

  top:45px;
  left:100%;

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

  width:34px;
  height:34px;

  border-radius:50%;

  border:
  2px solid rgba(34,197,94,0.35);

  animation:
  timelinePulse 1.4s ease-out infinite;

}


/* right */

.seo-content ul li:nth-child(even).active::after{

  left:0;

}


/* =========================================
   PULSE ANIMATION
========================================= */

@keyframes timelinePulse{

  0%{

    transform:
    translate(-50%,-50%)
    scale(.6);

    opacity:1;

  }

  70%{

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

    opacity:0;

  }

  100%{

    opacity:0;

  }

}

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

.process-section{

  position:relative;
  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

  overflow:hidden;

}


/* glow */

.process-section::before{

  content:"";

  position:absolute;

  top:-250px;
  left:-250px;

  width:600px;
  height:600px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.08),
    transparent 70%
  );

  z-index:0;

}


/* container */

.process-section .container{

  position:relative;

  z-index:2;

}


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

.process-grid{

  display:grid;

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

  gap:28px;

  margin-top:90px;

}


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

.process-card{

  position:relative;

  padding:40px 32px;

  border-radius:32px;

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

  backdrop-filter:blur(14px);

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

  box-shadow:
  0 20px 50px rgba(15,23,42,0.06);

  overflow:hidden;

  transition:.4s ease;

}


/* hover glow */

.process-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(34,197,94,0.06),
    transparent
  );

  opacity:0;

  transition:.4s ease;

}


/* hover */

.process-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 30px 70px rgba(15,23,42,0.12);

}

.process-card:hover::before{

  opacity:1;

}


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

.process-number{

  width:70px;
  height:70px;

  display:flex;

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

  border-radius:24px;

  margin-bottom:30px;

  font-size:1.4rem;

  font-weight:800;

  color:white;

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  box-shadow:
  0 15px 35px rgba(34,197,94,0.22);

}


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

.process-card h3{

  font-size:1.45rem;

  line-height:1.3;

  margin-bottom:18px;

  font-weight:800;

  color:var(--text-primary);

}


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

.process-card p{

  color:var(--text-secondary);

  line-height:1.9;

  font-size:1rem;

}


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

.process-bottom{

  max-width:900px;

  margin:
  90px auto 0;

  text-align:center;

}


/* bottom text */

.process-bottom p{

  font-size:1.08rem;

  line-height:2;

  color:var(--text-secondary);

}

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

.faq-section{

  position:relative;
  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

  overflow:hidden;

}


/* glow */

.faq-section::before{

  content:"";

  position:absolute;

  top:-250px;
  right:-250px;

  width:600px;
  height:600px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(6,182,212,0.08),
    transparent 70%
  );

  z-index:0;

}


/* container */

.faq-section .container{

  position:relative;

  z-index:2;

}


/* =========================================
   FAQ WRAPPER
========================================= */

.faq-wrapper{

  max-width:900px;

  margin:
  80px auto 0;

  display:flex;

  flex-direction:column;

  gap:24px;

}


/* =========================================
   FAQ ITEM
========================================= */

.faq-item{

  position:relative;

  border-radius:28px;

  overflow:hidden;

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

  backdrop-filter:blur(14px);

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

  box-shadow:
  0 20px 50px rgba(15,23,42,0.06);

  transition:.4s ease;

}


/* hover */

.faq-item:hover{

  transform:
  translateY(-6px);

  box-shadow:
  0 30px 70px rgba(15,23,42,0.10);

}


/* active */

.faq-item.active{

  border-color:
  rgba(34,197,94,0.25);

}


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

.faq-question{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:30px 34px;

  text-align:left;

  background:none;

  border:none;

  cursor:pointer;

}


/* title */

.faq-question span{

  font-size:1.15rem;

  font-weight:700;

  line-height:1.5;

  color:var(--text-primary);

}


/* icon */

.faq-question i{

  width:42px;
  height:42px;

  display:flex;

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

  border-radius:50%;

  flex-shrink:0;

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  color:white;

  font-size:.9rem;

  transition:.35s ease;

}


/* rotate active */

.faq-item.active .faq-question i{

  transform:
  rotate(45deg);

}


/* =========================================
   ANSWER
========================================= */

.faq-answer{

  max-height:0;

  overflow:hidden;

  transition:
  max-height .4s ease;

}


/* active answer */

.faq-item.active .faq-answer{

  max-height:300px;

}


/* answer text */

.faq-answer p{

  padding:
  0 34px 32px;

  color:var(--text-secondary);

  line-height:1.9;

  font-size:1rem;

}

/* =========================================
   PREMIUM CONTACT SECTION
========================================= */

.contact-section{

  position:relative;
  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

  overflow:hidden;

}


/* background glow */

.contact-section::before{

  content:"";

  position:absolute;

  top:-250px;
  right:-250px;

  width:600px;
  height:600px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(6,182,212,0.08),
    transparent 70%
  );

  z-index:0;

}


/* container */

.contact-section .container{

  position:relative;

  z-index:2;

}


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

.contact-section .section-header{

  max-width:760px;

  margin:
  0 auto 70px;

  text-align:center;

}


/* title */

.contact-section .section-header h2{

  font-size:
  clamp(2.8rem,5vw,4.5rem);

  line-height:1.08;

  letter-spacing:-3px;

  font-weight:800;

  margin-bottom:25px;

  color:var(--text-primary);

}


/* text */

.contact-section .section-header p{

  font-size:1.08rem;

  line-height:1.9;

  color:var(--text-secondary);

}


/* =========================================
   FORM
========================================= */

.contact-form{

  position:relative;

  max-width:760px;

  margin:auto;

  display:flex;

  flex-direction:column;

  gap:28px;

  padding:60px;

  border-radius:40px;

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

  backdrop-filter:blur(16px);

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

  box-shadow:
  0 25px 70px rgba(15,23,42,0.08);

  overflow:hidden;

}


/* top glow line */

.contact-form::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:
  linear-gradient(
    90deg,
    #22c55e,
    #06b6d4
  );

}


/* =========================================
   FORM GROUP
========================================= */

.form-group{

  display:flex;

  flex-direction:column;

  gap:12px;

}


/* label */

.form-group label{

  font-size:.95rem;

  font-weight:600;

  color:var(--text-primary);

}


/* =========================================
   INPUTS
========================================= */

.form-group input,
.form-group textarea{

  width:100%;

  padding:18px 22px;

  border-radius:18px;

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

  background:white;

  color:var(--text-primary);

  font-size:1rem;

  font-family:inherit;

  transition:.35s ease;

  box-shadow:
  0 8px 25px rgba(15,23,42,0.04);

}


/* placeholder */

.form-group input::placeholder,
.form-group textarea::placeholder{

  color:#94a3b8;

}


/* textarea */

.form-group textarea{

  min-height:170px;

  resize:none;

}


/* focus */

.form-group input:focus,
.form-group textarea:focus{

  outline:none;

  border-color:#22c55e;

  box-shadow:
  0 0 0 5px rgba(34,197,94,0.12);

}


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

.contact-form .btn-primary{

  width:max-content;

  margin-top:10px;

  padding:18px 34px;

  border-radius:18px;

  font-size:1rem;

  font-weight:700;

  cursor:pointer;

  border:none;

}


/* hover */

.contact-form .btn-primary:hover{

  transform:
  translateY(-6px);

}

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

.footer{

  position:relative;

  padding:45px 0;

  background:white;

  border-top:
  1px solid rgba(226,232,240,0.7);

  overflow:hidden;

}


/* glow */

.footer::before{

  content:"";

  position:absolute;

  top:-180px;
  left:50%;

  transform:translateX(-50%);

  width:500px;
  height:500px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.05),
    transparent 70%
  );

  z-index:0;

}


/* container */

.footer .container{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;

}


/* text */

.footer p{

  font-size:.95rem;

  color:var(--text-secondary);

  letter-spacing:.2px;

}


/* copyright */

.copyright{

  font-weight:500;

}


/* developer */

.developer{

  display:flex;

  align-items:center;

  gap:6px;

}


/* link */

.developer a{

  position:relative;

  font-weight:700;

  color:var(--text-primary);

  transition:.35s ease;

}


/* underline */

.developer a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-4px;

  width:0%;

  height:2px;

  border-radius:20px;

  background:
  linear-gradient(
    90deg,
    #22c55e,
    #06b6d4
  );

  transition:.35s ease;

}


/* hover */

.developer a:hover{

  color:#16a34a;

}

.developer a:hover::after{

  width:100%;

}

/* ===============================
   THANK YOU POPUP
================================= */

.thankyou-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
}

.thankyou-popup.active {
  opacity: 1;
  visibility: visible;
}

.thankyou-box {
  background: #111827;
  padding: 50px 40px;
  border-radius: 15px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  color: #fff;
  animation: popupScale 0.4s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

@keyframes popupScale {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.checkmark {
  font-size: 3rem;
  color: #00ffff;
  margin-bottom: 15px;
}

.thankyou-box h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.thankyou-box p {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 10px;
}

.redirect-text {
  font-size: 0.9rem;
  color: #00ffff;
}


/* base hidden state */

[data-animate]{
  opacity:0;
  transform:translateY(50px);
  transition:1s ease;
}

/* from left */

[data-animate="left"]{
transform: translateX(-120px);
}

/* from right */

[data-animate="right"]{
transform: translateX(120px);
}

/* from bottom */

[data-animate="up"]{
transform: translateY(80px);
}

/* from top (NEW) */

[data-animate="down"]{
transform: translateY(-80px);
}

/* fade */

[data-animate="fade"]{
transform: scale(.95);
}

/* visible state */

[data-animate].show{
  opacity:1;
  transform:translateY(0);
}



/* =========================================================
   WORD REVEAL
========================================================= */

[data-animate="words"] span {

  display: inline-block;

  opacity: 0;
  transform: translateY(20px);

  filter: blur(5px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    filter 0.5s ease;

}

[data-animate="words"].show span {

  opacity: 1;
  transform: translateY(0);

  filter: blur(0);

}




.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;

  width: 50px;
  height: 50px;

  background: #25D366;
  color: #fff;

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

  border-radius: 50%;
  font-size: 28px;

  box-shadow: 0 8px 25px rgba(0,0,0,0.3);

  z-index: 9999;
  cursor: pointer;

  transition: 0.3s ease;
}

/* Hover effect */
.whatsapp-float:hover {
  transform: scale(1.1);
  background: #20b358;
}

/* Pulse animation */
.whatsapp-float::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.5);
  animation: whatsappPulse 2s infinite;
  z-index: -1;
}

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

/* ===============================
   Infinite Loop Banner
================================== */

.loop-banner {
  background:
  linear-gradient(
    135deg,
    #22c55e,
    #06b6d4
  );

  overflow: hidden;
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

.loop-track {
  display: flex;
  width: max-content;
  animation: scrollLoop 12s linear infinite;
}

.loop-content {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
  white-space: nowrap;
}

.loop-content span {
    font-family: "Purple Purse", serif;
  font-size: 60px;
  font-weight: 700;
  color: black; 
  letter-spacing: 2px;
}

.loop-content .arrow {
  font-size: 50px;
  opacity: 0.8;
}

/* Images */
.loop-content img {
  width: 220px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 5%;
}


/* Infinite scrolling animation */
@keyframes scrollLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}