@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');


  /* Base Global Styles Start */
  * {
      font-family: 'Zalando Sans Expanded', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }


  body {
      background-color: #ffffff;
      color: #ffffff;
      overflow-x: hidden;
  }



  .black {
      color: #000 !important;
  }


  body {
      /* Primary font 'Roboto' rakha hai, backup ke liye sans-serif */
      /* font-family: 'Roboto', sans-serif; */
  }

  h1,
  h2,
  h3 {
      /* Heading ke liye 'Zalando Sans Expanded' use kar sakte hain */
      font-family: 'Zalando Sans Expanded', sans-serif;
      font-weight: 700;
  }






  .btn-red {
      background-color: #ec1e24 !important;
  }
























  .border-none {
      border: none !important;
  }



  .blog-card-border {
      background-color: #00000014;
      padding: 10px;
      border-radius: 50px;
      border: 0.3px solid #0000001a;
      display: flex;
      overflow: hidden;
      margin-bottom: 20px;
  }


  .h-two {
      font-size: clamp(38px, 6vw, 72px);
      font-weight: 600;
      line-height: 0.95;
      margin-bottom: 70px;
      color: #000;
      letter-spacing: -1.5px;
  }

  /* all title reveal css--------- */


  /* 1. Default State: Jab tak JS process na kar le, text ko bilkul gayab rakho */
  .reveal-text:not(.processed) {
      opacity: 0;
      visibility: hidden;
  }

  /* 2. Processed State: JS chalne ke baad container show ho jaye */
  .reveal-text.processed {
      opacity: 1;
      visibility: visible !important;
  }

  /* 3. Word State: Har lafz shuru mein invisible aur blurred rahega */
  .reveal-word {
      display: inline-block;
      opacity: 0;
      filter: blur(12px);
      transform: translateY(15px);
      white-space: pre;
      /* Spaces maintain karne ke liye */
      transition: none !important;
      will-change: opacity, filter, transform;
      /* Performance ke liye behtar hai */
  }

  /* 4. Animation Trigger: Jab scroll par 'start-animation' class aaye */
  .start-animation .reveal-word {
      animation: blurReveal 0.8s ease forwards;
  }

  /* 5. Keyframes */
  @keyframes blurReveal {
      0% {
          filter: blur(12px);
          opacity: 0;
          transform: translateY(15px);
      }

      100% {
          filter: blur(0px);
          opacity: 1;
          transform: translateY(0px);
      }
  }

  /* Highlight style */
  .highlight {
      color: #ec1e24;
      font-weight: bold;
      display: inline-block;
  }






  /* all title reveal css--------- */





  /* all box reveal page load css ------------- */


  /* Shuruat ki halat: niche aur transparent */
  /* Base Style - Sab elements shuru mein niche aur transparent honge */
  .reveal-box,
  .reveal-box2,
  .reveal-box3,
  .reveal-box4 {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease-out;
  }

  /* Jab active class lagegi to apni jagah par ayenge */
  .reveal-box.active,
  .reveal-box2.active,
  .reveal-box3.active,
  .reveal-box4.active {
      opacity: 1;
      transform: translateY(0);
  }

  /* Timing Control (Delays) */
  .reveal-box2 {
      transition-delay: 0.3s;
  }

  /* Thoda ruk kar */
  .reveal-box3 {
      transition-delay: 0.6s;
  }

  /* Us se thoda aur ruk kar */
  .reveal-box4 {
      transition-delay: 0.9s;
  }

  /* Sab se aakhir mein */

  /* all box reveal page load css ------------- */









  /* scale box animation css ------------------  */

  /* Animation Definition */
  @keyframes boxScaleIn {
      0% {
          opacity: 0;
          transform: scale(0.7);
          /* Chota size */
      }

      100% {
          opacity: 1;
          transform: scale(1);
          /* Asli size */
      }
  }

  /* Initial State: Elements hidden and prepared */
  .box-scale,
  .box-scale2,
  .box-scale3,
  .box-scale4 {
      opacity: 0;
      display: inline-block;
      /* Scale effect ke liye zaroori hai */
      width: auto;
  }

  /* Jab JS class add karega tab animation chalay gi */
  .animate-active {
      animation: boxScaleIn 0.6s ease-out forwards;
  }

  /* Staggered Delays */
  .box-scale2.animate-active {
      animation-delay: 1s;
  }

  .box-scale3.animate-active {
      animation-delay: 2s;
  }

  .box-scale4.animate-active {
      animation-delay: 3s;
  }

  /* scale box animation css ------------------  */





  /* ------------------ header css ------------------------------- */


  /* --- Page Load Animation for Header --- */
  @keyframes slideDown {
      from {
          transform: translateY(-100%);
          opacity: 0;
      }

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

  header {
      animation: slideDown 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      transform: translateY(-100%);
  }

  /* --- 1. Universal Text Slide Animation --- */
  .slide-up-container {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      overflow: hidden;
      height: 1.4em;
      /* Height adjusted for 14px */
      line-height: 1.4em;
  }

  .slide-up-text {
      display: block;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      font-size: 16px !important;
      /* Fixed Font Size */
      text-transform: capitalize;
      /* Capitalize text */
      letter-spacing: 1px;
      padding: 0 4px;
      /* Slight horizontal padding for breathing room */
  }

  .hover-state {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
  }

  /* Trigger for all slide containers on parent hover */
  .nav-item:hover .slide-up-text,
  .btn-slide:hover .slide-up-text,
  .mega-link:hover .slide-up-text {
      transform: translateY(-100%);
  }

  /* --- 2. Mega Menu Design --- */
  .mega-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      width: 90vw;
      max-width: 900px;
      padding-top: 25px;
      pointer-events: none;
  }

  .mega-trigger:hover .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
  }

  /* --- 3. Mobile Menu Reveal Animations --- */
  #mobileMenu {
      transition: transform 0.9s cubic-bezier(0.85, 0, 0.15, 1);
  }

  .btn-slide {
      padding-top: 1.2rem !important;
      padding-bottom: 1.2rem !important;
  }

  .m-header {
      transform: translateY(-40px);
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .m-link {
      transform: translateY(50px);
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .m-footer {
      transform: translateY(40px);
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #mobileMenu.active .m-header {
      transform: translateY(0);
      opacity: 1;
      transition-delay: 0.4s;
  }

  #mobileMenu.active .m-footer {
      transform: translateY(0);
      opacity: 1;
      transition-delay: 0.9s;
  }

  #mobileMenu.active .l-1 {
      transition-delay: 0.5s;
      transform: translateY(0);
      opacity: 1;
  }

  #mobileMenu.active .l-2 {
      transition-delay: 0.55s;
      transform: translateY(0);
      opacity: 1;
  }

  #mobileMenu.active .l-3 {
      transition-delay: 0.6s;
      transform: translateY(0);
      opacity: 1;
  }

  #mobileMenu.active .l-4 {
      transition-delay: 0.65s;
      transform: translateY(0);
      opacity: 1;
  }

  #mobileMenu.active .l-5 {
      transition-delay: 0.7s;
      transform: translateY(0);
      opacity: 1;
  }


  /* -------------------------------- header css ------------------------------- */




  .container-custom {
      max-width: 1800px !important;
      margin: 0 auto;
      padding: 0 20px;
      width: 100%;
  }




  @media(max-width: 1024px) {
      .container-custom {
  
    padding: 0 0px !important;
    
}
  }

  
  @media(max-width: 767px) {
      .container-custom {
  
    padding: 0 15px !important;
    
       }
  }


  /* -------------------------------  hero sectin css ---------------------------------- */




  /* Full Screen Video Section Start */


  /* Hero Section Container */
  .hero-section {
      position: relative;
      /* Video ko iske andar rakhne ke liye zaroori hai */
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      /* Mobile browser address bar fix */
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px;
      overflow: hidden;
      background-color: #000;
      /* Video load hone tak black dikhega */
  }

  /* Video Container: Ab ye sirf Hero section ko cover karega */
  .video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      /* Content ke niche */
      pointer-events: none;
      /* Taake buttons click ho sakein */
  }

  .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Mobile par video stretch nahi hogi, crop hogi */
      opacity: 0.5;
  }

  /* Content wrapper taake content video ke upar dikhe */
  .heading-row,
  .split-row {
      position: relative;
      z-index: 0;
  }

  /* Mobile Fixes */
  @media (max-width: 768px) {
      .hero-section {
          padding: 20px;
          justify-content: center;
          /* Mobile par beech mein behtar lagta hai */
      }

      .hero-title {
          font-size: 18vw;
          margin-top: 100px;
      }

      .heading-row {
          margin-bottom: 40px;
      }
  }

  /* Full Screen Video Section End */

  /* Hero Layout Section Start */
  /* .hero-section {
            height: 100vh; height: 100dvh;
            display: flex; flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            position: relative;
        } */
  /* Hero Layout Section End */

  /* Heading Row Styles Start */
  .heading-row {
      margin-bottom: 150px;
  }

  .hero-title {
      font-size: 12vw;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 0.8;
      letter-spacing: -0.05em;
      opacity: 0;
  }

  .hero-title span {
      font-size: 6vw;
      vertical-align: top;
  }

  .sub-tag {
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 0.3em;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 20px;
  }

  /* Heading Row Styles End */

  /* Split Row Styles Start */
  .split-row {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      align-items: flex-end;
  }

  /* Split Row Styles End */

  /* Left Side Content Styles Start */
  .left-content {
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding-bottom: 20px;
  }

  .hero-desc {
      font-size: 20px;
      line-height: 1.3;
      max-width: 450px;
      opacity: 0;
  }

  .hero-desc span {
      color: rgba(255, 255, 255, 0.4);
      margin-right: 10px;
  }

  /* Left Side Content Styles End */
  /* --- Updated Framer Style Buttons (Image Style) --- */
  /* --- Updated Framer Style Buttons (Image Style) --- */

  .btn-group {
      display: flex;
      gap: 16px;
      align-items: center;
  }

  .framer-btn {
      cursor: pointer;
      display: flex;
      position: relative;
      /* Shadows ko poora dikhane ke liye overflow visible kiya */
      overflow: visible !important;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 8px 8px 8px 24px;
      /* Padding adjust ki taake circle fit lage */
      border-radius: 100px;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      width: max-content;

      /* Image jaisa Red Gradient aur Border */
      background: linear-gradient(180deg, #ec1e24 0%, #ec1e24 100%) !important;
      /* border: 1px solid rgba(255, 255, 255, 0.3) !important;

   
    box-shadow: 
        inset 0px 4px 4px 0px rgba(255, 255, 255, 0.3), 
        0px 68px 44px 4px rgba(234, 0, 0, 0.06), 
        0px 10px 48px 5px rgba(234, 0, 0, 0.08), 
        0px 0px 0px 0px rgba(234, 0, 0, 0.4),
        0 0px 0px rgba(205, 29, 12, 0.5) !important; */

      border: 1px solid rgb(255 255 255 / 38%) !important;
      box-shadow: inset 0px 4px 4px 0px rgba(255, 255, 255, 0.3),
          0px 2px 0px 0px rgb(255 7 7),
          0px 10px 48px 5px rgba(234, 0, 0, 0.08),
          0px 0px 0px 0px rgba(234, 0, 0, 0.4),
          0 0px 0px rgba(205, 29, 12, 0.5) !important;
  }

  .btn-primary {
      color: #ffffff !important;
      font-family: 'Zalando Sans Expanded', sans-serif;
      letter-spacing: 0.5px;
      text-transform: uppercase;

  }

  .btn-secondary {
      color: #000000 !important;
      font-family: 'Zalando Sans Expanded', sans-serif;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
      /* border: 1px solid rgb(235 83 83 / 62%) !important; */
      border-top: 0px solid rgba(255, 255, 255, 0.62) !important;
      border-left: 1px solid rgb(235 83 83 / 62%) !important;
      border-right: 1px solid rgb(235 83 83 / 62%) !important;
      border-bottom: 1px solid rgb(235 83 83 / 62%) !important;
      box-shadow: inset 0px 4px 4px 0px rgba(255, 255, 255, 0.3),
       0px 2px 0px 0px rgb(255 255 255), 
       0px 10px 48px 5px rgba(234, 0, 0, 0.08), 
       0px 0px 0px 0px rgba(234, 0, 0, 0.4),
        0 0px 0px rgba(205, 29, 12, 0.5) !important;
  }

  .btn-secondary .arrow-circ {
      background: #000 !important;
      color: #fff !important;
  }

  /* Hover par extra lift aur glow */
  .framer-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.1);

  }

  /* --- Aapki Original Animations (Keep as is) --- */

  .framer-text-stack {
      position: relative;
      height: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .framer-text-stack span {
      display: block;
      font-size: 16px;
      font-weight: 700;
      /* Thoda bold image ki tarah */
      transition: transform 0.5s cubic-bezier(0.6, 0.01, 0.05, 0.95);
      white-space: nowrap;
  }

  .framer-btn:hover .framer-text-stack span {
      transform: translateY(-100%);
  }

  .arrow-circ {
      width: 36px;
      /* Image size ke mutabiq thoda chota */
      height: 36px;
      background: #ffffff !important;
      /* Image mein white circle hai */
      color: #000000 !important;
      /* Arrow black hai */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      transition: 0.3s ease;
      transform: rotate(320deg);
  }

  .arr {
      position: absolute;
      font-size: 18px;
      transition: 0.5s cubic-bezier(0.6, 0.01, 0.05, 0.95);
  }

  .arr-1 {
      transform: translate(0, 0);
  }

  .arr-2 {
      transform: translate(-30px, 30px);
  }

  .framer-btn:hover .arr-1 {
      transform: translate(30px, -30px);
  }

  .framer-btn:hover .arr-2 {
      transform: translate(0, 0);
  }

  /* Primary Button Dot */
  .framer-dot {
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 100%;
      margin-right: 8px;
      transition: transform 0.3s ease;
  }

  .framer-btn:hover .framer-dot {
      transform: scale(1.3);
  }











  /* Right Side Carousel Styles Start */
  .carousel-container {
      width: 100%;
      overflow: hidden;
      padding-bottom: 20px;
      -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  }

  .card-track {
      display: flex;
      gap: 20px;
      opacity: 0;
  }

  .card {
      min-width: calc(33.33% - 50px);
      aspect-ratio: 16/10;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      flex-shrink: 0;
      width: 240px !important;
  }

  .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.6;
  }

  @media (max-width: 768px) {

      .card {
          min-width: calc(33.33% - 40px);

          width: 300px !important;
      }

      .heading-row {
          margin-bottom: 90px;
      }


      .hero-section {
          padding: 20px;
          justify-content: end;
      }

      .split-row {
          grid-template-columns: 1fr;
          gap: 15px;
      }

      .hero-title {
          font-size: 18vw;
      }

      /* .card { min-width: calc(40% - 10px); } */
      .card-track {
          gap: 6px;
      }
  }

  /* Right Side Carousel Styles End */



  .mar-right-btn {
      margin-right: 10px !important;
  }


  /* Mobile Fixes with !important */
  @media (max-width: 768px) {
      /* Pure section ko screen ke andar lock karne ke liye */


      /* Content ko right side jane se rokne ke liye */
      .split-row {
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
          width: 100% !important;
          gap: 20px !important;
      }

      .left-content {
          width: 100% !important;
          max-width: 100% !important;
          padding-bottom: 0 !important;
      }

      /* Description text wrap fix */
      .hero-desc {
          font-size: 18px !important;
          max-width: 100% !important;
          line-height: 1.4 !important;
          width: 100% !important;
      }

      /* Buttons Group alignment */
      .btn-group {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 10px !important;
          /* Dono buttons ke darmiyan gap kam kiya */
          width: 100% !important;
          opacity: 1 !important;
          /* GSAP agar delay kare to ye show karega */
      }

      /* Button ke andar ka gap aur padding fix */
      .framer-btn {
          padding: 16px 20px 16px 20px !important;
          gap: 8px !important;
          /* Text aur Dot/Arrow ka gap kam kiya */
          white-space: nowrap !important;
      }

      .hide-arrow-btn {
          padding: 18px 18px 18px 20px !important;
      }

      /* Dot aur Text ka gap mazeed kam karne ke liye */
      .framer-dot {
          margin-right: 0px !important;
          width: 6px !important;
          height: 6px !important;
      }

      .framer-text-stack span {
          font-size: 14px !important;
          /* Mobile par buttons screen se bahar na jayen */
      }

      /* Carousel fix taake wo background me rahe aur scroll na kare */
      .carousel-container {
          width: 100% !important;
          margin-top: 20px !important;
      }


  }




  /* -------------------------------  hero sectin css ---------------------------------- */










  /* --------------------------   project section css start  ---------------------------- */

  /* Font setup - Agar aapke paas local file hai to @font-face yahan add karein */










  .work-section {
      max-width: 1800px;
      margin: 80px auto;
      padding: 88px 110px;
      background-color: #000000 ;
      border-radius: 60px;
      font-family: 'Zalando Sans Expanded', sans-serif;
      /* Poori section par font apply */
  }

  /* Header */
  .work-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 50px;
  }

  .main-title {
      font-family: 'Zalando Sans Expanded', sans-serif;
      font-size: clamp(40px, 8vw, 84px);
      line-height: 0.9;
      font-weight: 700;
      margin: 0;
      color: #fff !important;
      letter-spacing: -2px;
      text-transform: uppercase;
  
  }

  /* Grid Setup */
  .work-grid {
      display: grid;
      grid-template-columns: 1fr 2fr !important;
      gap: 24px;
  }

  /* Border Box (Outer Container) */
  .border-box {
      background-color: #1a1616;
      padding: 10px !important;
      border-radius: 42px;
      border: 0.3px solid rgba(255, 255, 255, 0.199);
      display: flex;
      overflow: hidden;
  }

  .border-box.wide {
      grid-column: span 2;
      height: 550px;
  }

  /* Project Card */
  .project-card {
      position: relative;
      width: 100%;
      height: 500px;
      border-radius: 32px;
      overflow: hidden;
      cursor: pointer;
      background: #111;
      isolation: isolate;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  .project-card.wide {
      height: 100%;
  }

  /* Image with forced Radius fix */
  .project-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 32px;
      /* Fixed radius */
      transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
  }

  /* Overlay */
  .card-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px;
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      border-radius: 32px;
      z-index: 2;
  }

  .card-content {
      transform: translateY(30px);
      transition: transform 0.6s ease;
      color: white;
  }

  /* Desktop Hover */
  @media (min-width: 1025px) {
      .project-card:hover .card-overlay {
          opacity: 1;
          backdrop-filter: blur(25px);
          -webkit-backdrop-filter: blur(25px);
      }

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

      .project-card:hover .card-content {
          transform: translateY(0);
      }
  }


 
  @media (max-width: 1300px) {

      .border-box {
    grid-column: span 2;
  }

      .heading-row {
    margin-bottom: 120px;
}
  }
  /* Mobile View */
  @media (max-width: 1024px) {
      .work-grid {
          grid-template-columns: 1fr;
      }

      .border-box.wide {
          grid-column: span 2;
          height: 520px;
      }

      .border-box {
          border-radius: 30px;
          padding: 8px;
      }

      .project-card {
          height: 520px;
          border-radius: 22px;
      }

      .project-img,
      .card-overlay {
          border-radius: 22px;
      }

      .card-overlay {
          opacity: 1;
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          background: rgba(0, 0, 0, 0.4);
          padding: 35px 20px;
      }

      .card-content {
          transform: translateY(0);
      }

      .work-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
      }

      .work-section {
          margin: 40px 0px;
          padding: 40px 10px;
          border-radius: 40px;
      }
  }

  /* Tags & Typography */
  .project-title {
      font-family: 'Zalando Sans Expanded', sans-serif;
      font-size: clamp(45px, 5vw, 60px);
      margin: 0 0 12px 0;
      font-weight: 700;
      text-transform: capitalize;
  }

  .tag-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 26px;
  }

  .tag {
      font-family: 'Zalando Sans Expanded', sans-serif;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 6px 10px !important;
      border-radius: 100px;
      font-size: 12px  !important;
      /* Expanded font ke liye size thora chota rakha hai */
      font-weight: 500;
      letter-spacing: 1px;
  }

  .project-desc {
      font-family: 'Zalando Sans Expanded', sans-serif;
      font-size: 14px;
      line-height: 1.6;
      opacity: 0.8;
      margin: 0;
      letter-spacing: 0.5px;
  }

  /* Framer Button */
  .framer-btn {
      font-family: 'Zalando Sans Expanded', sans-serif;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 15px;
      background: #f4f4f4;
      color: black;
      padding: 8px 8px 8px 24px;
      border-radius: 100px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.5px;
      transition: 0.4s;
  }

  .framer-text-stack {
      position: relative;
      height: 20px;
      /* Font size ke mutabiq adjust kiya */
      overflow: hidden;
  }

  .framer-text-stack span {
      display: block;
      transition: 0.5s cubic-bezier(0.6, 0.01, 0.05, 0.95);
  }

  .framer-btn:hover .framer-text-stack span {
      transform: translateY(-100%);
  }

  .arrow-circ {
      width: 38px;
      height: 38px;
      background: black;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      transform: rotate(-45deg);
  }

  .arr {
      position: absolute;
      font-size: 18px;
      transition: 0.5s;
  }

  .arr-2 {
      transform: translate(-35px, 35px);
  }

  .framer-btn:hover .arr-1 {
      transform: translate(35px, -35px);
  }

  .framer-btn:hover .arr-2 {
      transform: translate(0, 0);
  }

  /* --------------------------   project section css start  ---------------------------- */

















  /* --------------------------- team section css start ---------------------------- */


  .team-section {
      padding: 50px 0px;
      text-align: center;
  }

  /* Badge Styling */
  .badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      border: 1px solid #e5e5e5;
      padding: 5px 15px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 25px;
      background: #fff;
      color: #000;
  }

  .badge-icon {
      width: 22px;
      height: 22px;
      background: #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .badge-icon img {
      width: 12px;
      height: 12px;
      object-fit: contain;
      filter: invert(1);
  }

  .team-header h1 {
      font-size: clamp(38px, 6vw, 72px);
      font-weight: 600;
      line-height: 0.95;
      margin-bottom: 70px;
      color: #000;
      letter-spacing: -1.5px;
      font-family: "zalando sans expanded", sans-serif !important;
  }

  .highlight {
      color: #ea1f25;
  }

  .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 25px;

      margin: 0 auto;
  }

  .member-card {
      position: relative;
      overflow: hidden;
      border-radius: 25px;
      aspect-ratio: 1/1;
      cursor: pointer;
      background: #111;
  }

  .member-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Number: Default state */
  .card-number {
      position: absolute;
      top: 25px;
      right: 30px;
      font-size: 60px;
      font-weight: 900;
      opacity: 0.15;
      /* Default thora halka hai */
      z-index: 2;
      color: #fff;
      pointer-events: none;
      transition: opacity 0.5s ease;
  }

  /* Glassmorphism Popup */
  .info-popup {
      position: absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 20px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      text-align: center;
      z-index: 10;
      transition: all 0.5s ease;
  }

  .info-popup h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 900;
      color: #000;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .info-popup p {
      margin: 4px 0 0;
      color: #666;
      font-size: 13px;
      font-weight: 500;
  }

  /* --- DESKTOP HOVER --- */
  @media (min-width: 1024px) {
      .member-img {
          filter: grayscale(100%);
          opacity: 0.9;
      }

      .info-popup {
          opacity: 0;
          transform: translateX(-50%) translateY(20px);
      }

      .member-card:hover .member-img {
          filter: grayscale(0%);
          opacity: 1;
          transform: scale(1.05);
      }

      .member-card:hover .info-popup {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }

      /* Hover par number white aur zyada visible ho jaye */
      .member-card:hover .card-number {
          opacity: 0.6;
          /* 60% opacity se white look aata hai image ke upar */
      }
  }

  /* --- MOBILE/TABLET DEFAULT --- */
  @media (max-width: 1023px) {

    .team-section {
    padding: 30px 15px !important;
    text-align: center;
}



      .member-img {
          filter: grayscale(0%);
      }

      .info-popup {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }

      .card-number {
          opacity: 0.4;
      }
  }



  /* --------------------------- team section css end ---------------------------- */





























  /* ---------------------------- counter section css start ----------------------------  */










  .carousel-section {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 1800px;
      justify-content: space-around;
      padding: 80px 20px;


      /* Background Image Settings */
      background-image: url('assets/counter-bg.avif');
      /* Yahan apni image ka URL dalien */
      background-size: cover !important;
      /* Image poore area ko cover karegi */
      background-position: center !important;
      /* Image center mein rahegi */
      background-repeat: no-repeat !important;
      /* Image repeat nahi hogi */
  }

  /* Arrows Design */




  .arrow {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 80px !important;
      /* Proper Capsule Width */
      height: 48px !important;
      padding: 14px 30px !important;
      background: #ec1e24 !important;
      border: none !important;
      border-radius: 100px !important;
      cursor: pointer !important;
      position: relative !important;
      overflow: hidden !important;
      z-index: 10 !important;
      transition: all 0.3s ease !important;

      /* Complex Shadow from your requirements */
      box-shadow: inset 0px 5px 4px 0px rgba(255, 255, 255, 0.25),
          0px 68px 44px 4px rgba(2, 2, 2, 0.06),
          0px 10px 48px 5px rgba(0, 0, 0, 0.08),
          0px 22px 50px -20px rgba(0, 0, 0, 0.4),
          0 8px 20px rgba(255, 77, 45, 0.4) !important;
  }

  .arrow:hover {
      transform: scale(1.08) !important;
      filter: brightness(1.1) !important;
  }

  /* SVG Icon inside arrow */
  .arrow svg {
      width: 20px !important;
      height: 20px !important;
      fill: white !important;
      flex-shrink: 0 !important;
  }


  /* .arrow {
            width: 60px;
            height: 45px;
            border-radius: 100px;
            opacity: 1;
            background: var(--highlight);
            border: none;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(255, 77, 45, 0.4);
            transition: 0.3s;
            z-index: 10;
        } */

  .arrow:hover {
      transform: scale(1.1);
  }

  /* Main Card */
  .card-container {
      position: relative;
      margin: 0 30px;
      width: 100%;
      max-width: 600px;
  }

  .main-card {
      background: #000000;
      border-radius: 40px;
      padding: 50px;
      min-height: 450px;
      position: relative;
      z-index: 2;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
  }

  /* Grey layer behind card */
  .card-container::after {
      content: '';
      position: absolute;
      top: 20px;
      right: -35px;
      width: 100%;
      height: 100%;
      background: #E5E7EB;
      border-radius: 40px;
      z-index: 1;
      transform: rotate(5deg);
  }

  .badge {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 14px;
      width: fit-content;
      margin-bottom: 20px;
  }

  .big-num {
      font-size: 110px;
      font-weight: 900;
      color: #ec1e24;
      line-height: 1;
      margin: 0;
      opacity: 1;
      transition: opacity 0.3s;
  }

  .desc {
      font-size: 22px;
      color: #d1d1d1;
      line-height: 1.4;
      margin-top: 20px;
      opacity: 0;
      transform: translateY(30px);
  }

  .active .desc {
      animation: slideUp 0.6s forwards 0.2s;
  }

  .thumb-group {
      display: flex;
      gap: 12px;
      position: absolute;
      bottom: 40px;
      right: 40px;
      transform: translateX(100px);
      opacity: 0;
  }

  .active .thumb-group {
      animation: slideInRight 0.6s forwards 0.4s;
  }

  .thumb {
      width: 75px;
      height: 75px;
      border-radius: 15px;
      overflow: hidden;
  }

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

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

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


  .mobile-controls {
      display: none;
  }

  @media (max-width: 768px) {
      .carousel-section {
          flex-direction: column;
          padding: 0px !important;
      }

      .arrow-desktop {
          display: none;
      }

      .card-container {
          margin: 0 0 50px 0;
          width: 100%;
      }

      .main-card {
          min-height: 500px;
          padding: 40px 25px;
      }

      .big-num {
          font-size: 80px;
      }

      .mobile-controls {
          display: flex;
          gap: 20px;
          margin-top: -30px;
          z-index: 10;
      }

      .arrow {
          display: none !important;
      }

      .mobile-controls .arrow {
          display: block !important;
      }

      .card-container::after {
          display: none !important;
      }
  }



  /* -------------------------------- counter section css end ----------------------------   */




  /* <!-- -------------------------------  faqs section starts here ------------------------------- --> */


  .faq-section {
      padding: 100px 0%;
      display: flex;
      justify-content: center;
  }

  .faq-container {
      display: flex;
      width: 100%;
      gap: 50px;
      align-items: flex-start;
  }

  /* Left Side */
  .faq-left {
      flex: 1;
      /* position: sticky;
    top: 50px; */
      justify-content: space-between !important;
      display: flex !important;
      flex-direction: column !important;
  }

  .badge {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      border: 1px solid #EAEAEA;
      border-radius: 50px;
      font-size: 14px;
      margin-bottom: 30px;
      background: #ffffff;
      font-weight: 500;
      width: fit-content;
  }

  .faq-title {
      font-size: 64px;
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -2.5px;
      margin-bottom: 120px;
      text-transform: uppercase;
      color: #000;

  }

  .faq-title .highlight {
      color: #ec1e24;
      font-weight: 600;
  }

  .call-btn {
      display: inline-flex;
      align-items: center;
      background: #ec1e24;
      color: #ffffff;
      padding: 16px 32px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      gap: 15px;
      transition: transform 0.3s ease;
  }

  .call-btn:hover {
      transform: scale(1.05);
  }

  .arrow-circle {
      background: #ffffff;
      color: #ec1e24;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
  }

  /* Right Side FAQ */
  .faq-right {
      flex: 1.6;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .faq-item {
      background: #F8F8F8;
      border-radius: 20px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid transparent;
      overflow: hidden;
  }

  .faq-item.active {
      border: 1px solid #EEEEEE;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
      background: #F8F8F8;
      /* Base color remains same, content changes to white */
  }

  .faq-header {
      display: flex;
      align-items: center;
      padding: 20px 20px;
      cursor: pointer;
      position: relative;
      z-index: 2;
  }

  .faq-header h3 {
      color: #000000;
      /* Heading hamesha black rahega */
  }

  .red-dot {
      width: 8px;
      height: 8px;
      background: #ec1e24;
      border-radius: 50%;
      margin-right: 25px;
      flex-shrink: 0;
  }

  .faq-header h3 {
      flex-grow: 1;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.5px;
  }

  .toggle-btn {
      background: #000000;
      color: #ffffff;
      border: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Jab active class ho to arrow sath ghoome */
  .faq-item.active .toggle-btn {
      transform: rotate(180deg);
  }

  /* Content Area */
  .faq-content {
      display: none;
      padding: 20px 35px 20px 60px;
      background: #ffffff;
      border-top: 1px solid #F0F0F0;
  }

  .faq-content p {
      color: #717171;
      line-height: 1.6;
      font-size: 17px;
      max-width: 550px;
      opacity: 0;
      transform: translateY(15px);
      transition: all 0.4s ease;
  }

  .faq-item.active .faq-content p {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.1s;
  }

  @media (max-width: 1100px) {
      .faq-container {
          flex-direction: column;
      }

      .faq-right {

          width: 100%;
      }

      .faq-left {

          margin-bottom: 0px;
          text-align: left;
      }

      .faq-title {

          margin-bottom: 20px;

      }

  }

  @media (max-width: 768px) {
      .faq-container {
          flex-direction: column;
      }

      .faq-left {

          width: 100%;
      }

      .faq-left {
          position: relative;
          margin-bottom: 0px;
          text-align: left;
      }

      .faq-title {
          font-size: 38px;
          margin-bottom: 0px;
      }

      .faq-content {
          padding-left: 40px;
      }
  }


  .toggle-btn {
      background: #000000 !important;
      color: #ffffff !important;
      border: none !important;

      /* Size fix karne ke liye */
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      /* Extra safety */
      min-height: 38px !important;
      /* Extra safety */

      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

      /* Yeh line sab se zaroori hai button ko pichakne se rokne ke liye */
      flex-shrink: 0 !important;
      margin-left: 15px !important;
  }

  /* Mobile responsive fixing */
  @media (max-width: 768px) {
      .faq-header {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          /* Text aur Arrow ke beech space */
      }

      .faq-header h3 {
          margin-right: 10px !important;
          /* Arrow se thora door rakhne ke liye */
      }
  }

  /* <!-- -------------------------------  faqs section ends here -------------------------------  --> */























  /* ---------------------------------------  pricing section css start ---------------------------------------  */






  .pricing-container {

      width: 100%;
      text-align: center;
  }

  /* Header Styles */
  .badge {
      background: #f3f3f3;
      border: 1px dashed #e0e0e0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 25px;
  }

  .main-title {
      font-size: 4.5rem;
      font-weight: 800;
      letter-spacing: -3px;
      line-height: 0.9;

      color: #000;
  }

  .main-title span {
      color: #ec1e24;
      /* Updated Color */
      display: block;
  }

  /* Grid Layout */
  .pricing-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
  }

  .pricing-card {
      background: #000;
      border-radius: 35px;
      border: 8px solid #000;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .card-top {
      padding: 40px;
      border-radius: 28px;
      text-align: left;
      position: relative;
      min-height: 310px;
      display: flex;
      flex-direction: column;
  }

  .white-bg {
      background-color: #fff;
  }

  /* .gradient-bg { 
            background: linear-gradient(160deg, #6b0000 0%, #ec1e24 100%); 
        } */

  .gradient-bg {
      /* Gradient ko hata kar image lagane ke liye */
      background-image: url('assets/pricing-bg.png') !important;

      /* Image ko center karne ke liye */
      background-position: center !important;

      /* Image ko repeat hone se rokne ke liye */
      background-repeat: no-repeat !important;

      /* Image ko cover mode me rakhne ke liye */
      background-size: cover !important;

      /* Optional: Agar div ki koi height set nahi hai toh ye zaroori hai */
      min-height: 300px !important;
  }

  .plan-label {
      font-weight: 800;
      font-size: 14px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .dot {
      height: 8px;
      width: 8px;
      background-color: #ec1e24;
      border-radius: 50%;
  }

  .target-audience {
      color: #999;
      font-size: 15px;
      margin-bottom: 40px;
  }

  .price-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 25px;
  }

  .price {
      font-size: 72px;
      font-weight: 600;
      letter-spacing: -4px;
      line-height: 0.8;
      display: flex;
      align-items: flex-start;
  }

  .price span {
      font-size: 2rem;
      margin-top: 15px;
      margin-right: 5px;
  }

  .payment-info {
      text-align: right;
      font-size: 14px;
      line-height: 1.2;
      color: #555;
  }

  .payment-info strong {
      color: #000;
      display: block;
  }

  .text-white .payment-info {
      color: rgba(255, 255, 255, 0.7);
  }

  .text-white .payment-info strong {
      color: #fff;
  }

  /* --- BUTTON & ANIMATION CSS --- */
  .framer-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 18px 25px;
      border-radius: 50px;
      text-decoration: none;
      position: relative;
      transition: 0.3s ease;
      cursor: pointer;
      border: none;
      overflow: hidden;
  }

  .btn-primary {
      background: #ec1e24;
      color: #fff;
      /* box-shadow: 0 10px 20px rgba(236, 30, 36, 0.2);  */
  }

  .btn-secondary {
      background: white;
      color: black;
  }

  /* Text Stack Animation */
  .framer-text-stack {
      position: relative;
      height: 19px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin-right: 40px;
      /* Space for arrow */
  }

  .framer-text-stack span {
      display: block;
      font-size: 16px;
      font-weight: 700;
      transition: transform 0.5s cubic-bezier(0.6, 0.01, 0.05, 0.95);
      white-space: nowrap;
      line-height: 19px;
  }

  .framer-btn:hover .framer-text-stack span {
      transform: translateY(-100%);
  }

  .price-btn1 {
      width: 100% !important;
      background-color: #ec1e24 !important;
  }

  .price-btn2 {
      width: 100% !important;
      box-shadow: 0 10px 20px rgba(236, 30, 36, 0.2);
  }

  /* Diagonal Arrow Circle Animation */
  .arrow-circ {
      width: 38px;
      height: 38px;
      background: #ffffff;
      color: #000000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: absolute;
      right: 8px;
      transition: 0.3s ease;
      transform: rotate(0deg);
      /* Initial rotation fixed for clean movement */
  }

  .btn-secondary .arrow-circ {
      background: #000000;
      color: #fff;
  }

  .arr {
      position: absolute;
      font-size: 18px;
      transition: 0.5s cubic-bezier(0.6, 0.01, 0.05, 0.95);
  }

  .arr-1 {
      transform: translate(0, 0);
  }

  .arr-2 {
      transform: translate(-30px, 30px);
  }

  /* Hover Effect for Arrow */
  .framer-btn:hover .arr-1 {
      transform: translate(30px, -30px);
  }

  .framer-btn:hover .arr-2 {
      transform: translate(0, 0);
  }

  /* Lower Section */
  .card-bottom {
      padding: 40px;
      background-color: #000;
  }

  .features {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      text-align: left;
  }

  .features li {
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .features li::before {
      content: "";
      width: 6px;
      height: 6px;
      background-color: #39FF14;
      border-radius: 50%;
      box-shadow: 0 0 8px #39FF14;
  }

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

      .price-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
      }

      .payment-info {
          text-align: left;
      }

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

      .main-title {
          font-size: 3rem;
      }
  }







  /* -----------------------------------  pricing section css end ---------------------------------------  ------------------ */





  /* Contact Badge Styling */
  .badge {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: min-content;
      height: min-content;
      padding: 8px 18px 8px 8px;
      position: relative;
      overflow: visible;

      /* Glass Effect & Colors with !important */

      /* background-color: var(--token-f28c16f6-e724-4568-b432-898882b2a7b2, rgb(249, 249, 249)); */
      border-radius: 100px;

      /* opacity: 1; */
      /* Dashed Border */


      border-radius: 100px !important;
      box-shadow: inset 0px 0px 8px 0px rgba(255, 255, 255, 0.25) !important;

      /* Text Style */
      color: #000000 !important;
      font-size: 13px;
      font-weight: 600;
      text-transform: capitalize;
      letter-spacing: 1px;
      white-space: nowrap;
  }

  /* Badge Icon Container */
  .badge-icon {
      width: 26px;
      height: 26px;
      background-color: rgb(0, 0, 0) !important;
      border-radius: 50% !important;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .badge-icon img {
      width: 14px;
      height: 14px;
      object-fit: contain;
  }








  /* ---------------------------------  contact section css start ---------------------------------------  ------------------  */






  .main-section {
      position: relative;
      margin: 80px 0px;
      width: 100%;
      max-width: 1800px;
      background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('./assets/form-bg.avif');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      padding: 80px;
      border-radius: 45px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  .main-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 70% 50%, transparent, rgba(0, 0, 0, 0.8));
      pointer-events: none;
  }

  .form-side {
      flex: 1;
      min-width: 320px;
      padding: 40px;
      z-index: 2;
  }

  .form-card {
      background-color: #fff;
      height: 100%;
      border-radius: 35px;
      padding: 45px;
      display: flex;
      flex-direction: column;
  }

  .input-group {
      margin-bottom: 25px;
  }

  .label-dot {
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      color: #000;
  }

  .label-dot::before {
      content: '';
      width: 6px;
      height: 6px;
      background-color: #ff4d30;
      border-radius: 50%;
      margin-right: 10px;
  }

  .form-control {
      width: 100%;
      padding: 18px 22px;
      background-color: #f7f7f7;
      border: 1px solid #eee;
      color: #000000;
      border-radius: 18px;
      font-size: 15px;
      outline: none;
      transition: 0.3s;
  }

  .form-control:focus {
      border-color: #ff4d30;
      background: #fff;
  }

  textarea.form-control {
      min-height: 120px;
      resize: vertical;
  }

  .btn-submit {
      background-color: var(--primary-red);
      color: white;
      border: none;
      padding: 16px 32px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-transform: uppercase;
      transition: 0.3s;
  }

  .btn-submit:hover {
      transform: translateY(-2px);
      background-color: #e6452a;
  }

  .btn-icon {
      background-color: white;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .content-side {
      flex: 1.1;
      min-width: 320px;
      padding: 60px 80px 60px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: white;
      z-index: 2;
  }

  .main-heading {
      font-size: 85px;
      font-weight: 900;
      line-height: 0.9;
      margin-bottom: 50px;
      letter-spacing: -3px;
  }

  .info-item {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 35px;
  }

  /* --- Updated Info Icon Style --- */
  .info-icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      /* Isse icon pichkega nahi */
      background-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .info-icon img {
      width: 20px;
      height: 20px;
      object-fit: contain;
      display: block;
  }



  /* Contact Badge Styling */
  .contact-badge {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: min-content;
      height: min-content;
      padding: 8px 18px 8px 8px;
      position: relative;
      overflow: visible;

      /* Glass Effect & Colors with !important */
      background-color: rgba(201, 201, 201, 0.1) !important;
      /* #c9c9c91a */
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px);

      /* Dashed Border */
      border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
      border-left: 1px dashed rgba(255, 255, 255, 0.1) !important;
      border-right: 1px dashed rgba(255, 255, 255, 0.1) !important;

      border-radius: 100px !important;
      box-shadow: inset 0px 0px 8px 0px rgba(255, 255, 255, 0.25) !important;

      /* Text Style */
      color: #ffffff !important;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      white-space: nowrap;
  }

  /* Badge Icon Container */
  .badge-icon2 {
      width: 26px;
      height: 26px;
      background-color: rgb(255, 255, 255) !important;
      border-radius: 50% !important;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .badge-icon2 img {
      width: 16px;
      height: 16px;
      object-fit: contain;
  }

  @media (max-width: 768px) {
      .main-section {
          margin: 50px 0px;
          padding: 40px 20px !important;
          border-radius: 30px !important;
      }

      .form-side {

          padding: 0px;

      }

      .main-section {
          padding: 0px;
          border-radius: 0px;
      }

      .main-heading {
          font-size: 60px;
      }

      .content-side {
          padding: 40px 0px !important;
      }
  }

  @media (max-width: 768px) {

      .form-card {

          border-radius: 30px;
          padding: 25px;

      }

      .main-section {
          padding: 40px 20px !important;
          border-radius: 30px !important;
      }

      .form-side {

          padding: 0px;

      }



      .main-heading {
          font-size: 60px;
      }

      .content-side {
          padding: 40px 20px;
      }
  }




  /* ----------------------------------  contact section css end ---------------------------------------  ------------------   */



















  /* --------------------------- footer section css start ----------------------------  */





  /* .footer {
      width: 100%;
      padding: 80px 5% 0 5%;
      background: white;
      overflow: hidden;
      display: block;
  }

  .footer-container {
      max-width: 1800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
  }

 
  .reveal-item {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal-item.reveal {
      opacity: 1;
      width: 100% !important;
      transform: translateY(0);
  }

  .delay-1 {
      transition-delay: 0.2s;
  }

  .delay-2 {
      transition-delay: 0.4s;
  }

  .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 40px;
      margin-bottom: 60px;
  }

  .image-slider-box {
      width: 100%;
      height: 220px;
      position: relative;
      border-radius: 30px;
      overflow: hidden;
      background: #000;
  }

  .fading-img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      will-change: opacity;
      animation: smoothFadeLoop 6s infinite ease-in-out;
  }

  .fading-img:nth-child(1) {
      animation-delay: 0s;
  }

  .fading-img:nth-child(2) {
      animation-delay: 2s;
  }

  .fading-img:nth-child(3) {
      animation-delay: 4s;
  }

  @keyframes smoothFadeLoop {

      0%,
      100% {
          opacity: 0;
      }

      10%,
      33% {
          opacity: 1;
      }

      45% {
          opacity: 0;
      }
  }

  .contact-info {
      margin-top: 20px;
      font-size: 14px;
      display: flex;
      color: #000 !important;
      justify-content: space-between;
  }

  .contact-info a {
      text-decoration: none;
      color: #000 !important;
      font-weight: 700;
  }

  .right-col {
      display: flex;
      gap: 80px;
  }

  .nav-links h4 {
      color: #999;
      font-size: 12px;
      text-transform: uppercase;
      margin-bottom: 20px;
  }

  .nav-links ul {
      list-style: none;
  }

  .nav-links li {
      margin-bottom: 10px;
  }

  .nav-links a {
      text-decoration: none;
      color: #000;
      font-size: 22px;
      font-weight: 700;
      position: relative;
      display: inline-block;
  }

  .nav-links a::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -2px;
      left: 0;
      background-color: #ff4500;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-links a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
  }

  .footer-credits {
      display: flex;
      justify-content: space-between;
      padding: 30px 0;
      font-size: 13px;
      color: #999;
      border-top: 1px solid #eee;
  }

  .legal a {
      text-decoration: none;
      color: #999;
      margin-left: 20px;
  }

  .giant-logo {
      width: 100%;
      padding-bottom: 20px !important;
      line-height: 0;
      margin-bottom: -2px;
      opacity: 0;
      transform: translateY(80px);
      transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .giant-logo.reveal {
      opacity: 1;
      transform: translateY(0);
  }

  .giant-logo img {
      width: 100%;
      height: auto;
      display: block;
  }

  @media (max-width: 768px) {
      .footer-top {
          flex-direction: column;
      }

      .right-col {
          width: 100%;
          justify-content: space-between;
          gap: 20px;
          flex-direction: column !important;
      }

      .footer-credits {
          flex-direction: column;
          text-align: center;
          gap: 10px;
      }

      .legal a {
          margin: 0 10px;
      }

      .giant-logo {

          padding-bottom: 15px !important;

      }
  } */


/* --- Global Footer Styles --- */
.footer {
    width: 100%;
    padding: 80px 5% 0 5%;
    background: white;
    overflow: hidden;
    display: block;
}

.footer-container {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* --- Animations State (Optimized for Mobile) --- */
.reveal-item {
    opacity: 0;
    transform: translateY(40px); /* Desktop par itna kaafi hai */
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Delay for staggered effect */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

/* --- Slider Logic --- */
.image-slider-box {
    width: 100%;
    height: 220px;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #000;
}

.fading-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    will-change: opacity;
    animation: smoothFadeLoop 6s infinite ease-in-out;
}

.fading-img:nth-child(1) { animation-delay: 0s; }
.fading-img:nth-child(2) { animation-delay: 2s; }
.fading-img:nth-child(3) { animation-delay: 4s; }

@keyframes smoothFadeLoop {
    0%, 100% { opacity: 0; }
    10%, 33% { opacity: 1; }
    45% { opacity: 0; }
}

.contact-info {
    margin-top: 20px;
    font-size: 14px;
    display: flex;
    color: #000 !important;
    justify-content: space-between;
}

.contact-info a {
    text-decoration: none;
    color: #000 !important;
    font-weight: 700;
}

/* --- Nav & Hover Effect --- */
.right-col {
    display: flex;
    gap: 80px;
}

.nav-links h4 {
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.nav-links ul { list-style: none; }
.nav-links li { margin-bottom: 10px; }

.nav-links a {
    text-decoration: none;
    color: #000;
    font-size: 22px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #ff4500;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- Credits Section --- */
.footer-credits {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    font-size: 13px;
    color: #999;
    border-top: 1px solid #eee;
}

.legal a {
    text-decoration: none;
    color: #999;
    margin-left: 20px;
}

/* --- Giant Logo --- */
.giant-logo {
    width: 100%;
    padding-bottom: 20px !important;
    line-height: 0;
    margin-bottom: -2px;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.giant-logo.reveal {
    opacity: 1;
    transform: translateY(0);
}

.giant-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Mobile Specific Fixes --- */
@media (max-width: 768px) {
    .footer {
        padding: 40px 5% 0 5%; /* Padding kam ki mobile ke liye */
    }

    .reveal-item {
        transform: translateY(20px); /* Mobile par kam movement taake trigger jaldi ho */
    }


    .reveal-item.reveal {
 
    width: 100% !important;
}


    .giant-logo {
        transform: translateY(30px);
        padding-bottom: 10px !important;
    }

    .footer-top {
        flex-direction: column;
        gap: 30px;
    }

    .right-col {
        width: 100%;
        justify-content: flex-start;
        gap: 30px;
        flex-direction: column !important;
    }

    .footer-credits {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .legal a {
        margin: 0 10px;
    }
}

  /* -----------------------  footer section css end ----------------------------  ------------------   */





































   /* --------------------------- service section css start ---------------------------- */


/* .as-stack-section { 
    position: relative; 
    background-color: #ffffff; 
    padding: 100px 0;
}

.as-stack-main-box {
    background-color: #000; 
    border-radius: 40px;
    max-width: 1800px;
    width: 90%;
    margin: 0 auto;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.2);
    position: relative;
}

@media (min-width: 992px) {
    .as-stack-section { height: 400vh; padding: 0; } 
    
    .as-stack-sticky-wrapper {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .as-stack-container {
        display: flex;
        flex-direction: row;
        height: 670px;
        width: 100%;
        gap: 60px;
        align-items: center;
        padding: 0 60px;
        position: relative;
    }

    .as-stack-images-col { width: 45%; height: 480px; position: relative; }

    .as-stack-image-card {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        border-radius: 24px;
        overflow: hidden;
        will-change: transform;
        transform: translateY(100vh);
    }

    .as-stack-image-card:first-child { transform: translateY(0); }

    .as-stack-content-col { flex: 1; height: 100%; position: relative; }

    .as-stack-text-box {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        width: 100%;
    }

    .as-stack-text-box.active { opacity: 1; visibility: visible; }
}

.as-stack-img-inner { width: 100%; height: 100%; overflow: hidden; border-radius: 24px; }
.as-stack-img-inner img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }

.as-stack-step-num { 
    background: #222; width: 44px; height: 44px; 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 50%; font-size: 14px; font-weight: 700; margin-bottom: 25px;
}

.as-stack-title { 
    font-size: 3.5rem; margin: 0; line-height: 1.1; letter-spacing: -2px;
    font-weight: 800; color: #fff;
}

.as-stack-title::after {
    content: ''; display: inline-block; width: 10px; height: 10px;
    background-color: #ff3c00; border-radius: 50%; margin-left: 10px; vertical-align: middle;
}

.as-stack-divider { border: none; border-top: 1px solid #333; margin: 25px 0; width: 100%; }
.as-stack-desc { color: #aaa; margin-bottom: 35px; font-size: 1.1rem; line-height: 1.6; max-width: 450px; }

.as-stack-btn {
    display: inline-flex; align-items: center;
    background: #fff; color: #000; padding: 6px 6px 6px 20px; 
    border-radius: 100px; text-decoration: none; font-weight: 700; font-size: 14px;
    transition: transform 0.3s ease;
}

.as-stack-arrow-circ {
    background: #000; width: 35px; height: 35px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-left: 15px; color: #fff;
}


@media (max-width: 991px) {
    .as-stack-section { padding: 60px 0; }
    .as-stack-main-box { padding: 40px 20px; width: 85%; }
    .as-stack-images-col { display: none; }
    .as-stack-container { display: block; }
    .as-stack-text-box {
        position: relative; opacity: 1; visibility: visible;
        margin-bottom: 60px; border-bottom: 1px solid #222; padding-bottom: 40px;
    }
    .as-stack-text-box:last-child { margin-bottom: 0; border-bottom: none; }
    .as-stack-title { font-size: 2.5rem; }
    .as-stack-divider { display: none; }
} */
 






 /* --- SECTION SETTINGS --- */
      .sv-services-section { 
    position: relative; 
    background-color: #ffffff; 
    padding: 100px 0;
}

.sv-main-box {
    background-color: #000; 
    border-radius: 40px;
    max-width: 1800px !important;
    width: 100% !important;
    margin: 0 auto;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.2);
    position: relative;
}

@media (min-width: 992px) {
    .sv-services-section { height: 1100vh !important; padding: 0; } 
    
    .sv-sticky-wrapper {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sv-container {
        display: flex;
        flex-direction: row;
        height: 600px;
        width: 100%;
        gap: 60px;
        align-items: center;
        padding: 0 60px;
        position: relative;
    }

    .sv-images-column {
        width: 45%;
        height: 480px;
        position: relative;
    }

    .sv-image-card {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        border-radius: 24px;
        overflow: hidden;
        will-change: transform;
        transform: translateY(100vh);
    }

    .sv-image-card:first-child { transform: translateY(0); }

    .sv-content-column { flex: 1; height: 100%; position: relative; }

    .sv-text-box {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sv-text-box.sv-active { opacity: 1; visibility: visible; }
}

.sv-img-inner { width: 100%; height: 100%; overflow: hidden; border-radius: 24px; }
.sv-img-inner img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }

.sv-step-num { 
    background: #222; 
    width: 44px; height: 44px; 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 50%; font-size: 14px; font-weight: 700; margin-bottom: 25px;
}

.sv-text-box h2 { 
    font-size: 3.5rem; margin: 0; line-height: 1.1; letter-spacing: -2px;
    position: relative; font-weight: 800;
}

.sv-text-box h2::after {
    content: ''; display: inline-block; width: 10px; height: 10px;
    background-color: #ff3c00; border-radius: 50%; margin-left: 10px; vertical-align: middle;
}

.sv-text-box hr { border: none; border-top: 1px solid #333; margin: 25px 0; width: 100%; }
.sv-text-box p { color: #aaa; margin-bottom: 35px; font-size: 1.1rem; line-height: 1.6; max-width: 450px; }

.sv-view-more {
    display: inline-flex; align-items: center;
    background: #fff; color: #000; padding: 6px 6px 6px 20px; 
    border-radius: 100px; text-decoration: none; font-weight: 700; font-size: 14px;
    transition: transform 0.3s ease;
}
.sv-view-more:hover { transform: scale(1.05); }

.sv-view-more .sv-arrow-circle {
    background: #000; width: 35px; height: 35px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-left: 15px; color: #fff;
}

@media (max-width: 991px) {
    .sv-services-section { background-color: #ffffff; padding: 60px 0; }
    .sv-main-box { padding: 40px 20px; width: 85%; }
    .sv-images-column { display: none; }
    .sv-container { display: block; }

    .sv-text-box {
        position: relative;
        opacity: 1;
        visibility: visible;
        margin-bottom: 60px;
        border-bottom: 1px solid #222;
        padding-bottom: 40px;
    }
    .sv-text-box:last-child { margin-bottom: 0; border-bottom: none; }
    .sv-text-box h2 { font-size: 2.5rem; letter-spacing: -1px; }

    .teamHeader2 {
    display: flex;
    flex-direction: column !important;
    padding: 45px 0px 40px !important;
 
}

   .teamHeader2  .h-two {
    font-size: clamp(38px, 6vw, 72px);
  
    width: 85% !important;
    
}



}







    /* --------------------------- service section css end ---------------------------- */