ok, make this styles (<style>
  :root {
      --c-gradient: linear-gradient(135deg, #D1C287, #4F3F02);
      --c-gray: #4a4a4a;
      --c-light-gray: #f5f5f5;
      --c-white: #ffffff;
      --c-text-light: #d9d9d9;
      --c-bg-primary: rgba(43, 43, 43, 0.5); /* #2b2b2b with 0.5 opacity */
      --c-text-primary: #ffffff;
      --c-gold: #D1C287;
      --c-accent: #4F3F02;
      --f-primary: 'Lato', sans-serif;
      --s-border-radius: 12px;
      --transition-speed: 0.3s;
      --container-max-width: 1200px;
      --fade-in-duration: 0.6s;
      --gradient-start: #D1C287;
      --gradient-end: #4F3F02;
      --section-padding: 20px 0px; /* Added default padding */
  }

  .package-box {
      display: block;
      max-width: var(--container-max-width);
      padding: 24px;
      background: var(--c-gradient);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      border-radius: var(--s-border-radius);
      text-decoration: none;
      color: var(--c-text-primary);
      font-family: var(--f-primary);
      position: relative;
      overflow: hidden;
      transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }

  .package-box:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  }

  /* Background Overlay */
  .package-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--c-bg-primary);
      opacity: 0.3;
      z-index: 0;
      transition: opacity var(--transition-speed);
  }

  .package-box:hover::before {
      opacity: 0.1;
  }

  /* Header: Title and Icon */
  .package-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
  }

  .package-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--c-white);
      position: relative;
      z-index: 1;
  }

  .package-icon {
      width: 28px;
      height: 28px;
      transition: transform var(--transition-speed);
      filter: brightness(0) invert(1); /* Ensures the icon is visible on dark backgrounds */
      position: relative;
      z-index: 1;
    }

  .package-box:hover .package-icon {
      transform: rotate(45deg);
  }

  /* Description */
  .package-description {
      font-size: 20px;
      font-weight: 600;
      position: relative;
      z-index: 1;
      color: var(--c-white);
      margin-bottom: 24px;
  }

  /* Decorative Elements */
  .package-box::after {
      content: "";
      position: absolute;
      top: -60px;
      right: -60px;
      width: 150px;
      height: 150px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      z-index: 0;
      transform: rotate(45deg);
      transition: background var(--transition-speed);
  }

  .package-box:hover::after {
      background: rgba(255, 255, 255, 0.25);
  }

  /* Additional Diagnostic Icons */
  .diagnostic-icons {
      position: absolute;
      bottom: 16px;
      right: 16px;
      display: flex;
      gap: 16px;
      z-index: 1;
      flex-wrap: wrap;
    }

  .diagnostic-icon {
      width: 35px;
      height: 35px;
      opacity: 0.85;
      transition: transform var(--transition-speed), opacity var(--transition-speed);
      cursor: pointer;
    }

  .diagnostic-icon:hover {
      transform: scale(1.3);
      opacity: 1;
    }

  /* Animated Floating Icons */
  .float {
      animation: floatAnimation 6s ease-in-out infinite;
  }

  @keyframes floatAnimation {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .package-box {
          padding: 20px;
      }

      .package-header {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
      }

      .package-title {
          font-size: 22px;
      }

      .package-description {
          font-size: 18px;
          margin-bottom: 20px;
      }

      .diagnostic-icons {
          bottom: 12px;
          right: 12px;
          gap: 12px;
      }

      .diagnostic-icon {
          width: 28px;
          height: 28px;
      }

      /* Ensuring the external link icon stays at the top-right on mobile */
      .package-header {
          position: relative;
      }

      .package-icon {
          position: absolute;
          top: 0;
          right: 0;
          transform: rotate(0);
      }

      .package-box:hover .package-icon {
          transform: rotate(0);
      }
  }

  @media (max-width: 480px) {
      .package-box {
          padding: 16px;
      }

      .package-title {
          font-size: 20px;
      }

      .package-description {
          font-size: 16px;
          margin-bottom: 16px;
      }

      .diagnostic-icons {
          bottom: 8px;
          right: 8px;
          gap: 10px;
      }

      .diagnostic-icon {
          width: 25px;
          height: 25px;
      }
  }
</style>
) clear and showing icons looks great and suitable with and add more codes to be better and don't change the styles colors and fonts