body {
      font-family: "Outfit", sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: "Outfit", sans-serif;
  }

  /* header section */
  header {
      position: sticky;
      top: 0;
      z-index: 1000;
  }

  /* ===== TOP BAR ===== */
  .top-bar {
      background: linear-gradient(145deg, rgb(4, 21, 34) 0%, rgb(4 74 139) 100%);
      color: #fff;
      font-size: 13px;
  }

  .top-bar a {
      color: #fff;
      margin-right: 30px;
      font-size: 14px;
  }

  /* ===== HEADER ===== */
  .main-header {
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .navbar-brand img {
      height: 40px;
  }

  .nav-link {
      font-weight: 500;
      color: #000 !important;
  }

  .nav-link:hover {
      color: rgb(9 55 84) !important;
  }

  /* ===== MEGA MENU ===== */
  .nav-item.position-static {
      position: relative;
  }

  .mega-menu {
      border: 1px solid rgb(9 55 84);
      background: linear-gradient(145deg, rgba(3, 10, 15, 0.952) 0%, rgb(9, 79, 145) 100%);
      width: 70%;
      left: 60% !important;
      transform: translateX(-50%);
      border: none;
      padding: 30px;
      color: #fff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .mega-menu ul {
      list-style: none;
      padding: 0;
  }

  .mega-menu li {
      margin-bottom: 8px;
  }

  .dropdown-item {
      font-size: 13px;
      padding: 6px 0;
      color: #fff;
  }

  .main-header {
      border-bottom: 1px solid #0e2936;
      background: #fff;
      box-shadow: 0 2px 10px rgb(52 151 189 / 38%);
  }

  .menu-2 {
      width: 300px;
  }

  .dropdown-item:hover {
      background: none;
      color: rgb(255 255 255);
      text-decoration: underline;
  }

  .navbar .dropdown.show>.nav-link,
  .navbar .dropdown:hover>.nav-link {
      color: #183e70 !important;

  }

  /* ===== DESKTOP HOVER DROPDOWN ONLY ===== */
  @media (min-width: 992px) {
      .navbar .dropdown:hover>.dropdown-menu {
          display: block;
          opacity: 1;
          visibility: visible;
          margin-top: 0;
          border: 1px solid rgb(9 55 84);
      }

      .navbar .dropdown-menu {
          display: none;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.25s ease, visibility 0.25s ease;
      }
  }

  /* ===== MOBILE ===== */
  @media (max-width: 991px) {}

  /* Banner Section */
  .banner {
      background: url('/assets/neweb/img/HERO.png') no-repeat center center;
      background-size: cover;
      position: relative;
      color: #fff;
      padding: 15px 0;
  }

  .banner-content {
      position: relative;
      z-index: 2;
      text-align: center;
  }

  .banner h2 {
      font-size: 42px;
      font-weight: bold;
      margin-bottom: 15px;
  }

  .banner h3 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 12px;
  }

  .banner p {
      font-size: 14px;
      margin: 0 auto 30px;
  }

  /* mlm css */

  .mlm-section {
      background: linear-gradient(42deg, #f9f8f8eb, #efa9ad87);
      padding: 30px 0;
      text-align: center;
  }

  .mlm-illustration img {
      max-width: 70%;
      margin-bottom: -85px;
  }

  .mlm-text {
      margin: 25px 0;
      font-size: 20px;
      color: #444;
  }

  /* Button */
  .cssbuttonsIoButton {
      display: inline-flex;
      background: linear-gradient(90deg, rgb(69, 187, 244) 3.63%, rgb(14, 134, 212) 100%);
      color: white;
      border: 1px solid white;
      font-size: 17px;
      font-weight: 600;
      border-radius: 5rem;
      letter-spacing: 0.05em;
      align-items: center;
      position: relative;
      height: 2.8em;
      padding-right: 3.3em;
      padding-left: 1rem;
      cursor: pointer;
      transition: background-color 0.4s ease, color 0.4s ease;
  }

  .cssbuttonsIoButton .icon {
      background: white;
      position: absolute;
      right: 0.3em;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2.2em;
      width: 2.2em;
      border-radius: 2rem;
      transition: all 0.3s ease;
  }

  .cssbuttonsIoButton:hover {
      background: linear-gradient(90deg, rgb(42, 129, 172), rgb(10, 92, 146));
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  .cssbuttonsIoButton .icon svg {
      width: 1.1em;
      color: #000;
      transition: transform 0.3s ease;
  }

  .cssbuttonsIoButton:hover .icon svg {
      transform: translateX(0.1em) rotate(-25deg);
  }

  /* Marquee */
  .logo-marquee {
      padding: 10px 0;
      position: relative;
  }

  .logo-marquee {
      padding: 10px 0;
      position: relative;
      overflow: hidden;
  }

  .logo-marquee--gradient {
      top: 2.5rem;
      height: 64px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 1;
  }

  .logo-marquee--marquee {
      display: flex;
      user-select: none;
      width: max-content;
      animation: scroll-left 20s linear infinite;
  }

  .logo-marquee--marquee-group {
      display: flex;
      flex-shrink: 0;
  }

  .logo-marquee--marquee-group img {
      height: 64px;
      padding: 0 40px;
      width: auto;
  }

  @keyframes scroll-left {
      0% {
          transform: translateX(0);
      }

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


  /*  .logo-marquee--gradient {*/

  /*      top: 2.5rem;*/
  /*      height: 64px;*/
  /*      left: 0;*/
  /*      position: absolute;*/
  /*      width: 100%;*/
  /*      z-index: 1;*/
  /*  }*/

  /* .logo-marquee--marquee {*/
  /*    display: flex;*/
  /*    overflow: hidden;*/
  /*    user-select: none;*/
  /*    width: max-content;*/
  /*    animation: scroll-left 20s linear infinite;*/
  /*}*/

  /*  .logo-marquee--marquee-group {*/
  /*      animation: scroll-left 20s linear infinite;*/
  /*      display: flex;*/
  /*      flex-shrink: 0;*/
  /*      width: auto;*/
  /*  }*/



  /*  .logo-marquee--marquee-group img {*/
  /*      height: 64px;*/
  /*      padding: 0 40px;*/
  /*      width: auto;*/
  /*  }*/

  /*@keyframes scroll-left {*/
  /*    0% {*/
  /*        transform: translateX(0);*/
  /*    }*/
  /*    100% {*/
  /*        transform: translateX(-50%);*/
  /*    }*/
  /*}*/


  /* ===============================
       advance section 
    ================================ */
  .adv-section {
      /* background: #fdf2ef; */
      padding: 30px 0;
  }

  .adv-title {
      font-family: "Playfair Display", serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1.2;
      color: #111;
      margin-bottom: 15px;
  }

  .adv-title span {
      font-style: italic;
      font-weight: 700;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .adv-desc {
      font-size: 18px;
      color: #333;
      line-height: 1.8;
      margin: 0 auto;
      text-align: center;
  }

  /* ===============================
       Superpowers Section
    ================================ */
  .superpowers {
      padding: 40px 0;
      background: #e8e9f3;
  }

  /* Main Card */
  .superpowers-card {
      border-radius: 15px 15px 0px 0px;
      border: none;
      padding: 20px;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .superpowers-img {
      border-radius: 10px;
      overflow: hidden;
      height: 100%;
  }

  .superpowers-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
  }

  /* Text */
  .superpowers h2 {
      font-family: "Playfair Display", serif;
      font-size: 38px;
      font-weight: 700;
      color: #111;

  }

  .stat-card h2 {
      font-size: 30px;
      font-weight: 600;
      text-align: justify;
  }

  .superpowers h2 span {
      font-style: italic;
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
  }

  .superpowers p {
      color: #202020;
      margin-top: 10px;
      font-size: 19px;
      line-height: 1.6;
  }

  /* Stat Cards */
  .stat-card {
      border-radius: 14px;
      border: 1px solid #eee;
      padding: 20px;
      height: 100%;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      background: #fff;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .gradient-icon {
      margin-right: 10px;
      font-size: 14px;
      background: linear-gradient(90deg,
              rgb(42, 129, 172),
              rgb(10, 92, 146));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  /* ===============================
      Quick & Accurate section Volochain Card Section
    ================================ */
  .volochain-section {
      background: #fcdfdf71;
      animation: colorLoop 6s ease-in-out infinite;
  }

  /* Smooth gradient color animation */
  @keyframes colorLoop {
      0% {
          background-color: #fcf3f388;
      }

      25% {
          background-color: #fcdfdf71;
      }

      50% {
          background-color: #fdf2f287;
      }
  }

  .volochain-section {
      padding: 20px 0 0 0;
  }

  .volochain-card {
      min-height: 100%;
      border: none;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: #fff;
  }

  .volochain-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  }

  .volochain-card img {
      width: 100%;
      height: 165px;
      object-fit: cover;
      border-radius: 10px 10px 0px 0px;
  }

  .volochain-card-body {
      padding: 10px;
  }

  .img-border {
      padding: 2px;
      border-radius: 12px 12px 0 0;
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
  }

  .volochain-card h5 {
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-size: 20px;
      font-weight: 600;
  }

  .volochain-card p {
      font-size: 16px;
      color: #202020;
      line-height: 1.5;
  }

  .volochain-card h5 {
      font-size: 1.3rem;

  }

  .carousel-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #0a5c92;
  }

  .carousel-control-next-icon,
  .carousel-control-prev-icon {
      background-color: #001f28ad;

  }

  .carousel-control-next,
  .carousel-control-prev {
      bottom: 155px;
  }

  .carousel-indicators .active {
      background-color: #45bbf4;
  }

  .carousel-inner {
      padding-bottom: 40px;
  }

  .carousel-indicators {
      bottom: 0;
      margin-bottom: -30px;
  }

  #desktopCarousel .carousel-indicators,
  #mobileCarousel .carousel-indicators {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
  }

  /* ===============================
        service section 
    ================================ */
  .service-section {
      background: #fcdfdf71;
      animation: colorLoop 6s ease-in-out infinite;
  }

  .our-service-btn {
      padding: 8px 10px;
      border-radius: 50px;
      background: #59a3c147;
      color: rgb(9 55 84);
      font-weight: 700;
      text-decoration: none;
  }

  /* Smooth gradient color animation */
  @keyframes colorLoop {
      0% {
          background-color: #fcf3f388;
      }

      25% {
          background-color: #fcdfdf71;
      }

      50% {
          background-color: #fdf2f287;
      }
  }

  .service-card {
      border-radius: 16px;
      padding-top: 60px;
      position: relative;
      background: #fff;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      transition: 0.3s;
      height: 100%;
  }

  .service-heading h2 {
      font-family: "Playfair Display", serif;
      font-size: 40px;
      font-weight: 700;
      color: #111;
      margin-bottom: 10px;
  }

  .service-heading h2 span {
      font-style: italic;
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
  }

  .service-card:hover {
      border: 1px solid rgb(9 55 84);
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .service-card:hover .service-img {
      background: rgb(9 55 84);
      border: 5px solid rgb(9 55 84);
  }

  .service-img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 50%;
      position: absolute;
      top: -45px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 2px solid rgb(9 55 84);
  }

  .service-card h5 {
      font-weight: 600;
      margin-bottom: 12px;
      color: rgb(9 55 84);
  }

  .service-content {
      color: #202020;
      margin-top: 10px;
      font-size: 18px;
      line-height: 1.6;
  }

  .service-card p {
      color: #202020;
      margin-top: 10px;
      font-size: 16px;
      line-height: 1.6;
  }

  /* ===============================
      OUR MLM SOFTWARE
    ================================ */
  .our-mlm {
      padding: 30px 0;
      background: #f4f4f4;
  }

  Equal height columns .our-mlm .row {
      display: flex;
      align-items: stretch;
  }

  .card {
      border-radius: 16px;
      height: 100%;
  }

  .our-heading {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.2;
  }

  .our-heading span {
      font-style: italic;
      font-weight: 800;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  /* Accordion Item */
  .accordion-item {
      border: none;
      border-radius: 12px;
      margin-bottom: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
      overflow: hidden;
  }

  /* Accordion Button */
  .custom-accordion-btn {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      font-weight: 600;
      position: relative;
  }

  /* Remove default arrow */
  .custom-accordion-btn::after {
      display: none;
  }

  /* ICON + LINE WRAPPER */
  .icon-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* ICON IMAGE */
  .icon-wrap img {
      width: 45px;
      height: 45px;
      background: #fff;
      z-index: 2;
  }

  /* 🔹 DASHED LINE — ALWAYS VISIBLE */
  .icon-wrap::after {
      content: "";
      position: absolute;
      top: 34px;
      /* icon ke niche se start */
      left: 50%;
      transform: translateX(-50%);
      height: 190PX;
      /* next accordion icon tak */
      border-left: 2px dashed #9aa3ad;
  }

  /* LAST ACCORDION → line band */
  .accordion-item:last-child .icon-wrap::after {
      display: none;
  }

  /* Title */
  .accordion-title {
      flex-grow: 1;
  }

  /* Plus / Minus Icon */
  .toggle-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgb(9 55 84);
      ;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      color: rgb(9 55 84);
  }

  .toggle-icon::before {
      content: "+";
  }

  .custom-accordion-btn:not(.collapsed) .toggle-icon::before {
      content: "−";
  }

  /* Smooth accordion animation */
  .accordion-collapse {
      transition: height 0.45s ease;
  }

  .accordion-body {
      padding: 20px 20px;
      color: #000;
      line-height: 1.6;
  }

  .accordion-button:not(.collapsed) {
      background: transparent;
      color: rgb(9 55 84);
  }

  .accordion {
      --bs-accordion-btn-focus-box-shadow: none;
      --bs-accordion-border-color: #dee2e600;
  }

  /* ===============================
      TEAM SECTION
    ================================ */

  .team-section {
      padding: 40px 0;
      /* background: #fff; */
  }

  .team-img {
      border: 2px dashed #007ea6;
      padding: 6px;
      width: 100%;
  }

  .team-title {
      font-family: "Playfair Display", serif;
      font-size: 40px;
      font-weight: 700;
      color: #111;
      margin-bottom: 10px;
  }

  .team-title span {
      font-style: italic;
      font-weight: 700;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .team-desc {
      font-size: 17px;
      color: #202020;
      line-height: 1.6;
      text-align: justify;
  }

  .team-btn {
      position: relative;
      padding: 12px 20px;
      font-weight: 600;
      color: #0a2c52;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 0px;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      overflow: hidden;
  }

  .team-btn::before {
      content: "";
      position: absolute;
      inset: 2px;
      background: #fff;
      border-radius: 4px;
      transition: 0.3s;
      z-index: 1;
  }

  .team-btn span {
      position: relative;
      z-index: 2;
      transition: 0.3s;
      display: flex;
      align-items: center;
      gap: 13px;
  }

  .team-btn span i {
      font-size: 28px;
  }

  /* HOVER EFFECT */
  .team-btn:hover::before {
      background: transparent;
  }

  .team-btn:hover span {
      color: #fff;
  }

  /* cta 1 css */
  .cta-section {
      background: linear-gradient(90deg, #06182e, #29597a);
      padding: 20px 0;
      position: relative;
      overflow: hidden;
  }

  .cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("/assets/neweb/img/Frame 1171276788.png") center/cover no-repeat;
      opacity: 0.15;
  }

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

  .cta-content h2 {
      color: #fff;
      font-size: 33px;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 10px;
  }

  /* Button */
  .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 15px;
      background: #fff;
      color: #111;
      padding: 8px 18px;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
      overflow: hidden;
      position: relative;
      transition: 0.3s;
  }

  .cta-arrow {
      width: 42px;
      height: 42px;
      background: #002e50;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
  }

  /* Hover Animation */
  .cta-btn:hover {
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      color: #fff;
  }

  .cta-btn:hover .cta-arrow {
      transform: translateX(6px);
      background: #fff;
      color: #0b0f2f;
  }

  /* ===============================
     compansation plan 
    ================================ */
  .Compensation-title {
      font-family: "Playfair Display", serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1.2;
      color: #111;
      margin-bottom: 15px;
  }

  .Compensation-title span {
      font-style: italic;
      font-weight: 700;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .Compensation-subtitle {
      font-size: 18px;
      color: #202020;
  }

  .Compensation-card {
      background: #eaf7ff;
      border: 2px dashed #4aa3df;
      border-radius: 18px;
      padding: 10px 10px 10px;
      text-align: center;
      position: relative;
      height: 100%;
      transition: 0.3s;
  }

  .Compensation-card:hover {
      transform: translateY(-5px);
  }

  .Compensation-number {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 2px solid #4aa3df;
      color: #000;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .Compensation-img {
      width: 80px;
      height: auto;
      margin-bottom: 5px;
  }

  .Compensation-card h5 {
      font-weight: 700;
      margin-bottom: 10px;
      font-size: 18px;
  }

  .Compensation-card p {
      font-size: 15px;
      color: #202020;
      line-height: 1.6;
      text-align: justify;
  }

  .Compensation-card h5 {
      font-weight: 700;
      margin-bottom: 10px;
      color: rgb(9 55 84);
  }

  .arrow-animate {
      font-weight: 700;
      font-size: 18px;
      color: rgb(9 55 84);
      animation: moveArrow 1.2s ease-in-out infinite;
  }

  @keyframes moveArrow {
      0% {
          transform: translateX(0);
          opacity: 0.6;
      }

      50% {
          transform: translateX(6px);
          opacity: 1;
      }

      100% {
          transform: translateX(0);
          opacity: 0.6;
      }
  }


  /* ===============================
       ai-section 
    ================================ */
  .ai-section {
      position: relative;
      overflow: hidden;
      padding: 30px 0;
      background: #fcdfdf71;
      animation: colorLoop 6s ease-in-out infinite;
  }

  /* Smooth gradient color animation */
  @keyframes colorLoop {
      0% {
          background-color: #fcf3f388;
      }

      25% {
          background-color: #fcdfdf71;
      }

      50% {
          background-color: #fdf2f287;
      }
  }

  /* Keep content above bubbles */
  .ai-section .container {
      position: relative;
      z-index: 2;
  }

  /* BUBBLES  */
  .bubble {
      position: absolute;
      border-radius: 50%;
      opacity: .8;
      pointer-events: none;
      z-index: 1;
  }

  /*  TEXT  */
  .ai-title {
      font-family: "Playfair Display", serif;
      font-size: 40px;
      font-weight: 700;
      color: #111;
  }

  .ai-title span {
      font-style: italic;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .ai-subtitle {
      font-size: 18px;
      color: #333;
  }

  /* ACCORDION  */
  .ai-card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      margin-bottom: 15px;
  }

  .accordion-button {
      font-weight: 600;
      background: #fff;
      color: #000;
  }

  .accordion-body {
      font-size: 15px;
      color: #000;
  }

  .accordion-button:not(.collapsed) {
      color: #000;
      background-color: #cfe2ff00;
      box-shadow: none;
  }

  .ai-image {
      max-width: 90%;
  }

  /* ===============================
     Business MLM PLAN 
    ================================ */
  .plan-title {
      font-family: "Playfair Display", serif;
      font-size: 48px;
      font-weight: 700;
      color: #111;
      margin-bottom: 12px;
      line-height: 1.2;
  }

  .plan-title span {
      font-style: italic;
      font-weight: 700;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .plan-sub-title {
      text-align: center;
      font-size: 18px;
      color: #202020;
  }

  .main-img {
      max-width: 100%;
      border-radius: 10px;
      border: 2px solid #006291;
  }

  .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #000;
      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 50%;
      cursor: pointer;
  }

  .image-title-overlay {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 600;
      z-index: 5;
  }

  .image-title-overlay h5 {
      margin: 0;
  }


  .nav-btn.left {
      left: 13px;
  }

  .nav-btn.right {
      right: 13px;
  }

  .thumb-wrapper {
      overflow: hidden;
      width: 100%;
  }

  .thumb-track {
      display: flex;
      gap: 15px;
      animation: autoSlide 25s linear infinite;
  }

  .thumb-item {
      min-width: 160px;
      text-align: center;
      cursor: pointer;
      transition: 0.3s;
  }

  .thumb-item img {
      width: 100%;
      border-radius: 10px;
      border: 2px solid transparent;
  }

  .thumb-item.active img {
      border-color: #000;
      transform: scale(1.05);
  }

  .thumb-item p {
      font-size: 14px;
      margin-top: 8px;
  }

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

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

  .plan-content {
      color: #202020;
      margin-top: 10px;
      font-size: 19px;
      line-height: 1.6;
  }

  .plan-heading {
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-size: 36px;
      font-weight: 600;
  }

  .plan-btn {
      display: inline-flex;
      align-items: center;
      gap: 15px;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      color: #fff;

      padding: 8px 18px;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
      overflow: hidden;
      position: relative;
      transition: 0.3s;
  }

  .plan-btn:hover {
      background: #fff;
      color: #111;
      border: 1px solid #111;
  }

  .plan-arrow {
      width: 42px;
      height: 42px;
      background: #fff;
      color: #002e50;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
  }

  .plan-btn:hover .plan-arrow {
      transform: translateX(6px);
      background: #002e50;
      color: #fff;
  }

  .dots {
      text-align: center;
  }

  .dot {
      height: 8px;
      width: 8px;
      margin: 0 4px;
      background: #999;
      border-radius: 50%;
      display: inline-block;
  }

  .dot.active {
      background: #000;
  }

  /* ===============================
     CTA 2
    ================================ */
  /* CTA SECTION */
  .cta2-section {
      background: url("/assets/neweb/img/cta2.png") center center / cover no-repeat;
      padding: 20px 20px;
      position: relative;
      text-align: center;
  }

  .cta2-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: auto;
  }

  .cta2-title {
      color: #fff;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 15px;
  }

  /* Search Box */
  .cta2-search {
      background: #fff;
      border-radius: 50px;
      padding: 0px 10px;
      display: flex;
      align-items: center;
      max-width: 650px;
      margin: auto;
  }

  .cta2-search input {
      border: none;
      outline: none;
      padding: 14px 20px;
      flex: 1;
      border-radius: 50px;
      font-size: 15px;
  }

  .cta2-search button {

      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 50%;
      cursor: pointer;
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
  }

  .cta2-search button:hover {
      background: #003e58;
  }

  /* ===============================
      <!-- FAQ section -->
    ================================ */
  .faq-section {
      background-image: url("/assets/neweb/img/faqbg.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 30px 0;
  }

  .faq-container {
      max-width: 700px;
      width: 100%;
  }

  .faq-title {
      background: #fff;
      color: #000;
      padding: 12px 16px;
      border-radius: 6px;
      font-weight: bold;
      margin-bottom: 16px;
      text-align: center;
  }

  .faq-item {
      background: linear-gradient(315deg, #2a81ac, #0a5c92);
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;
  }

  .faq-question {
      width: 100%;
      background: none;
      border: none;
      color: #fff;
      padding: 14px 16px;
      text-align: left;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
  }

  .faq-answer {
      padding: 0 16px;
      font-size: 14px;
      line-height: 1.6;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      background: #fff;
      color: #000;
  }

  .faq-item.active .faq-answer {
      max-height: 600px;
      padding: 12px 16px 16px;
      background: #e3e3e3;
      color: #000;
  }

  .icon {
      font-size: 18px;
  }

  /* IMAGE / RIGHT COLUMN */
  .faq-image img {
      max-width: 90%;
  }

  /* ===============================
           <!-- BLOG SECTION -->
    ================================ */

  /* Blog Card */
  .blog-card {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgb(45 90 116 / 42%);
      height: 100%;
  }

  .blog-img {
      position: relative;
  }

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

  /* Date badge */
  .blog-date {
      position: absolute;
      left: 15px;
      bottom: 15px;
      background: #fff;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
  }

  .blog-content {
      padding: 20px;
  }

  .blog-content span {
      color: rgb(9 55 84);
      font-size: 14px;
      font-weight: 600;
      text-transform: capitalize;
  }

  .blog-content h4 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 👈 2 lines only */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4em;
      max-height: 2.8em;
      /* line-height × 2 */

      font-size: 30px;
      margin-top: 6px;
      font-weight: 600;
  }




  .blog-content h4 a {
      color: #000;
      text-decoration: none;

  }

  .blog-sm h4 {
      font-size: 14px;
  }

  /* ===============================
          form section 
    ================================ */
  /* SECTION */
  .demo-section {
      padding: 30px 0;
      color: #0f0f0f;

  }

  .demo-section {
      background: #fcdfdf71;
      animation: colorLoop 6s ease-in-out infinite;
  }

  /* Smooth gradient color animation */
  @keyframes colorLoop {
      0% {
          background-color: #fcf3f388;
      }

      25% {
          background-color: #fcdfdf71;
      }

      50% {
          background-color: #fdf2f287;
      }
  }

  .demo-title {
      font-family: "Playfair Display", serif;
      font-size: 48px;
      font-weight: 700;
      color: #111;
      margin-bottom: 25px;
      line-height: 1.2;
      text-align: center;
      margin-bottom: 15px;
  }

  .demo-title span {
      font-style: italic;
      font-weight: 700;
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .demo-subtitle {
      text-align: center;
      font-size: 18px;
      color: #202020;
  }

  /* FORM CARD */
  .form-card {
      box-shadow: rgb(21 82 110 / 85%) 0px 3px 8px;
      background: #fff;
      color: #000;
      padding: 30px;
      border-radius: 4px;
  }

  .form-card h5 {
      background: linear-gradient(276deg, rgb(69, 187, 244) 3.63%, rgb(9 55 84) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-size: 32px;
      font-weight: 600;
  }

  .form-card p {
      font-size: 15px;
      color: #202020;
      margin-bottom: 20px;
  }

  .form-control,
  .form-select {
      border-radius: 2px;
      font-size: 14px;
  }

  textarea.form-control {
      resize: none;
  }

  .btn-demo {
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      color: #fff;
      font-size: 14px;
      padding: 10px 20px;
      border-radius: 4px;
  }

  .btn-demo:hover {
      background: #fff;
      color: #000;
      border: 1px solid #111;
  }

  /* RIGHT CONTENT */
  .feature-title {
      font-size: 36px;
      margin-bottom: 24px;
      font-weight: 600;
      color: #202020;

  }

  .feature-list {
      list-style: none;
      padding: 0;
  }

  .feature-list li {
      margin-bottom: 30px;
      display: flex;
      gap: 15px;
  }

  .feature-list li::before {
      content: "\2714";
      color: #003e58;
      font-weight: bold;
      margin-top: 2px;
  }

  .feature-list h6 {
      color: #003e58;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
  }

  .feature-list p {
      margin: 0;
      font-size: 16px;
      color: #202020;
  }

  .why-choose {
      padding: 30px;
  }

  /* Smooth overall feel */
  * {
      scroll-behavior: smooth;
  }

  /* ===============================
         CTA last
    ================================ */
  /* cta css */
  .cta-last-section {
      background: url("/assets/neweb/img/ctalast.png") center/cover no-repeat;
      padding: 20px 0;
      overflow: hidden;
  }

  .cta-last-content {
      position: relative;
      z-index: 2;
  }

  .cta-last-content h2 {
      color: #fff;
      font-size: 33px;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 10px;
  }

  .cta-last-content p {
      color: #fff;
  }

  /* Button */
  .cta-last-btn {
      display: inline-flex;
      align-items: center;
      gap: 15px;
      background: #fff;
      color: #111;
      padding: 8px 18px;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
      overflow: hidden;
      position: relative;
      transition: 0.3s;
  }

  .cta-last-arrow {
      width: 42px;
      height: 42px;
      background: #002e50;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
  }

  /* Hover Animation */
  .cta-last-btn:hover {
      background: linear-gradient(90deg, #2a81ac, #0a5c92);
      color: #fff;
  }

  .cta-last-btn:hover .cta-arrow {
      transform: translateX(6px);
      background: #fff;
      color: #0b0f2f;
  }

  /* ===============================
       Footer
    ================================ */
  /* ================= COMMON ================= */
  .footer-bg {
      padding-top: 14px;
      background: linear-gradient(145deg, rgb(1 5 8) 0%, rgb(4 74 139) 100%);
  }

  .footer-content p,
  .footer-content a {
      font-size: 14px;
      color: #fff;
      display: block;
      font-weight: 300;
      line-height: 1.8;
  }

  .footer-content a:hover {
      color: #ffffff;
  }

  .mlm-title,
  .mlm-title-contact {
      color: #fff;
      font-size: 20px;
      font-weight: 400;
      position: relative;
  }

  .mlm-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 166px;
      height: 1.5px;
      background: #fff;
  }

  .mlm-title-contact::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 115px;
      height: 1.5px;
      background: #fff;
  }

  .logo-footer {
      width: 190px;
  }

  .des-col {
      margin-top: 65px;
  }

  hr {
      color: #000;
      opacity: 0.6;
  }

  /* ================= DESKTOP FOOTER BOTTOM ================= */
  .footer-bottom {
      background: url("/assets/neweb/img/nav-img.png") no-repeat center bottom;
      background-size: cover;
  }

  .bottom-content {
      font-size: 13px;
      color: #001e3b;
      font-weight: 500;
  }

  .footer-bottom a {
      color: #000;
      margin-right: 15px;
      text-decoration: none;
  }

  .footer-bottom a:hover {
      color: #001e3b;
  }

  .mobile-footer {
      display: none !important;
  }

  .des-footer {
      display: block;
  }