.hero-section .has-tag {
      width: fit-content;
      background-color: #2D5271;
      padding: 8px 25px;
      border-radius: 26px;
      margin-bottom: 1.5em;
      font-size: 15px;
  }

  .hero-section .list .item {
      display: flex;
      align-items: center;
  }

  .hero-section .list .item i {
      background-color: #2D5271;
      padding: 7px;
      border-radius: 22px;
      color: #4BB4DE;
      margin-right: 10px;
  }

  .hero-section .list .item p {
      margin: 0;
  }

  .hero-section .list .item {
      margin-bottom: 0.7em;

  }

  .primary-button {
      background-color: #4BB4DE;
  }

  .primary-button:hover {
      background-color: #1C80A0;
  }

  .primary-border-button {
      border-color: #4BB4DE;
      color: #4BB4DE;
  }

  .primary-border-button:hover {
      background-color: #1C80A0;
      border-color: #1C80A0;

  }

  .service-card i,
  .service-card a {
      color: #4BB4DE;
  }

  .why-choose-us-card .icon,
  .service-card .icon {
      width: 80px;

  }

  .text-primary-custom-blue {
      color: #4BB4DE;
  }

  .bg-primary-custom-blue {
      background-color: #4BB4DE;
  }

  .bg-primary-custom-100 {
      background-color: #4bb4de37;

  }

  .bg-primary-custom-blue-translucent {
      background-color: rgba(59, 138, 196, 0.3);
  }

  .swc-btn-confirm {
      background-color: #4BB4DE;
  }

  .swc-btn-confirm:hover,
  .swc-btn-confirm:focus {
      background-color: #1C80A0;
  }

  .bubble-container {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* No gap here, as bubbles are absolutely positioned */
  }

  .bubble {
    padding: 17px;
      position: absolute;
      width: 70px;
      height: 70px;
      background-color: #2D5271;
      /* Blueish bubble color */
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
      animation: bubble-float 20s infinite ease-in-out;
      /* Adjusted duration and timing function for a smoother, more varied loop */
      transform: translateZ(0);
      /* Force hardware acceleration for smoother animation */
  }

  /* Specific positioning for each bubble and negative animation delays for seamless start */
  .bubble:nth-child(1) {
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: -3s;
      /* Starts animation 3 seconds before page load */
      animation-duration: 18s;
      /* Slightly different duration for variety */
  }

  .bubble:nth-child(2) {
      top: 50%;
      left: 30%;
      transform: translateX(-50%);
      animation-delay: -7s;
      /* Starts animation 7 seconds before page load */
      animation-duration: 20s;
      /* Slightly different duration for variety */
  }

  .bubble:nth-child(3) {
      top: 50%;
      left: 70%;
      transform: translateX(-50%);
      animation-delay: -12s;
      /* Starts animation 12 seconds before page load */
      animation-duration: 22s;
      /* Slightly different duration for variety */
  }

  .bubble-icon {
      color: white;
      /* White icon color */
      font-size: 48px;
  }

  /* Keyframes for the bubble float animation - adjusted for a more organic and beautiful path */
  @keyframes bubble-float {
      0% {
          transform: translate(0, 0) scale(1);
          opacity: 0.8;
      }

      15% {
          transform: translate(30px, -40px) scale(1.03);
          opacity: 0.85;
      }

      30% {
          transform: translate(-20px, -80px) scale(1.01);
          opacity: 0.8;
      }

      45% {
          transform: translate(40px, -120px) scale(1.04);
          opacity: 0.88;
      }

      60% {
          transform: translate(-10px, -160px) scale(1.02);
          opacity: 0.82;
      }

      75% {
          transform: translate(20px, -200px) scale(1.05);
          opacity: 0.9;
      }

      100% {
          transform: translate(0, 0) scale(1);
          /* Returns to original position, but the path is longer */
          opacity: 0.8;
      }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .bubble {
          width: 80px;
          height: 80px;
      }

      .bubble-icon {
          font-size: 36px;
      }

      .bubble:nth-child(1) {
          top: 15%;
          left: 50%;
      }

      .bubble:nth-child(2) {
          top: 40%;
          left: 25%;
      }

      .bubble:nth-child(3) {
          top: 65%;
          left: 75%;
      }
  }