@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        :root {
          --primary: #f7d024;
          /* Primary orange color */
          --primary-light: #f7d024;
          /* Lighter orange variant */
          --secondary: #000000;
          /* Black for text and backgrounds */
          --light: #FFFFFF;
          /* White for text and backgrounds */
          --dark: #1A1A1A;
          /* Dark gray for backgrounds */
          --gray: #F5F5F5;
          /* Light gray for backgrounds */
          --indian-red: #f7d024;
          /* Red  */
          --chinese-gold: #f7d024;
          /* Gold  */
          --light-orange: #f0ecb1;
          --dark-light: #060606d4;
          --success: #7DBB7D;
          --background: #FDEBD3;
          --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          --primary2: #f8b739;
          --primary-light2: rgba(248, 183, 57, 0.1);
          --secondary2: #6c757d;
          --dark2: #343a40;
          --light2: #f8f9fa;
          --success2: #28a745;
          --danger: #dc3545;
          --warning2: #ffc107;
        }


        /* Global Reset and Base Styles */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins', sans-serif;
        }

        body {
          background-color: var(--light);
          color: var(--secondary);
          overflow-x: hidden;
        }

        a {
          text-decoration: none !important;
        }

        /* Header/Navigation Styles */
        header {
          background-color: rgb(255, 201, 28);
          padding: 15px 5%;
          position: fixed;
          width: 100%;
          z-index: 1000;
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
        }

        .disabled-link {
          pointer-events: none;
          cursor: not-allowed;
          opacity: 0.6;
        }

        .header-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          max-width: 1400px;
          margin: 0 auto;
          padding-top: 15px;
        }

        /* Logo Styles */
        .logo {
          display: flex;
          align-items: center;

        }

        .logo img {
          height: 50px;
          margin-right: 10px;
        }

        .logo h1 {
          color: var(--dark);
          font-size: 28px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          /* Gradient text effect combining Indian and Chinese colors */
          /* background: linear-gradient(90deg, var(--indian-red), var(--chinese-gold)); */
          /* -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; */
        }

        /* Navigation Menu Styles */
        nav ul {
          display: flex;
          list-style: none;
        }

        nav ul li {
          margin-left: 30px;
          position: relative;
        }

        nav ul li a {
          position: relative;
          color: var(--dark);
          text-decoration: none;
          font-weight: 600;
          font-size: 16px;
          transition: color 0.3s ease;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          white-space: nowrap;
        }

        nav ul li:not(:last-child) a::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%) scaleX(0);
          transform-origin: center;
          width: 100%;
          height: 2px;
          background-color: var(--dark);
          transition: transform 0.3s ease;
        }

        /* nav ul li:not(:last-child) a:hover {
            color: var(--dark-light);
        } */

        nav ul li:not(:last-child) a:hover::after {
          transform: translateX(-50%) scaleX(1);
        }

        /* Book Now Button Styles */
        .book-now-btn {
          background-color: #1a1a1a;
          color: #ffffff;
          padding: 10px 28px;
          border-radius: 50px;
          font-weight: 600;
          transition: all 0.3s ease;
          border: 2px solid #1a1a1a;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-size: 14px;
          white-space: nowrap;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .book-now-btn:hover {
          background-color: #ffffff;
          color: #1a1a1a;
          transform: translateY(-2px);
          box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        .login-btn i {
          font-size: 1.77rem;
          color: #FF6B00;
        }

        .login-btn i:hover {
          scale: 1.01;
        }

        /* Mobile Menu Button (Hidden on Desktop) */
        .mobile-menu-btn {
          display: none;
          color: var(--dark);
          font-size: 24px;
          cursor: pointer;
        }

        /* Hero Slider Section Styles */
        .hero-slider {
          width: 100%;
          height: 100vh;
          overflow: hidden;
          position: relative;
        }

        /* Swiper Slider Container */
        .swiper {
          width: 100%;
          height: 100%;
        }

        /* Individual Slide Styles */
        .swiper-slide {
          position: relative;
          display: flex;
          align-items: center;
          background-size: cover;
          background-position: center;
        }

        /* Slide Content Container */
        .slide-content {
          position: relative;
          z-index: 2;
          color: var(--light);
          padding: 0 10%;
          max-width: 1400px;
          margin: 0 auto;
          width: 100%;
          padding-top: 120px;
          /* Extra padding to account for fixed header */
        }

        /* Inner Content Wrapper */
        .slide-content .inner {
          max-width: 950px;
        }

        /* Slide Heading */
        .slide-content h2 {
          font-size: 52px;
          margin-bottom: 25px;
          line-height: 1.2;
          font-weight: 800;
          text-transform: uppercase;
          color: var(--light);
          text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
          animation: fadeInUp 0.8s ease;
        }

        /* Slide Description */
        .slide-content p {
          font-size: 18px;
          margin-bottom: 35px;
          animation: fadeInUp 1s ease;
          line-height: 1.6;
        }

        /* Hero Button Styles */
        .hero-btn {
          display: inline-block;
          background: linear-gradient(135deg, var(--indian-red), var(--primary));
          color: var(--light);
          padding: 15px 35px;
          border-radius: 30px;
          font-weight: 700;
          font-size: 16px;
          text-decoration: none;
          transition: all 0.3s ease;
          animation: fadeInUp 1.2s ease;
          border: none;
          text-transform: uppercase;
          letter-spacing: 1px;
          box-shadow: 0 4px 15px rgba(229, 59, 59, 0.3);
        }

        .hero-btn:hover {
          background: linear-gradient(135deg, var(--primary), var(--indian-red));
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(229, 59, 59, 0.4);
        }

        /* Cuisine Badge Styles */
        .cuisine-badge {
          display: inline-block;
          background-color: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          padding: 10px 25px;
          border-radius: 30px;
          margin-bottom: 25px;
          font-size: 16px;
          font-weight: 700;
          animation: fadeIn 0.6s ease;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        /* Specific Badge Styles for Different Cuisines */
        .indian-badge {
          border-left: 4px solid var(--indian-red);
        }

        .chinese-badge {
          border-left: 4px solid var(--chinese-gold);
        }

        .fusion-badge {
          border-left: 4px solid var(--primary);
        }

        /* Hide Swiper Pagination Dots */
        .swiper-pagination {
          display: none;
        }

        /* Overlay for Slider Images */
        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, rgba(0, 0, 0, -0.3) 0%, rgba(0, 0, 0, 0.4) 100%);
          z-index: 1;
        }

        /* Chef Statistics Section */
        .chef-stats {
          display: flex;
          gap: 30px;
          margin-top: 50px;
          animation: fadeInUp 1.4s ease;
          flex-wrap: wrap;
        }

        /* Individual Stat Item */
        .stat-item {
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(5px);
          padding: 15px 20px;
          border-radius: 10px;
          border-left: 3px solid var(--primary);
        }

        /* Stat Icon */
        .stat-icon {
          font-size: 28px;
          color: var(--primary);
          margin-right: 15px;
        }

        /* Stat Text Content */
        .stat-text h3 {
          font-size: 22px;
          font-weight: 700;
          color: var(--light);
          margin-bottom: 5px;
        }

        .stat-text p {
          font-size: 14px;
          margin: 0;
          opacity: 0.8;
          color: var(--light);
        }

        /* Animation Keyframes */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }

        /* Responsive Styles */
        /* Large Desktop (1200px and below) */
        @media (max-width: 1200px) {
          .slide-content h2 {
            font-size: 42px;
          }
        }

        /* Tablet (992px and below) */
        @media (max-width: 992px) {

          /* Mobile Navigation Styles */
          nav {
            position: fixed;
            top: 70px;
            left: -100%;
            width: 100%;
            height: calc(100vh - 80px);
            background-color: var(--dark);
            transition: all 0.5s ease;
            z-index: 999;
          }

          nav.active {
            left: 0;
          }

          nav ul {
            flex-direction: column;
            padding: 30px;
          }

          nav ul li {
            margin: 15px 0;
          }

          .mobile-menu-btn {
            display: block;
          }

          .slide-content h2 {
            font-size: 36px;
          }

          .slide-content p {
            font-size: 16px;
          }

          .chef-stats {
            gap: 15px;
          }

          .stat-item {
            padding: 12px 15px;
          }
        }

        /* Small Tablet (768px and below) */
        @media (max-width: 768px) {
          .logo h1 {
            font-size: 22px;
          }

          .slide-content {
            padding: 0 5%;
            text-align: center;
            padding-top: 100px;
          }

          .slide-content .inner {
            margin: 0 auto;
          }

          .slide-content h2 {
            font-size: 32px;
          }

          .hero-btn {
            padding: 12px 25px;
            font-size: 14px;
          }

          .chef-stats {
            justify-content: center;
          }
        }

        /* Mobile (480px and below) */
        @media (max-width: 480px) {
          .slide-content h2 {
            font-size: 28px;
          }

          .cuisine-badge {
            font-size: 14px;
            padding: 8px 15px;
          }

          .stat-item {
            flex-direction: column;
            text-align: center;
            width: 100%;
          }

          .stat-icon {
            margin-right: 0;
            margin-bottom: 10px;
          }
        }

        /* ========================================================SLIDER SECTION ENDS===================================================================== */

        /* <!-- ======================================================PACKAGES SECTION STARTS===================================================================== --> */
        .packages-section {
          padding: 100px 0;
          background:
            radial-gradient(circle at 20% 30%, #f7f7f7 0%, transparent 100%),
            radial-gradient(circle at 80% 70%, #f7f7f7, transparent 100%),
            linear-gradient(to bottom, var(--light-orange), var(--light-orange));
          position: relative;
          overflow: hidden;
        }

        .section-header {
          text-align: center;
          margin-bottom: 70px;
          position: relative;
          z-index: 2;
        }

        .section-badge {
          display: inline-block;
          background: linear-gradient(90deg, var(--indian-red), var(--primary));
          color: white;
          padding: 10px 25px;
          border-radius: 50px;
          font-size: 14px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-bottom: 25px;
          box-shadow: 0 4px 15px rgba(229, 59, 59, 0.3);
        }

        .section-title {
          font-size: 42px;
          color: var(--secondary);
          margin-bottom: 15px;
          font-weight: 800;
          position: relative;
        }

        .section-title::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background: linear-gradient(90deg, var(--indian-red), var(--primary));
          border-radius: 2px;
        }

        .section-subtitle {
          color: var(--secondary);
          font-size: 18px;
          max-width: 700px;
          margin: 0 auto;
          opacity: 0.8;
          line-height: 1.6;
        }

        .packages-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 30px;
          position: relative;
          z-index: 2;
        }

        .package-card {
          background: white;
          border-radius: 16px;
          padding: 45px 30px;
          text-align: center;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(255, 107, 0, 0.1);
        }

        .package-card.featured {
          border: 5px solid var(--primary);
          box-shadow: 0 10px 40px rgba(255, 107, 0, 0.15);
        }

        .package-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 35px rgba(255, 107, 0, 0.2);
        }

        .package-badge {
          position: absolute;
          top: 10px;
          right: 20px;
          background: var(--indian-red);
          color: white;
          padding: 6px 15px;
          font-weight: 700;
          font-size: 12px;
          border-radius: 50px;
          text-align: center;
          z-index: 3;
          box-shadow: 0 3px 10px rgba(229, 59, 59, 0.3);
        }

        .package-icon {
          width: 90px;
          height: 90px;
          background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 25px;
          border: 2px dashed var(--primary);
          transition: all 0.4s ease;
        }

        .package-icon svg {
          width: 36px;
          height: 36px;
          fill: var(--primary);
          transition: all 0.4s ease;
        }

        .package-icon i {
          font-size: 36px;
          color: var(--primary);
          transition: all 0.4s ease;
        }

        .package-card:hover .package-icon {
          background: linear-gradient(135deg, var(--primary) 0%, var(--indian-red) 100%);
          transform: rotateY(180deg);
        }

        .package-card.active .package-icon {
          background: linear-gradient(135deg, var(--primary) 0%, var(--indian-red) 100%);
          transform: rotateY(180deg);
        }

        .package-card.active .package-icon svg {
          fill: white;
        }

        .package-card.active .package-icon i {
          color: white;
        }

        .package-card:hover .package-icon svg {
          fill: white;
        }

        .package-card:hover .package-icon i {
          color: white;
        }

        .package-card h3 {
          color: var(--secondary);
          font-size: 24px;
          margin-bottom: 12px;
          font-weight: 800;
        }

        .price {
          color: var(--primary);
          font-size: 20px;
          margin-bottom: 10px;
          font-weight: 700;
        }

        .price sup {
          font-size: 18px;
          top: -0.5em;
        }

        .price small {
          font-size: 15px;
          color: rgba(0, 0, 0, 0.6);
          font-weight: 500;
        }

        .package-desc {
          color: rgba(0, 0, 0, 0.7);
          font-size: 15px;
          margin-bottom: 25px;
          line-height: 1.6;
          min-height: 50px;
          padding: 0 10px;
        }

        .features {
          list-style: none;
          margin-bottom: 35px;
          text-align: left;
          padding: 0 15px;
        }

        .features li {
          color: var(--secondary);
          margin-bottom: 12px;
          position: relative;
          padding-left: 28px;
          font-size: 15px;
          line-height: 1.5;
        }

        .features li span {
          color: var(--primary);
          position: absolute;
          left: 0;
          top: 2px;
          font-weight: 700;
        }


        .package-btn {
          margin: 10px;
          display: inline-flex;
          align-items: center;
          background: linear-gradient(135deg, var(--primary) 0%, var(--indian-red) 100%);
          color: white;
          padding: 14px 30px;
          border-radius: 50px;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.3s ease;
          font-size: 15px;
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        .package-btn svg {
          margin-left: 8px;
          stroke: white;
          stroke-width: 2;
          fill: none;
          transition: all 0.3s ease;
        }

        .package-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(255, 107, 0, 0.4);
        }

        .package-btn:hover svg {
          transform: translateX(5px);
        }

        .more-btn {
          display: inline-flex;
          align-items: center;
          border: 2px solid var(--primary);
          color: var(--primary);
          padding: 14px 30px;
          border-radius: 50px;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.3s ease;
          font-size: 15px;
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        .more-btn svg {
          margin-left: 8px;
          stroke: white;
          stroke-width: 2;
          fill: none;
          transition: all 0.3s ease;
        }

        .more-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(255, 107, 0, 0.4);
        }

        .more-btn:hover svg {
          transform: translateX(5px);
        }

        .featured-tag {
          position: absolute;
          top: 15px;
          left: 15px;
          background: var(--primary);
          color: white;
          padding: 6px 15px;
          font-weight: 700;
          font-size: 13px;
          border-radius: 50px;
          box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3);
        }

        /* Responsive Adjustments */
        @media (max-width: 1200px) {
          .packages-grid {
            gap: 25px;
          }

          .package-card {
            padding: 40px 25px;
          }
        }

        @media (max-width: 992px) {
          .packages-section {
            padding: 80px 0;
          }

          .packages-grid {
            grid-template-columns: 1fr;
            max-width: 550px;
            margin: 0 auto;
            gap: 30px;
          }

          .package-card {
            padding: 45px 35px;
          }
        }

        @media (max-width: 768px) {
          .section-title {
            font-size: 36px;
          }

          .section-subtitle {
            font-size: 16px;
            padding: 0 20px;
          }

          .package-badge,
          .featured-tag {
            font-size: 11px;
            padding: 5px 12px;
          }
        }

        @media (max-width: 576px) {
          .section-title {
            font-size: 30px;
          }

          .section-badge {
            font-size: 12px;
            padding: 8px 20px;
          }

          .package-card {
            padding: 35px 25px;
          }

          .package-footer {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .more-btn {
            margin-top: 10px;
          }
        }

        /* <!-- ======================================================PACKAGES SECTION ENDS===================================================================== --> */

        /* <!-- ======================================================ABOUT SECTION STARTS===================================================================== --> */
        .about-hero {
          position: relative;
          padding: 4rem 2rem;
          /* background: 
        radial-gradient(circle at 20% 30%, #f7f7f7 0%, transparent 100%),
        radial-gradient(circle at 80% 70%, #f7f7f7, transparent 100%),
        linear-gradient(to bottom, var(--light-orange), var(--light-orange)); */
          background: #f7f7f7;
          overflow: hidden;
        }

        .hero-container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          gap: 4rem;
          align-items: center;
          position: relative;
          z-index: 2;
        }

        /* === CONTENT SECTIONS === */
        .ab1 {
          flex: 1;
          min-width: 300px;
          transition: all 0.5s ease;
        }

        .ab1:hover {
          transform: translateY(-5px);
        }

        .ab2 {
          flex: 1;
          min-width: 300px;
          height: 500px;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
          position: relative;
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .ab2:hover {
          transform: translateY(-10px) rotate(2deg);
          box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
        }

        /* === TYPOGRAPHY === */
        .hero-title {
          font-size: 4rem;
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 1.5rem;
          background: linear-gradient(45deg, var(--dark) 30%, var(--primary) 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          text-transform: uppercase;
          letter-spacing: -2px;
          transition: all 0.4s ease;
        }

        .hero-title:hover {
          letter-spacing: 1px;
          background: linear-gradient(45deg, var(--primary-light) 30%, var(--chinese-gold) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .hero-subtitle {
          font-size: 1.5rem;
          font-weight: 400;
          color: rgba(1, 1, 1, 0.8);
          margin-bottom: 2rem;
          position: relative;
          display: inline-block;
          transition: all 0.3s ease;
        }

        .hero-subtitle:hover {
          color: var(--primary-light);
        }

        .hero-subtitle:after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 60px;
          height: 4px;
          background: var(--primary);
          transition: all 0.3s ease;
        }

        .hero-subtitle:hover:after {
          width: 100%;
          background: var(--chinese-gold);
        }

        .hero-title1 {
          font-size: 4rem;
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 1.5rem;
          background: linear-gradient(45deg, var(--bs-dark) 30%, var(--primary) 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          text-transform: uppercase;
          letter-spacing: -2px;
          transition: all 0.4s ease;
        }

        .hero-title1:hover {
          letter-spacing: 1px;
          background: linear-gradient(45deg, var(--bs-gray-dark) 30%, var(--chinese-gold) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .hero-subtitle1 {
          font-size: 1.5rem;
          font-weight: 400;
          color: rgba(35, 32, 32, 0.8);
          margin-bottom: 2rem;
          position: relative;
          display: inline-block;
          transition: all 0.3s ease;
        }

        .hero-subtitle1:hover {
          color: var(--primary-light);
        }

        .hero-subtitle1:after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 60px;
          height: 4px;
          background: var(--primary);
          transition: all 0.3s ease;
        }

        .hero-subtitle1:hover:after {
          width: 100%;
          background: var(--chinese-gold);
        }

        .hero-description {
          font-size: 1.2rem;
          line-height: 1.8;
          color: rgba(0, 0, 0, 0.949);
          margin-bottom: 3rem;
          max-width: 600px;
          transition: all 0.3s ease;
        }

        .hero-description:hover {
          /* color: var(--); */
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        /* === STATS GRID === */
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.5rem;
          margin-bottom: 3rem;
        }

        .stat-card {
          background: radial-gradient(circle at 20% 30%, #f7f7f7 0%, transparent 100%), radial-gradient(circle at 80% 70%, #f7f7f7, transparent 100%), linear-gradient(to bottom, var(--light-orange), var(--light-orange));
          border: 1px solid rgba(255, 255, 255, 0.6);
          border-radius: 12px;
          padding: 2rem;
          text-align: center;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          backdrop-filter: blur(10px);
          position: relative;
          overflow: hidden;
        }

        .stat-card:hover {
          transform: translateY(-10px);
          background: rgba(255, 255, 255, 0.1);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
          border-color: var(--primary);
        }



        .stat-number {
          font-size: 3rem;
          font-weight: 700;
          color: var(--primary);
          margin-bottom: 0.5rem;
          transition: all 0.3s ease;
        }

        .stat-card:hover .stat-number {
          color: var(--dark);
          transform: scale(1.1);
        }

        .stat-card:nth-child(2):hover .stat-number {
          transform: translateY(-10px);
          background: rgba(255, 255, 255, 0.1);
          /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
          border-color: var(--primary);
        }

        .stat-card:nth-child(3):hover .stat-number {
          transform: translateY(-10px);
          background: rgba(255, 255, 255, 0.1);
          /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
          border-color: var(--primary);
        }

        .stat-label {
          font-size: 1rem;
          font-weight: 500;
          color: var(--dark);
          text-transform: uppercase;
          letter-spacing: 2px;
          transition: all 0.3s ease;
        }

        .stat-card:hover .stat-label {
          color: var(--dark);
          letter-spacing: 3px;
        }

        /* === BUTTON === */
        .hero-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: var(--primary);
          color: var(--dark);
          border: none;
          padding: 1.2rem 3rem;
          font-size: 1.1rem;
          font-weight: 600;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
          box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .hero-button:hover {
          background: var(--chinese-gold);
          color: var(--secondary);
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(255, 215, 0, 0.5);
          letter-spacing: 2px;
        }

        .hero-button:active {
          transform: translateY(0);
        }

        .hero-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: 0.5s;
        }

        .hero-button:hover::before {
          left: 100%;
        }

        /* === IMAGE === */
        .ab2 img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.5s ease;
          filter: contrast(110%) saturate(120%);
        }

        .ab2:hover img {
          transform: scale(1.05);
          filter: contrast(100%) saturate(150%);
        }

        .ab2:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, rgba(255, 107, 0, 0.2) 0%, rgba(255, 215, 0, 0.2) 100%);
          mix-blend-mode: overlay;
          z-index: 1;
          transition: all 0.5s ease;
        }

        .ab2:hover:before {
          opacity: 0.8;
          background: linear-gradient(45deg, rgba(255, 107, 0, 0.4) 0%, rgba(255, 215, 0, 0.4) 100%);
        }

        /* === DECORATIVE ELEMENTS === */
        .floating-shape {
          position: absolute;
          border-radius: 50%;
          background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
          filter: blur(40px);
          opacity: 0.3;
          z-index: 1;
          transition: all 5s ease;
        }

        .shape-1 {
          width: 300px;
          height: 300px;
          top: -100px;
          left: -100px;
          animation: float 12s infinite ease-in-out;
        }

        .shape-2 {
          width: 400px;
          height: 400px;
          bottom: -150px;
          right: -150px;
          background: radial-gradient(circle, var(--chinese-gold) 0%, transparent 70%);
          animation: float 15s infinite ease-in-out reverse;
        }

        .about-hero:hover .shape-1 {
          transform: translate(50px, 50px);
          opacity: 0.5;
        }

        .about-hero:hover .shape-2 {
          transform: translate(-50px, -50px);
          opacity: 0.5;
        }

        @keyframes float {

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

          50% {
            transform: translate(30px, 30px) rotate(5deg);
          }
        }

        /* === RESPONSIVE === */
        @media (max-width: 992px) {
          .hero-title {
            font-size: 3.5rem;
          }

          .hero-title1 {
            font-size: 3.5rem;
          }

          .ab2 {
            height: 400px;
          }
        }

        @media (max-width: 768px) {
          .about-hero {
            padding: 6rem 1.5rem;
          }

          .hero-container {
            flex-direction: column;
          }

          .hero-title {
            font-size: 2.8rem;
          }

          .hero-title1 {
            font-size: 2.8rem;
          }

          .stats-grid {
            grid-template-columns: 1fr;
          }

          .ab2 {
            width: 100%;
            height: 350px;
          }
        }

        /* <!-- ======================================================ABOUT SECTION ENDS===================================================================== --> */


        /* <!-- ======================================================BOOKING SECTION ENDS===================================================================== --> */
        .booking-process {
          padding: 120px 20px;
          /* max-width: 1400px; */
          margin: 0 auto;
          position: relative;
          overflow: hidden;
        }

        .section-header {
          text-align: center;
          margin-bottom: 80px;
          position: relative;
          z-index: 2;
        }

        .section-header h2 {
          font-size: 3rem;
          color: var(--secondary);
          margin-bottom: 20px;
          font-weight: 700;
          position: relative;
          display: inline-block;
        }

        .section-header h2::after {
          content: '';
          position: absolute;
          width: 80px;
          height: 5px;
          background: var(--primary);
          bottom: -15px;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 3px;
        }

        .section-header p {
          color: var(--secondary);
          font-size: 1.2rem;
          max-width: 700px;
          margin: 25px auto 0;
          opacity: 0.8;
          font-weight: 300;
          line-height: 1.6;
        }

        .process-steps {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          position: relative;
          padding-top: 60px;
          z-index: 2;
        }

        /* Decorative elements */
        .bg-pattern {
          position: absolute;
          width: 300px;
          height: 300px;
          background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0) 70%);
          border-radius: 50%;
        }

        .bg-pattern-1 {
          top: -100px;
          left: -100px;
        }

        .bg-pattern-2 {
          bottom: -50px;
          right: -100px;
        }

        /* Connecting line - will be animated by GSAP */
        .process-line {
          position: absolute;
          top: 150px;
          left: 10%;
          width: 0;
          height: 4px;
          background: linear-gradient(90deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-light) 100%);
          z-index: 1;
          border-radius: 2px;
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.2);
        }

        .step {
          width: 23%;
          text-align: center;
          position: relative;
          z-index: 2;
          margin-bottom: 30px;
          perspective: 1000px;
          opacity: 1;
          /* Changed from 0 to 1 to make cards visible */
        }

        .step-inner {
          background: var(--light);
          border-radius: 20px;
          padding: 30px 25px;
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
          transition: all 0.5s ease;
          height: 100%;
          position: relative;
          overflow: hidden;
          transform-style: preserve-3d;
        }

        .step-number {
          position: absolute;
          top: 15px;
          left: 15px;
          width: 30px;
          height: 30px;
          background: var(--primary);
          color: var(--light);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          font-size: 0.9rem;
          transition: all 0.3s ease;
          z-index: 2;
        }

        .step-icon {
          width: 120px;
          height: 120px;
          margin: 0 auto 30px;
          background: var(--light);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 15px 30px rgba(255, 107, 0, 0.15);
          /* border: 3px solid var(--primary-light); */
          transition: all 0.5s ease;
          position: relative;
        }

        .step-icon::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 1px dashed var(--primary);
          opacity: 0;
          transition: all 0.5s ease;
        }

        .step-icon img {
          width: 140px;
          height: 140px;
          transition: all 0.5s ease;
        }

        .step-icon svg {
          width: 60px;
          height: 60px;
          transition: all 0.5s ease;
        }

        .step-icon svg path {
          fill: var(--primary);
          transition: all 0.5s ease;
        }

        .step h3 {
          font-size: 1.5rem;
          color: var(--secondary);
          margin-bottom: 20px;
          transition: all 0.3s ease;
          font-weight: 600;
        }

        .step p {
          color: var(--secondary);
          opacity: 0.8;
          font-size: 1rem;
          line-height: 1.7;
          font-weight: 300;
        }

        .cta-container {
          text-align: center;
          margin-top: 80px;
          position: relative;
          z-index: 2;
          opacity: 1;
          /* Changed from 0 to 1 to make button visible */
        }

        .cta-button {
          display: inline-block;
          padding: 18px 40px;
          background: var(--primary);
          color: var(--light);
          text-align: center;
          border-radius: 50px;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
          box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3);
          font-size: 1.1rem;
          position: relative;
          overflow: hidden;
          border: none;
          cursor: pointer;
        }

        .cta-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: 0.5s;
        }

        .cta-button:hover {
          background: var(--primary-light);
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(255, 107, 0, 0.4);
        }

        .cta-button:hover::before {
          left: 100%;
        }

        /* Responsive adjustments */
        @media (max-width: 1100px) {
          .step {
            width: 48%;
            margin-bottom: 60px;
          }

          .process-line {
            display: none;
          }
        }

        @media (max-width: 768px) {
          .booking-process {
            padding: 80px 20px;
          }

          .section-header h2 {
            font-size: 2.2rem;
          }

          .section-header p {
            font-size: 1rem;
          }

          .step {
            width: 100%;
            max-width: 400px;
            margin: 0 auto 50px;
          }

          .cta-button {
            padding: 16px 35px;
          }
        }

        /* <!-- ======================================================BOOKING SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================WHY US SECTION ENDS===================================================================== --> */
        .w1 {
          /* background: 
        radial-gradient(circle at 20% 30%, rgba(255,107,0,0.15) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255,215,0,0.15) 0%, transparent 30%),
        linear-gradient(to bottom, var(--light-orange), var(--light-orange)); */
          /* background: 
        radial-gradient(circle at 20% 30%, #f7f7f7 0%, transparent 100%),
        radial-gradient(circle at 80% 70%, #f7f7f7, transparent 100%),
        linear-gradient(to bottom, var(--light-orange), var(--light-orange)); */
          background: #f7f7f7;
          padding: 5rem 1rem;
          position: relative;
          overflow: hidden;
        }

        /* 
.w1::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,107,0,0.1) 0%, rgba(0,0,0,0) 70%);
  animation: w20 15s infinite alternate;
} */

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

          50% {
            transform: translate(25%, 15%);
          }

          100% {
            transform: translate(-15%, -25%);
          }
        }

        .w2 {
          max-width: 1200px;
          margin: 0 auto;
          position: relative;
          z-index: 2;
        }

        .w3 {
          font-size: 4rem;
          text-align: center;
          margin-bottom: 4rem;
          color: var(--light);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 2px;
        }

        .w4 {
          display: inline-block;
          opacity: 0;
          transform: translateY(20px);
        }

        .w5 {
          animation: w21 0.6s 0.1s forwards;
          color: var(--primary);
        }

        .w6 {
          animation: w21 0.6s 0.3s forwards;
          color: var(--light);
        }

        .w7 {
          animation: w21 0.6s 0.5s forwards;
          color: var(--chinese-gold);
        }

        @keyframes w21 {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .w8 {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          margin-bottom: 3rem;
        }

        .w9 {
          background: rgba(26, 26, 26, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          padding: 2.5rem 1.5rem;
          text-align: center;
          position: relative;
          overflow: hidden;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          backdrop-filter: blur(10px);
          z-index: 1;
        }

        .w9:hover {
          box-shadow: 0 15px 30px rgba(255, 107, 0, 0.2);
          border-color: var(--primary);
        }

        .w9::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, transparent, rgba(255, 107, 0, 0.05), transparent);
          z-index: -1;
        }

        .w10 {
          width: 80px;
          height: 80px;
          margin: 0 auto 1.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 50%;
          position: relative;
        }

        .w10 svg {
          width: 40px;
          height: 40px;
        }

        .w11 {
          animation: w20 2s infinite;
        }

        .w15 {
          animation: w22 4s linear infinite;
        }

        .w16 {
          animation: w23 3s ease-in-out infinite;
        }

        .w17 {
          animation: w24 2s ease infinite;
        }

        @keyframes w22 {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

        @keyframes w23 {

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

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

        @keyframes w24 {

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

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

        .w12 {
          color: var(--light);
          font-size: 1.5rem;
          margin-bottom: 1rem;
          position: relative;
          display: inline-block;
        }

        .w12::after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px;
          height: 3px;
          background: var(--primary);
          border-radius: 3px;
        }

        .w13 {
          color: rgba(255, 255, 255, 0.7);
          font-size: 1rem;
          line-height: 1.6;
        }

        .w14 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background: linear-gradient(90deg, var(--primary), var(--chinese-gold), var(--indian-red));
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.4s ease;
        }

        .w9:hover .w14 {
          transform: scaleX(1);
        }

        .w18 {
          text-align: center;
          margin-top: 3rem;
        }

        .w19 {
          background: transparent;
          color: var(--light);
          border: 2px solid var(--primary);
          padding: 1rem 2.5rem;
          font-size: 1.1rem;
          font-weight: 600;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.4s ease;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          position: relative;
          overflow: hidden;
          z-index: 1;
        }

        .w19::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 100%;
          background: linear-gradient(90deg, var(--primary), var(--primary-light));
          transition: width 0.4s ease;
          z-index: -1;
        }

        .w19:hover {
          color: var(--light);
          border-color: transparent;
          box-shadow: 0 5px 20px rgba(255, 107, 0, 0.4);
        }

        .w19:hover::before {
          width: 100%;
        }

        .w19 svg {
          fill: none;
          stroke: currentColor;
          stroke-width: 2;
          stroke-linecap: round;
          stroke-linejoin: round;
          transition: transform 0.3s ease;
        }

        .w19:hover svg {
          transform: translateX(5px);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
          .w3 {
            font-size: 2.5rem;
          }

          .w8 {
            grid-template-columns: 1fr;
          }
        }

        /* <!-- ======================================================WHY US SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================TESTIMONIAL SECTION ENDS===================================================================== --> */
        .testimonial-section {
          padding: 80px 20px;
          /* max-width: 1200px; */
          margin: 0 auto;
          text-align: center;
          background-color: var(--light);
        }

        .section-title {
          font-size: 2.5rem;
          margin-bottom: 20px;
          color: var(--secondary);
          position: relative;
          display: inline-block;
        }

        .section-title::after {
          content: '';
          position: absolute;
          width: 70%;
          height: 4px;
          background: var(--primary);
          bottom: -10px;
          left: 15%;
          border-radius: 2px;
          transform: scaleX(0);
          transform-origin: center;
          animation: underline 2s ease-in-out forwards;
        }

        @keyframes underline {
          to {
            transform: scaleX(1);
          }
        }

        .section-subtitle {
          color: var(--secondary);
          opacity: 0.8;
          margin-bottom: 50px;
          font-size: 1.1rem;
          max-width: 700px;
          margin-left: auto;
          margin-right: auto;
        }

        .testimonials-container {
          display: flex;
          gap: 30px;
          overflow-x: hidden;
          padding: 20px 0;
          scroll-snap-type: x mandatory;
        }

        .testimonial-card {
          margin: 10px;
          min-width: 300px;
          background: var(--light);
          border-radius: 15px;
          padding: 30px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          text-align: left;
          scroll-snap-align: start;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .testimonial-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .testimonial-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 5px;
          height: 100%;
          background: var(--primary);
          transition: width 0.3s ease;
        }

        .testimonial-card:hover::before {
          width: 8px;
        }

        .quote-icon {
          font-size: 2.5rem;
          color: var(--primary-light);
          opacity: 0.5;
          margin-bottom: 20px;
        }

        .testimonial-text {
          color: var(--secondary);
          margin-bottom: 20px;
          line-height: 1.6;
          font-size: 1rem;
        }

        .client-info {
          display: flex;
          align-items: center;
          gap: 15px;
        }

        .client-avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          object-fit: cover;
          border: 3px solid var(--primary-light);
        }

        .client-details h4 {
          color: var(--secondary);
          margin-bottom: 5px;
          font-size: 1.1rem;
        }

        .client-details p {
          color: var(--primary);
          font-weight: 500;
          font-size: 0.9rem;
        }

        .rating {
          color: var(--chinese-gold);
          margin-top: 5px;
          font-size: 1rem;
        }

        /* Navigation dots */
        .dots-container {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin-top: 40px;
        }

        .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: var(--primary-light);
          opacity: 0.3;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .dot.active {
          opacity: 1;
          transform: scale(1.2);
          background: var(--primary);
        }

        /* Animation */
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .testimonial-card {
          animation: fadeIn 0.8s ease forwards;
        }

        .testimonial-card:nth-child(1) {
          animation-delay: 0.1s;
        }

        .testimonial-card:nth-child(2) {
          animation-delay: 0.3s;
        }

        .testimonial-card:nth-child(3) {
          animation-delay: 0.5s;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
          .testimonials-container {
            flex-direction: column;
            align-items: center;
            overflow-x: visible;
          }

          .testimonial-card {
            width: 100%;
            max-width: 400px;
          }

          .section-title {
            font-size: 2rem;
          }
        }

        /* Auto-scroll animation */
        @keyframes scroll {
          0% {
            transform: translateX(0);
          }

          100% {
            transform: translateX(calc(-300px * 3 - 30px * 2));
          }
        }

        .auto-scroll {
          animation: scroll 30s linear infinite;
          display: flex;
          width: calc(300px * 6 + 30px * 6);
        }

        .testimonials-wrapper {
          overflow: hidden;
          position: relative;
        }

        .testimonials-wrapper:hover .auto-scroll {
          animation-play-state: paused;
        }

        /* <!-- ======================================================TESTIMONIAL SECTION ENDS===================================================================== --> */

        /* <!-- ======================================================FOOTER SECTION ENDS===================================================================== --> */

        footer {
          background-color: #f7f7f7;
          color: var(--light);
          padding: 70px 0 30px;
          position: relative;
          overflow: hidden;
        }

        .footer-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 40px;
        }

        .footer-logo {
          font-size: 2rem;
          font-weight: 700;
          color: var(--light);
          margin-bottom: 20px;
          display: inline-block;
        }

        .footer-logo span {
          color: var(--primary);
        }

        .footer-about p {
          color: var(--dark);
          line-height: 1.6;
          margin-bottom: 20px;
        }

        .footer-social {
          display: flex;
          gap: 15px;
        }

        /* .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light);
            transition: all 0.3s ease;
        } */

        .social-icon:hover {
          background: var(--primary);
          transform: translateY(-3px);
        }

        .footer-heading {
          font-size: 1.3rem;
          font-weight: 600;
          color: var(--dark);
          margin-bottom: 25px;
          position: relative;
          padding-bottom: 10px;
        }

        .footer-heading::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 50px;
          height: 2px;
          background: var(--primary);
        }

        .footer-links li {
          margin-bottom: 15px;
          list-style: none;
        }

        .footer-links a {
          color: var(--dark);
          text-decoration: none;
          transition: all 0.3s ease;
          display: inline-block;
        }

        .footer-links a:hover {
          color: var(--primary);
          transform: translateX(5px);
        }

        .footer-contact p {
          display: flex;
          align-items: flex-start;
          color: var(--dark);
          margin-bottom: 15px;
          line-height: 1.6;
        }

        .footer-contact i {
          color: var(--primary);
          margin-right: 10px;
          margin-top: 5px;
        }

        .footer-newsletter p {
          color: var(--dark);
          margin-bottom: 20px;
          line-height: 1.6;
        }

        .newsletter-form {
          display: flex;
          margin-bottom: 20px;
        }

        .newsletter-input {
          flex: 1;
          padding: 12px 15px;
          border: none;
          border-radius: 4px 0 0 4px;
          background: rgba(255, 255, 255, 0.1);
          color: var(--dark);
          outline: none;
        }

        .newsletter-input::placeholder {
          color: rgba(0, 0, 0, 0.6);
        }

        .newsletter-btn {
          background: var(--primary);
          color: var(--dark);
          border: none;
          padding: 0 20px;
          border-radius: 0 4px 4px 0;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .newsletter-btn:hover {
          background: var(--primary-light);
        }

        /* .payment-methods {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .payment-methods i {
            font-size: 1.8rem;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }

        .payment-methods i:hover {
            color: var(--primary);
        } */

        .footer-bottom {
          text-align: center;
          padding-top: 40px;
          margin-top: 40px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-bottom p {
          color: rgba(0, 0, 0, 0.5);
          font-size: 0.9rem;
        }

        .footer-bottom p a {
          color: var(--primary);
          text-decoration: none;
        }

        /* Decorative Elements */
        .footer-decoration {
          position: absolute;
          opacity: 0.05;
          z-index: 0;
        }

        .footer-decoration.circle {
          width: 300px;
          height: 300px;
          border-radius: 50%;
          background: var(--primary);
          right: -100px;
          bottom: -100px;
        }

        .footer-decoration.dots {
          width: 150px;
          height: 150px;
          background-image: radial-gradient(circle, var(--primary) 5px, transparent 2px);
          background-size: 20px 20px;
          top: 50px;
          left: -50px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
          .footer-container {
            grid-template-columns: 1fr;
            gap: 30px;
          }

          .footer-heading {
            margin-bottom: 15px;
          }

          .newsletter-form {
            flex-direction: column;
          }

          .newsletter-input {
            border-radius: 4px;
            margin-bottom: 10px;
          }

          .newsletter-btn {
            border-radius: 4px;
            padding: 12px 15px;
          }
        }

        /* <!-- ======================================================FOOTER SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================LOGIN SECTION ENDS===================================================================== --> */
        .login-section {
          /* background-image: url('assets/img/bgwave.svg'); */
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          overflow-x: hidden;
          position: relative;
          padding: 100px 0;
        }

        .floating-chef {
          position: absolute;
          font-size: 2rem;
          color: var(--primary);
          animation: float 6s ease-in-out infinite;
          opacity: 0.7;
          z-index: 0;
        }

        @keyframes float {
          0% {
            transform: translateY(0) rotate(0deg);
          }

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

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

        .auth-container {
          perspective: 1000px;
          width: 90%;
          max-width: 450px;
          position: relative;
          z-index: 1;
          margin: 20px 0;
        }

        /* Modal Styles */
        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
        }

        .modal-overlay.active {
          opacity: 1;
          visibility: visible;
        }

        .modal-container {
          background-color: white;
          border-radius: 20px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
          width: 90%;
          max-width: 400px;
          padding: 30px;
          text-align: center;
          position: relative;
          transform: translateY(50px);
          transition: all 0.4s ease;
          opacity: 0;
        }

        .modal-overlay.active .modal-container {
          transform: translateY(0);
          opacity: 1;
        }

        .modal-icon {
          font-size: 4rem;
          color: var(--primary);
          margin-bottom: 20px;
          animation: bounce 1s ease;
        }

        @keyframes bounce {

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

          40% {
            transform: translateY(-30px);
          }

          60% {
            transform: translateY(-15px);
          }
        }

        .modal-title {
          font-size: 1.8rem;
          color: var(--primary);
          margin-bottom: 10px;
          font-weight: 700;
        }

        .modal-text {
          color: var(--secondary);
          margin-bottom: 25px;
          line-height: 1.5;
        }

        .modal-btn {
          background-color: var(--primary);
          color: white;
          border: none;
          border-radius: 8px;
          padding: 12px 25px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .modal-btn:hover {
          background-color: var(--primary-light);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        .confetti {
          position: absolute;
          width: 10px;
          height: 10px;
          background-color: var(--primary);
          opacity: 0;
        }

        .auth-card {
          background-color: var(--light);
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.6s ease;
          min-height: 650px;
          height: auto;
          overflow: hidden;
          padding: 20px;
        }

        .auth-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 8px;
          background: linear-gradient(90deg, var(--primary), var(--chinese-gold));
        }

        .login_ {
          text-align: center;
          margin-bottom: 2rem;
          animation: fadeIn 1s ease;
        }

        .login_ h1 {
          color: var(--primary);
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
        }

        .login_ p {
          color: var(--secondary);
          font-size: 0.9rem;
          opacity: 0.8;
        }

        .login_ i {
          font-size: 3rem;
          color: var(--primary);
          margin-bottom: 1rem;
          animation: pulse 2s infinite;
        }

        @keyframes pulse {
          0% {
            transform: scale(1);
          }

          50% {
            transform: scale(1.1);
          }

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

        .auth-form .input-group {
          margin-bottom: 1.5rem;
          position: relative;
          animation: slideUp 0.5s ease;
        }

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

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .auth-form .input-group label {
          display: block;
          margin-bottom: 0.5rem;
          color: var(--secondary);
          font-weight: 500;
        }

        .auth-form .input-group input {
          width: 100%;
          padding: 12px 15px;
          border: 2px solid #e0e0e0;
          border-radius: 12px !important;
          font-size: 1rem;
          transition: all 0.3s ease;
          background-color: var(--gray);
          -webkit-border-radius: 12px !important;
          -moz-border-radius: 12px !important;
          -ms-border-radius: 12px !important;
          -o-border-radius: 12px !important;
        }

        .auth-form .input-group input:focus {
          border-color: var(--primary);
          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
          outline: none;
          background-color: var(--light);
        }

        .auth-form .input-group i {
          position: absolute;
          right: 15px;
          top: 50px;
          color: var(--primary);
        }

        .remember-forgot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
          font-size: 0.9rem;
        }

        .remember-me {
          display: flex;
          align-items: center;
        }

        .remember-me input {
          margin-right: 5px;
        }

        .forgot-password a {
          color: var(--primary);
          text-decoration: none;
          transition: color 0.3s ease;
        }

        .forgot-password a:hover {
          color: var(--primary-light);
          text-decoration: underline;
        }

        .auth-btn {
          width: 100%;
          padding: 12px;
          background-color: var(--primary);
          color: var(--light);
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-bottom: 1.5rem;
        }

        .auth-btn:hover {
          background-color: var(--primary-light);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        .social-auth {
          text-align: center;
          margin-bottom: 1.5rem;
        }

        .social-auth p {
          color: var(--secondary);
          margin-bottom: 1rem;
          position: relative;
        }

        .social-auth p::before,
        .social-auth p::after {
          content: "";
          position: absolute;
          top: 50%;
          width: 30%;
          height: 1px;
          background-color: #e0e0e0;
        }

        .social-auth p::before {
          left: 0;
        }

        .social-auth p::after {
          right: 0;
        }

        .social-icons {
          display: flex;
          justify-content: center;
          gap: 1rem;
        }

        .social-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--dark);
          background-color: var(--light-orange);
          font-size: 1.2rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .social-icon:hover {
          transform: translateY(-3px);
          color: var(--light-orange);
        }

        .facebook {
          background-color: var(--light-orange);
          color: var(--primary);
        }

        .google {
          background-color: var(--light-orange);
          color: var(--primary);
        }

        .twitter {
          background-color: var(--light-orange);
          color: var(--primary);
        }

        .auth-toggle {
          text-align: center;
          font-size: 0.9rem;
        }

        .auth-toggle a {
          color: var(--primary);
          text-decoration: none;
          font-weight: 600;
          transition: color 0.3s ease;
        }

        .auth-toggle a:hover {
          color: var(--primary-light);
          text-decoration: underline;
        }

        .back {
          position: absolute;

          padding: 10px;
          font-size: 24px;
          cursor: pointer;
          z-index: 999;
          top: 20px;
          left: 20px;
        }

        .back a {
          color: var(--primary);
        }

        /* Form positioning and transitions */
        .login-form,
        .signup-form {
          width: 100%;
          padding: 2.5rem;
          backface-visibility: hidden;
          transition: opacity 0.3s ease, transform 0.6s ease;
          box-sizing: border-box;
        }

        .login-form {
          opacity: 1;
          transform: rotateY(0deg);
          position: relative;
        }

        .signup-form {
          opacity: 0;
          transform: rotateY(180deg);
          position: absolute;
          top: 0;
          left: 0;
        }

        .auth-card.flipped .login-form {
          opacity: 0;
          transform: rotateY(-180deg);
          position: absolute;
        }

        .auth-card.flipped .signup-form {
          opacity: 1;
          transform: rotateY(0deg);
          position: relative;
        }

        /* Additional signup fields */
        .name-fields {
          display: flex;
          gap: 1rem;
        }

        .name-fields .input-group {
          flex: 1;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
          .auth-card {
            padding: 0;
          }

          .login-form,
          .signup-form {
            padding: 2rem 1.5rem;
          }

          .login_ h1 {
            font-size: 2rem;
          }

          .floating-chef {
            font-size: 1.5rem;
          }
        }

        @media (max-width: 480px) {
          .auth-container {
            width: 95%;
          }

          .login-form,
          .signup-form {
            padding: 1.5rem 1rem;
          }

          .login_ h1 {
            font-size: 1.8rem;
          }

          .remember-forgot {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
          }

          .name-fields {
            flex-direction: column;
            gap: 0;
          }
        }

        /* <!-- ======================================================LOGIN SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================CONTACT &BREADCRUMB SECTION ENDS===================================================================== --> */
        .container1 {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem;
        }

        /* Hero Breadcrumb Section */
        .breadcrumb-hero {
          position: relative;
          height: 430px;
          background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://img.freepik.com/free-photo/front-view-male-chef-making-burger-kitchen_140725-109185.jpg?uid=R89637956&ga=GA1.1.1891438715.1747209025&semt=ais_hybrid&w=740) no-repeat center center / cover;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: white;
          padding: 5rem 1rem 1rem 1rem;
          /* margin-bottom: 3rem; */

        }

        .breadcrumb-hero h1 {
          font-size: 3rem;
          margin-bottom: 1rem;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
          animation: fadeIn 1s ease-out;
        }

        .breadcrumb-hero p {
          font-size: 1.2rem;
          max-width: 700px;
          margin-bottom: 2rem;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Modern Breadcrumb Navigation */
        .breadcrumb-nav {
          /* display: flex; */
          justify-content: center;
          align-items: center;
          background: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          padding: 10px 10px;
          border-radius: 50px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        ol {
          margin-bottom: 0 !important;
        }

        .breadcrumb-list {
          display: flex;
          list-style: none;
          align-items: center;
          flex-wrap: wrap;
          justify-content: center;
        }

        .breadcrumb-item {
          display: flex;
          align-items: center;
          margin: 0 0.5rem;
        }

        .breadcrumb-item:not(:last-child)::after {
          content: "\f054";
          font-family: "Font Awesome 6 Free";
          margin-left: 1rem;
          color: var(--primary-light);
          font-weight: bold;
          font-size: 1.2rem;
        }

        .breadcrumb-link {
          color: white;
          text-decoration: none;
          transition: all 0.3s ease;
          font-weight: 500;
          padding: 0.5rem;
          border-radius: 5px;
          display: inline-block;
        }

        .breadcrumb-link:hover {
          color: var(--primary-light);
          transform: translateY(-2px);
        }

        .breadcrumb-link[aria-current="page"] {
          color: var(--primary);
          background: rgba(255, 255, 255, 0.9);
          padding: 0.5rem 1rem;
          border-radius: 20px;
          font-weight: 600;
        }

        .breadcrumb-item+.breadcrumb-item::before {
          display: none !important;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Rest of your existing styles for contact cards, form, etc. */
        .contact-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
          margin-top: 2rem;
        }

        .contact-card {
          background-color: var(--light);
          border-radius: 10px;
          padding: 2rem;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          text-align: center;
          border-top: 4px solid var(--primary);
        }

        .contact-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .contact-icon {
          font-size: 3rem;
          color: var(--primary);
          margin-bottom: 1rem;
          transition: transform 0.3s ease;
        }

        .contact-card:hover .contact-icon {
          transform: scale(1.1);
        }

        .contact-form {
          background-color: var(--light);
          border-radius: 10px;
          padding: 2rem;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          margin-top: 2rem;
          border-top: 4px solid var(--primary);
        }

        .form-group {
          margin-bottom: 1.5rem;
        }

        label {
          display: block;
          /* margin-bottom: 0.5rem; */
          font-weight: 500;
          color: var(--dark);
          white-space: nowrap;
        }

        input,
        textarea,
        select {
          width: 100%;
          padding: 0.8rem;
          border: 1px solid #ddd;
          border-radius: 5px;
          font-size: 1rem;
          transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        input:focus,
        textarea:focus,
        select:focus {
          outline: none;
          border-color: var(--primary);
          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
        }

        textarea {
          min-height: 150px;
          resize: vertical;
        }

        .btn {
          display: inline-block;
          background-color: var(--primary);
          color: var(--light);
          padding: 0.8rem 1.5rem;
          border: none;
          border-radius: 5px;
          font-size: 1rem;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .btn:hover {
          background-color: var(--primary-light);
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn:active {
          transform: translateY(0);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        }

        .map-container {
          margin-top: 2rem;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          border: 1px solid #eee;
        }

        .map-container iframe {
          width: 100%;
          height: 400px;
          border: none;
        }

        .social-links {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-top: 2rem;
        }

        .social-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 45px;
          height: 45px;
          background-color: var(--primary);
          color: var(--light);
          border-radius: 50%;
          font-size: 1.2rem;
          transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .social-link:hover {
          background-color: var(--primary-light);
          transform: translateY(-3px) scale(1.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .hours-card {
          background-color: var(--dark);
          color: var(--light);
          padding: 1.5rem;
          border-radius: 10px;
          margin-top: 2rem;
          border-top: 4px solid var(--primary);
        }

        .hours-card h3 {
          color: var(--primary-light);
          margin-bottom: 1rem;
          text-align: center;
          font-size: 1.3rem;
        }

        .hours-table {
          width: 100%;
          border-collapse: collapse;
        }

        .hours-table tr:nth-child(even) {
          background-color: rgba(255, 255, 255, 0.1);
        }

        .hours-table td {
          padding: 0.8rem;
        }

        .hours-table td:last-child {
          text-align: right;
          font-weight: 500;
        }


        @media (max-width: 768px) {
          .breadcrumb-hero {
            height: auto;
            padding: 3rem 1rem;
          }

          .breadcrumb-hero h1 {
            font-size: 2rem;
          }

          .breadcrumb-nav {
            padding: 0.8rem;
            border-radius: 20px;
          }

          .breadcrumb-item:not(:last-child)::after {
            margin-left: 0.5rem;
          }

          .breadcrumb-link {
            font-size: 0.9rem;
          }

          .container1 {
            padding: 1rem;
          }

          h1 {
            font-size: 2rem;
          }

          .contact-container {
            grid-template-columns: 1fr;
          }

          .breadcrumb {
            padding: 0.8rem 1rem;
            border-radius: 10px;
          }

          .breadcrumb-item {
            font-size: 0.8rem;
          }

          .contact-card,
          .contact-form {
            padding: 1.5rem;
          }

          .map-container iframe {
            height: 300px;
          }

        }

        @media (max-width: 480px) {
          .social-links {
            flex-wrap: wrap;
          }

          .hours-table td {
            padding: 0.5rem;
            font-size: 0.9rem;
          }
        }

        /* <!-- ======================================================CONTACT &BREADCRUMB SECTION ENDS===================================================================== --> */

        /* <!-- ======================================================GALLERY SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================GALLERY &BREADCRUMB SECTION ENDS===================================================================== --> */

        /* <!-- ======================================================STAT SECTION ENDS===================================================================== --> */

        /* Section Wrapper */
        .iit-stats-section {
          background-color: var(--gray);
          padding: 80px 0;
        }

        /* Container */
        .iit-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }

        /* Grid Layout */
        .iit-stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 30px;
        }

        /* Individual Stat Card */
        .iit-sn {
          text-align: center;
          padding: 30px;
          background-color: var(--light-orange);
          border-radius: 8px;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .iit-sn:hover {
          scale: 0.9;
        }

        /* Stat Number */
        .iit-stat-number {
          font-size: 48px;
          color: var(--primary);
          margin: 0;
          font-weight: 700;
        }

        /* Stat Label */
        .iit-stat-label {
          color: var(--dark);
          font-size: 18px;
          margin-top: 10px;
        }

        /* <!-- ======================================================STAT  SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================TERMS AND CONDITIONS  SECTION ENDS===================================================================== --> */
        .t1 {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem;
        }

        .t2 {
          font-size: 1.2rem;
          opacity: 0.9;
        }

        .t3 {
          background-color: var(--light);
          padding: 2rem;
          margin-top: 2rem;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          transform: scale(0.98);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .t3:hover {
          transform: scale(1);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .t3 h2 {
          color: var(--primary);
          margin: 1.5rem 0 1rem;
          position: relative;
          padding-left: 1rem;
        }

        .t3 h2::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0.3em;
          height: 1em;
          width: 5px;
          background-color: var(--primary);
          border-radius: 5px;
        }

        .t3 p {
          margin-bottom: 1rem;
        }

        .t3 ul {
          margin-left: 1.5rem;
          margin-bottom: 1rem;
        }

        .t3 ul li {
          margin-bottom: 0.5rem;
        }

        .t4 {
          background-color: rgba(255, 214, 0, 0.2);
          padding: 0.2rem 0.4rem;
          border-radius: 3px;
          font-weight: 500;
        }

        .t5 {
          background-color: rgba(229, 59, 59, 0.1);
          border-left: 4px solid var(--indian-red);
          padding: 1rem;
          margin: 1rem 0;
          border-radius: 0 4px 4px 0;
        }

        .t6 {
          font-size: 0.9rem;
          color: var(--primary-light);
          margin-top: 1rem;
        }

        @media (max-width: 768px) {
          .t1 {
            padding: 1rem;
          }



          .t3 {
            padding: 1.5rem;
          }
        }



        /* Breadcrumb styles */
        .t8 {
          padding: 2rem 0;
        }

        .t9 {
          display: flex;
          list-style: none;
          padding: 0;
        }

        .t10 {
          margin-right: 0.5rem;
        }

        .t11 {
          color: var(--primary);
          text-decoration: none;
        }

        .t11:hover {
          text-decoration: underline;
        }

        /* <!-- ======================================================TERMS AND CONDITIONS  SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================JOIN US  SECTION ENDS===================================================================== --> */

        .J9 {
          padding: 5rem 0;
          background-color: #f9f9f9;
        }

        .J10 {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
        }

        .J11 {
          display: flex;
          flex-wrap: wrap;
          gap: 2rem;
        }

        .J12 {
          flex: 1;
          min-width: 300px;
        }

        .J13 {
          background: white;
          border-radius: 12px;
          padding: 2.5rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
          height: 100%;
        }

        .J14 {
          font-size: 2rem;
          color: var(--dark);
          margin-bottom: 0.5rem;
        }

        .J15 {
          color: var(--secondary);
          margin-bottom: 2rem;
        }

        .J16 {
          margin-top: 1.5rem;
        }

        .J17 {
          display: flex;
          gap: 1.5rem;
          margin-bottom: 1.5rem;
        }

        @media (max-width: 768px) {
          .J17 {
            flex-direction: column;
            gap: 1.5rem;
          }
        }

        .J18 {
          flex: 1;
          margin-bottom: 1.5rem;
        }

        .J19 {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 600;
          color: var(--dark);
          font-size: 0.9rem;
        }

        .J20 {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          font-size: 1rem;
          transition: all 0.3s;
        }

        .J20:focus {
          outline: none;
          border-color: var(--primary);
          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
        }

        .J21 {
          background-color: var(--primary);
          color: white;
          border: none;
          padding: 1rem 1.5rem;
          font-size: 1rem;
          font-weight: 600;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
        }

        .J21:hover {
          background-color: var(--dark);
          transform: translateY(-2px);
        }

        .J21 svg {
          transition: transform 0.3s;
        }

        .J21:hover svg {
          transform: translateX(4px);
        }

        .J22 {
          flex: 1;
          min-width: 300px;
          height: max-content;
        }

        .J23 {
          background: white;
          border-radius: 12px;
          padding: 2.5rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
          height: 100%;
        }

        .J24 {
          font-size: 1.75rem;
          color: var(--dark);
          margin-bottom: 1.5rem;
        }

        .J25 {
          margin-bottom: 2rem;
        }

        .J26 {
          display: flex;
          gap: 1rem;
          margin-bottom: 1.5rem;
          align-items: flex-start;
        }

        .J27 {
          background: rgba(255, 107, 0, 0.1);
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          color: var(--primary);
        }

        .J28 {
          font-size: 1.1rem;
          color: var(--dark);
          margin-bottom: 0.25rem;
        }

        .J29 {
          color: var(--secondary);
          font-size: 0.9rem;
          line-height: 1.5;
        }

        .J30 {
          border-top: 1px solid #eee;
          padding-top: 2rem;
          margin-top: 2rem;
        }

        .J31 {
          font-size: 1.25rem;
          color: var(--dark);
          margin-bottom: 0.5rem;
        }

        .J32 {
          color: var(--secondary);
          margin-bottom: 1rem;
          font-size: 0.9rem;
        }

        .J33 {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          color: var(--primary);
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s;
        }

        .J33:hover {
          color: var(--primary-dark);
        }

        .J33 svg {
          transition: transform 0.3s;
        }

        .J33:hover svg {
          transform: translateX(4px);
        }

        /* Testimonial Section */
        .J34 {
          padding: 5rem 0;
          background-color: var(--dark);
          color: white;
        }

        .J35 {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
        }

        .J36 {
          text-align: center;
          margin-bottom: 3rem;
        }

        .J37 {
          font-size: 2.5rem;
          margin-bottom: 0.5rem;
        }

        .J38 {
          font-size: 1.1rem;
          opacity: 0.8;
        }

        .J39 {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
        }

        .J40 {
          background: rgba(255, 255, 255, 0.05);
          border-radius: 12px;
          padding: 2rem;
          transition: transform 0.3s;
        }

        .J40:hover {
          transform: translateY(-5px);
        }

        .J41 {
          height: 100%;
        }

        .J42 {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 1.5rem;
        }

        .J43 {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          object-fit: cover;
        }

        .J44 {
          font-size: 1.1rem;
          margin-bottom: 0.25rem;
        }

        .J45 {
          font-size: 0.9rem;
          opacity: 0.7;
        }

        .J46 {
          line-height: 1.6;
          font-style: italic;
        }

        /* Stats Section */
        .J47 {
          padding: 4rem 0;
          background-color: var(--primary);
          color: white;
        }

        .J48 {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
        }

        .J49 {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 2rem;
          text-align: center;
        }

        .J50 {
          padding: 1rem;
        }

        .J51 {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
        }

        .J52 {
          font-size: 1rem;
          opacity: 0.9;
        }

        /* Animations */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .animate-section {
          animation: fadeInUp 0.8s ease-out forwards;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
          .J4 {
            font-size: 2.2rem;
          }

          .J14,
          .J24 {
            font-size: 1.5rem;
          }

          .J37 {
            font-size: 2rem;
          }
        }

        /* <!-- ======================================================JOIN US  SECTION ENDS===================================================================== --> */
        /* <!-- ======================================================GALLERY SECTION ENDS===================================================================== --> */

        .g2 {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem;
        }

        /* Gallery Section */
        .g1 {
          background-color: #fff !important;
          padding: 4rem 0;
          position: relative;
          overflow: hidden;
        }

        .g3 {
          text-align: center;
          margin-bottom: 3rem;
        }

        .g4 {
          font-size: 2.5rem;
          color: var(--spice-orange);
          margin-bottom: 1rem;
          position: relative;
          display: inline-block;
        }

        .g4::after {
          content: '';
          position: absolute;
          width: 50%;
          height: 3px;
          background: var(--turmeric);
          bottom: -10px;
          left: 25%;
        }

        .g5 {
          color: var(--light);
          max-width: 700px;
          margin: 0 auto;
          opacity: 0.8;
        }

        /* Gallery Slider */
        .g6 {
          position: relative;
          width: 100%;
          height: 500px;
          overflow: hidden;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .g7 {
          display: flex;
          height: 100%;
          transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
        }

        .g8 {
          min-width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
        }

        .g9 {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: brightness(0.7);
          transition: filter 0.5s ease;
        }

        .g8:hover .g9 {
          filter: brightness(1);
        }

        .g10 {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 2rem;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
          transform: translateY(100%);
          transition: transform 0.5s ease;
        }

        .g8:hover .g10 {
          transform: translateY(0);
        }

        .g8 h3 {
          color: #f7f7f7;
          font-size: 1.8rem;
          margin-bottom: 0.5rem;
        }

        .g8 p {
          color: var(--light);
          margin-bottom: 1rem;
          opacity: 0.9;
        }

        .g11 {
          display: inline-block;
          background-color: var(--spice-orange);
          color: var(--light);
          padding: 0.3rem 1rem;
          border-radius: 20px;
          font-weight: 600;
          font-size: 0.9rem;
          font-style: italic;
        }

        /* Slider Navigation */
        .g12 {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 10px;
          z-index: 10;
        }

        .g13 {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.5);
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .g13.active {
          background-color: var(--spice-orange);
          transform: scale(1.2);
        }

        /* Controls */
        .g14 {
          position: absolute;
          top: 50%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 0 1rem;
          transform: translateY(-50%);
          z-index: 10;
        }

        .g15 {
          background-color: rgba(255, 127, 36, 0.7);
          color: var(--light);
          border: none;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          font-size: 1.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          backdrop-filter: blur(5px);
        }

        .g15:hover {
          background-color: var(--spice-orange);
          transform: scale(1.1);
        }

        /* Responsive */
        @media (max-width: 768px) {
          .g6 {
            height: 400px;
          }

          .g8 h3 {
            font-size: 1.5rem;
          }

          .g15 {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
          }
        }

        @media (max-width: 480px) {
          .g6 {
            height: 300px;
          }

          .g4 {
            font-size: 2rem;
          }

          .g10 {
            padding: 1rem;
          }

          .g8 h3 {
            font-size: 1.2rem;
          }
        }

        /* Animation */
        @keyframes fadeIn {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }

        .g1 {
          animation: fadeIn 1s ease-out;
        }

        /* <!-- ======================================================GALLERY  SECTION ENDS===================================================================== --> */

        /* HERO SECTION STARTS======================================================================================== */


        .hero1 {
          position: relative;
          min-height: 100vh;
          padding: 150px 5%;
          display: flex;
          align-items: center;
          background: linear-gradient(to bottom right, var(--gray) 0%, var(--light) 100%);
          overflow: hidden;
        }

        .hero2 {
          max-width: 1400px;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 60px;
          position: relative;
          z-index: 10;
        }

        .hero3 {
          flex: 1;
          min-width: 300px;
        }

        .hero4 {
          font-size: 18px;
          font-weight: 600;
          color: var(--dark);
          margin-bottom: 15px;
          display: inline-block;
          padding: 8px 15px;
          background-color: rgba(255, 201, 28, 0.1);
          border-radius: 50px;
          animation: fadeInUp 0.8s ease-out;
        }

        .hero5 {
          font-size: clamp(36px, 5vw, 56px);
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 20px;
          animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .hero5 span {
          color: var(--primary);
          position: relative;
          display: inline-block;
        }

        .hero5 span::after {
          content: '';
          position: absolute;
          bottom: 5px;
          left: 0;
          width: 100%;
          height: 8px;
          background-color: var(--primary);
          z-index: -1;
          opacity: 0.3;
          border-radius: 4px;
          transform: scaleX(0.9);
          animation: underlinePulse 3s infinite;
        }

        .hero6 {
          font-size: clamp(16px, 2vw, 18px);
          line-height: 1.6;
          color: var(--dark-light);
          margin-bottom: 30px;
          max-width: 500px;
          animation: fadeInUp 0.8s ease-out 0.4s both;
        }

        .hero7 {
          display: inline-flex;
          align-items: center;
          background-color: var(--primary);
          color: var(--secondary);
          font-size: 16px;
          font-weight: 600;
          padding: 15px 35px;
          border-radius: 50px;
          text-decoration: none;
          transition: all 0.3s ease;
          box-shadow: 0 10px 20px rgba(255, 201, 28, 0.3);
          animation: fadeInUp 0.8s ease-out 0.6s both;
          position: relative;
          overflow: hidden;
        }

        .hero7::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          transition: 0.5s;
        }

        .hero7:hover::before {
          left: 100%;
        }

        .hero7:hover {
          transform: translateY(-3px);
          box-shadow: 0 15px 30px rgba(255, 201, 28, 0.4);
        }

        .hero7 i {
          margin-left: 8px;
          transition: transform 0.3s ease;
        }

        .hero7:hover i {
          transform: translateX(5px);
        }

        .services1 {
          margin-top: 60px;
          animation: fadeInUp 0.8s ease-out 0.8s both;
        }

        .services2 {
          font-size: 22px;
          font-weight: 800;
          margin-bottom: 30px;
          position: relative;
          display: inline-block;
        }

        .services2::after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 0;
          width: 50px;
          height: 4px;
          background-color: var(--primary);
          border-radius: 2px;
        }

        .services3 {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 25px;
        }

        .service1 {
          background: var(--light);
          padding: 30px;
          border-radius: 20px;
          box-shadow: 0 10px 30px var(--shadow);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
          position: relative;
          overflow: hidden;
          z-index: 1;
        }

        .service1::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 5px;
          background-color: var(--primary);
          transition: height 0.3s ease;
          z-index: -1;
        }

        .service1:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .service1:hover::before {
          height: 100%;
        }

        .service2 {
          color: var(--primary);
          font-size: 40px;
          margin-bottom: 20px;
          transition: all 0.3s ease;
        }

        .service1:hover .service2 {
          transform: scale(1.2) rotate(10deg);
          color: var(--light);
        }

        .service3 {
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 15px;
          transition: color 0.3s ease;
        }

        .service1:hover .service3 {
          color: var(--light);
        }

        .service4 {
          font-size: 15px;
          color: var(--dark-light);
          line-height: 1.6;
          transition: color 0.3s ease;
        }

        .service1:hover .service4 {
          color: rgba(255, 255, 255, 0.9);
        }

        .hero8 {
          flex: 1;
          min-width: 300px;
          position: relative;
          height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .chef1 {
          width: 100%;
          max-width: 450px;
          height: auto;
          border-radius: 20px;
          box-shadow: 0 20px 50px var(--primary);
          position: relative;
          z-index: 5;
          animation: float 6s ease-in-out infinite;
          transform-style: preserve-3d;
          border: 5px solid var(--primary);
        }

        /* Decorative elements */
        .circle1 {
          position: absolute;
          border-radius: 50%;
          background-color: rgba(255, 201, 28, 0.1);
          z-index: 1;
        }

        .circle2 {
          width: 300px;
          height: 300px;
          top: -50px;
          right: -50px;
          animation: pulse 8s infinite;
        }

        .circle3 {
          width: 200px;
          height: 200px;
          bottom: -30px;
          left: -30px;
          animation: pulse 10s infinite reverse;
        }

        .circle4 {
          width: 150px;
          height: 150px;
          top: 30%;
          right: 10%;
          animation: pulse 7s infinite 2s;
        }

        /* Badges */
        .badge1 {
          position: absolute;
          background: var(--light);
          border-radius: 15px;
          box-shadow: 0 10px 30px var(--shadow);
          padding: 15px;
          display: flex;
          align-items: center;
          gap: 12px;
          z-index: 10;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }

        .badge1:hover {
          transform: scale(1.05) rotate(2deg);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .badge2 {
          width: 45px;
          height: 45px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: var(--light);
          flex-shrink: 0;
          background-color: var(--primary);
        }

        .badge3 {
          top: 10%;
          left: 0;
          animation: badgeFloat 5s ease-in-out infinite;
        }

        .badge4 {
          top: 20%;
          right: 0;
          animation: badgeFloat 6s ease-in-out infinite 1s;
        }

        .badge5 {
          bottom: 10%;
          left: 10%;
          animation: badgeFloat 7s ease-in-out infinite 0.5s;
        }

        .badge6 {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 2px;
        }

        .badge7 {
          font-size: 12px;
          color: var(--dark-light);
        }

        /* Dots pattern */
        .dots1 {
          position: absolute;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 8px;
          z-index: 0;
        }

        .dots1 span {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: var(--primary);
          opacity: 0.3;
        }

        .dots2 {
          top: 15%;
          right: 15%;
          animation: dotsFloat 8s ease-in-out infinite;
        }

        .dots3 {
          bottom: 20%;
          left: 20%;
          animation: dotsFloat 10s ease-in-out infinite reverse;
        }

        /* Animations */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes float {
          0% {
            transform: translateY(0px) rotateY(0deg);
          }

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

          100% {
            transform: translateY(0px) rotateY(0deg);
          }
        }

        @keyframes pulse {

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

          50% {
            transform: scale(1.1);
            opacity: 0.15;
          }
        }

        @keyframes badgeFloat {

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

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

        @keyframes dotsFloat {

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

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

        @keyframes underlinePulse {

          0%,
          100% {
            transform: scaleX(0.9);
            opacity: 0.3;
          }

          50% {
            transform: scaleX(1.1);
            opacity: 0.5;
          }
        }

        /* Responsive styles */
        @media (max-width: 992px) {
          .hero2 {
            gap: 40px;
          }

          .hero8 {
            height: 400px;
          }

          .services3 {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 768px) {
          .hero1 {
            padding-top: 100px;
            padding-bottom: 100px;
          }

          .hero2 {
            flex-direction: column;
          }

          .hero3 {
            text-align: center;
          }

          .hero6 {
            margin-left: auto;
            margin-right: auto;
          }

          .hero7 {
            margin-bottom: 40px;
          }

          .services2 {
            text-align: center;
          }

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

          .services3 {
            grid-template-columns: 1fr;
            max-width: 400px;
            margin: 0 auto;
          }

          .badge1 {
            transform: scale(0.9);
          }

          .badge3 {
            top: 5%;
            left: -10px;
          }

          .badge4 {
            top: 15%;
            right: -10px;
          }

          .badge5 {
            bottom: 5%;
            left: 5%;
          }
        }

        @media (max-width: 480px) {
          .hero5 {
            font-size: 32px;
          }

          .hero4 {
            font-size: 16px;
          }

          .service1 {
            padding: 25px;
          }
        }

        /* HERO SECTION ENDS======================================================================================== */


        /* BOOK PAGE======================================================= */

        .bbody {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 100px;
        }

        .bbody1 {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
        }

        #total-amount {
          color: #000000;
          font-size: 2.2rem;
        }

        .book-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 40px;
          width: 100%;
          max-width: 1200px;
        }

        @media (min-width: 1024px) {
          .book-container {
            flex-direction: row;
            align-items: flex-start;
          }
        }

        .book-phone {
          position: relative;
          width: 768px;
          height: 700px;
          background: var(--secondary);
          border-radius: 40px;
          padding: 20px;
          box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
          overflow: hidden;

        }

        .book-phone:hover {
          transform: translateY(-5px);
        }

        .book-screen {
          height: 100%;
          background: var(--background);
          border-radius: 20px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }

        .book-notch {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40%;
          height: 25px;
          background: var(--secondary);
          border-bottom-left-radius: 15px;
          border-bottom-right-radius: 15px;
          z-index: 10;
        }

        .book-header {
          padding: 20px;
          background: var(--primary);
          color: var(--light);
          display: flex;
          align-items: center;
          gap: 15px;
        }

        .book-back {
          font-size: 18px;
          cursor: pointer;
        }

        .book-back:hover {
          transform: translateX(-3px);
        }

        .book-header h2 {
          font-size: 1rem;
          font-weight: 600;
          color: var(--secondary);
          align-items: center;
          margin-bottom: 0 !important;

        }

        .book-content {
          flex: 1;
          overflow-y: auto;
          padding: 15px;
        }

        .book-content::-webkit-scrollbar {
          display: none;
        }

        .book-section {
          margin: 10px;
          background: var(--light);
          padding: 15px;
          border-radius: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
          animation: fadeIn 0.5s ease forwards;
        }

        .book-section:nth-child(1) {
          animation-delay: 0.1s;
        }

        .book-section:nth-child(2) {
          animation-delay: 0.2s;
        }

        .book-section:nth-child(3) {
          animation-delay: 0.3s;
        }

        .book-section:nth-child(4) {
          animation-delay: 0.4s;
        }

        .book-section:nth-child(5) {
          animation-delay: 0.5s;
        }

        .book-title {
          color: var(--primary);
          margin-bottom: 15px;
          font-size: 16px;
        }

        /* Date Picker Styles */
        .book-dates {
          display: flex;
          gap: 10px;
          overflow-x: auto;
          padding-bottom: 10px;
          scrollbar-width: none;
        }

        .book-dates::-webkit-scrollbar {
          display: none;
        }

        .book-date {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 50px;
          padding: 10px 5px;
          border-radius: 10px;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .book-date:hover {
          background: rgba(125, 187, 125, 0.1);
        }

        .book-date.selected {
          background: var(--success);
          color: var(--light);
        }

        .book-month {
          font-size: 0.7rem;
          font-weight: 500;
          text-transform: uppercase;
        }

        .book-day {
          font-size: 0.8rem;
          font-weight: 700;
          margin: 3px 0;
        }

        .book-weekday {
          font-size: 0.7rem;
          font-weight: 500;
        }

        /* Enhanced Select Input Styles */
        .book-select-group {
          position: relative;
          margin-bottom: 15px;
        }

        .book-select-group label {
          display: block;
          font-size: 0.8rem;
          color: var(--secondary);
          margin-bottom: 8px;
        }

        .book-select {
          width: 100%;
          padding: 12px 15px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          font-size: 0.9rem;
          font-weight: 500;
          color: var(--secondary);
          appearance: none;
          background-color: var(--light);
          cursor: pointer;
          transition: all 0.3s ease;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 15px center;
          background-size: 12px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .book-select:focus {
          border-color: var(--primary);
          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
          outline: none;
        }

        .book-select option {
          padding: 12px 15px;
          background: var(--light);
          transition: all 0.2s ease;
        }

        .book-select option:hover {
          background: var(--primary-light) !important;
          color: white;
        }

        .book-select option:checked {
          background: var(--primary);
          color: white;
        }

        .book-note {
          font-size: 0.75rem;
          color: #7D4B00;
          background-color: var(--background);
          padding: 10px;
          border-radius: 8px;
          line-height: 1.4;
          margin-top: 10px;
        }

        /* Additional Services */
        .book-services {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }

        .book-service {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          border-radius: 8px;
          background: rgba(0, 0, 0, 0.02);
        }

        .book-service-info {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .book-service-icon {
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--primary);
          color: var(--light);
          border-radius: 50%;
        }

        .book-service-name {
          font-size: 0.9rem;
          font-weight: 500;
        }

        .book-service-controls {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .book-service-count {
          min-width: 20px;
          text-align: center;
        }

        .book-service-btn {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid var(--primary);
          background: transparent;
          color: var(--primary);
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .book-service-btn:hover {
          background: var(--primary);
          color: var(--light);
        }

        /* Enhanced Items Selection Modal */
        .book-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s ease;
        }

        .book-modal.active {
          opacity: 1;
          pointer-events: all;
        }

        .book-modal-content {
          background: white;
          width: 90%;
          max-width: 400px;
          border-radius: 15px;
          overflow: hidden;
          transform: translateY(20px);
          transition: transform 0.3s ease;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
          max-height: 80vh;
          display: flex;
          flex-direction: column;
        }

        .book-modal.active .book-modal-content {
          transform: translateY(0);
        }

        .book-modal-header {
          padding: 15px 20px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: var(--primary);
          color: white;
        }

        .book-modal-title {
          font-size: 1rem;
          font-weight: 600;
        }

        .book-modal-close {
          font-size: 1.2rem;
          color: var(--light);
          cursor: pointer;
          transition: transform 0.2s ease;
        }

        .book-modal-close:hover {
          transform: rotate(90deg);
        }

        .book-modal-body {
          padding: 20px;
          overflow-y: auto;
          scroll-behavior: smooth;
        }

        .book-modal-body::-webkit-scrollbar {
          width: 5px;
        }

        .book-modal-body::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 10px;
        }

        .book-modal-body::-webkit-scrollbar-track {
          background-color: transparent;
        }

        .book-item-category {
          margin-bottom: 25px;
          background: white;
          border-radius: 10px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
          padding: 15px;
          transition: all 0.3s ease;
        }

        .book-item-category:hover {
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .book-category-title {
          font-size: 0.95rem;
          font-weight: 600;
          color: var(--primary);
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .book-category-icon {
          color: var(--primary);
          font-size: 1rem;
        }

        .book-category-desc {
          font-size: 0.75rem;
          color: #666;
          margin-bottom: 15px;
          padding-left: 5px;
          font-style: italic;
        }

        .book-item-controls {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 12px 15px;
          background: rgba(0, 0, 0, 0.02);
          border-radius: 8px;
          margin-bottom: 10px;
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .book-item-name {
          flex: 1;
          font-size: 0.85rem;
          font-weight: 500;
        }

        .book-item-count {
          min-width: 25px;
          text-align: center;
          font-weight: 600;
          color: var(--primary);
        }

        .book-item-btn {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid var(--primary);
          background: transparent;
          color: var(--primary);
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .book-item-btn:hover {
          background: var(--primary);
          color: var(--light);
        }

        .book-item-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .book-modal-footer {
          padding: 15px 20px;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: flex-end;
          background: #f9f9f9;
        }

        .book-save-btn {
          padding: 10px 20px;
          background: var(--primary);
          color: var(--light);
          border: none;
          border-radius: 8px;
          font-size: 0.9rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .book-save-btn:hover {
          background: var(--primary-light);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        /* Footer Styles */
        .book-footer {
          padding: 15px 20px;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .book-footer-text {
          font-size: 0.8rem;
          color: var(--secondary);
        }

        .book-footer-amount {
          font-size: 0.8rem;
          font-weight: 700;
          color: var(--dark);
        }

        .book-continue-btn {
          padding: 10px;
          background: var(--primary);
          color: var(--light);
          border: none;
          border-radius: 8px;
          font-size: 0.9rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .book-continue-btn:disabled {
          background: #E0E0E0;
          color: #9E9E9E;
          cursor: not-allowed;
        }

        .book-continue-btn:not(:disabled):hover {
          background: var(--primary-light);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        .book-content-side {
          display: flex;
          flex-direction: column;
          align-items: center;
          max-width: 800px;
        }

        .book-quote {
          position: relative;
          max-width: 480px;
          margin-bottom: 40px;
        }

        .book-quote-mark {
          position: absolute;
          font-size: 5rem;
          font-family: serif;
          font-weight: 700;
          color: rgba(0, 0, 0, 0.1);
          line-height: 0.8;
        }

        .book-quote-start {
          top: -20px;
          left: -20px;
        }

        .book-quote-end {
          bottom: -50px;
          right: -20px;
        }

        .book-quote-text {
          font-size: 1.8rem;
          font-family: serif;
          font-weight: 400;
          color: var(--secondary);
          line-height: 1.3;
          padding: 0 40px;
        }

        .book-quote-decor {
          position: absolute;
          top: 0;
          left: 0;
          width: 140px;
          height: 140px;
          stroke: rgba(0, 0, 0, 0.1);
          stroke-width: 1.5;
          fill: none;
        }

        .book-chef-img {
          position: absolute;
          border: 100%;
          max-width: 490px;
          height: 547px;
          border-radius: 15px;
          bottom: 0px;
          right: 2%;

        }


        .book-divider {
          width: 100%;
          max-width: 480px;
          height: 1px;
          background: var(--secondary);
          margin-bottom: 30px;
          opacity: 0.1;
        }

        .book-qr {
          display: flex;
          align-items: center;
          gap: 15px;
          align-self: flex-end;
        }

        .book-qr-text {
          font-size: 0.8rem;
          color: var(--secondary);
          text-align: right;
          line-height: 1.4;
        }

        .book-qr-code {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Animations */
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Custom scrollbar for dropdown */
        select.book-select {
          scrollbar-width: thin;
          scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1);
        }

        select.book-select::-webkit-scrollbar {
          width: 6px;
        }

        select.book-select::-webkit-scrollbar-thumb {
          background-color: var(--primary);
          border-radius: 3px;
        }

        select.book-select::-webkit-scrollbar-track {
          background-color: rgba(0, 0, 0, 0.1);
        }

        .book-textarea {
          width: 100%;
          min-height: 80px;
          padding: 12px 15px;
          border: 1px solid #ddd;
          border-radius: 8px;
          background: var(--light);
          font-size: 14px;
          color: var(--dark);
          resize: vertical;
        }

        .book-pdf-btn {
          width: 100%;
          padding: 12px;
          background: var(--primary-light);
          color: var(--light);
          border: none;
          border-radius: 8px;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          cursor: pointer;
          margin-top: 10px;
        }

        /* Responsive adjustments */
        @media (max-width: 1452px) {
          .book-phone {
            width: 768px;
            height: 700px;
            border-radius: 1;
            margin: 0 auto;
          }
        }

        @media (max-width: 900px) {
          .book-phone {
            width: 700px;
            height: 700px;
            border-radius: 1;
            margin: 0 auto;
          }
        }

        @media (max-width: 800px) {
          .book-phone {
            width: 600px;
            height: 700px;
            border-radius: 1;
            margin: 0 auto;
          }
        }

        @media (max-width: 723px) {
          .book-phone {
            width: 500px;
            height: 700px;
            border-radius: 1;
            margin: 0 auto;
          }
        }

        @media (max-width: 622px) {
          .book-phone {
            width: 400px;
            height: 700px;
            border-radius: 1;
            margin: 0 auto;
          }
        }

        @media (max-width: 400px) {
          .book-phone {
            width: 100%;
            height: 100vh;
            border-radius: 1;
          }

          .book-chef-img {
            display: none;
          }
        }

        @media (max-width: 1452px) {
          .book-chef-img {
            position: absolute;
            border: 100%;
            max-width: 487px;
            height: 500px;
            border-radius: 15px;
            bottom: 0px;
            right: 2%;
          }
        }

        @media (max-width: 1441px) {
          .book-chef-img {
            display: none;
          }
        }

        /* New Modal Styles */
        .book-verify-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2000;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s ease;
          backdrop-filter: blur(5px);
        }

        .book-verify-modal.active {
          opacity: 1;
          pointer-events: all;
        }

        .book-verify-content {
          background: var(--light);
          width: 90%;
          max-width: 400px;
          border-radius: 20px;
          overflow: hidden;
          transform: translateY(50px);
          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
          max-height: 90vh;
          display: flex;
          flex-direction: column;
        }

        .book-verify-modal.active .book-verify-content {
          transform: translateY(0);
        }

        .book-verify-header {
          padding: 20px;
          background: var(--primary);
          color: white;
          text-align: center;
          position: relative;
        }

        .book-verify-title {
          font-size: 1.2rem;
          font-weight: 600;
          margin: 0;
        }

        .book-verify-close {
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 1.2rem;
          color: var(--light);
          cursor: pointer;
          transition: transform 0.2s ease;
        }

        .book-verify-close:hover {
          transform: rotate(90deg);
        }

        .book-verify-body {
          padding: 25px;
          text-align: center;
        }

        .book-verify-text {
          color: var(--dark);
          margin-bottom: 20px;
          font-size: 0.9rem;
        }

        .book-phone-input {
          width: 100%;
          padding: 15px;
          border: 2px solid var(--gray);
          border-radius: 10px;
          font-size: 1rem;
          text-align: center;
          margin-bottom: 20px;
          transition: all 0.3s ease;
        }

        .book-phone-input:focus {
          border-color: var(--primary);
          outline: none;
          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
        }

        .book-verify-buttons {
          display: flex;
          gap: 15px;
          justify-content: center;
        }

        .book-verify-btn {
          padding: 12px 25px;
          border-radius: 8px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          border: none;
          font-size: 0.9rem;
        }

        .book-cancel-btn {
          background: var(--gray);
          color: var(--dark);
        }

        .book-cancel-btn:hover {
          background: #e0e0e0;
          transform: translateY(-2px);
        }

        .book-proceed-btn {
          background: var(--primary);
          color: var(--light);
        }

        .book-proceed-btn:hover {
          background: var(--primary-light);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
        }

        .book-proceed-btn:disabled {
          background: #cccccc;
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
        }

        /* OTP Modal Styles */
        .book-otp-container {
          display: none;
        }

        .book-otp-inputs {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin: 20px 0;
        }

        .book-otp-input {
          width: 45px;
          height: 45px;
          text-align: center;
          font-size: 1.2rem;
          border: 2px solid var(--gray);
          border-radius: 8px;
          transition: all 0.3s ease;
        }

        .book-otp-input:focus {
          border-color: var(--primary);
          outline: none;
          box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
          transform: scale(1.05);
        }

        .book-otp-timer {
          color: var(--primary);
          font-size: 0.8rem;
          margin-top: 10px;
        }

        .book-otp-resend {
          color: var(--primary);
          text-decoration: underline;
          cursor: pointer;
          font-size: 0.8rem;
          margin-top: 5px;
          display: inline-block;
        }

        .book-otp-resend:hover {
          color: var(--primary-light);
        }

        /* Success Animation */
        .book-success-animation {
          display: none;
          text-align: center;
          padding: 20px;
        }

        .book-success-icon {
          color: var(--success);
          font-size: 4rem;
          margin-bottom: 20px;
          animation: bounceIn 0.6s ease;
        }

        .book-success-text {
          font-size: 1.2rem;
          color: var(--dark);
          margin-bottom: 15px;
          animation: fadeInUp 0.5s ease 0.3s forwards;
          opacity: 0;
        }

        .book-success-btn {
          padding: 12px 25px;
          background: var(--primary);
          color: var(--light);
          border: none;
          border-radius: 8px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          animation: fadeInUp 0.5s ease 0.5s forwards;
          opacity: 0;
        }

        .book-success-btn:hover {
          background: var(--primary-light);
          transform: translateY(-2px);
        }

        @keyframes bounceIn {
          0% {
            transform: scale(0.5);
            opacity: 0;
          }

          50% {
            transform: scale(1.2);
            opacity: 1;
          }

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

        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Responsive adjustments */
        @media (max-width: 480px) {
          .book-verify-content {
            width: 95%;
          }

          .book-otp-input {
            width: 40px;
            height: 40px;
            font-size: 1rem;
          }

          .book-verify-buttons {
            flex-direction: column;
            gap: 10px;
          }

          .book-verify-btn {
            width: 100%;
          }
        }

        .book-inclusions {
          padding: 15px;
          background: #f9f9f9;
          border-radius: 12px;
          margin-bottom: 15px;
        }

        .book-inclusion-note {
          font-size: 14px;
          color: #ff6b6b;
          margin-bottom: 15px;
          font-weight: 500;
        }

        .book-slider {
          position: relative;
          height: 180px;
          overflow: hidden;
          border-radius: 10px;
          margin-bottom: 15px;
        }

        .book-slides {
          display: flex;
          width: 400%;
          height: 100%;
          transition: transform 0.5s ease;
        }

        .book-slide {
          width: 25%;
          height: 100%;
        }

        .book-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .book-slider-dots {
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 8px;
        }

        .book-slider-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.5);
          cursor: pointer;
        }

        .book-slider-dot.active {
          background: white;
        }

        .book-food-categories {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .book-food-category {
          background: white;
          padding: 12px;
          border-radius: 8px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .book-food-category h4 {
          margin: 0 0 8px 0;
          font-size: 15px;
          color: #333;
        }

        .book-food-category p {
          margin: 0;
          font-size: 13px;
          color: #666;
          line-height: 1.4;
        }

        /* BOOK PAGE ENDS==================================================== */
        /* USER DETAILS PAGE======================================================== */

        /* Dashboard Layout */
        .ud6 {
          padding: 50px 0;
        }

        /* Sidebar */
        .ud7 {
          list-style: none;
          padding: 0;
        }

        .ud8 {
          margin-bottom: 5px;
        }

        .ud9 {
          display: flex;
          align-items: center;
          padding: 10px 15px;
          border-radius: 6px;
          color: var(--dark2);
          text-decoration: none;
          transition: all 0.3s ease;
        }

        .ud9:hover,
        .ud9.active {
          background-color: var(--primary-light2);
          color: var(--dark2);
        }

        .ud9.active {
          font-weight: 600;
          border-left: 3px solid var(--primary2);
        }

        .ud9 i {
          width: 20px;
          margin-right: 10px;
          text-align: center;
        }

        .ud9.text-danger:hover {
          background-color: rgba(220, 53, 69, 0.1);
        }

        /* User Card */
        .ud10 {
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          border: none;
        }

        .ud11 {
          position: relative;
          width: 100px;
          height: 100px;
          margin: 0 auto 15px;
        }

        .ud11 img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
          border: 3px solid white;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .ud12 {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-color: var(--primary2);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border: 2px solid white;
        }

        /* Stats Card */
        .ud13 {
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          border: none;
          margin-top: 20px;
        }

        .ud13 .card-body {
          padding: 20px;
        }

        .ud13 h6 {
          display: flex;
          align-items: center;
          font-size: 16px;
          margin-bottom: 15px;
        }

        .ud13 h6 i {
          margin-right: 8px;
          color: var(--primary2);
        }

        .ud14 {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          padding-bottom: 8px;
        }

        .ud14:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        /* Content Cards */
        .ud15 {
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          border: none;
          margin-bottom: 25px;
          transition: all 0.3s ease;
        }

        .ud15:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .ud15 .card-header {
          background-color: white;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          padding: 15px 20px;
        }

        .ud15 .card-body {
          padding: 20px;
        }

        /* Booking Card */
        .ud16 {
          margin-bottom: 25px;
          border: 1px solid #ccc;
          padding: 20px;
          background-color: white;
          border-radius: 14px
        }

        .ud17 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          background-color: white;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .ud18 {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }

        .ud18 img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
          margin-right: 15px;
          border: 2px solid var(--primary2);
        }

        .ud19 h5 {
          margin-bottom: 0;
          font-size: 18px;
        }

        .ud19 small {
          color: var(--secondary2);
          font-size: 13px;
        }

        .ud20 {
          display: flex;
          align-items: center;
        }

        .ud21 {
          margin-right: 10px;
          font-size: 14px;
          padding: 5px 10px;
          border-radius: 20px;
        }

        .ud22 {
          font-weight: 600;
          font-size: 18px;
        }

        .ud23 {
          padding: 20px;
          background-color: white;
        }

        .ud24 {
          display: flex;
          margin-bottom: 15px;
        }

        .ud25 {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: var(--primary-light2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          flex-shrink: 0;
          color: var(--primary2);
          font-size: 16px;
        }

        .ud26 h6 {
          font-size: 14px;
          text-transform: uppercase;
          color: var(--secondary2);
          margin-bottom: 2px;
          font-weight: 600;
        }

        .ud26 p {
          margin-bottom: 0;
          font-weight: 500;
        }

        /* Chef Info Box */
        .ud27 {
          background-color: var(--primary-light2);
          border-left: 3px solid var(--primary2);
          padding: 20px;
          border-radius: 5px;
          margin: 20px 0;
        }

        .ud28 {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
        }

        .ud28 img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          object-fit: cover;
          margin-right: 15px;
          border: 2px solid var(--primary2);
        }

        .ud29 {
          margin-bottom: 5px;
        }

        .ud30 {
          display: flex;
          align-items: center;
        }

        .ud30 .stars {
          color: var(--primary2);
          margin-right: 8px;
        }

        .ud30 .review-count {
          color: var(--secondary2);
          font-size: 14px;
        }

        .ud31 {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 15px;
        }

        .ud32 {
          background-color: white;
          color: var(--dark);
          padding: 5px 10px;
          border-radius: 20px;
          font-size: 13px;
          display: flex;
          align-items: center;
        }

        .ud32 i {
          color: var(--primary2);
          margin-right: 5px;
          font-size: 12px;
        }

        .ud33 {
          color: var(--secondary2);
          font-size: 14px;
          line-height: 1.6;
        }

        /* Timeline */
        .ud34 {
          position: relative;
          padding-left: 50px;
          margin: 20px 0;
        }

        .ud34::before {
          content: '';
          position: absolute;
          left: 20px;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: #e9ecef;
        }

        .ud35 {
          position: relative;
          margin-bottom: 20px;
        }

        .ud35:last-child {
          margin-bottom: 0;
        }

        .ud35::before {
          content: '';
          position: absolute;
          left: -40px;
          top: 5px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #e9ecef;
          z-index: 1;
        }

        .ud35.completed::before {
          background-color: var(--success2);
          border: 4px solid rgba(40, 167, 69, 0.2);
        }

        .ud35.active::before {
          background-color: var(--primary2);
          border: 4px solid rgba(248, 183, 57, 0.2);
        }

        .ud36 {
          padding: 10px 15px;
          background-color: white;
          border-radius: 6px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .ud36 h6 {
          font-size: 15px;
          margin-bottom: 5px;
        }

        .ud36 p {
          font-size: 13px;
          color: var(--secondary2);
          margin-bottom: 0;
        }

        /* Booking Actions */
        .ud37 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          padding-top: 15px;
          margin-top: 15px;
          border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .ud38 {
          display: flex;
          align-items: center;
          color: var(--secondary2);
          font-size: 13px;
        }

        .ud38 i {
          color: var(--primary2);
          margin-right: 8px;
        }

        .ud39 {
          display: flex;
          gap: 10px;
        }

        /* Empty State */
        .ud40 {
          text-align: center;
          padding: 40px 20px;
        }

        .ud41 {
          font-size: 60px;
          color: var(--primary2);
          opacity: 0.3;
          margin-bottom: 20px;
        }

        .ud40 h4 {
          margin-bottom: 10px;
          color: var(--dark2);
        }

        .ud40 p {
          color: var(--secondary2);
          margin-bottom: 20px;
          max-width: 400px;
          margin-left: auto;
          margin-right: auto;
        }

        /* Responsive Adjustments */
        @media (max-width: 767.98px) {
          .userdetails1 {
            padding: 60px 0;
          }

          .ud9 {
            padding: 8px 12px;
            font-size: 14px;
          }

          .ud17 {
            flex-direction: column;
            align-items: flex-start;
          }

          .ud20 {
            margin-top: 10px;
            width: 100%;
            justify-content: space-between;
          }

          .ud24 {
            flex-direction: column;
          }

          .ud25 {
            margin-bottom: 10px;
          }

          .ud39 {
            width: 100%;
            margin-top: 15px;
          }

          .ud39 .btn {
            flex: 1;
          }
        }

        /* USER DETAILS PAGE END======================================================== */

        /* PACKAGE DETAILS STARTS============================================= */
        /* Package Detail Section */
        .pdetails6 {
          padding: 60px 0;
        }

        .pdetails7 {
          border-radius: 15px;
          overflow: hidden;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
          border: none;
          transition: all 0.3s ease;
          background: var(--light);
          border: 3px solid var(--primary);
        }

        .pdetails7:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .pdetails8 {
          background: var(--primary);
          color: var(--dark);
          padding: 40px;
          text-align: center;
          position: relative;
          overflow: hidden;
        }

        .pdetails8::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 5px;
          background: var(--light);
          opacity: 0.3;
        }

        .pdetails9 {
          font-size: 3rem;
          font-weight: 800;
          margin-bottom: 10px;
          color: var(--dark);
          text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
        }

        .pdetails9 small {
          font-size: 1.2rem;
          font-weight: 600;
          opacity: 0.9;
        }

        .pdetails10 {
          font-size: 2rem;
          margin-bottom: 15px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .pdetails11 {
          font-size: 1.2rem;
          opacity: 0.9;
          font-weight: 500;
        }

        .pdetails12 {
          padding: 40px;
          background-color: var(--light);
        }

        .pdetails13 {
          list-style: none;
          padding: 0;
          margin: 0 0 30px 0;
        }

        .pdetails13 li {
          padding: 15px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: flex-start;
          transition: all 0.3s;
        }

        .pdetails13 li:hover {
          background-color: var(--light-orange);
          padding-left: 10px;
          border-radius: 5px;
        }

        .pdetails13 li:last-child {
          border-bottom: none;
        }

        .pdetails14 {
          color: var(--primary);
          margin-right: 20px;
          font-size: 1.5rem;
          margin-top: 3px;
          min-width: 30px;
          text-align: center;
        }

        .pdetails15 h4 {
          font-size: 1.2rem;
          margin-bottom: 8px;
          color: var(--dark);
          font-weight: 600;
        }

        .pdetails15 p {
          color: var(--secondary);
          margin-bottom: 0;
          font-size: 1rem;
        }

        .pdetails16 {
          text-align: center;
          padding: 30px;
          background-color: var(--light-orange);
          border-top: 3px solid var(--primary);
        }

        .pdetails17 {
          background-color: var(--primary);
          color: var(--dark);
          font-weight: 700;
          padding: 15px 40px;
          border-radius: 50px;
          transition: all 0.3s;
          border: 2px solid var(--primary);
          font-size: 1.1rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          box-shadow: 0 5px 15px rgba(240, 200, 40, 0.4);
        }

        .pdetails17:hover {
          background-color: transparent;
          color: var(--dark);
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(240, 200, 40, 0.6);
          border-color: var(--primary);
        }



        .faq-container {
          max-width: 1050px;
          margin: 0 auto;
          padding-top: 50px;
          padding-bottom: 50px;
        }

        .faq-header {
          text-align: center;
          margin-bottom: 50px;
          position: relative;
        }

        .faq-header h2 {
          font-size: 2.5rem;
          font-weight: 800;
          color: var(--dark);
          display: inline-block;
          margin-bottom: 15px;
        }

        .faq-header h2::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 5px;
          background: linear-gradient(90deg, var(--primary), var(--chinese-gold));
          border-radius: 3px;
        }

        .faq-header p {
          font-size: 1.1rem;
          color: var(--secondary);
          max-width: 600px;
          margin: 0 auto;
          opacity: 0.8;
        }

        .faq-item {
          margin-bottom: 20px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
          background: var(--light);
          border-left: 4px solid var(--primary);
          transition: all 0.3s ease;
        }

        .faq-item:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .faq-question {
          background-color: var(--light);
          padding: 20px 25px;
          font-weight: 700;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: var(--dark);
          transition: all 0.3s;
          position: relative;
          padding-left: 45px;

        }

        .faq-question::before {
          content: 'Q';
          position: absolute;
          left: -40px;
          top: 50%;
          transform: translateY(-50%);
          width: 30px;
          height: 30px;
          background-color: var(--primary);
          color: var(--dark);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 0.9rem;
          opacity: 0;
          transition: all 0.3s;
        }

        .faq-item:hover .faq-question::before {
          opacity: 1;
          left: 5px;
        }

        .faq-question:hover {
          background-color: var(--light-orange);
        }

        .faq-question i {
          color: var(--primary);
          transition: all 0.3s;
        }

        .faq-answer {
          padding: 0 25px;
          max-height: 0;
          overflow: hidden;
          transition: all 0.4s ease;
          background-color: var(--light);
          position: relative;
          padding-left: 50px;
        }

        .faq-answer::before {
          content: 'A';
          position: absolute;
          left: -40px;
          top: 20px;
          width: 30px;
          height: 30px;
          background-color: var(--primary);
          color: var(--dark);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 0.9rem;
          opacity: 0;
          transition: all 0.3s;
        }

        .faq-item.active .faq-answer {
          padding: 25px;
          max-height: 500px;
        }

        .faq-item.active .faq-answer::before {
          opacity: 1;
          left: 5px;
        }

        .faq-item.active .faq-question i {
          transform: rotate(180deg);
        }

        .faq-answer p {
          margin-bottom: 0;
          line-height: 1.6;
          color: var(--secondary);
          padding-left: 40px;
        }

        .faq-image {
          text-align: center;
          margin-top: 40px;
        }

        .faq-image img {
          max-width: 150px;
          opacity: 0.8;
        }

        @media (max-width: 768px) {
          .faq-header h2 {
            font-size: 2rem;
          }

          .faq-question {
            padding: 15px 20px;
          }

          .faq-item.active .faq-answer {
            padding: 20px;
          }

          .faq-question::before,
          .faq-answer::before {
            display: none;
          }
        }

        /* Responsive Adjustments */
        @media (max-width: 767.98px) {
          .pdetails1 {
            padding: 80px 0;
          }

          .pdetails1 h1 {
            font-size: 2.2rem;
          }

          .pdetails1 .lead {
            font-size: 1.1rem;
          }

          .pdetails9 {
            font-size: 2.5rem;
          }

          .pdetails10 {
            font-size: 1.8rem;
          }

          .pdetails12,
          .pdetails28 {
            padding: 25px;
          }
        }

        /* PACKAGE DETAILS ENDS===================================== */
        @media screen and (max-width: 474px) {
          .bbody {
            padding: 10px;
          }

          .book-container {
            margin-top: 100px;
          }
        }