/* =========================================================================
   RankGenius Digital — MASTER STYLESHEET (Light Mode)
   For: index.html, about.html, services.html, contact.html, packages.html,
        industry.html, consultation.html, we-serve.html
   Premium Glass + Hover (Style B)
   Font: Times New Roman
   ========================================================================= */


/* =========================================================================
   MODERN NAVIGATION BAR — DARK GLASS + PREMIUM HOVER
   Palette: Royal Blue + Purple (Matches Full Website)
   ========================================================================= */

:root {
  --primary: #4f5bff;
  --accent: #8a4dff;
  --nav-bg: #0b0f19;
  /* deep navy */
  --nav-bg-2: #0d0d26;
  /* darker section */
  --text-light: #ffffff;

}

/* GLOBAL RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Times New Roman", serif;
  background: #f5f7ff;
  color: #0b0f19;
  overflow-x: hidden;
  line-height: 1.6;
}

/* GLOBAL CONTAINER */
.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* ============================================================
   ⭐ STICKY FROSTED-GLASS NAV BAR (FINAL PERFECT VERSION)
   ============================================================ */
   .nav-bar {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 15px 25px;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-bottom: 1px solid rgba(255,255,255,0.3);
    border-radius: 0 0 14px 14px;
  
    position: sticky;
    top: 0;
    z-index: 99999;
    transition: 0.35s ease;
  }
  
/* Scroll effect */
.nav-bar.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  padding: 12px 25px;
}

/* ---------------------------
     NAV LINKS
  --------------------------- */
.logo img {
  height: 48px;
  width: auto;
}

/* Links */
nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

nav ul li {
  position: relative;
}

nav ul li a {
  font-size: 16px;
  color: #111;
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 3px;
}

/* Underline effect */
nav ul li a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  transition: width 0.35s ease;
}

nav ul li a:hover::after,
nav ul li a.active::after {
  width: 100%;
}

/* --- ensure navbar sits on top --- */
/*header.nav-bar,
.nav-bar {
  position: fixed; /* or sticky if you prefer */
 /* top: 0;
  left: 0;
  right: 0;
  z-index: 99999; /* high enough to sit above hero }*/

/* --- dropdown base (hidden by default) --- */
.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px); /* a little gap under the link */
  left: 0;
  min-width: 180px;
  border-radius: 12px;
  padding: 8px 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999999;
}

/* --- show on hover of parent li --- */
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: block; /* safety */
}

/* --- item styles --- */
.dropdown-menu li { padding: 10px 18px; }
.dropdown-menu li a { display:block; color:#222; text-decoration:none; font-size:15px; }
.dropdown-menu li a:hover { color:#6a11cb; }

/* --- ensure hero overlay doesn't block pointer events --- */
.hero,
.hero::before {
  pointer-events: none; /* hero won't intercept mouse events */
}

/* but allow hero children to be interactive */
.hero * { pointer-events: auto; }

/* --- keyboard accessibility focus style for drop-btn --- */
.drop-btn:focus {
  outline: none;
  /* optionally show underline / focus style */
}


/* Background overlay always below all elements */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: -1;
}
.hero * {
  pointer-events: auto !important;
}

/* ---------------------------
     CTA Button
  --------------------------- */
.btn-accent {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  padding: 12px 18px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(106, 17, 203, 0.25);
  transition: .3s ease;
}

.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(106, 17, 203, 0.35);
}

/* ---------------------------
     MOBILE MENU
  --------------------------- */
.mobile-menu-btn {
  display: inline-flex;
  font-size: 30px;
  cursor: pointer;
  background: none;
  border: none;
}

@media (max-width: 850px) {
  .mobile-menu-btn {
    display: block;
  }

  .btn-accent {
    display: none;
  }

  nav ul {
    flex-direction: column;
    gap: 25px;
    position: fixed;
    top: 72px;
    right: -100%;
    width: 260px;
    height: calc(100vh - 72px);

    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);

    padding: 35px 20px;
    transition: .35s ease;
  }

  nav ul.active {
    right: 0;
  }
}

/* ============================================================
        HERO SECTION — FIXED (NO MORE OVERLAP)
  ============================================================ */
  .hero {
    padding: 160px 0 130px;
    text-align: center;
    position: relative;
  
    /* keep hero BELOW navbar */
    z-index: 0 !important;
  
    /* LIGHTER overlay (from 0.55 → 0.25) */
    background:
      linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
      url('assets/office-bg.jpg');
  
    background-size: cover;
    background-position: center;
    color: #ffffff;
  
    /* IMPORTANT: Hero must NOT block dropdown */
    pointer-events: none;
  }
  
  .hero * {
    position: relative;
    z-index: 1;
    pointer-events: auto; /* text/buttons still work */
  }
  

/* ⛔ Hero overlay should NOT block clicks */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1 !important;
  /* ⛔ BELOW everything */
  pointer-events: none !important;
}

/* Move hero text slightly upward */
.hero .hero-content {
  padding-top: 0;
  margin-top: -40px; /* adjust: -20px to -60px */
}

/* Hero text */
.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
}

.hero h6 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
  color: #dfe1ff;
}

.hero .subtitle {
  max-width: 760px;
  margin: 0 auto 20px;
  font-size: 18px;
  color: #f3f4ff;
  margin-top: 0;
}

/* ------------------------------ FIX ANALYZER FORM VISIBILITY --------------------------------*/
.analyzer-form {
  display: flex;
  max-width: 650px;
  margin: 24px auto;
  padding: 6px;
  background: rgba(255, 255, 255, 1);
  /* Solid white */
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  /* Stronger shadow */
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 50;
  /* ensure above overlay */
}

/* Input field */
.analyzer-form input {
  flex: 1;
  border: none;
  padding: 14px;
  font-size: 16px;
  border-radius: 10px;
  outline: none;
}

/* Button */
.analyzer-form button {
  background: linear-gradient(90deg, #4f5bff, #8a4dff);
  color: white;
  border: none;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s ease;
  white-space: nowrap;
}

.analyzer-form button:hover {
  transform: translateY(-3px);
  background: linear-gradient(90deg, #6a70ff, #9e66ff);
  box-shadow: 0 10px 25px rgba(79, 91, 255, 0.35);
}

/* ============================
   MOBILE HERO FIX — FINAL
   ============================ */
   @media (max-width: 768px) {
    .hero {
      padding: 120px 20px 100px !important;
      /* Clean spacing for mobile */
  
      background:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url('assets/office-bg.jpg') center/cover no-repeat !important;
  
      text-align: center;
      width: 100% !important;
      min-height: 90vh;
    }
  
    .hero h1 {
      font-size: 1.9rem !important;
      line-height: 1.3;
      margin-bottom: 12px;
      padding: 0 10px;
    }
  
    .hero h6 {
      font-size: 1rem !important;
      margin-bottom: 10px;
    }
  
    .hero .subtitle {
      font-size: 0.95rem;
      max-width: 90%;
      margin: 0 auto 15px;
      line-height: 1.45;
    }
  
    /* Analyzer form mobile fix */
    .analyzer-form {
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      width: 90% !important;
    }
  
    .analyzer-form input {
      width: 100%;
      font-size: 0.95rem !important;
      padding: 12px;
    }
  
    .analyzer-form button {
      width: 100%;
      padding: 12px 0 !important;
      font-size: 1rem;
    }
  }

/* AI Powered Marketing Section Wrapper */

/* AI Section Layout */
.ai-section {
  padding: 100px 20px;
  background: #eef2ff;
  text-align: center;
  font-family: "Times New Roman", serif;
}

/* Header Icon */
.ai-icon {
  font-size: 60px;
  margin-bottom: 10px;
  animation: float 3s ease-in-out infinite;
}

/* Title Style */
.ai-heading {
  font-size: 40px;
  font-weight: bold;
  color: #0a0f2c;
  margin-bottom: 15px;
}

/* Sub Title */
.ai-subtitle {
  max-width: 700px;
  margin: 0 auto 40px auto;
  color: #4a4f63;
  font-size: 18px;
}

/* Slider Container */
.ai-slider {
  width: 100%;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

/* Slides Wrapper */
.ai-slides {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.4, 0.15, 0.1, 1);
}

/* Each Slide */
.ai-slide {
  min-width: 100%;
  padding: 40px;
}

/* Neon Tech Card — Default */
.neon-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  padding: 35px 45px;
  border-radius: 16px;
  backdrop-filter: blur(15px);
  color: #0b1025;
  overflow: hidden;

  border: 2px solid rgba(80, 120, 255, 0.5);
  box-shadow:
    0 0 15px rgba(80, 120, 255, 0.4),
    0 0 30px rgba(80, 120, 255, 0.2);

  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.neon-card::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    #6a11cb 0%,
    #7a3df0 45%,
    #2575fc 100%
  );

  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}

.neon-card:hover::before {
  opacity: 1;
}

.neon-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 0 25px rgba(90, 60, 255, 0.6),
    0 0 60px rgba(90, 60, 255, 0.35);
}


/* ✅ THIS FIX */
.neon-card * {
  position: relative;
  z-index: 1;
}

.neon-card:hover {
  color: #ffffff;
}

/* Title Inside Card */
.neon-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: bold;
}

/* Dots */
.ai-dots {
  text-align: center;
  margin-top: 22px;
}

.ai-dots .dot {
  height: 12px;
  width: 12px;
  margin: 0 6px;
  border-radius: 50%;
  display: inline-block;
  background: #bfc8ff;
  cursor: pointer;
  transition: 0.3s;
}

.ai-dots .active {
  background: #4a58ff;
  box-shadow: 0 0 10px #4a58ff;
}

/* Floating Icon Animation */
@keyframes float {

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

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

/* Mobile Responsive */
@media (max-width: 600px) {
  .neon-card {
    padding: 25px;
  }

  .ai-heading {
    font-size: 28px;
  }

  .neon-card h3 {
    font-size: 20px;
  }
}

/* ============================
   Modern About Section
============================= */

.about-section-modern {
  padding: 90px 0;
  background: #eef2ff;
  /* light premium bg */
  text-align: center;
}

.about-section-modern h2 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: #0b0f19;
}

.about-section-modern h2 span {
  color: #4f46e5;
  /* Indigo highlight */
}

.about-desc {
  max-width: 650px;
  margin: 10px auto;
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* Feature Cards */
.about-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 45px;
}

.a-feature {
  position: relative;
  background: #ffffff;
  padding: 25px 20px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(200, 200, 255, 0.4);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.a-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6a11cb, #7a3df0, #2575fc);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}

/* 🔥 MISSING LINE */
.a-feature:hover::before {
  opacity: 1;
}

.a-feature * {
  position: relative;
  z-index: 1;
}

.a-feature h4,
.a-feature p,
.a-feature .a-icon {
  color: #1f2430;
  transition: color 0.3s ease;
}

.a-feature:hover h4,
.a-feature:hover p,
.a-feature:hover .a-icon {
  color: #ffffff;
}

.a-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(90, 60, 255, 0.35);
}

.a-feature h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.a-feature p {
  font-size: 0.9rem;
  color: #555;
}

.a-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

/* CTA Button */
.btn-meeting {
  margin-top: 40px;
  display: inline-block;
  padding: 14px 32px;
  background: #4f46e5;
  color: #fff;
  font-size: 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(79, 91, 255, 0.35);
  transition: 0.3s;
}

.btn-meeting:hover {
  background: #4338ca;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(79, 91, 255, 0.45);
}

/* Responsive */
@media (max-width: 992px) {
  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .about-features {
    grid-template-columns: 1fr;
  }

  .about-section-modern h2 {
    font-size: 1.8rem;
  }
}


/* ===========================
      WHO WE HELP
   =========================== */
.who-we-help {
  padding: 70px 0;
}

.help-title {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}

.help-subtitle {
  text-align: center;
  margin-top: 10px;
  color: #4f5bff;
  font-size: 22px;
}

.intro-text {
  text-align: center;
  max-width: 760px;
  margin: 10px auto 20px;
}

/* =====================================================
   WHO WE HELP – Premium Glass Cards + Hover Effect
   ===================================================== */

/* ===============================
   INDUSTRIES LIST — FINAL FIX (PRODUCTION SAFE)
   =============================== */

   .industries-list p {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* 🔥 FIXES STACKING CONTEXT */
  
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    padding: 16px 22px;
    border-radius: 14px;
    margin: 12px 0;
  
    font-size: 17px;
    line-height: 1.5;
    color: #1f2430;
  
    border: 1px solid rgba(79, 91, 255, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  
    cursor: pointer;
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                color 0.3s ease;
  }
  
  /* Gradient background */
  .industries-list p::before {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      135deg,
      #6a11cb 0%,
      #7a3df0 45%,
      #2575fc 100%
    );
  
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1; /* 🔥 MUST BE NEGATIVE */
  }
  
  /* Ensure strong follows text color */
  .industries-list p strong {
    color: inherit;
  }
  
  /* Hover */
  .industries-list p:hover::before {
    opacity: 1;
  }
  
  .industries-list p:hover {
    transform: translateY(-6px) scale(1.03);
    color: #ffffff;
  
    box-shadow:
      0 20px 45px rgba(79, 91, 255, 0.35),
      0 0 20px rgba(124, 136, 255, 0.45);
  
    border-color: rgba(120, 130, 255, 0.6);
  }
  
/* ===========================
      SERVICE GRID
   =========================== */
.services {
  padding-top: 70px;
}

/* Center align Services section heading + subtitle */
.services h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  /* space below heading */
}

.services .subtitle {
  text-align: center;
  color: #555;
  max-width: 700px;
  margin: 0 auto 35px;
  /* center + spacing */
  font-size: 17px;
  line-height: 1.5;
}

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

/* ===============================
   SERVICE CARD — GRADIENT HOVER (FINAL FIX)
   =============================== */

   .service {
    position: relative;
    overflow: hidden;
  
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
  
    padding: 20px;
    border-radius: 14px;
  
    color: #1f2430; /* default text color */
  
    border: 1px solid rgba(200, 200, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      color 0.3s ease;
  }
  
  /* Gradient overlay — pushed BELOW content */
  .service::before {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      135deg,
      #6a11cb 0%,
      #7a3df0 45%,
      #2575fc 100%
    );
  
    opacity: 0;
    transition: opacity 0.35s ease;
  
    z-index: -1;   /* ⭐ KEY FIX */
  }
  
  /* Hover */
  .service:hover::before {
    opacity: 1;
  }
  
  .service:hover {
    transform: translateY(-8px);
    color: #ffffff;
  
    box-shadow:
      0 18px 40px rgba(79, 91, 255, 0.35),
      0 0 20px rgba(124, 136, 255, 0.45);
  
    border-color: rgba(120, 130, 255, 0.6);
  }
  
  /* Ensure strong text stays white */
  .service:hover strong {
    color: #ffffff;
  }
  
/* MOBILE SERVICE GRID */
@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   WHY CHOOSE SECTION – Premium Animations + Gradient Hover
   ===================================================== */

/* Fade + slide animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

.why-choose {
  padding: 70px 0;
  animation: fadeUp 0.9s ease forwards;
}

/* Center heading */
.why-choose h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

/* Center swiper */
.why-choose .swiper {
  margin: 0 auto;
  width: 95%;
  max-width: 1050px;
}

/* Main card */
.choose-content {
  display: flex;
  gap: 24px;
  padding: 22px;
  background: #ffffff;
  border-radius: 18px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all .35s ease;
  border: 1px solid rgba(200, 200, 255, 0.3);
}

/* Gradient border hover effect */
.choose-content:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(79, 91, 255, 0.28);
  border: 1px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(90deg, #6a70ff, #9b5bff) border-box;
}

/* Image zoom on hover */
.choose-img img {
  width: 350px;
  border-radius: 16px;
  transition: transform .45s ease, filter .45s ease;
}

.choose-img img:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Text section */
.choose-text {
  flex: 1;
  animation: fadeUp 1.1s ease;
}

/* Feature cards inside */
.feature-cards {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

/* FIX — Make Explore More text visible */
.explore-btn {
  color: #1a1d2e !important;
  /* dark text = visible */
  font-weight: 600;
  font-size: 1.05rem;

  /* Apple-style glass background */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  padding: 14px 36px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.38);

  /* Subtle shadow for Apple premium look */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
  transition: 0.3s ease;
}

/* Hover Effect — Premium Apple glow */
.explore-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.12),
    inset 0 0 20px rgba(255, 255, 255, 0.55);
}

/* ===============================
   Premium Glass Button (Reusable)
================================= */
.glass-btn {
  color: #1a1d2e !important;
  font-weight: 600;
  font-size: 1.05rem;

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  padding: 14px 36px;
  border-radius: 14px;

  /* Default border */
  border: 1.5px solid rgba(160, 180, 255, 0.25);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.35);

  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

/* Hover effect (same as Explore button) */
.glass-btn:hover {
  transform: translateY(-3px);

  /* Light blue border glow */
  border: 1.5px solid rgba(120, 160, 255, 0.9);

  /* Border glow illusion */
  box-shadow:
    0 0 0 3px rgba(120, 160, 255, 0.18),
    0 10px 28px rgba(80, 120, 255, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .glass-btn {
    border: 1.5px solid rgba(120, 160, 255, 0.4);
  }
}

.feature {
  background: #ffffff;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(200, 200, 255, 0.4);
  flex: 1;
  transition: all .3s ease;
}

/* Hover glow on feature cards */
.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(79, 91, 255, 0.22);
  border-color: #4f5bff;
}

/* Center pagination dots */
.swiper-pagination {
  text-align: center !important;
  margin-top: 12px;
}

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

  .choose-content {
    flex-direction: column;
    text-align: center;
  }

  .choose-img img {
    width: 100%;
  }

  .feature-cards {
    flex-direction: column;
  }
}

/* ============================
   FIX CLIENT RESULTS SECTION
   Center alignment + spacing
   ============================ */

/* ============================================
   ⭐ RESULTS SECTION — Apple Spacing Fix
   ============================================ */

/* Section Wrapper */
.results {
  padding: 80px 20px;
  text-align: center;
}

/* Main H2 — Case Studies */
.results h2 {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 10px;
  /* tightened spacing */
}

/* Subtitle H3 — Real Results. Real Growth. */
.results>h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #3c3f52;
  margin-bottom: 0px; /* reduce gap below subtitle */
  /* reduced big gap */
  margin-top: 8px;
}

/* Stats Title — Serve Clients */
.stats-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0 !important;
  margin-bottom: 20px; /* clean spacing above cards */
}


/* Stats box center + spacing */
.stats-section {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0 !important;
  padding-top: 0;
}

.stats-grid {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.stat-box {
  text-align: center;
  background: #fff;
  padding: 22px 30px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(200, 200, 255, 0.4);
  transition: 0.3s ease;
}

/* Hover effect */
.stat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(79, 91, 255, 0.25);
}

/* Fix number style */
.stat-box h2 {
  font-size: 2rem;
  margin-bottom: 6px;
  color: #3d3d3d;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .stats-grid {
    gap: 20px;
  }

  .stat-box {
    width: 46%;
  }
}

@media (max-width: 480px) {
  .stat-box {
    width: 100%;
  }
}

/* ============================
   Testimonial Section (3 Card Slider)
============================ */

.testimonial-section {
  padding: 60px 0;
  text-align: center;
}

.test-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 40px;
}

/* Slider container */
.testimonialSwiper {
  width: 90%;
  max-width: 1300px;
  margin: auto;
  padding-bottom: 60px;
}

/* Cards */
.t-card {
  height: 420px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.t-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.05));
}

/* Content inside card */
.t-card .content {
  position: relative;
  padding: 25px;
  color: #fff;
  text-align: left;
  width: 80%;
  z-index: 2;
}

.quote-top,
.quote-bottom {
  font-size: 40px;
  font-weight: bold;
  opacity: 0.8;
}

.content .text {
  font-size: 1rem;
  margin: 12px 0;
  line-height: 1.5;
}

.t-card h3 {
  margin-top: 10px;
  font-size: 1.25rem;
  font-weight: 700;
}

.t-card span {
  font-size: 0.9rem;
  opacity: 0.8;
}

.read-more {
  margin-top: 12px;
  display: inline-block;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  transition: 0.3s ease;
  opacity: 0.95;
}

/* PREMIUM HOVER EFFECT */
.read-more:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #0b0f19;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.35);
  opacity: 1;
}


/* FIX DOTS POSITION */
.swiper-pagination {
  position: relative !important;
  height: 40px !important;
  margin-top: 15px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 10 !important;
}

/* Fix bullet size + spacing */
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
  background: #bbb !important;
  opacity: 1 !important;
  transition: 0.3s;
}

/* Active dot */
.swiper-pagination-bullet-active {
  background: var(--primary) !important;
  transform: scale(1.3);
}

/* Move arrows lower (so pagination sits above them) */
.swiper-button-next,
.swiper-button-prev {
  top: unset !important;
  bottom: 25px !important;
  transform: translateY(0) !important;
}


/* CENTER NAV BUTTONS UNDER DOTS */
.testi-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  gap: 16px;
}

/* ROUND BUTTONS */
.testi-prev,
.testi-next {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #4f5bff;
  background: #ffffff;
  color: #4f5bff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 4px 18px rgba(79, 91, 255, 0.25);
}

/* HOVER EFFECT */
.testi-prev:hover,
.testi-next:hover {
  background: #4f5bff;
  color: white;
  transform: scale(1.12);
  box-shadow: 0 8px 25px rgba(79, 91, 255, 0.45);
}

/* ARROW SLIDE EFFECT */
.testi-prev:hover {
  transform: scale(1.12) translateX(-4px);
}

.testi-next:hover {
  transform: scale(1.12) translateX(4px);
}


/* ==========================
   TESTIMONIALS SECTION
========================== */
/*.testimonials {
    text-align: center;
    padding: 100px 10%;
    background: #f8faff;
    border-radius: 20px;
    margin: 60px auto;
  }
  
  .testimonials h2 {
    font-size: 32px;
    font-weight: 700;
    color: #002147;
    margin-bottom: 40px;
  }
  
  .testimonials blockquote {
    background: #fff;
    border-radius: 20px;
    padding: 50px 30px;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
    color: #444;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .testimonials blockquote strong {
    display: block;
    margin-top: 15px;
    color: #001c40;
    font-size: 1.1rem;
  }
  
  .testimonials blockquote span {
    color: #777;
    font-size: 0.95rem;
  }
  
  .testimonials blockquote:hover {
    transform: scale(1.02);
  }
  
  /* Swiper Pagination */
/*.swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    transition: 0.3s;
  }
  
  .swiper-pagination-bullet-active {
    background: #007bff;
    width: 25px;
    border-radius: 8px;
  }
  
  /* Ensure consistent swiper height and pagination position */
/* .why-choose .swiper {
    position: relative;
    padding-bottom: 80px; /* gives consistent space for dots 
  }
  
  /* Fix pagination dots to a stable position 
  .why-choose .swiper-pagination {
    position: absolute !important;
    bottom: 25px !important; /* fixed distance from bottom 
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  */
/* Ensure all slides have consistent visual height */
/*.why-choose .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px; /* adjust as needed for your design 
  }
  */
/* Keep your existing bullet style but center it visually */
/* .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    transition: 0.3s;
  }*/

/* .swiper-pagination-bullet-active {
    background: #007bff;
    width: 25px;
    border-radius: 8px;
  }
  
*/
/* ============================
   GLASS CTA (Fixed Spacing)
============================= */
.glass-cta {
  padding: 60px 0 40px;
  background: linear-gradient(135deg, #eef2ff, #f7f9ff);
  display: flex;
  justify-content: center;
  align-items: center;
}

.glass-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.cta-content {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.30);
  border-radius: 22px;
  padding: 45px 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 40px rgba(79, 91, 255, 0.14);
}

.cta-content h2 {
  font-size: 2rem;
  color: #0b0f19;
  margin-bottom: 25px;
}

/* CTA Button */
.btn-glass {
  display: inline-block;
  padding: 12px 34px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: rgba(79, 91, 255, 0.92);
  box-shadow: 0 8px 25px rgba(79, 91, 255, 0.5);
  transition: 0.3s ease;
}

.btn-glass:hover {
  background: #6168ff;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(79, 91, 255, 0.6);
}

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

/* Outer rounded dark container */
.dark-footer {
  background: #111;
  width: 100%;
  max-width: 1500px;
  margin: 25px auto;
  padding: 50px 60px;
  border-radius: 35px;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

/* Main grid layout (perfect alignment) */
.footer-inner {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  column-gap: 100px;
  align-items: start;
}

/* Left Section (Heading + Logo) */
.footer-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Heading “let’s talk” */
.footer-title {
  font-size: 110px;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 20px 0;
}

.footer-title span {
  background: linear-gradient(90deg, #6b7dff, #9aa7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Logo under heading */
.footer-logo {
  width: 130px;
  margin-top: 20px;
}

/* Right-side Contact Block */
.footer-contact h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

.footer-contact p {
  margin: 5px 0;
  line-height: 1.5;
}

/* Social icons under phone */
.footer-social-inline {
  margin-top: 20px;
  display: flex;
  gap: 18px;
}

.footer-social-inline a {
  width: 50px;
  height: 50px;
  background: #1d1d1d;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  transition: 0.3s ease;
}

.footer-social-inline a:hover {
  background: #6b72ff;
  transform: translateY(-4px);
}

/* Menu column */
.footer-menu h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

/* Fix footer links color */
.footer-menu a {
  color: #d3d5ff;
  /* Soft premium bluish-white */
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  opacity: 0.85;
  transition: 0.3s ease;
}

.footer-menu a:hover {
  color: #9aa7ff;
  /* Apple-style glow */
  opacity: 1;
  transform: translateX(6px);
}


/* Copyright */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid #222;
  opacity: 0.65;
}

/* ============================================================
   ⭐ MOBILE RESPONSIVE FOOTER (Perfect on all phones)
   ============================================================ */

@media (max-width: 768px) {

  .dark-footer {
    padding: 30px 20px;
    border-radius: 25px;
    margin: 30px 10px;
  }

  /* Stack columns vertically */
  .footer-inner {
    grid-template-columns: 1fr;
    row-gap: 40px;
    text-align: center;
  }

  /* Make “let’s talk” perfect size */
  .footer-title {
    font-size: 42px;   /* was 65px – too large */
    line-height: 1.15;
    margin-bottom: 25px;
  }

  .footer-logo {
    width: 100px;
    margin: 20px auto 0;
  }

  /* Contact section */
  .footer-contact h3,
  .footer-menu h3 {
    font-size: 20px;
  }

  .footer-contact p,
  .footer-menu a {
    font-size: 15px;
    line-height: 1.6;
  }

  .footer-inner {
    row-gap: 25px;
  }

  /* Center align contact block & menu */
  .footer-contact,
  .footer-menu {
    text-align: center;
  }

  /* Social icons row */
  .footer-social-inline {
    justify-content: center;
    gap: 15px;
  }

  .footer-social-inline a {
    width: 45px;
    height: 45px;
  }

  /* Copyright */
  .footer-bottom {
    font-size: 14px;
    margin-top: 20px;
    padding-top: 15px;
  }
  .footer-menu ul {
    margin-bottom: 0;
  }
}

/* Super-small screens (iPhone SE, small Android) */
@media (max-width: 480px) {

  .footer-title {
    font-size: 34px;
  }

  .dark-footer {
    padding: 35px 20px;
  }

  .footer-logo {
    width: 85px;
  }

  .footer-social-inline a {
    width: 42px;
    height: 42px;
  }
}


/*Service section Styling page */

/* ============================ HERO SECTION (LIGHT MODE + IMAGE) ============================ */
.services-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url('assets/Service.jpg') center/cover no-repeat;
  text-align: center;
  color: #fff;
  padding: 140px 20px;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  max-width: 900px;
  margin-bottom: 15px;
}

.services-hero p {
  font-size: 1.15rem;
  color: #fff;
  max-width: 800px;
  line-height: 1.6;
}

/* ============================ DARK MODE SERVICES SECTION ============================ */
.services-section-dark {
  background: #0b0d17;
  /* Dark navy background */
  color: #fff;
  padding: 80px 20px;
}

.services-section-dark .container {
  max-width: 1200px;
  margin: auto;
}

.main-title-dark {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.main-subtitle-dark {
  text-align: center;
  color: #cfd2ff;
  margin-bottom: 40px;
}

.grid-dark {
  /* Auto-fit responsive grid */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card-dark {
  background: #111827;
  /* Dark card */
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #1f2937;
  transition: 0.3s;
}

.card-dark:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  /* Blue glow */
}

.badge-dark {
  background: #2563eb;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ===========================================
   PREMIUM SECTION HEADING (For "Our Services")
   =========================================== */
.section-header {
  text-align: center;
  margin-bottom: 60px;
  animation: fadeUp 0.8s ease-out;
}

.section-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #4f5bff, #8a4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}

/* Underline Glow */
.section-header h2::after {
  content: "";
  display: block;
  height: 4px;
  width: 70%;
  margin: 12px auto 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #4f5bff, #8a4dff);
  box-shadow: 0 0 12px rgba(100, 108, 255, 0.6);
  animation: underlineGrow 1s ease-out;
}

/* Subtitle Styling */
.section-header .subtitle {
  max-width: 760px;
  margin: 15px auto 0;
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
}

/* Fade Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

/* Underline Animation */
@keyframes underlineGrow {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 70%;
    opacity: 1;
  }
}

/* Center + Gradient Heading */
.block-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 50px 0 25px;

  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

/* Decorative underline glow */
.block-title::after {
  content: "";
  width: 140px;
  height: 4px;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  display: block;
  margin: 10px auto 0;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(120, 96, 255, 0.6);
}



/* ============================ WHITE SERVICES SECTION ============================ */
.services {
  padding: 80px 20px;
  background: #fff;
}

.services .container {
  max-width: 1200px;
  margin: auto;
}


/* =========================================================
   ADVANCED PREMIUM SERVICE CARDS (Awwwards-Level Quality)
   ========================================================= */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

/* Outer Wrapper for 3D hover */
.service-card {
  position: relative;
  padding: 28px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  border: 1px solid rgba(200, 200, 255, 0.35);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.06),
    inset 0 0 0 rgba(79, 91, 255, 0.0);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all .35s ease;
  overflow: hidden;
}

/* ---------------------------
     1) Animated Gradient Border
  ----------------------------*/
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, #6a70ff, #9e5bff, #6a70ff);
  background-size: 300%;
  opacity: 0;
  transition: 0.5s ease;
  z-index: -1;
}

.service-card:hover::before {
  opacity: 1;
  animation: borderFlow 2.5s linear infinite;
}

@keyframes borderFlow {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }
}

/* ---------------------------
     2) Radial Glow on Hover
  ----------------------------*/
.service-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, rgba(120, 140, 255, 0.25), transparent 60%);
  opacity: 0;
  transition: .45s ease;
  z-index: -2;
}

.service-card:hover::after {
  opacity: 1;
  transform: scale(1.15);
}

/* ---------------------------
     3) Hover Lift + Scale
  ----------------------------*/
.service-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow:
    0 18px 42px rgba(79, 91, 255, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.05);
}

/* ---------------------------
     4) Icon Animation
  ----------------------------*/
.service-card .service-icon {
  width: 48px;
  height: 48px;
  transition: 0.35s ease;
  margin-bottom: 16px;
  opacity: 0.9;
}

.service-card:hover .service-icon {
  transform: scale(1.2) rotate(4deg);
  opacity: 1;
}

/* ---------------------------
     5) Text Styles
  ----------------------------*/
.service-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0b0f19;
}

.service-card p {
  color: #444;
  line-height: 1.55;
  margin-bottom: 8px;
}

/* list for SEO card */
.service-card ul {
  margin-top: 10px;
  padding-left: 18px;
}

.service-card ul li {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

/* ===========================
   TEXT COLOR CHANGE ON HOVER
   =========================== */

/* Headings */
.service-card:hover h4 {
  color: #ffffff;
}

/* Paragraph text */
.service-card:hover p {
  color: rgba(255, 255, 255, 0.95);
}

/* List items */
.service-card:hover ul li {
  color: rgba(255, 255, 255, 0.92);
}

/* Icons (SVG or font icons) */
.service-card:hover .service-icon {
  color: #ffffff;
  fill: #ffffff;
}


/* ============================ TECH SECTION ============================ */
.tech-section {
  padding: 80px 20px;
  background: #eef3ff;
  /* Light blue tint */
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.tech-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #ddd;
}

/* ============================ AI SECTION ============================ */
.ai-section {
  padding: 80px 20px;
  background: #fff;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.ai-item {
  background: #f7f8fc;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #ddd;
}


/* ======== Industry|we serve SECTION | code ============================ */

/* ============================================================
   ⭐ HERO SECTION — Perfect Image Fit + Apple Soft Dark Overlay
   ============================================================ */
.we-serve-hero {
  background: linear-gradient(rgba(12, 14, 24, 0.45),
      rgba(12, 14, 24, 0.55)),
    url("assets/we-serve1.jpg") center/cover no-repeat;

  width: 100%;
  max-width: 100vw;
  /* ❗ Prevent horizontal overflow */
  overflow: hidden;
  /* ❗ Stop stretching */
  text-align: center;

  padding: 140px 25px 120px;
  color: #e8e9ef;
  position: relative;
  z-index: 1;
}


/* Optional: Add soft fade on bottom */
.we-serve-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #1e1d1d);
  pointer-events: none;
}


.we-serve-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: hsl(240, 33%, 99%);
  text-shadow: 0 2px 10px rgba(21, 20, 20, 0.5);
  letter-spacing: -0.5px;
}

.we-serve-hero p {
  margin-top: 15px;
  font-size: 1.1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: hsl(228, 8%, 87%);
  line-height: 1.7;
}



/* ============================================================
     ⭐ INDUSTRY SECTION — Apple Style + Floating Cards
     ============================================================ */
.we-serve-section {
  background: #ffffff;
  padding: 100px 20px;
  position: relative;
}

.we-serve-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}



/* ============================================================
   ⭐ ADVANCED PREMIUM CARD UI (Apple Glass + Glow Hover)
============================================================ */

/* ===============================
   SERVE CARD — CLEAN VERSION
=============================== */

.serve-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 30px;
  border-radius: 20px;
  border: 1px solid rgba(220, 220, 220, 0.6);

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

/* Gradient overlay */
.serve-card::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    #6a11cb,
    #7a3df0,
    #2575fc
  );

  opacity: 0;
  z-index: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Text safety */
.serve-card > * {
  position: relative;
  z-index: 2;
}

/* Hover effect */
.serve-card:hover {
  transform: translateY(-12px);
  box-shadow:
    0 20px 45px rgba(79, 91, 255, 0.35),
    0 0 28px rgba(124, 136, 255, 0.45);
}

.serve-card:hover::before {
  opacity: 1;
}

.serve-card:hover,
.serve-card:hover * {
  color: #ffffff;
}


/* ============================================================
   ⭐ ICON BOUNCE ANIMATION
============================================================ */

.serve-card h3 {
  position: relative;
  font-size: 1.28rem;
  font-weight: 700;
  color: #0b1220;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bounce effect */
.serve-card:hover h3 span {
  transform: translateY(-4px) scale(1.15);
  transition: 0.3s ease;
}

/* ============================================================
   ⭐ TYPOGRAPHY (Premium)
============================================================ */

.serve-card p {
  color: #4a4f63;
  font-size: 0.95rem;
  margin-bottom: 15px;
  line-height: 1.6;
}

.serve-card ul {
  padding-left: 18px;
  margin-top: 10px;
}

.serve-card ul li {
  margin-bottom: 6px;
  color: #3b4155;
  font-size: 0.93rem;
}

/* Smooth animations */
.serve-card,
.serve-card * {
  transition: all 0.3s ease;
}


/* ============================================================
   ⭐ PREMIUM "EXPLORE MORE" SECTION (Apple Glass + Glow)
   ============================================================ */

.explore-more {
  background: linear-gradient(180deg, #071a4a, #0d1120);
  padding: 120px 20px 110px;
  text-align: center;
  color: #fff;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
}

/* Soft spotlight glow behind content */
.explore-more::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 250px;
  background: radial-gradient(circle, rgba(140, 150, 255, 0.25), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

/* Gradient premium heading */
.explore-more h2 {
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(90deg, #b2b7ff, #d6d9ff, #a9b2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

/* Subtitle text */
.explore-more p {
  max-width: 750px;
  margin: 10px auto 35px;
  font-size: 1.08rem;
  color: #ccd0ff;
  z-index: 2;
  position: relative;
}

/* Button row */
.explore-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  z-index: 2;
  position: relative;
}

/* Base button */
.explore-btn {
  padding: 14px 30px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(170, 180, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #dce0ff;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 0 10px rgba(255, 255, 255, 0.05);
}

/* Hover: premium glow + lift */
.explore-btn:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 35px rgba(140, 150, 255, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.12);
  border-color: rgba(170, 180, 255, 0.8);
  color: #fff;
}

/* Primary button (solid glass glow) */
.explore-btn.primary {
  background: linear-gradient(135deg, #9aa3ff, #b1b6ff);
  color: #0c0f1b;
  font-weight: 700;
}

.explore-btn.primary:hover {
  background: linear-gradient(135deg, #b9bfff, #d2d6ff);
  transform: translateY(-6px) scale(1.03);
}

/* Secondary button (outline glass) */
.explore-btn.secondary {
  color: #bfc5ff;
  background: linear-gradient(135deg, #9aa3ff, #b1b6ff);
  border: 2px solid rgba(160, 170, 255, 0.4);
}

.explore-btn.secondary:hover {
  background: rgba(160, 170, 255, 0.3);
  color: #fff;
  transform: translateY(-6px) scale(1.03);
}

/* Mobile optimization */
@media (max-width: 768px) {
  .explore-more h2 {
    font-size: 1.9rem;
  }

  .explore-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ======== Industry|Package SECTION | code ============================ */

/* ============================================================
   ⭐ PACKAGES HERO — Ultra Premium Apple Soft Overlay
   ============================================================ */
.packages-hero {
  background:
    linear-gradient(rgba(10, 12, 23, 0.55),
      rgba(10, 12, 23, 0.55)),
    url("assets/package.png") center center / cover no-repeat;

  text-align: center;
  padding: 160px 25px 140px;
  color: #f0f2ff;
  position: relative;

  /* FIXED SOFT FADE */
  mask-image: linear-gradient(to bottom, black 90%, rgba(0, 0, 0, 0.2) 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 90%, rgba(0, 0, 0, 0.2) 100%);
}


.packages-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #ecedf0, #f0f0f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.packages-hero p {
  max-width: 750px;
  margin: auto;
  font-size: 1.15rem;
  color: #dde1ff;
  opacity: 0.9;
}


/* ============================================================
   ⭐ PREMIUM GLASS PACKAGE CARDS — Apple Level
   ============================================================ */

.packages-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  padding: 80px 25px;
  max-width: 1250px;
  margin: auto;
}

/* ============================================================
   ⭐ PREMIUM GRADIENT PACKAGE CARD (FIXED)
   ============================================================ */

   .package-card {
    position: relative;
    background: #ffffff; /* CLEAN DEFAULT */
    border-radius: 20px;
    padding: 32px;
    overflow: hidden;
  
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
  
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .package-card::before {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      135deg,
      #6a11cb 0%,
      #7a3df0 45%,
      #2575fc 100%
    );
  
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 0;
  }

  .package-card:hover::before {
    opacity: 1;
  }
  
  .package-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 35px 70px rgba(90, 60, 255, 0.35);
  }
  

/* Show glow on hover */
.package-card:hover::before {
  opacity: 1;
}

.package-card:hover::before {
  opacity: 1;
  filter: blur(14px);
}

/* Typography */
.package-card h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #1f2430;
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

.package-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2430;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

.package-card p,
.package-card ul li {
  color: #1f2430;
  transition: color 0.35s ease;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.package-card:hover h3,
.package-card:hover h4,
.package-card:hover p,
.package-card:hover ul li {
  color: #ffffff;
}


/* CTA Button */
.package-card .cta-btn {
  background: #f2f3ff;
  color: #4f5bff;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  transition: all 0.35s ease;

  margin-top: 22px;   /* 👈 SPACE ABOVE BUTTON */
  display: inline-block;
}


.package-card:hover .cta-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
}

/* ============================================================
   ⭐ WHY PACKAGES — Clean Enterprise Gradient
   ============================================================ */

.why-packages {
  background: linear-gradient(180deg, #f5f6ff, #eef0ff);
  padding: 100px 20px;
  text-align: center;
}

.why-packages h2 {
  font-size: 2.3rem;
  font-weight: 800;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.why-packages p {
  max-width: 850px;
  margin: 10px auto 25px;
  line-height: 1.7;
  color: #4b4f62;
}

/* ===========================================
   WHY PACKAGES — Hover Cards
   =========================================== */
/* ============================================================
   ⭐ WHY PACKAGES — 2-Column Premium Glassmorphic Cards
   ============================================================ */

.why-packages ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px 26px;
  /* row + column spacing */
  padding: 0;
  max-width: 800px;
  margin: 40px auto 0;
  list-style: none;
}

.why-packages ul li {
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 18px 26px;
  border-radius: 18px;
  text-align: center;
  cursor: default;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.08),
    0 3px 6px rgba(0, 0, 0, 0.04);

  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.why-packages ul li::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    #6a11cb 0%,
    #7a3df0 45%,
    #2575fc 100%
  );

  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.why-packages ul li:hover::before {
  opacity: 1;
}

.why-packages ul li * {
  position: relative;
  z-index: 1;
}

.why-packages ul li {
  color: #1f2430;
  transition: color 0.3s ease;
}

.why-packages ul li:hover {
  color: #ffffff;
}


/* Hover Effect */
.why-packages ul li:hover {
  transform: translateY(-8px) scale(1.03);

  box-shadow:
    0 20px 45px rgba(90, 60, 255, 0.35),
    0 0 20px rgba(124, 136, 255, 0.45);
}


/* Mobile Responsive — 1 Column */
@media (max-width: 700px) {
  .why-packages ul {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   🍏 APPLE-STYLE CTA BUTTONS — PACKAGES PAGE ONLY
   ============================================================ */

   .why-packages .cta-buttons {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-top: 45px;
  }
  
  /* BASE BUTTON */
  .why-packages .cta-btn {
    position: relative;
    overflow: hidden;
  
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
  
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
  
    color: #6a11cb;
    border: 1.5px solid rgba(106, 17, 203, 0.35);
  
    box-shadow:
      0 10px 25px rgba(0, 0, 0, 0.08);
  
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      color 0.3s ease;
  
    z-index: 0;
  }
  
  /* GRADIENT LAYER (HOVER ONLY) */
  .why-packages .cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      135deg,
      #6a11cb 0%,
      #7a3df0 45%,
      #2575fc 100%
    );
  
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
  }
  
  /* TEXT ABOVE GRADIENT */
  .why-packages .cta-btn span,
  .why-packages .cta-btn {
    position: relative;
    z-index: 2;
  }
  
  /* HOVER EFFECT */
  .why-packages .cta-btn:hover {
    transform: translateY(-6px);
    color: #ffffff;
  
    box-shadow:
      0 18px 40px rgba(79, 91, 255, 0.35),
      0 0 22px rgba(120, 140, 255, 0.45);
  }
  
  .why-packages .cta-btn:hover::before {
    opacity: 1;
  }
  
  /* MOBILE */
  @media (max-width: 768px) {
    .why-packages .cta-buttons {
      flex-direction: column;
      gap: 16px;
    }
  
    .why-packages .cta-btn {
      width: 100%;
      text-align: center;
    }
  }
  

/* ============================================================
   Blog code start from here
   ============================================================ */
/* BLOG HERO */

/* ===============================
   PREMIUM BLOG HERO (APPLE STYLE)
================================ */

.blog-hero-premium {
  position: relative;
  max-width: 1500px;
  height: 300px;
  margin: 40px auto 60px;
  border-radius: 22px;

  background: url("../assets/blog.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* LEFT DARK GRADIENT (KEY PART) */
.blog-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.05) 100%
  );
}

/* TEXT */
.blog-hero-text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px;
  color: #fff;
}

.blog-hero-text h1 {
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.blog-hero-text .breadcrumb {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ===============================
   BLOG HEADING – PREMIUM GRADIENT
================================ */

.blog-heading {
  text-align: center;
  margin-bottom: 14px;

  /* Typography (as per your instruction) */
  font-family: "Times New Roman", serif;
  font-size: 35px;
  font-weight: 600;

  /* Apple-style gradient text */
  background: linear-gradient(
      135deg,
      #6a11cb 0%,
      #7a3df0 45%,
      #2575fc 100%
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  letter-spacing: 0.3px;
}

/* Optional subtle divider under heading */
.blog-divider {
  width: 70px;
  height: 3px;
  margin: 0 auto 40px;
  border-radius: 10px;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cards */
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}


/* Glass Blog Card */
.blog-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
}


/* Image */
/* Blog image – more compact */
.blog-image {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #0f172a;
}

.blog-image img,
.blog-img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* 🔑 SAME AS BRANDMIND */
  object-position: center;
  display: block;
  background: #0f172a;        /* dark padding like reference */
}


/* Apple-style hover zoom */
.blog-card:hover .blog-image img {
  transform: scale(1.06);
}

/* Tags */
/* ===== CATEGORY COLORS ===== */
.blog-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.blog-tag {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  background: #eef4ff;
  color: #2563eb;
  font-weight: 600;
}

.blog-tag:nth-child(1):contains("SEO"),
.blog-tag:where(:contains("SEO")) {
  background: rgba(106,17,203,0.12);
  color: #6a11cb;
}

.blog-tag:where(:contains("AI")) {
  background: rgba(0,184,148,0.12);
  color: #00b894;
}

.blog-tag:where(:contains("Content")) {
  background: rgba(255,159,67,0.15);
  color: #ff9f43;
}

.blog-tag:where(:contains("Social")) {
  background: rgba(9,132,227,0.15);
  color: #0984e3;
}

.blog-tag:where(:contains("Local")) {
  background: rgba(232,67,147,0.15);
  color: #e84393;
}

/* Title */
.blog-card h2 {
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 10px 0;
  color: #0f172a;
  font-weight: 700;
}


.blog-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 16px;
}



/* ===== BLOG FILTERS ===== */
.blog-filters {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 22px;
  border-radius: 30px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  color: #fff;
  border: none;
}


/* Read More */
.read-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 9px 18px;
  border-radius: 10px;

  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;

  color: #1e40af;
  background: transparent;
  border: 1.5px solid #c7d2fe;

  transition: 
    background 0.4s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.read-btn:hover {
  background: linear-gradient(
    135deg,
    #6a11cb,
    #2575fc
  );
  color: #ffffff;

  border-color: transparent;
  box-shadow: 0 10px 22px rgba(106, 17, 203, 0.35);
  transform: translateY(-2px);
}


/* Meta */
.blog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #777;
  margin-top: 14px;
}


/* Tablet – 2 cards */
@media (max-width: 1100px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card .blog-image {
    height: 210px;
  }
}

/* Mobile – 1 card */
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card .blog-image {
    height: 200px;
  }
}

@media (max-width: 768px) {

  .blog-heading {
    font-size: 1.9rem;
  }

  .blog-list {
    padding: 60px 15px 90px;
  }

  .blog-card {
    padding: 22px;
  }

  .blog-img {
    height: 180px;
  }
}


/* --------------------------------------------------------------
        About page syling start from here
-------------------------------------------------------------------*/


/* ============================================================
   🍎 HERO SECTION — Cinematic Apple Overlay
   ============================================================ */
.about-hero {
  position: relative;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.20)),
    url("assets/About1.jpg") center/cover no-repeat;

  padding: 180px 20px;
  color: #fff;
  text-align: center;
}

.about-hero h1 {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}

.about-hero p {
  font-size: 1.2rem;
  max-width: 850px;
  margin: auto;
  color: #dfe3ff;
}

/* -----------------------------------------------------------
   🟦 FIXED — WHO WE ARE SECTION (APPLE PREMIUM STYLE)
------------------------------------------------------------*/
.about-section {
  padding: 110px 40px;
  text-align: center;
  background: #f6f7ff;
  /* Soft Apple cloudy white */
  position: relative;
}

/* 🍏 ABOUT — Section Heading */
.about-section h2 {
  font-size: 2.6rem;
  font-weight: 800;
  color: #10131d;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}


/* Blue gradient highlight for RankGenius */
.about-section h2 span {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* FIXED paragraph */
.about-section>.container>p {
  font-size: 1.2rem;
  color: #5a5f75;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto 50px auto;

  /* Premium Apple soft fade-in look */
  opacity: 0.92;
}

/* Optional: soft underline under heading (Apple look) */
.about-section h2::after {
  content: "";
  display: block;
  width: 85px;
  height: 4px;
  margin: 15px auto 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  opacity: 0.7;
}

/* =========================================
   ABOUT PAGE — PREMIUM GLASS CARDS (ISOLATED)
   ========================================= */

   .about-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
  }
  
  /* Card base */
  .about-card {
    position: relative;
    overflow: hidden;
  
    padding: 45px 35px;
    border-radius: 26px;
  
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  
    border: 1px solid rgba(220, 220, 255, 0.45);
  
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.08),
      inset 0 2px 6px rgba(255, 255, 255, 0.45);
  
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  
  /* Gradient overlay — BEHIND content */
  .about-card::before {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      135deg,
      #6a11cb 0%,
      #7a3df0 45%,
      #2575fc 100%
    );
  
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
  }
  
  /* Keep text ABOVE gradient */
  .about-card * {
    position: relative;
    z-index: 1;
  }
  
  /* Hover effect */
  .about-card:hover {
    transform: translateY(-12px);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.14),
      0 0 35px rgba(120, 130, 255, 0.35);
  }
  
  .about-card:hover::before {
    opacity: 1;
  }
  
  /* Text colors */
  .about-card h3 {
    font-size: 1.45rem;
    margin-bottom: 12px;
    font-weight: 700;
    color: #0b0f19;
    transition: color 0.3s ease;
  }
  
  .about-card p {
    font-size: 1rem;
    color: #4a4f67;
    transition: color 0.3s ease;
  }
  
  /* Hover text color */
  .about-card:hover h3,
  .about-card:hover p {
    color: #ffffff;
  }
  
/* ============================================================
     🍎 ICON CIRCLE — Apple Frosted Icon Holder
     ============================================================ */
.icon-circle {
  width: 70px;
  height: 70px;
  margin: 0 auto 22px;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);

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

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.05),
    0 0 25px rgba(255, 255, 255, 0.45) inset;
}


/* ============================================================
     🍎 WHAT WE DO — Clean Apple Reading Layout
============================================================ */
/* 🍏 WHAT WE DO — Clean Apple Heading */
.what-we-do h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #10131d;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.25;
}

/* Correct paragraph targeting for WHAT WE DO */
.what-we-do .container>p {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 40px;
  font-size: 1.15rem;
  color: #3c3f52;
  line-height: 1.75;
}

/* ============================================================
   🍏 WHAT WE DO — Apple Glass Hover Boxes
   ============================================================ */

.services-list {
  margin-top: 40px;
  max-width: 850px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

/* ============================================================
   🍏 WHAT WE DO — FINAL FIX (TEXT 100% SAFE)
============================================================ */

.services-list li {
  position: relative;
  overflow: hidden;

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

  padding: 14px 18px;
  margin: 10px 0;
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

  font-size: 0.95rem;
  line-height: 1.45;
  color: #2f3345;

  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* 🔹 GRADIENT LAYER (SAFE) */
.services-list li::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    #6a11cb 0%,
    #7a3df0 45%,
    #2575fc 100%
  );

  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0; /* ✅ NOT -1 */
}

/* 🔹 CONTENT ABOVE GRADIENT */
.services-list li > * {
  position: relative;
  z-index: 1;
}

/* ✔ CHECK ICON (RIGHT SIDE) 
.services-list li::after {
  content: "✔";
  margin-left: auto;
  color: #4a78ff;
  font-weight: 700;
  font-size: 1.1rem;
  z-index: 1;
}*/

/* 🔥 HOVER EFFECT */
.services-list li:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(79, 91, 255, 0.35),
    0 0 22px rgba(120, 140, 255, 0.45);
}

/* SHOW GRADIENT */
.services-list li:hover::before {
  opacity: 1;
}

/* TEXT COLOR ON HOVER */
.services-list li:hover,
.services-list li:hover * {
  color: #ffffff;
}

/* STRONG TITLE */
.services-list li strong {
  font-weight: 700;
}

/* MOBILE */
@media (max-width: 768px) {
  .services-list li {
    padding: 14px 16px;
    font-size: 0.95rem;
    border-radius: 14px;
  }
}

/* ============================================================
   🍎 6-D PROCESS — Glass Card + Gradient Hover (TEXT SAFE)
============================================================ */

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 🔥 FORCE 3 IN A ROW */
  gap: 30px;
  margin-top: 50px;
}

.process-step {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

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

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.08),
    0 0 22px rgba(255, 255, 255, 0.4) inset;

  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  z-index: 0;
}

/* 🔥 GRADIENT LAYER (BEHIND TEXT) */
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    #6a11cb 0%,
    #7a3df0 45%,
    #2575fc 100%
  );

  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

/* 🔹 KEEP CONTENT ABOVE GRADIENT */
.process-step * {
  position: relative;
  z-index: 2;
}

/* HOVER EFFECT */
.process-step:hover {
  transform: translateY(-10px);
  box-shadow:
    0 22px 55px rgba(79, 91, 255, 0.35),
    0 0 30px rgba(120, 140, 255, 0.45);
}

.process-step:hover::before {
  opacity: 1;
}

/* 🔥 FORCE TEXT WHITE ON HOVER */
.process-step:hover,
.process-step:hover * {
  color: #ffffff !important;
}

/* STEP NUMBER */
.process-step span {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 1.3rem;
  font-weight: 700;
}
.process-section h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* TITLE */
.process-step h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
}

/* TEXT */
.process-step p {
  font-size: 0.95rem;
  line-height: 1.6;
}

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

/* Mobile */
@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Hover Box Section ===== */
.hover-box-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0b0f19;
  padding: 100px 0;
}

.hover-container {
  position: relative;
  width: 80%;
  max-width: 1000px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.hover-image {
  width: 100%;
  border-radius: 20px;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.hover-container:hover .hover-image {
  transform: scale(1.05);
  filter: brightness(40%) blur(2px);
}

/* Overlay content */
.hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  border-radius: 20px;
}

.hover-container:hover .hover-overlay {
  opacity: 1;
  visibility: visible;
}

.hover-overlay h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: #ffffff;
}

.hover-overlay ul {
  list-style: none;
  text-align: left;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.hover-overlay ul li {
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: #ddd;
}

.hover-overlay strong {
  color: #ffd700;
}

.cta-text {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: #cfd3ff;
}

.hover-overlay .btn-accent {
  background: #4f5bff;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
  margin-top: 1rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

.hover-overlay .btn-accent:hover {
  background: #3d47d1;
}

/* ============================================================
     🍎 STATS SECTION — Clean Apple Numbers
     ============================================================ */
.stats-section {
  padding-top: 80px;
}

.stats-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 40px;
  letter-spacing: -0.5px;
  color: #0b0f19;
  text-align: center;
}


.stats-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat-box h2 {
  font-size: 3rem;
  font-weight: 800;
  color: #5864ff;
}

.stat-box p {
  font-size: 1.1rem;
  color: #333;
  margin-top: 8px;
}

/* ============================================================
     🍏 RESPONSIVE
     ============================================================ */
@media (max-width: 768px) {
  section {
    padding: 80px 20px;
  }

  .about-hero h1 {
    font-size: 2.4rem;
  }

  .about-hero p {
    font-size: 1rem;
  }

  .about-card,
  .process-step {
    padding: 35px 25px;
  }
}

/* ============================================
   📱 MOBILE VIEW (iPhone + Android)
   ============================================ */
   @media (max-width: 900px) {

    .about-section,
    .what-we-do,
    .process-section,
    .stats-section {
      padding: 55px 22px;   /* reduced */
    }

  .about-section h2,
  .what-we-do h2,
  .process-section h2,
  .stats-section h3 {
    font-size: 1.9rem;
    margin-top: 30px;
  }

  .about-section p,
  .what-we-do p,
  .process-section p,
  .stats-section p {
    font-size: 1rem;
    line-height: 1.65;
  }

  /* Cards adjust beautifully */
  .about-card,
  .process-step,
  .stat-box {
    padding: 30px 20px;
  }

  .icon-circle {
    width: 55px;
    height: 55px;
  }

  .stats-grid,
  .process-grid,
  .about-grid {
    gap: 25px;
  }

  .stat-box h2 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .services-list {
    gap: 15px;
  }

  .services-list li {
    padding: 16px 18px;
    font-size: 1rem;
  }
}

/* ============================================
   📱 MOBILE IMAGE TEXT VISIBILITY FIX
   ============================================ */
   @media (max-width: 768px) {

    .image-section,
    .hero,
    .process-image {
      position: relative;
    }
  
    /* Dark overlay for mobile readability */
    .image-section::before,
    .hero::before,
    .process-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      );
      z-index: 1;
    }
  
    /* Bring text above overlay */
    .image-section *,
    .hero *,
    .process-image * {
      position: relative;
      z-index: 2;
    }
  
    /* Improve mobile text clarity */
    .image-section h1,
    .image-section h2,
    .image-section p,
    .hero h1,
    .hero h6,
    .hero p {
      color: #ffffff;
      text-shadow: 0 3px 14px rgba(0, 0, 0, 0.75);
    }
  
  }
  

/* ============================================================
   🍎 CONTACT HERO — Cinematic Glassmorphic Section
   ============================================================ */

.contact-hero {
  position: relative;
  min-height: 75vh;
  background: url("assets/contact-us.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 20px;
}

.contact-hero .overlay {
  width: 100%;
  height: 100%;
  padding: 70px 0;
  border-radius: 25px;

  background: rgba(10, 12, 25, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.35),
    0 0 120px rgba(255, 255, 255, 0.10) inset;
}

.contact-hero .container {
  transform: translateY(-60px); /* move up */
}


.contact-hero h1 {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
}

.contact-hero p {
  max-width: 850px;
  margin: 0 auto 15px;
  font-size: 1.2rem;
  line-height: 1.75;
  color: #e6e7ff;
}

/* Universal Contact Section Spacing */
.contact-section {
  padding: 110px 20px;
  text-align: center;
}

/* Titles */
.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0b0f19;
  margin-bottom: 12px;
}

/* Paragraphs */
.section-text {
  max-width: 820px;
  margin: 0 auto 35px;
  font-size: 1.15rem;
  color: #4c5060;
  line-height: 1.75;
}

/* CTA Buttons */
.bigger-btn {
  padding: 15px 36px;
  font-size: 1.15rem;
  border-radius: 14px;
}

/* STRATEGY SECTION */
.strategy {
  background: #f7f8ff;
}

/* GET IN TOUCH */
.get-in-touch .info-box {
  margin-bottom: 35px;
}

.get-in-touch p {
  font-size: 1.15rem;
  margin: 4px 0;
  color: #4b4f63;
}

/* MAP */
.map-container {
  margin-top: 25px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.soft-shadow {
  box-shadow:
    0 15px 40px rgba(0,0,0,0.12),
    0 0 25px rgba(255,255,255,0.35) inset;
}

/* WEBSITE AUDIT */
.website-audit {
  background: #f5f6ff;
}

.audit-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 45px 35px;
  
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.4);

  box-shadow:
    0 20px 45px rgba(0,0,0,0.12),
    0 0 25px rgba(255,255,255,0.35) inset;
}

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

  .section-title {
    font-size: 1.9rem;
  }

  .section-text {
    font-size: 1.05rem;
  }

  .audit-card {
    padding: 30px 20px;
  }

  .map-container iframe {
    height: 260px;
  }
}


/* Remove underline line animation from all buttons */
.btn,
.btn-accent,
.btn-outline,
button,
.btn a,
a.btn-accent,
a.btn,
a.btn-outline {
    position: relative;
}

.btn::after,
.btn-accent::after,
.btn-outline::after,
a.btn::after,
a.btn-accent::after,
a.btn-outline::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

/* ===================================================================
   🍎 PREMIUM APPLE GLASSMORPHIC CONSULTATION PAGE
=================================================================== */
body.consult-body {
  font-family: "Inter", system-ui, sans-serif;
  background: radial-gradient(circle at 20% 20%, #f4f7ff, #e8ebf9, #dfe2f5);
  margin: 0;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* MAIN GLASS CARD */
.consult-form-container {
  width: 100%;
  max-width: 650px;
  padding: 55px 45px;
  border-radius: 32px;

  /* Pure glass blur */
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);

  /* Soft Apple UI shadows */
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.12),
    0 0 90px rgba(255, 255, 255, 0.35) inset,
    0 0 1px rgba(255, 255, 255, 0.9) inset;

  border: 1px solid rgba(255, 255, 255, 0.45);
  animation: fadeUp 0.7s ease-out both;
}

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

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

/* Wrapper that holds the Google Form beautifully */
.form-wrapper {
  max-width: 850px;
  margin: 0 auto;
  padding: 60px 30px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  border-radius: 25px;
  box-shadow: 
      0 15px 40px rgba(0, 0, 0, 0.1),
      0 0 25px rgba(255, 255, 255, 0.35) inset;
}

/* Heading styles */
.form-title {
  font-size: 2.45rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
}

.form-subtitle {
  text-align: center;
  font-size: 1.15rem;
  color: #4b4f60;
  margin-bottom: 35px;
}

/* Google Form styling */
.google-form-container iframe {
  width: 100%;
  height: 1100px;      /* Adjust height depending on form content */
  border: none;
  border-radius: 18px;
  background: transparent;
}

/* Mobile fix */
@media (max-width: 768px) {
  .form-wrapper {
    padding: 35px 18px;
  }
  
  .google-form-container iframe {
    height: 1400px;
  }
}

/* BACK LINK */
.back-link {
  display: inline-block;
  margin-top: 22px;
  font-size: 1rem;
  color: #5b64ff;
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 580px) {
  .consult-form-container {
    padding: 40px 28px;
    border-radius: 24px;
  }
}