body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: linear-gradient(135deg, #e8f5e8 0%, #d4f1d4 100%);
  }

  .product-container {
      max-width: 1100px;
      margin: 8rem auto;
  }


  .product-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .page-title {
      font-size: 48px;
      font-weight: 700;
      color: #4CAF50;
      margin-bottom: 24px;
      letter-spacing: 2px;
  }

  .page-subtitle {
      font-size: 20px;
      color: #2c3e50;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
  }

  .product-grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
  }

  .product-item {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
      backdrop-filter: blur(20px);
      border-radius: 28px;
      padding: 40px;
      display: flex;
      align-items: center;
      gap: 50px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);

      /* 3D Professional Box Shadow */
      box-shadow:
          0 25px 50px -12px rgba(0, 0, 0, 0.12),
          0 15px 25px -8px rgba(76, 175, 80, 0.1),
          0 8px 16px -4px rgba(0, 0, 0, 0.05),
          inset 0 1px 0 rgba(255, 255, 255, 0.6),
          inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  }


  .product-item:hover::before {
      left: 100%;
  } 
 
  .product-item:hover {
      transform: translateY(-6px) ;
      box-shadow:
          0 35px 70px -12px rgba(0, 0, 0, 0.1),
          0 25px 40px -8px rgba(76, 175, 80, 0.1),
  }

  .product-item.reverse {
      flex-direction: row-reverse;
  }

  .item-image {
      width: 100%;
      max-width: 100%;
      /* Remove fixed width limit */
      perspective: 1000px;
      position: relative;
      margin: 0 auto;
      padding: 0 16px;
      /* Add side padding on mobile */
      box-sizing: border-box;
  }

  .item-image video {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 20px;
      transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow:
          0 20px 40px rgba(0, 0, 0, 0.15),
          0 10px 20px rgba(76, 175, 80, 0.1),
          0 5px 10px rgba(0, 0, 0, 0.08);
  }


  .product-item.reverse:hover .item-image video {
      transform: rotateY(8deg) rotateX(5deg);
  }

  .item-content {
      flex: 1;
      padding: 20px;
      position: relative;
      z-index: 2;
  }

  .item-title {
      font-size: 35px;
      font-weight: 500;
      color: #4CAF50;
      margin-bottom: 20px;
      position: relative;
      transform: translateX(-20px);
      opacity: 0;
      transition: all 0.6s ease 0.2s;
  }

  .product-item.animate-in .item-title {
      transform: translateX(0);
      opacity: 1;
  }

  .item-title::after {
      content: '';
      width: 0;
      height: 4px;
      background: linear-gradient(90deg, #4CAF50, #81C784, #A5D6A7);
      position: absolute;
      bottom: -10px;
      left: 0;
      border-radius: 2px;
      transition: width 0.8s ease 0.4s;
      box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
  }

  .product-item.animate-in .item-title::after {
      width: 80px;
  }

  .item-description {
      font-size: 16px;
      color: #666;
      line-height: 1.7;
      transform: translateX(-20px);
      opacity: 0;
      transition: all 0.5s ease 0.4s;
  }

  .product-item.animate-in .item-description {
      transform: translateX(0);
      opacity: 1;
  }

  /* Tablet styles */
  @media (max-width: 1024px) {
      .product-container {
          padding: 0 20px;
      }

      .product-item {
          padding: 35px;
          gap: 40px;
      }

      .item-image img {
          height: 250px;
      }

      .item-title {
          font-size: 26px;
      }
  }

  /* Mobile styles */
  @media (min-width: 768px) {
      .item-image {
          max-width: 450px;
          /* Only limit on tablet/desktop */
          padding: 0;
      }
  }


  @media (max-width: 768px) {
      .page-title {
          font-size: 36px;
          margin-bottom: 20px;
      }

      .page-subtitle {
          font-size: 18px;
          padding: 0 10px;
      }

      .product-header {
          margin-bottom: 40px;
      }

      .product-item {
          flex-direction: column !important;
          padding: 30px 25px;
          gap: 25px;
          text-align: center;
      }

      .item-image {
          max-width: 100%;
      }

      .item-image img {
          height: 200px;
      }

      .item-title {
          font-size: 24px;
      }

      .item-title::after {
          left: 50%;
          transform: translateX(-50%);
      }

      .item-description {
          font-size: 15px;
      }
  }

  /* Small mobile styles */
  @media (max-width: 480px) {
      .page-title {
          font-size: 28px;
      }

      .page-subtitle {
          font-size: 16px;
      }

      .product-item {
          padding: 25px 20px;
          gap: 20px;
          margin-bottom: 25px;
      }

      .item-image img {
          height: 180px;
      }

      .item-title {
          font-size: 22px;
          margin-bottom: 15px;
      }

      .item-description {
          font-size: 14px;
          line-height: 1.6;
      }

      .product-grid {
          gap: 25px;
      }
  }

  /* Extra small screens */
  @media (max-width: 360px) {
      .page-title {
          font-size: 24px;
      }

      .product-item {
          padding: 20px 15px;
      }

      .item-image img {
          height: 160px;
      }

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