  < !-- Project-specific styles --><style>
  /* Base styles */

  :root {
      --primary-color: #8b4513;
      --secondary-color: #d4af37;
      --accent-color: ;
  }

  /* Strict no-scrollbar rules */

  * {
      -ms-overflow-style: none !important;
      /* IE and Edge */
      scrollbar-width: none !important;
      /* Firefox */
  }

  *::-webkit-scrollbar {
      display: none !important;
      /* Chrome, Safari and Opera */
  }

  /* Typography */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: Caveat, Inter, system-ui, sans-serif;
  }

  body {
      font-family: Inter, Inter, system-ui, sans-serif;
  }

  /* Interactive elements */

  .interactive-element {
      transition: all 0.3s ease;
  }

  .interactive-element:hover {
      transform: translateY(-2px);
  }

  /* Custom scrollbar */

  ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
  }

  ::-webkit-scrollbar-track {
      background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #555;
  }

  /* Animations */

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .fade-in {
      animation: fadeIn 0.5s ease-in-out;
  }


  @keyframes fadeUp {
      0% {
          opacity: 0;
          transform: translateY(20px);
      }

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

  .animation-fade-up {
      animation: fadeUp 1s ease forwards;
  }

  .animation-delay-300 {
      animation-delay: 0.3s;
  }


  /* footer css */
  .footer-card {
      transition: transform 0.4s, background 0.4s;
      padding: 5px;
  }

  .footer-card:hover {
      transform: translateY(-6px);
  }

  .footer-title {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: #fbbf24;
  }

  .footer-links li a {
      color: #d1d5db;
      position: relative;
      transition: color 0.3s ease;
  }

  .footer-links li a:hover {
      color: #fff;
  }

  .footer-links li a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      height: 2px;
      width: 0%;
      background: #fbbf24;
      transition: width 0.3s ease;
  }

  .footer-links li a:hover::after {
      width: 100%;
  }

  /* Social icon animation */
  .footer-icon {
      color: #d1d5db;
      transition: transform 0.3s, color 0.3s;
  }

  .footer-icon:hover {
      transform: scale(1.2);
      color: #fbbf24;
  }

  /* Entrance animation */
  @keyframes footerFadeUp {
      0% {
          opacity: 0;
          transform: translateY(20px);
      }

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

  .animate-footer {
      animation: footerFadeUp 0.8s ease forwards;
  }

  /* contact us */
  .input-field {
      padding: 12px 15px;
      background: white;
      border-radius: 10px;
      border: 2px solid #e5e7eb;
      width: 100%;
      transition: 0.3s;
  }

  .input-field:focus {
      border-color: #f59e0b;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
      outline: none;
  }

  .error-text {
      color: red;
      font-size: 0.85rem;
      margin-top: 3px;
  }

  .send-btn {
      background: linear-gradient(to right, #f97316, #fbbf24);
      color: white;
      padding: 12px 40px;
      border-radius: 50px;
      font-size: 18px;
      font-weight: bold;
      transition: 0.3s;
  }

  .send-btn:hover {
      transform: scale(1.05);
  }

  .float-btn {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      animation: bounce 1.6s infinite;
  }

  @keyframes bounce {

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

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

  /* Popup Animation */
  @keyframes popup {
      0% {
          transform: scale(0.6);
          opacity: 0;
      }

      100% {
          transform: scale(1);
          opacity: 1;
      }
  }

  .animate-popup {
      animation: popup 0.4s ease;
  }

  /* Wave animation */
  @keyframes waveAnim {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-100px);
      }
  }

  .animate-wave {
      animation: waveAnim 5s linear infinite;
  }

  .footer-icon-contact {
      transition: 0.3s;
  }

  .footer-icon-contact:hover {
      transform: scale(1.15);
  }

  .animate-slide-up {
      animation: slideUp 0.8s ease;
  }

  @keyframes slideUp {
      0% {
          opacity: 0;
          transform: translateY(20px);
      }

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

  @keyframes fadeUp {
      0% {
          opacity: 0;
          transform: translateY(20px);
      }

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

  .animate-fade-up {
      animation: fadeUp 1s ease forwards;
  }

  .animation-delay-200 {
      animation-delay: 0.2s;
  }

  /* Card Animation */
  .cat-card {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp 0.9s ease forwards;
      animation-delay: var(--delay, 0.1s);
  }

  .cat-img {
      overflow: hidden;
      border-radius: 12px;
      height: 12rem;
      margin-bottom: 12px;
      position: relative;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: 0.4s ease;
  }

  .cat-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.4s ease;
  }

  /* Hover Effects */
  .cat-card:hover .cat-img img {
      transform: scale(1.12);
  }

  .cat-card:hover .cat-img {
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  }

  .cat-card h3 {
      text-align: center;
      font-size: 1.1rem;
      font-weight: 600;
      color: #111827;
      transition: 0.3s ease;
  }

  .cat-card:hover h3 {
      color: #EA580C;
      /* Amber-600 */
  }

  /* Fade Up Animation */
  @keyframes fadeUp {
      0% {
          opacity: 0;
          transform: translateY(25px);
      }

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

  /* Title Animation */
  .animate-fade-up {
      opacity: 0;
      animation: fadeUp 1s ease forwards;
  }

  /* Fade-up + Stagger animation */
  .cat-card {
      opacity: 0;
      transform: translateY(25px);
      animation: fadeUpCat 0.9s ease forwards;
      animation-delay: var(--delay);
  }

  @keyframes fadeUpCat {
      0% {
          opacity: 0;
          transform: translateY(25px);
      }

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

  /* Image Wrapper */
  .cat-img {
      overflow: hidden;
      border-radius: 14px;
      height: 12rem;
      margin-bottom: 12px;
      transition: 0.4s;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  }

  /* Image Zoom + Float on Hover */
  .cat-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.5s ease;
  }

  .cat-card:hover .cat-img img {
      transform: scale(1.15);
  }

  .cat-card:hover .cat-img {
      transform: translateY(-6px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  }

  /* Title Styling + Animate */
  .cat-card h3 {
      text-align: center;
      font-size: 1.15rem;
      font-weight: 600;
      color: #111827;
      transition: 0.3s;
  }

  .cat-card:hover h3 {
      color: #EA580C;
      transform: translateY(-2px);
  }

  /* Animated Title Underline */
  .animated-title {
      display: inline-block;
      position: relative;
  }

  .animated-title::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      bottom: -6px;
      width: 120px;
      height: 3px;
      background: #EA580C;
      border-radius: 4px;
      transition: 0.4s ease;
  }

  .animated-title:hover::after {
      transform: translateX(-50%) scaleX(1);
  }

  /* Fade-up for H2 */
  .animate-fade-up {
      opacity: 0;
      animation: fadeTitle 1s ease forwards;
  }

  @keyframes fadeTitle {
      0% {
          opacity: 0;
          transform: translateY(18px);
      }

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


  /* Fade & Slide Up */
  @keyframes fadeUp {
      0% {
          opacity: 0;
          transform: translateY(30px);
      }

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

  /* Product Card */
  .product-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
      transition: all 0.4s ease;
      animation: fadeUp 0.8s ease forwards;
      opacity: 0;
  }

  .product-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  /* Product Image Zoom */
  .product-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      transition: transform 0.5s ease;
  }

  .product-card:hover .product-img {
      transform: scale(1.1);
  }

  /* Smooth Up–Down Floating Icon Animation */
  @keyframes iconFloat {
      0% {
          transform: translateY(0);
      }

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

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

  .buy-icon {
      animation: iconFloat 2.5s ease-in-out infinite;
      display: inline-block;
  }

  /* Updated H1 – clean, bold, modern */
  .main-heading {
      font-size: 1.5rem;
      font-weight: 800;
      text-align: left;
      color: #1f2937;
      /* gray-900 */
      margin-bottom: 1rem;
      letter-spacing: -0.5px;
  }

  /* Product Title Bold + Cleaner Look */
  .product-title {
      font-size: 1.2rem;
      font-weight: 700;
      /* Bold */
      color: #1f2937;
      /* gray-900 */
      margin-bottom: 4px;
      line-height: 1.3;
  }

  .cat-card {
      display: block;
      text-align: center;
      transition: transform 0.3s ease;
  }

  .cat-card:hover {
      transform: translateY(-4px);
  }

  .cat-img {
      width: 100%;
      height: 200px;
      /* rectangle height like sample */
      overflow: hidden;
      border-radius: 18px;
      /* smooth corners */
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
      background: #fff;
  }

  .cat-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
  }

  .cat-card:hover .cat-img img {
      transform: scale(1.08);
      /* soft zoom */
  }

  .cat-card h3 {
      margin-top: 10px;
      font-size: 1rem;
      font-weight: 700;
      color: #333;
  }


  /* Fade Up */
  @keyframes fadeUp {
      0% {
          opacity: 0;
          transform: translateY(30px);
      }

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

  .animate-fade-up {
      animation: fadeUp 1s ease forwards;
  }

  /* Pulse Slow */
  @keyframes pulseSlow {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.06);
      }
  }

  .animate-pulse-slow {
      animation: pulseSlow 2.5s infinite ease-in-out;
  }

  /* Background Gifts Animation */
  @keyframes slideLeft {
      0% {
          transform: translateX(120%);
      }

      100% {
          transform: translateX(-120%);
      }
  }

  @keyframes slideRight {
      0% {
          transform: translateX(-120%);
      }

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

  .animate-slide-left {
      animation: slideLeft 22s linear infinite;
  }

  .animate-slide-right {
      animation: slideRight 26s linear infinite;
  }

  /* Step Wrapper */
  .process-step {
      position: relative;
      margin-left: 40px;
      margin-bottom: 50px;
      padding-left: 40px;
  }

  /* Icons */
  .step-icon {
      position: absolute;
      left: -65px;
      top: -5px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      animation: popIn 0.6s ease forwards;
  }

  .step-content h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 6px;
  }

  .step-content p {
      color: #4b5563;
      font-size: 1rem;
      line-height: 1.5;
  }

  /* Fade + Slide Animation */
  .animate-step {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUpStep 1s ease forwards;
      animation-delay: var(--delay, 0s);
  }

  @keyframes fadeUpStep {
      0% {
          opacity: 0;
          transform: translateY(25px);
      }

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

  /* Pop Animation */
  @keyframes popIn {
      0% {
          transform: scale(0.6);
          opacity: 0;
      }

      100% {
          transform: scale(1);
          opacity: 1;
      }
  }

  /* Title animation */
  .animate-fade-up {
      opacity: 0;
      animation: fadeUpTitle 1s ease forwards;
  }

  @keyframes fadeUpTitle {
      0% {
          opacity: 0;
          transform: translateY(25px);
      }

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

  .stat-box {
      transition: 0.3s ease;
  }

  .stat-box:hover {
      transform: translateY(-6px);
  }

  .stat-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 12px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  }

  .stat-number {
      font-size: 2.3rem;
      font-weight: 800;
      color: #D97706;
  }

  .stat-label {
      font-size: 1rem;
      color: #374151;
      font-weight: 600;
  }

  </style>