#preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999999;
      transition: opacity 0.5s ease, visibility 0.5s ease;
  }



  @media screen and (max-width:600px) {
      #preloader svg {
          width: 200px;
      }
  }

  #logo path:nth-child(1) {
      stroke-dasharray: 374.3px;
      stroke-dashoffset: 374.3px;
      animation: line-anim 2s ease forwards 2.2s;
  }

  #logo path:nth-child(2) {
      stroke-dasharray: 265.3px;
      stroke-dashoffset: 265.3px;
      animation: line-anim 2s ease forwards 1.9s;

  }

  #logo path:nth-child(3) {
      stroke-dasharray: 457.8px;
      stroke-dashoffset: 457.8px;
      animation: line-anim 2s ease forwards 1.6s;
  }

  #logo path:nth-child(4) {
      stroke-dasharray: 395px;
      stroke-dashoffset: 395px;
      animation: line-anim 2s ease forwards 1.3s;
  }

  #logo path:nth-child(5) {
      stroke-dasharray: 438px;
      stroke-dashoffset: 438px;

      animation: line-anim 2s ease forwards 0.9s;
  }

  #logo path:nth-child(6) {
      stroke-dasharray: 442.2px;
      stroke-dashoffset: 442.2px;
      animation: line-anim 2s ease forwards 0.6s;
  }

  #logo path:nth-child(7) {
      stroke-dasharray: 397.5px;
      stroke-dashoffset: 397.5px;
      animation: line-anim 2s ease forwards 0.3s;
  }

  #logo path:nth-child(8) {
      stroke-dasharray: 401.1px;
      stroke-dashoffset: 401.1px;
      animation: line-anim 2s ease forwards;
  }

  #logo {
      animation: fill 0.5s ease forwards 2s;
      transition: all .5s;
  }


  @keyframes line-anim {
      to {
          stroke-dashoffset: 0;
      }
  }

  @keyframes fill {
      from {
          fill: transparent;
      }

      to {

          fill: #fff !important;
      }
  }

  /* #content {
    visibility: hidden;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

#content.show {
    visibility: visible;
    transition: visibility 0s 0.5s;
} */


  @media screen and (min-width:300px) and (max-width:600px) {
      .header-pinned {
          top: 0px !important;
      }
  }

  @media screen and (min-width:601px) and (max-width:1000px) {
      .header-pinned {
          top: -84px !important;
      }
  }


  /* styles.css */
  .nav-link.active1 {
      color: var(--primary-foreground);
      /* Adjust the color as needed */
  }

  /* Optionally, you can add more styles for the underline effect */
  .nav-link.active1::after {
      content: '';
      display: block;
      margin: auto;
      height: 2px;
      width: 100%;
      background: var(--primary-foreground);
      /* Adjust the underline color as needed */
  }



  .popup {
      display: none;
      position: fixed;
      z-index: 99;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4);
      transition: opacity 0.3s;
      opacity: 0;
      overflow: hidden;

  }

  .popup.open {
      display: block;
      opacity: 1;
  }

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

  .error {
      color: red;
  }

  .form-group input,
  .form-group select {
      width: 100%;
  }

  @media screen and (min-width:300px) and (max-width: 600px) {
      .popup-content {
          width: 80% !important;
      }
  }

  .popup-content {
      background-color: #fefefe;
      margin: 5% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 40%;
      z-index: 999;
      background-image: url(../../assets/img/popup-main.webp);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 20px;
      transform: scale(0.5);
      transition: transform 0.3s;

  }

  .close {
      color: #004cff;
      float: right;
      font-size: 33px;
      font-weight: bold;
  }

  .close:hover,
  .close:focus {
      color: red;
      text-decoration: none;
      cursor: pointer;
  }

  .relative.flex {
      display: flex;
      align-items: center;
  }

  .relative.flex select {
      margin-right: 10px;
  }

  .btn {
      /* background-color: #4CAF50; */
      background: linear-gradient(140deg, rgba(94, 84, 142, 1) 0%, rgba(94, 84, 142, 1) 27%, rgba(159, 134, 192, 1) 73%, rgba(190, 149, 196, 1) 100%);
      ;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 4px;
  }

  .btn:hover {
      background-color: #45a049;
  }


  .bg-color {
      background: aliceblue;
  }

  .badge-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
      /* padding: 40px 20px;
        background: #fff; */
  }

  .badge-center img {
      width: 180px;
      max-width: 100%;
      height: auto;
  }

  .badge-features {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .feature-box {
      background: #fff;
      border-radius: 50px;
      border: 3px solid #f0c240;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 7px 0px;
      text-align: center;
      font-weight: bold;
      color: #333;
      font-family: 'Work Sans', sans-serif;
      position: relative;
      white-space: nowrap;
      font-size: 14px;
      line-height: 1.2;
      width: 179px;
  }

  .feature-box span {
      display: block;
      font-weight: normal;
      font-size: 12px;
      color: #555;
  }

  /* Decorative arrow styles */
  .feature-box::before {
      content: "";
      position: absolute;
      top: 15%;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      transform: translateY(-50%);
      rotate: 180deg;
  }

  .badge-features.left .feature-box::before {
      right: -20px;
      border-right-color: #f0c240;
  }

  .badge-features.right .feature-box::before {
      left: -20px;
      border-left-color: #f0c240;
  }

  .row {
      display: flex;
      align-items: center;
  }


  /* Responsive */
  @media screen and (max-width: 768px) {
      .badge-wrapper {
          flex-direction: column;
          gap: 20px;
      }

      .badge-features {
          flex-direction: row;
          justify-content: center;
          flex-wrap: wrap;
          gap: 15px;
      }

      /* .feature-box {
            min-width: 140px;
            font-size: 13px;
            padding: 10px 20px;
        } */
      .feature-box {
          width: 70px !important;
          font-size: 8px;
          padding: 3px 10%;
          border: 1px solid #f0c240;
          align-items: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }


      .badge-features.right .feature-box::before {
          left: -13px;
          border-left-color: #f0c240;
      }

      .badge-features.left .feature-box::before {
          right: -13px;
          border-right-color: #f0c240;
      }

      .feature-box::before {
          content: "";
          position: absolute;
          top: -11%;
          width: 0;
          height: 0;
          border: 7px solid transparent;
          border-right-color: transparent;
          border-right-color: transparent;
          transform: translateY(-50%);
          rotate: 180deg;
      }


      .feature-box span {
          font-size: 5px;
      }

      .badge-center img {
          width: 190px;
          max-width: 100%;
          height: auto;
      }

      .row.justify-between {
          flex-direction: column;
      }

      .row.justify-between .col-4 {
          max-width: 100% !important;
      }

      /* .feature-box::before {
            display: none;
        } */
  }