/* HERO BACKGROUND */

  .hero-modern {
      background: linear-gradient(135deg, #fde7f0, #f7f7ff);
      padding: 80px 0;
      overflow: hidden;
  }

  /* TEXT */

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 500;
      color: #444;
      border: 1px solid #f2c6da;
      transition: all 0.2s ease;
  }

  /* ICON CIRCLE */
  .badge-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      font-size: 12px;
      border-radius: 50%;
      background: #ed2d7b;
      color: #fff;
  }

  /* HOVER */
  .hero-badge:hover {
      border-color: #ed2d7b;
      color: #ed2d7b;
  }


  .hero-title {
      font-size: 44px;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.2;
  }

  .hero-title span {
      color: #e91e63;
  }

  .hero-desc {
      color: #555;
      margin-bottom: 25px;
  }

  /* ACTION AREA */

  .hero-action-area {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
  }

  /* SEARCH */

  .hero-search form {
      display: flex;
      gap: 10px;
      background: #fff;
      padding: 10px;
      border-radius: 50px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }

  .hero-search input {
      border: none;
      outline: none;
      flex: 1;
      padding: 12px;
  }

  .hero-search button {
      background: #e91e63;
      color: #fff;
      border: none;
      padding: 12px 28px;
      border-radius: 30px;
      font-weight: 600;
  }

  /* EMPLOYER BUTTON */

  .employer-btn {
      white-space: nowrap;
  }

  /* STATS */

  .hero-stats {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 20px;
      flex-wrap: wrap;
  }

  /* STAT ITEM */
  .hero-stats span {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 500;
      color: #555;
      position: relative;
      padding-right: 20px;
      transition: 0.2s ease;
  }

  /* ICON */
  .hero-stats i {
      font-size: 16px;
      color: #ed2d7b;
  }

  /* NUMBER HIGHLIGHT */
  .hero-stats strong {
      color: #ed2d7b;
      font-weight: 600;
  }

  /* DIVIDER */
  .hero-stats span:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 14px;
      background: #ddd;
  }

  /* HOVER */
  .hero-stats span:hover {
      color: #ed2d7b;
  }

  /* MOBILE */
  @media (max-width: 768px) {
      .hero-stats {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
      }

      .hero-stats span::after {
          display: none;
      }
  }

  /* IMAGE CARD */

  .hero-image-card {
      position: relative;
      border-radius: 30px;
      overflow: hidden;
      height: 500px;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
      background: #fff;
  }

  /* ANIMATED BACKGROUND */

  .image-bg-animate {
      position: absolute;
      inset: -40%;
      background: linear-gradient(45deg,
              #ff4d8d,
              #7a7cff,
              #ffb3d1,
              #8ec5ff);
      filter: blur(80px);
      opacity: 0.45;
      animation: gradientMove 10s linear infinite;
  }

  @keyframes gradientMove {
      0% {
          transform: rotate(0deg) scale(1);
      }

      50% {
          transform: rotate(180deg) scale(1.2);
      }

      100% {
          transform: rotate(360deg) scale(1);
      }
  }

  /* IMAGE */

  .image-frame {
      position: absolute;
      inset: 12px;
      border-radius: 22px;
      overflow: hidden;
      background: #fff;
  }

  .image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease;
  }

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

  /* FLOATING BADGES */

  .badge {
      position: absolute;
      background: #ed2d7b;
      color: #fff;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 13px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      z-index: 2;
      will-change: transform;
  }

  .badge.top {
      top: 20px;
      left: 20px;
      animation: float1 4s ease-in-out infinite;
  }

  .badge.mid {
      right: 20px;
      top: 45%;
      animation: float2 5s ease-in-out infinite;
  }

  .badge.bottom {
      bottom: 20px;
      left: 20px;
      animation: float3 6s ease-in-out infinite;
  }

  @keyframes float1 {
      0% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-8px);
      }

      100% {
          transform: translateY(0);
      }
  }

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

      50% {
          transform: translateX(8px);
      }

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

  @keyframes float3 {
      0% {
          transform: translate(0, 0);
      }

      50% {
          transform: translate(-6px, 6px);
      }

      100% {
          transform: translate(0, 0);
      }
  }

  /* MOBILE */

  @media (max-width:768px) {

      .hero-title {
          font-size: 28px;
      }

      .hero-action-area {
          flex-direction: column;
          align-items: stretch;
      }

      .hero-search form {
          flex-direction: column;
          border-radius: 20px;
      }

      .hero-stats {
          flex-direction: column;
          gap: 10px;
      }

      .hero-image-card {
          height: 400px;
          margin-top: 30px;
      }

  }

  /* INTERACTIVE IMAGE FRAME */

  .image-frame {
      position: absolute;
      inset: 12px;
      border-radius: 22px;
      overflow: hidden;
      background: #fff;

      transform-style: preserve-3d;
      transition: transform 0.2s ease-out;
      will-change: transform;
  }

  .image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      transition: transform 0.5s ease;
  }

  /* hover zoom */

  .image-frame:hover img {
      transform: scale(1.08);
  }