  

  .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

    @keyframes zoomInOut {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }

  .animate-zoom-icon {
    animation: zoomInOut 2s ease-in-out infinite;
  }
    @keyframes spinOnce {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  [data-aos="rotate-icon"] {
    animation: spinOnce 1s ease-in-out;
  }


    @keyframes blink-bg {
    0%, 100% {
      background-color: #dc2626; /* Tailwind red-600 */
    }
    50% {
      background-color: #000000; /* black */
    }
  }

  .animate-blink-bg {
    animation: blink-bg 1.5s infinite;
  }

  

 @keyframes iconMove {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    .animate-iconMove {
      animation: iconMove 3s ease-in-out infinite;
    }

    .slider-container {
      position: relative;
      width: 100%;
    }

    .slider-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .testimonial-card {
      box-sizing: border-box;
    }

    /* For spacing between cards */
    .testimonial-card:not(:last-child) {
      margin-right: 0.5rem;
    }

    .prev,
    .next {
      cursor: pointer;
      user-select: none;
      border: none;
      outline: none;
      background-color: #d1d5db;
      transition: background-color 0.3s;
    }

    .prev:hover,
    .next:hover {
      background-color: #9ca3af;
    }
      .rotate-180 {
      transform: rotate(180deg);
    }

:root {
  --accent-color: #ff69b4; /* Soft pink */
  --default-color: #555;
  --heading-color: #d63384;
}



    .about .about-content .chef-quote {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 25px;
  border-radius: 12px;
  border-left: 4px solid var(--accent-color);
  margin-bottom: 40px;
}

.about .about-content .chef-quote blockquote {
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
  color: var(--default-color);
}

.about .about-content .chef-quote cite {
  font-weight: 600;
  color: var(--heading-color);
  font-style: normal;
}


/* about us secton heading */
@keyframes gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-move 4s ease infinite;
  }


  /* form section animation */



    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: scale(0.95);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes slideDown {
      0% {
        opacity: 0;
        transform: translateY(-40px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fadeIn {
      animation: fadeIn 1s ease forwards;
    }

    .animate-slideDown {
      animation: slideDown 1.2s ease forwards;
    }

    .animate-slideUp {
      animation: slideUp 1.2s ease forwards;
    }

    .animate-fadeUp {
      animation: fadeUp 1.5s ease forwards;
    }

    .delay-200 {
      animation-delay: 0.2s;
    }

    .delay-400 {
      animation-delay: 0.4s;
    }

    .delay-600 {
      animation-delay: 0.6s;
    }

    .delay-800 {
      animation-delay: 0.8s;
    }

    /* 🔥 Animated Gradient Border */
    @keyframes borderMove {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .animate-border {
      background-size: 300% 300%;
      animation: borderMove 6s linear infinite;
    }




    /* video section animaton  */

      @keyframes slideFromLeft {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
  }
  @keyframes slideFromRight {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
  }
  .animate-left {
    animation: slideFromLeft 1s ease forwards;
  }
  .animate-right {
    animation: slideFromRight 1s ease forwards;
  }




  /* milestone */

   
        /* NEW: base shadow under each circle (oval) */
        .base-shadow {
            position: absolute;
            left: 50%;
            bottom: -26px;
            /* distance from circle */
            transform: translateX(-50%);
            width: 120px;
            /* shadow width */
            height: 16px;
            /* shadow height */
            pointer-events: none;
            background: radial-gradient(ellipse at center,
                    rgba(0, 0, 0, 0.28) 0%,
                    rgba(0, 0, 0, 0.18) 35%,
                    rgba(0, 0, 0, 0.00) 70%);
            /* smooth fade */
            filter: blur(1.5px);
            /* softer edges */
        }

        @media (min-width: 768px) {
            .base-shadow {
                width: 140px;
                height: 18px;
                bottom: -28px;
            }
        }

        /* Circle Border (static gradient) */
        .circle-border {
            position: relative;
            width: 14rem;
            height: 14rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: conic-gradient(from 0deg, #7c3aed, #a855f7, #7c3aed);
            padding: 6px;
            /* space for inner white circle */
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            box-shadow: 0 12px 20px rgba(124, 58, 237, 0.2);
            /* default shadow */
        }

        /* Hover effect */
        .circle-border:hover {
            transform: scale(1.07);
            box-shadow: 0 18px 30px rgba(124, 58, 237, 0.35);
        }

        .circle-inner {
            background: #fff;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.08);
            transition: transform 0.4s ease;
        }

        /* Glow inner circle on hover */
        .circle-border:hover .circle-inner {
            transform: scale(1.03);
            box-shadow: inset 0 4px 10px rgba(124, 58, 237, 0.3);
        }

        /* Connector Line */
        .connector {
            position: absolute;
            top: 50%;
            right: -90px;
            width: 90px;
            height: 2px;
            background: repeating-linear-gradient(to right,
                    #a855f7,
                    #a855f7 10px,
                    transparent 10px,
                    transparent 20px);
            animation: dashmove 2s linear infinite;
        }

        @keyframes dashmove {
            from {
                background-position: 0 0;
            }

            to {
                background-position: 20px 0;
            }
        }

        /* Arrow */
        .arrow {
            position: absolute;
            top: 50%;
            right: -30px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 16px solid #7c3aed;
            filter: drop-shadow(0 0 6px #a855f7);
            animation: glow 1.5s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from {
                filter: drop-shadow(0 0 4px #a855f7);
            }

            to {
                filter: drop-shadow(0 0 12px #a855f7);
            }
        }
  

