/* SHOWCASE SECTION */
        .showcase {
            padding: 120px 60px;
            background: radial-gradient(circle at left, #0e1b4d, #060014);
            color: #fff;
        }

        .showcase-container {
            max-width: 1400px;
            margin: auto;
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 80px;
            align-items: center;
        }

        /* LEFT */
        .showcase-left h2 {
            font-size: 54px;
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 30px;
        }

        .showcase-points {
            list-style: none;
            margin-bottom: 25px;
        }

        .showcase-points li {
            margin-bottom: 12px;
            font-size: 16px;
            color: #00e5ff;
        }

        .showcase-desc {
            max-width: 520px;
            opacity: 0.85;
            line-height: 1.7;
            margin-bottom: 35px;
        }

        /* VIDEO STRIP */
        .video-strip {
            display: flex;
            align-items: center;
            gap: 20px;
            background: linear-gradient(90deg, #7a2cff, #3b1a8f);
            padding: 18px 26px;
            border-radius: 6px;
            width: fit-content;
        }

        .video-thumb {
            width: 70px;
            height: 45px;
            background: #000;
            position: relative;
            border-radius: 4px;
        }

        .play-btn {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-size: 18px;
            color: #fff;
        }

        .video-text span {
            font-weight: 700;
            display: block;
        }

        .video-text small {
            opacity: 0.8;
            letter-spacing: 1px;
        }


/* img */


html, body {
  overflow-x: hidden;
  width: 100%;
}



/* Hero Rating */
.hero-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* Golden Stars */
.rating-stars {
  color: #f5c518; /* Gold */
  font-size: 26px;
  letter-spacing: 2px;
}

/* Rating Text */
.rating-text {
  font-size: 24px;
  font-weight: 500;
  opacity: 0.9;
}

/* Tablet */
@media (max-width: 992px) {
  .rating-stars {
    font-size: 15px;
  }

  .rating-text {
    font-size: 13px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .hero-rating {
    gap: 8px;
    margin-bottom: 14px;
  }

  .rating-stars {
    font-size: 14px;
  }

  .rating-text {
    font-size: 12px;
  }
}



.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
}

/* GRID slightly pulled to center */
.laptop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  transform-style: preserve-3d;
  transform: translateX(-60px);
}

/* LAPTOP BODY */
.laptop {
  width: 400px;
  height: 300px;
  background: linear-gradient(145deg, #111, #2a2a2a);
  border-radius: 18px;
  padding: 12px;
  position: relative;
  transform-style: preserve-3d;

  animation: laptopFloat3D 8s ease-in-out infinite;
  box-shadow: 0 35px 70px rgba(0,0,0,0.45);
}

/* Stagger motion */
.laptop:nth-child(1) { animation-delay: 0s; }
.laptop:nth-child(2) { animation-delay: 1.5s; }
.laptop:nth-child(3) { animation-delay: 3s; }
.laptop:nth-child(4) { animation-delay: 4.5s; }

/* SCREEN */
.laptop-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  transform: translateZ(40px);
}

/* IMAGE MOTION */
.laptop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: screenDepth 10s ease-in-out infinite;
}

/* 🔥 MAIN 3D FLOAT + ROTATE */
@keyframes laptopFloat3D {
  0% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0);
  }
  25% {
    transform: rotateX(6deg) rotateY(-6deg) translateY(-10px);
  }
  50% {
    transform: rotateX(0deg) rotateY(6deg) translateY(-18px);
  }
  75% {
    transform: rotateX(-6deg) rotateY(0deg) translateY(-10px);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg) translateY(0);
  }
}

/* SCREEN DEPTH MOTION */
@keyframes screenDepth {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-6px); }
  100% { transform: scale(1) translateY(0); }
}

/* 🖱️ HOVER – interactive 3D tilt */
.laptop:hover {
  animation-play-state: paused;
  transform: rotateX(12deg) rotateY(-14deg) scale(1.06);
  transition: transform 0.6s ease;
}


/* ===========================
   📱 MOBILE RESPONSIVE (ANIMATION ON)
=========================== */
@media (max-width: 992px) {

  .hero-right {
    padding: 40px 0;
    perspective: 800px;
  }

  .laptop-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    transform: none;
  }

  .laptop {
    width: 100%;
    max-width: 360px;   /* 🔥 SIZE INCREASE */
    height: 260px;
    margin: 0 auto;

    /* 🔥 LIGHT ANIMATION */
    animation: mobileFloat 6s ease-in-out infinite;
  }

  .laptop-screen {
    transform: translateZ(20px);
  }

  .laptop-screen img {
    animation: mobileScreenDepth 6s ease-in-out infinite;
  }

  .laptop:hover {
    transform: none;
  }
}

/* 📱 SMALL MOBILE */
@media (max-width: 576px) {

  .laptop {
    max-width: 330px;   /* 🔥 still big */
    height: 240px;
  }
}

/* 💻 LAPTOP FIX (1366px – 1440px) */
@media (max-width: 1440px) and (min-width: 993px) {

  .hero-right{
    align-items: center;
    justify-content: center;
  }

  .laptop-grid{
    transform: none;          /* 🔥 main fix */
    gap: 28px;
  }

  .laptop{
    width: 340px;             /* 🔥 scale down */
    height: 250px;
  }

  /* Reduce vertical jump from animation */
  @keyframes laptopFloat3D {
    0%   { transform: rotateX(0) rotateY(0) translateY(0); }
    50%  { transform: rotateX(4deg) rotateY(-4deg) translateY(-8px); }
    100% { transform: rotateX(0) rotateY(0) translateY(0); }
  }
}









/* IMAGE MOTION inside laptop screen */
.laptop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Main depth + zoom animation */
  animation: screenDepth 5s ease-in-out infinite;
}

/* SCREEN DEPTH MOTION */
@keyframes screenDepth {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.08) translateY(-6px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* MOBILE VERSION */
@media (max-width: 992px) {
  .laptop-screen img {
    animation: mobileScreenDepth 6s ease-in-out infinite;
  }
}

@keyframes mobileScreenDepth {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.04) translateY(-4px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}







/* 2section mockup */
        /* RIGHT IMAGES */
        .showcase-right {
            position: relative;
            height: 420px;
        }

        .mockup {
            position: absolute;
            width: 260px;
            height: 340px;
            background: linear-gradient(135deg, #1e2b6b, #3b1a8f);
            border-radius: 10px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        .mockup-1 {
            top: 0;
            right: 40px;
            transform: rotate(6deg);
        }

        .mockup-2 {
            top: 60px;
            right: 200px;
            transform: rotate(-4deg);
        }

        .mockup-3 {
            top: 140px;
            right: 80px;
            transform: rotate(3deg);
        }

 		.mockup-4 {
            top: 190px;
            right: -150px;
            transform: rotate(12deg);
        }
        /* RESPONSIVE */
        @media (max-width: 900px) {
            .showcase-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .showcase-right {
                height: 360px;
            }

            .mockup {
                left: 50%;
                transform: translateX(-50%);
            }
        }

/* img */
/* RIGHT SIDE CONTAINER */
/* ==============================
   SHOWCASE IMAGE HOVER (3 IMAGES)
   ============================== */

.showcase-right {
  position: relative;
  width: 520px;
  height: 480px;
  margin: auto;
}

/* IMAGE CARD BASE */
.mockup {
  position: absolute;
  width: 220px;
  height: 300px;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.4s ease;
}

.mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}







/* ==============================
   DEFAULT DESKTOP POSITION
   ============================== */

.mockup-1 {
  top: 40px;
  left: 0;
  transform: rotate(-6deg) scale(0.95);
  z-index: 1;
}

.mockup-2 {
  top: 90px;
  left: 150px;
  transform: scale(1.05);
  z-index: 3;
}

.mockup-3 {
  top: 200px;
  left: 300px;
  transform: rotate(6deg) scale(0.95);
  z-index: 1;
}

/* ==============================
   HOVER EFFECT (JETON STYLE)
   ============================== */

.showcase-right:hover .mockup-1 {
  transform: translate(-40px, -40px) rotate(-10deg) scale(1);
}

.showcase-right:hover .mockup-2 {
  transform: translateY(-80px) scale(1.18);
  box-shadow: 0 45px 90px rgba(0,0,0,0.35);
}

.showcase-right:hover .mockup-3 {
  transform: translate(40px, 40px) rotate(10deg) scale(1);
}
.showcase-right:hover .mockup-4 {
  transform: translate(40px, 40px) rotate(15deg) scale(1);
}

/* ==============================
   MOBILE RESPONSIVE (NO HOVER)
   ============================== */

@media (max-width: 900px) {
  .showcase-right {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .mockup {
    position: relative;
    width: 90%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 3 / 4;
    transform: none !important;
  }
}




@media (max-width: 900px) {

  /* 🔥 Kill desktop grid */
  .showcase-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  /* LEFT CONTENT FULL WIDTH */
  .showcase-left {
    width: 100%;
    text-align: center;
  }

  /* 🔥 RIGHT IMAGES CENTER FIX */
  .showcase-right {
    width: 100% !important;
    max-width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
  }

  /* 🔥 HARD RESET MOCKUPS */
  .mockup {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: 100%;
    max-width: 420px;
    height:auto;
    aspect-ratio: 3 / 4;

    margin: 0 auto 24px auto; /* ✅ THIS CENTERS */
  }

  .mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  /* REMOVE DESKTOP TRANSFORMS */
  .mockup-1,
  .mockup-2,
  .mockup-3 {
    transform: none !important;
  }
}






/* works */

    .work-section {
            padding: 120px 60px;
            background: radial-gradient(circle at center, #1ea6fa, #050018);
            color: #fff;
            text-align: center;
        }

        .work-container {
            max-width: 1400px;
            margin: auto;
        }

        .work-tag {
            font-size: 13px;
            letter-spacing: 3px;
            opacity: 0.8;
        }

        .work-title {
            font-size: 52px;
            font-weight: 800;
            margin: 20px 0;
        }

        .work-subtitle {
            max-width: 720px;
            margin: auto;
            opacity: 0.85;
            line-height: 1.7;
        }

        /* TABS */
        .work-tabs {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 60px 0 40px;
        }

        .tab {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            padding: 18px 28px;
            border-radius: 6px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: all 0.3s;
        }

        .tab span {
            font-size: 14px;
            letter-spacing: 1px;
        }

        .tab.active,
        .tab:hover {
            background: #fff;
            color: #0b4c74;
        }

        /* CONTENT */
        .tab-content {
            display: none;
        }

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

        /* GRID */
        .work-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }

        .work-card {
            height: 480px;
            background: linear-gradient(135deg, #1b6fa8, #5a2fd9);
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-weight: 700;
            font-size: 18px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        }

        /* MOBILE */
        @media (max-width: 900px) {
            .work-title {
                font-size: 36px;
            }

            .work-tabs {
                flex-wrap: wrap;
            }

            .work-grid {
                grid-template-columns: 1fr;
            }
        }
/* img */

/* GRID */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ✅ desktop: 2 images per row */
  gap: 40px;
}

/* CARD */
.work-card {
  position: relative;
  height: 480px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

/* IMAGE */
.work-card img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s ease;
}

.work-card:hover img {
  transform: scale(1.08);
}

/* OVERLAY TEXT */
.work-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.2),
    transparent
  );
  display: flex;
  align-items: flex-end;
  padding: 22px;
}

.work-info h4 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* 📱 MOBILE RESPONSIVE */
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr; /* ✅ mobile: 1 image per row */
  }

  .work-card {
    height: 260px;
    width: 100%;
  }
}






         .clients-section {
            background: linear-gradient(120deg, #062a4d, #2b0f5f);
            padding: 80px 0;
            overflow: hidden;
            color: #fff;
            text-align: center;
            font-family: 'Poppins', sans-serif;
        }

        /* Header */
        .clients-tag {
            display: block;
            font-size: 13px;
            letter-spacing: 2px;
            opacity: 0.7;
            margin-bottom: 10px;
        }

        .clients-title {
            font-size: 42px;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .clients-subtitle {
            font-size: 18px;
            opacity: 0.9;
            margin-bottom: 60px;
        }

        /* Rows */
        .logo-row {
            width: 100%;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .logo-track {
            display: flex;
            gap: 30px;
            width: max-content;
        }

        /* Cards */
        .logo-card {
            min-width: 220px;
            height: 110px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            white-space: nowrap;
            backdrop-filter: blur(6px);
        }

        /* Animations */
        .row-left .logo-track {
            animation: moveLeft 45s linear infinite;
        }

        .row-right .logo-track {
            animation: moveRight 45s linear infinite;
        }

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

            to {
                transform: translateX(-50%);
            }
        }

        @keyframes moveRight {
            from {
                transform: translateX(-50%);
            }

            to {
                transform: translateX(0);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .clients-title {
                font-size: 28px;
            }

            .logo-card {
                min-width: 180px;
                height: 90px;
                font-size: 16px;
            }
        }

        /* ===== SECTION ===== */
        .expertise-section {
            background: linear-gradient(120deg, #061b3a, #2b0f5f);
            padding: 120px 0;
            color: #fff;
            font-family: 'Poppins', sans-serif;
            overflow: hidden;
        }

        .expertise-container {
            max-width: 1500px;
            margin: auto;
            display: flex;
            gap: 70px;
        }

        /* ===== LEFT SIDE ===== */
        .expertise-left {
            width: 100%;
            position: sticky;
            top: 120px;
        }

        .expertise-tag {
            color: #38bdf8;
            font-size: 13px;
            letter-spacing: 2px;
            font-weight: 600;
        }

        .expertise-left h2 {
            font-size: 42px;
            font-weight: 800;
            margin: 20px 0;
        }

        .expertise-left p {
            font-size: 16px;
            line-height: 1.7;
            opacity: 0.9;
        }



.expertise-left img {
  width: 100%;
  max-width: 420px;
  margin-top: 35px;
  border-radius: 18px;
  display: block;

  box-shadow: 
    0 25px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.08);

  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
@media (max-width: 768px) {
  .expertise-left img {
    max-width: 100%;
    margin-top: 25px;
    border-radius: 14px;
  }
}
        /* ===== RIGHT SIDE ===== */
        .expertise-right {
            width: 100%;
            max-height: 740px;
            overflow-y: auto;
            padding-right: 95px;
            position: relative;
        }

        /* ===== CARD ===== */
        .expertise-card {
            position: relative;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 32px;
            margin-bottom: 30px;
            width: 700px;
            overflow: hidden;
            transition: all 0.55s cubic-bezier(.4, 0, .2, 1);
        }

        /* ICON */
        .card-icon {
            font-size: 34px;
            margin-bottom: 14px;
        }

        /* TEXT */
        .expertise-card h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .expertise-card p {
            font-size: 15px;
            line-height: 1.6;
            max-width: 75%;
        }

        /* ===== IMAGE ===== */
        .expertise-card img {
            position: absolute;
            right: 30px;
            bottom: 150px;
            width: 180px;
            opacity: 0;
            transform: scale(0.9);
            filter: grayscale(100%);
            transition: all 0.5s ease;
            z-index: 2;
        }

        /* ===== GRADIENT OVERLAY ===== */
        .expertise-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg,
                    rgba(56, 189, 248, 0.35),
                    rgba(139, 92, 246, 0.35));
            opacity: 0;
            transition: 0.5s ease;
            z-index: 1;
        }

        /* ===== HOVER EFFECT ===== */
        .expertise-card:hover {
            background: #ffffff;
            color: #061b3a;
            transform: translateX(14px);
            margin-right: -90px;
            /* 👉 right end full stretch */
            padding-right: 2px;
            /* image space */
            box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
        }

        .expertise-card:hover::after {
            opacity: 1;
        }

        .expertise-card:hover img {
            opacity: 1;
            transform: scale(1);
            filter: grayscale(0) saturate(1.4);
        }

        /* ===== SCROLLBAR ===== */
        .expertise-right::-webkit-scrollbar {
            width: 6px;
        }

        .expertise-right::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }

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

    /* SECTION */
    .expertise-section {
        padding: 70px 20px;
    }

    /* CONTAINER */
    .expertise-container {
        flex-direction: column;
        gap: 40px;
    }

    /* LEFT SIDE */
    .expertise-left {
        position: static;
        text-align: left;
    }

    .expertise-left h2 {
        font-size: 32px;
    }

    /* RIGHT SIDE */
    .expertise-right {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    /* CARD */
    .expertise-card {
        width: 100%;
        padding: 24px;
        margin-bottom: 24px;
        transform: none !important;
    }

    /* DISABLE HOVER ANIMATION */
    .expertise-card:hover {
        transform: none;
        margin-right: 0;
        padding-right: 24px;
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        box-shadow: none;
    }

    /* TEXT */
    .expertise-card h3 {
        font-size: 20px;
    }

    .expertise-card p {
        max-width: 100%;
        font-size: 14px;
    }

    /* IMAGE */
    .expertise-card img {
        position: static;
        display: block;
        width: 200px;
        margin: 20px auto 0;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

        

        

        

        


        /* ===== PROCESS SECTION ===== */
        .process-section {
            width: 100%;
            padding: 140px 0;
            background: linear-gradient(90deg, #052a4f 0%, #3a176e 100%);
            font-family: 'Poppins', sans-serif;
            color: #ffffff;
        }

        .process-container {
            width: 90%;
            max-width: 1400px;
            margin: auto;
        }

        /* HEADER */
        .process-header {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 120px;
        }

        .process-header h2 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .process-header p {
            font-size: 16px;
            line-height: 1.7;
            opacity: 0.9;
        }

        .process-header span {
            color: #38bdf8;
        }

        /* STEPS GRID */
        .process-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 70px 60px;
            position: relative;
        }

        /* STEP CARD */
        .process-step {
            position: relative;
        }

        .process-step img {
            width: 70px;
            margin-bottom: 30px;
        }

        .process-step h3 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .process-step p {
            font-size: 14px;
            line-height: 1.7;
            opacity: 0.9;
            margin-bottom: 25px;
        }

        .process-step ul {
            list-style: none;
            padding: 0;
        }

        .process-step ul li {
            font-size: 14px;
            margin-bottom: 12px;
            padding-left: 18px;
            position: relative;
        }

        .process-step ul li::before {
            content: "›";
            position: absolute;
            left: 0;
            color: #38bdf8;
            font-weight: bold;
        }

        /* STEP NUMBER */
        .step-number {
            position: absolute;
            bottom: -30px;
            right: 0;
            font-size: 110px;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.05);
        }

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

        @media (max-width: 700px) {
            .process-steps {
                grid-template-columns: 1fr;
            }

            .step-number {
                font-size: 80px;
            }
        }





.pricing-section {
            position: relative;
            padding: 140px 0 120px;
            background: url("/images/pbg.jpg") center/cover no-repeat;
            color: #fff;
        }

        .pricing-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                    rgba(3, 24, 53, 0.95),
                    rgba(45, 22, 90, 0.95));
        }

        .pricing-container {
            position: relative;
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
            text-align: center;
        }

        .pricing-container h2 {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .pricing-container h2 span {
            color: #38bdf8;
        }

        .pricing-intro {
            max-width: 820px;
            margin: 0 auto 18px;
            font-size: 15px;
            line-height: 1.7;
            opacity: 0.95;
        }

        .pricing-btn {
            display: inline-block;
            margin: 35px 0 70px;
            padding: 14px 32px;
            border: 1px solid #38bdf8;
            color: #38bdf8;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s ease;
        }

        .pricing-btn:hover {
            background: #38bdf8;
            color: #001b33;
        }

        /* GRID */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }

        .pricing-box {
            position: relative;
            padding: 0 25px;
        }

        .pricing-box::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            height: 100%;
            background: rgba(255, 255, 255, 0.15);
        }

        .pricing-box h4 {
            font-size: 18px;
            margin-bottom: 12px;
            color: #fff;
        }

        .pricing-box p {
            font-size: 14px;
            line-height: 1.7;
            opacity: 0.9;
        }

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

        @media (max-width: 576px) {
            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-box::before {
                display: none;
            }
        }



  /* locations   */
        
 /* .locations-section {
            padding: 120px 0;
            background: linear-gradient(90deg, #4b8df8, #7a3db8);
            color: #fff;
        }

        .locations-container {
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
            text-align: center;
        }

        .locations-container h2 {
            font-size: 36px;
            margin-bottom: 10px;
        }

        .locations-subtitle {
            max-width: 700px;
            margin: 0 auto 60px;
            font-size: 15px;
            opacity: 0.95;
        } */

/* GRID */
        /* .locations-grid {
            display: grid;
            grid-template-columns: 2fr repeat(3, 1fr);
            gap: 20px;
            align-items: stretch;
        } */

/* MAIN CARD */
        /* .location-card {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
                url("miami.jpg") center/cover no-repeat;
            padding: 40px;
            border-radius: 8px;
            text-align: left;
            position: relative;
        }

        .location-number {
            font-size: 64px;
            font-weight: 800;
            opacity: 0.15;
        }

        .location-card h3 {
            font-size: 24px;
            margin: 10px 0;
        }

        .location-card p {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .location-card h5 {
            font-size: 13px;
            margin-bottom: 6px;
            color: #38bdf8;
        }

        .clients {
            font-size: 13px;
            opacity: 0.9;
        }

        .location-footer {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        .location-footer a {
            color: #38bdf8;
            text-decoration: none;
        } */

/* MINI CARDS */
        /* .location-mini {
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            text-align: left;
            position: relative;
        }

        .location-mini span {
            font-size: 36px;
            font-weight: 700;
            opacity: 0.6;
        }

        .location-mini h4 {
            font-size: 18px;
        } */

/* Background images */
        /* .location-mini:nth-child(2) {
            background-image: url("chicago.jpg");
        }

        .location-mini:nth-child(3) {
            background-image: url("newyork.jpg");
        }

        .location-mini:nth-child(4) {
            background-image: url("california.jpg");
        } */

/* RESPONSIVE */
        /* @media (max-width: 992px) {
            .locations-grid {
                grid-template-columns: 1fr;
            }

            .location-footer {
                flex-direction: column;
                gap: 8px;
            }
        } */




 .faq-section {
            padding: 120px 20px;
            background: #ffffff;
        }

        .faq-container {
            max-width: 900px;
            margin: auto;
        }

        .faq-container h2 {
            text-align: center;
            font-size: 34px;
            font-weight: 700;
            margin-bottom: 60px;
            color: #0b1b3f;
        }

        /* ITEM */
        .faq-item {
            border-bottom: 1px solid #dbeafe;
        }

        /* QUESTION */
        .faq-question {
            width: 100%;
            background: none;
            border: none;
            padding: 22px 0;
            font-size: 18px;
            font-weight: 500;
            color: #0b1b3f;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }

        .faq-question span {
            color: #2563eb;
            font-weight: 600;
            margin-right: 10px;
        }

        /* ARROW */
        .arrow {
            width: 8px;
            height: 8px;
            border-right: 2px solid #2563eb;
            border-bottom: 2px solid #2563eb;
            transform: rotate(45deg);
            transition: transform 0.3s ease;
        }

        /* ANSWER */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }

        .faq-answer p {
            padding: 0 0 20px;
            font-size: 15px;
            line-height: 1.6;
            color: #334155;
        }

        /* ACTIVE STATE */
        .faq-item.active .faq-answer {
            max-height: 200px;
        }

        .faq-item.active .arrow {
            transform: rotate(-135deg);
        }

        /* RESPONSIVE */
        @media (max-width: 600px) {
            .faq-question {
                font-size: 16px;
            }
        }



        /* VIDEO STRIP */
.video-strip{
  display:flex;
  align-items:center;
  gap:14px;
  background:#6b3df4;
  padding:14px 18px;
  border-radius:10px;
  width:max-content;
  cursor:pointer;
}

.video-thumb{
  width:42px;
  height:42px;
  background:#000;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.video-text span{
  color:#fff;
  font-weight:600;
}
.video-text small{
  display:block;
  color:#ddd;
  font-size:12px;
}

/* MODAL */
.video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.video-modal.active{
  display:flex;
}

.video-box{
  width:80%;
  max-width:900px;
  position:relative;
}

/* 16:9 MAGIC (NO SQUARE ISSUE) */
.video-wrapper{
  position:relative;
  padding-top:56.25%; /* 16:9 */
  background:#000;
  border-radius:14px;
  overflow:hidden;
}

.video-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}

/* CLOSE BUTTON */
.close-video{
  position:absolute;
  top:-40px;
  right:0;
  font-size:28px;
  color:#fff;
  cursor:pointer;
}