/* Spice Swirl Preloader - Anjappar Chettinad */
         #loading-area {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 50%, #1a1a1a 100%);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 9999;
         transition: opacity 0.4s ease, visibility 0.4s ease;
         opacity: 1;
         visibility: visible;
         }
         #loading-area.hidden {
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
         }
         .spice-loader {
         text-align: center;
         position: relative;
         padding: 20px;
         }
         .swirl {
         width: 80px;
         height: 80px;
         border: 4px solid transparent;
         border-top: 4px solid #d4af37;
         border-right: 4px solid #c41e3a;
         border-radius: 50%;
         animation: spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
         margin: 0 auto 20px;
         box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
         position: relative;
         }
         .swirl::before {
         content: '';
         position: absolute;
         top: 10px;
         left: 10px;
         right: 10px;
         bottom: 10px;
         border: 3px solid transparent;
         border-bottom: 3px solid #d4af37;
         border-radius: 50%;
         animation: spin-reverse 0.8s linear infinite;
         }
         @keyframes spin {
         0% {
         transform: rotate(0deg) scale(1);
         }
         50% {
         transform: rotate(180deg) scale(1.08);
         }
         100% {
         transform: rotate(360deg) scale(1);
         }
         }
         @keyframes spin-reverse {
         100% {
         transform: rotate(-360deg);
         }
         }
         .logo-text {
         font-family: 'Playfair Display', 'Cormorant Garamond', serif;
         font-size: 1.5rem;
         font-weight: 700;
         color: #d4af37;
         letter-spacing: 4px;
         margin-bottom: 18px;
         text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
         animation: pulse 2.2s ease-in-out infinite;
         text-transform: uppercase;
         }
         @keyframes pulse {
         0%,
         100% {
         opacity: 1;
         transform: scale(1);
         }
         50% {
         opacity: 0.9;
         transform: scale(1.03);
         }
         }
         .loading-dots span {
         display: inline-block;
         width: 9px;
         height: 9px;
         margin: 0 5px;
         background: #c41e3a;
         border-radius: 50%;
         animation: bounce 1.5s ease-in-out infinite both;
         box-shadow: 0 0 10px rgba(196, 30, 58, 0.6);
         }
         .loading-dots span:nth-child(2) {
         animation-delay: 0.2s;
         }
         .loading-dots span:nth-child(3) {
         animation-delay: 0.4s;
         }
         @keyframes bounce {
         0%,
         80%,
         100% {
         transform: scale(0.7);
         opacity: 0.6;
         }
         40% {
         transform: scale(1.2);
         opacity: 1;
         }
         }
         /* Accessibility: Reduce motion */
         @media (prefers-reduced-motion: reduce) {
         .swirl,
         .swirl::before,
         .logo-text,
         .loading-dots span {
         animation: none !important;
         }
         .swirl {
         border-top-color: #d4af37;
         border-right-color: #c41e3a;
         }
         }
         /* Mobile optimization */
         @media (max-width: 480px) {
         .swirl {
         width: 65px;
         height: 65px;
         }
         .logo-text {
         font-size: 1.2rem;
         letter-spacing: 2px;
         }
         .loading-dots span {
         width: 7px;
         height: 7px;
         }
         }
         .sub-title {
         font-family: var(--style-font);
         display: block;
         max-width: fit-content;
         font-weight: 500;
         color:red;
         margin-bottom:18px;
         margin-top: -0.03em;
         text-transform: capitalize;
         line-height: 24px;
         background-image: url("../images/title_shape.webp");
         background-repeat: no-repeat;
         background-position: bottom center;
         background-size: 100% auto;
         padding: 0 34px 4px 34px
         }
         .title-ani{
         opacity:0;
         transform:translateY(40px);
         transition: all 1.5s ease;
         }
         .title-ani.is-visible{
         opacity:1;
         transform:translateY(0);
         }
		 .site-header,
		.marque-1 {
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
		}
		
		 /* =========================================
                OUR CUISINE SECTION - UNIQUE CLASSES
                ========================================= */
                .anj-cuisine-section {
                    background-color: #ebebeb;
                    padding: 40px 0;
                }
                
                .anj-cuisine-description {
                    font-size: 16px;
                    line-height: 1.8;
                    color: #777;
                    margin-bottom: 35px;
                    text-align: justify;
                }
                
                .anj-cuisine-btn {
                    display: inline-block;
                    padding: 16px 40px;
                    background: linear-gradient(135deg, #8B0000 0%, #A52A2A 100%);
                    color: #fff;
                    text-decoration: none;
                    font-size: 14px;
                    font-weight: 600;
                    letter-spacing: 1.5px;
                    text-transform: uppercase;
                    border-radius: 3px;
                    transition: all 0.4s ease;
                    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
                }
                
                .anj-cuisine-images {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                    gap: 8px;
                }
                
                /* =========================================
                ✨ MODERN GALLERY HOVER EFFECT ✨
                ========================================= */
                .anj-cuisine-img-box {
                    position: relative;
                    overflow: hidden;
                    border-radius: 6px;
                    aspect-ratio: 1.6/1;
                    background: #fff;
                    cursor: pointer;
                    perspective: 1000px;
                    /* Important: Ensure the clip-path transition is separate from entrance */
                    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1), 
                                box-shadow 0.9s ease, 
                                clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1);
                }
                
                .anj-cuisine-img-box img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    transition: transform 1.8s cubic-bezier(0.23, 1, 0.32, 1), 
                                filter 1s ease;
                    filter: saturate(0.95) brightness(0.98);
                }
                
                .anj-cuisine-img-box::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border: 1.5px solid rgba(255, 255, 255, 0.9);
                    outline: 1.5px solid rgba(255, 255, 255, 0.9);
                    outline-offset: 0px;
                    opacity: 0;
                    transition: outline-offset 0.9s cubic-bezier(0.25, 1, 0.5, 1), 
                                opacity 0.7s ease;
                    z-index: 4;
                    pointer-events: none;
                    border-radius: 6px;
                }
                
                /* =========================================
                ⚡ SLOW CINEMATIC FLASH OVERLAYS ⚡
                ========================================= */
                .anj-cuisine-img-wrapper::before,
                .anj-cuisine-img-wrapper::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 200%;
                    height: 60px;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
                    z-index: 3;
                    pointer-events: none;
                    opacity: 0;
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
                
                .anj-cuisine-img-box:hover {
                    transform: translateY(-8px) rotateY(5deg) scale(1.02);
                    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4);
                }
                
                .anj-cuisine-img-box:hover img {
                    transform: scale(1.15) skewX(-2deg);
                    filter: saturate(1.2) contrast(1.05) brightness(1.05) sepia(0.05);
                }
                
                .anj-cuisine-img-box:hover::after {
                    opacity: 1;
                    outline-offset: 12px;
                }
                
                .anj-cuisine-img-wrapper:hover::before {
                    animation: flashToTopLeft 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
                }
                
                .anj-cuisine-img-wrapper:hover::after {
                    animation: flashToBottomRight 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
                }
                
                @keyframes flashToTopLeft {
                    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
                    30% { opacity: 1; }
                    100% { opacity: 0; transform: translate(-120%, -120%) rotate(-45deg) scaleX(1); }
                }
                
                @keyframes flashToBottomRight {
                    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
                    30% { opacity: 1; }
                    100% { opacity: 0; transform: translate(20%, 20%) rotate(-45deg) scaleX(1); }
                }
                
                /* =========================================
                ✨ CINEMATIC CORNER-WIPE REVEAL (ENTRANCE) ✨
                ========================================= */
                .anj-cuisine-img-wrapper { position: relative; overflow: hidden; }
                
                /* Set initial clip state */
                .anj-cuisine-img-wrapper[data-direction="top-left"] .anj-cuisine-img-box { clip-path: circle(0% at 0% 0%); }
                .anj-cuisine-img-wrapper[data-direction="top-right"] .anj-cuisine-img-box { clip-path: circle(0% at 100% 0%); }
                .anj-cuisine-img-wrapper[data-direction="bottom-left"] .anj-cuisine-img-box { clip-path: circle(0% at 0% 100%); }
                .anj-cuisine-img-wrapper[data-direction="bottom-right"] .anj-cuisine-img-box { clip-path: circle(0% at 100% 100%); }
                
                /* Reveal state */
                .anj-cuisine-img-wrapper.is-visible[data-direction="top-left"] .anj-cuisine-img-box { clip-path: circle(150% at 0% 0%); }
                .anj-cuisine-img-wrapper.is-visible[data-direction="top-right"] .anj-cuisine-img-box { clip-path: circle(150% at 100% 0%); }
                .anj-cuisine-img-wrapper.is-visible[data-direction="bottom-left"] .anj-cuisine-img-box { clip-path: circle(150% at 0% 100%); }
                .anj-cuisine-img-wrapper.is-visible[data-direction="bottom-right"] .anj-cuisine-img-box { clip-path: circle(150% at 100% 100%); }
                
                /* Delay sequence for entrance */
                .anj-cuisine-img-wrapper:nth-child(1) .anj-cuisine-img-box { transition-delay: 0.1s; }
                .anj-cuisine-img-wrapper:nth-child(2) .anj-cuisine-img-box { transition-delay: 0.3s; }
                .anj-cuisine-img-wrapper:nth-child(3) .anj-cuisine-img-box { transition-delay: 0.5s; }
                .anj-cuisine-img-wrapper:nth-child(4) .anj-cuisine-img-box { transition-delay: 0.7s; }
                
                /* Responsive Adjustments */
                @media (max-width: 991px) {
                    .anj-cuisine-content { padding-right: 0 !important; text-align: center; margin-bottom: 40px; }
                    .anj-cuisine-images { max-width: 600px; margin: 0 auto; }
                }
                @media (max-width: 768px) {
                    .anj-cuisine-section { padding: 50px 0 !important; }
                    .anj-cuisine-img-box { aspect-ratio: 1.5/1 !important; }
                }
                @media (max-width: 480px) {
                    .anj-cuisine-images { grid-template-columns: 1fr !important; grid-template-rows: repeat(4, 1fr) !important; }
                    .anj-cuisine-img-box { aspect-ratio: 1.7/1 !important; }
                }
/* =========================================
				OUR SERVICES SECTION - PARALLAX & LARGER ICONS
				========================================= */
				.anj-services-section {
					padding: 80px 0 80px;
					position: relative;
					overflow: hidden;
					background-color: #1a1a1a;
				}

				/* Parallax Background Layer - MASSIVE BUFFER TO PREVENT BLACK GAPS */
				.anj-services-parallax-bg {
					position: absolute;
					top: -50%; /* Starts way above to prevent black gaps */
					left: 0;
					width: 100%;
					height: 200%; /* Double height ensures it always covers the screen */
					/* REMOVED the dark overlay so the pure image is clearly visible */
					background-image: url('../images/main-slider/Banner_1.jpeg');
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					z-index: 1;
					will-change: transform;
					pointer-events: none;
				}

				.anj-services-section .container {
					position: relative;
					z-index: 2;
				}

				/* Services Wrapper */
				.services-wave-wrapper {
					position: relative;
					max-width: 1320px;
					margin: 0 auto;
					height: 420px;
				}

				/* SVG Arcs - Background Layer */
				.wave-arcs-svg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					pointer-events: none;
				}

				/* Services Row - Front Layer */
				.services-row {
					position: relative;
					z-index: 2;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100%;
					padding: 0 30px;
				}

				/* Service Items */
				.service-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					transition: transform 0.3s ease;
					flex: 0 0 auto;
					min-width: 0;
				}

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

				/* Outer Ring - Dotted Border - LARGER SIZE */
				.service-outer-ring {
					width: 150px;
					height: 150px;
					border-radius: 50%;
					border: 3px dotted rgba(255, 255, 255, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
				}

				/* Inner Circle - SOLID WHITE Background - LARGER SIZE */
				.service-inner-circle {
					width: 110px;
					height: 110px;
					border-radius: 50%;
					background: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.5s ease;
					box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
				}

				/* Font Awesome Icon - LARGER SIZE */
				.service-icon-fa {
					font-size: 44px;
					color: #333;
					transition: all 0.5s ease;
				}

				/* Active State - Red Highlighted */
				.service-item.active .service-outer-ring {
					border-color: #c41e3a;
					border-style: solid;
					border-width: 4px;
					box-shadow: 0 0 40px rgba(196, 30, 58, 0.8),
								0 0 80px rgba(196, 30, 58, 0.4);
					transform: scale(1.1);
				}

				.service-item.active .service-inner-circle {
					background: #c41e3a;
					width: 120px;
					height: 120px;
					box-shadow: 0 0 30px rgba(196, 30, 58, 0.6);
				}

				.service-item.active .service-icon-fa {
					color: #fff;
					font-size: 48px;
				}

				/* Service Label - Desktop: Alternating Top/Bottom */
				.service-label {
					margin-top: 20px;
					color: #fff;
					font-size: 16px;
					font-weight: 600;
					text-align: center;
					text-transform: uppercase;
					letter-spacing: 1px;
					opacity: 0.9;
					transition: all 0.5s ease;
					line-height: 1.4;
					text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); /* Boosted shadow */
					word-break: break-word;
				}

				.label-top {
					margin-bottom: 25px;
					margin-top: 0;
				}

				.label-bottom {
					margin-top: 25px;
					margin-bottom: 0;
				}

				.service-item.active .service-label {
					opacity: 1;
					color: #d4af37;
					font-size: 16px;
					font-weight: 700;
					text-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
				}

				.service-title {
					background: linear-gradient(135deg, #ff4d4d 0%, #ffffff 50%, #ff7a7a 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
				}

				/* =========================================
				RESPONSIVE DESIGN - MOBILE (YOUR ORIGINAL CODE RESTORED)
				========================================= */
				/* Large Mobile */
				@media (max-width: 768px) {
					.anj-services-section { padding: 60px 0 80px; }
					.wave-arcs-svg { display: none; }
					.services-wave-wrapper { height: auto; padding: 20px 0; }
					
					.services-row { 
						flex-direction: column;
						gap: 15px; 
						height: auto; 
						padding: 0 15px; /* Added horizontal padding for better spacing */
					}
					
					.service-item { 
						width: 100%;
						max-width: 95%; /*  Increased from 85% to 95% for more width */
						flex-direction: row; 
						align-items: center;
						justify-content: space-between; /* Ensures proper spacing */
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50px;
						padding: 14px 22px; /*  Increased padding for better spacing */
						border: 1px solid rgba(255, 255, 255, 0.15);
						backdrop-filter: blur(5px);
						-webkit-backdrop-filter: blur(5px);
						transition: all 0.4s ease;
						box-sizing: border-box;
					}
					
					.service-item:nth-child(odd) {
						align-self: flex-start;
						margin-left: 2%; /* 👈 Reduced from 5% to 2% */
					}
					
					.service-item:nth-child(even) {
						align-self: flex-end;
						margin-right: 2%; /* 👈 Reduced from 5% to 2% */
					}
					
					.service-outer-ring { 
						width: 60px; 
						height: 60px; 
						flex-shrink: 0;
						border: 2px dotted rgba(255, 255, 255, 0.5);
					}
					
					.service-inner-circle { 
						width: 45px; 
						height: 45px; 
					}
					
					.service-icon-fa { font-size: 22px; }
					
					.service-item.active .service-outer-ring { 
						border-color: #c41e3a;
						border-style: solid;
						border-width: 3px;
						box-shadow: 0 0 20px rgba(196, 30, 58, 0.6);
					}
					
					.service-item.active .service-inner-circle { 
						width: 48px; 
						height: 48px; 
						background: #c41e3a;
					}
					
					.service-item.active .service-icon-fa { font-size: 24px; }
					
					.service-label { 
						font-size: 13px; /* 👈 Reduced from 14px to 13px to fit longer text */
						margin: 0;
						margin-right: 12px; /* 👈 Added spacing between text and icon */
						text-align: left;
						opacity: 1;
						line-height: 1.3; /* 👈 Reduced from 1.4 to 1.3 */
						white-space: nowrap; /* 👈 Forces text to stay on one line */
						overflow: hidden;
						text-overflow: ellipsis;
						flex: 1; /* Allows text to take remaining space */
					}
					
					.service-item.active .service-label {
						color: #d4af37;
						font-size: 13px;
						font-weight: 700;
					}
				}

				/* Medium Mobile */
				@media (max-width: 576px) {
					/* REMOVED parallax height overrides */
					.anj-services-section { padding: 50px 0 70px; }
					
					.services-row { gap: 12px; }
					
					.service-item { 
						max-width: 100%; 
						padding: 10px 18px 10px 10px;
					}
					
					.service-item:nth-child(odd) { margin-left: 3%; }
					.service-item:nth-child(even) { margin-right: 3%; }
					
					.service-outer-ring { width: 55px; height: 55px; }
					.service-inner-circle { width: 40px; height: 40px; }
					.service-icon-fa { font-size: 20px; }
					
					.service-item.active .service-inner-circle { width: 44px; height: 44px; }
					.service-item.active .service-icon-fa { font-size: 22px; }
					
					.service-label { font-size: 14px; margin-left: 12px; }
					.service-item.active .service-label { font-size: 14px; }
				}

				/* Small Mobile */
				@media (max-width: 480px) {
					/* REMOVED parallax height overrides */
					.anj-services-section { padding: 40px 0 60px; }
					
					.services-row { gap: 10px; }
					
					.service-item { 
						max-width: 100%; 
						padding: 8px 15px 8px 8px;
					}
					
					.service-item:nth-child(odd) { margin-left: 2%; }
					.service-item:nth-child(even) { margin-right: 2%; }
					
					.service-outer-ring { width: 50px; height: 50px; }
					.service-inner-circle { width: 36px; height: 36px; }
					.service-icon-fa { font-size: 18px; }
					
					.service-item.active .service-inner-circle { width: 40px; height: 40px; }
					.service-item.active .service-icon-fa { font-size: 20px; }
					
					.service-label { font-size: 14px; margin-left: 10px; }
					.service-item.active .service-label { font-size: 14px; }
				}

				/* Extra Small Mobile */
				@media (max-width: 375px) {
					/* REMOVED parallax height overrides */
					.services-row { gap: 8px; }
					
					.service-item { 
						max-width: 95%;
						padding: 8px 12px 8px 8px;
					}
					
					.service-item:nth-child(odd) { margin-left: 1%; }
					.service-item:nth-child(even) { margin-right: 1%; }
					
					.service-outer-ring { width: 45px; height: 45px; }
					.service-inner-circle { width: 32px; height: 32px; }
					.service-icon-fa { font-size: 16px; }
					
					.service-item.active .service-inner-circle { width: 36px; height: 36px; }
					.service-item.active .service-icon-fa { font-size: 18px; }
					
					.service-label { font-size: 10px; margin-left: 8px; }
					.service-item.active .service-label { font-size: 14px; }
				}
/* =========================================
			   TONKATSU SECTION - WHITE WAVY BG + CAROUSEL
			   ========================================= */
			.tonkatsu-section {
				background-color: #f5f1e8;
				background-image: 
					url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 Q 50 80, 100 100 T 200 100' fill='none' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2'/%3E%3Cpath d='M0 110 Q 50 90, 100 110 T 200 110' fill='none' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2'/%3E%3Cpath d='M0 90 Q 50 70, 100 90 T 200 90' fill='none' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2'/%3E%3Cpath d='M0 120 Q 50 100, 100 120 T 200 120' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='1.5'/%3E%3Cpath d='M0 80 Q 50 60, 100 80 T 200 80' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='1.5'/%3E%3C/svg%3E");
				background-size: 200px 200px;
				padding: 40px 0;
				position: relative;
			}

			.tonkatsu-header { margin-bottom: 60px; }

			.tonkatsu-title {
				font-family: 'Playfair Display', 'Cormorant Garamond', serif;
				font-size: 32px;
				font-weight: 600;
				color: #5c4a3d;
				margin-bottom: 12px;
			}

			/* --- CAROUSEL WRAPPER --- */
			.tonkatsu-carousel {
				position: relative;
				max-width: 100%;
				margin: 0 auto;
			}

			/* Grid Layout - Horizontal Scroll */
			.tonkatsu-grid {
				display: flex;
				gap: 25px;
				overflow-x: auto;
				scroll-snap-type: x mandatory;
				scroll-behavior: smooth;
				-ms-overflow-style: none;
				scrollbar-width: none;
				padding: 15px 0;
				margin-bottom: 35px;
			}

			.tonkatsu-grid::-webkit-scrollbar { display: none; }

			/* Individual Item */
			.tonkatsu-item {
				flex: 0 0 calc(25% - 18.75px);
				scroll-snap-align: start;
				background: #264535;
				border-radius: 4px;
				border: 1px solid rgba(255, 255, 255, 0.2); 
				overflow: hidden;
				position: relative;
				box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
				transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
				cursor: pointer;
			}

			/* THICKER SLOW FLASH EFFECT */
			.tonkatsu-item::before {
				content: "";
				position: absolute;
				top: -50%; 
				left: -150%;
				width: 60%; /* Increased thickness/width of flash */
				height: 200%;
				background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.3), transparent); /* Increased brightness */
				transform: rotate(30deg);
				transition: left 2.5s ease; /* Slower, more deliberate */
				z-index: 3;
				pointer-events: none;
			}

			.tonkatsu-item:hover::before { left: 150%; }

			.tonkatsu-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
				border-color: rgba(242, 162, 62, 0.5);
			}

			/* Image Section */
			.tonkatsu-image {
				width: 100%;
				height: 450px; 
				overflow: hidden;
				background: #f0ebe3;
			}

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

			.tonkatsu-item:hover .tonkatsu-image img {
				transform: scale(1.05);
			}

			/* --- CAROUSEL ARROWS --- */
			.carousel-arrow {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
				border: 2px solid rgba(255, 255, 255, 0.3);
				width: 50px;
				height: 50px;
				border-radius: 50%;
				cursor: pointer;
				font-size: 20px;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
				transition: background 0.3s ease, transform 0.3s ease;
			}

			.carousel-arrow:hover {
				background: rgba(139, 0, 0, 0.9);
				border-color: #fff;
				transform: translateY(-50%) scale(1.1);
			}

			.prev-arrow { left: 15px; }
			.next-arrow { right: 15px; }

			/* Content Section */
			.tonkatsu-content {
				background: #2f4538;
				padding: 25px 20px;
				min-height: 180px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}

			.tonkatsu-item-title {
				font-family: 'Playfair Display', 'Cormorant Garamond', serif;
				font-size: 18px;
				font-weight: 600;
				color: #F2A23E!important;
				margin-bottom: 12px;
			}

			.tonkatsu-item-desc {
				font-family: 'Oxygen', sans-serif;
				font-size: 14px;
				color: #ffffff;
				line-height: 1.7;
				margin: 0;
			}

			/* CTA Button */
			.tonkatsu-cta { margin-top: 20px; }
			.tonkatsu-btn {
				display: inline-block;
				padding: 16px 40px;
				background: linear-gradient(135deg, #8B0000 0%, #A52A2A 100%);
				color: #fff;
				text-decoration: none;
				font-size: 14px;
				font-weight: 600;
				letter-spacing: 1.5px;
				text-transform: uppercase;
				border-radius: 3px;
				transition: all 0.4s ease;
				box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
			}
			.tonkatsu-btn:hover { background: linear-gradient(135deg, #8B0000 50%, #A52A2A 50%); color: #f6dc5f; font-weight: 800;}

			/* --- RESPONSIVE DESIGN --- */
			@media (max-width: 1199px) {
				.tonkatsu-item { flex: 0 0 calc(33.333% - 16.66px); }
				.tonkatsu-image { height: 420px; }
			}
			@media (max-width: 991px) {
				.tonkatsu-item { flex: 0 0 calc(50% - 12.5px); }
				.tonkatsu-image { height: 400px; }
			}
			@media (max-width: 768px) {
				.tonkatsu-item { flex: 0 0 100%; }
				.tonkatsu-image { height: 450px; }
				.tonkatsu-content { min-height: 160px; padding: 20px 18px; }
			}
/* =========================================
				WHY CHOOSE ANJAPPAR SECTION - STRONG PARALLAX & ANIMATIONS
				========================================= */
				.anj-why-section {
					position: relative;
					padding: 100px 0;
					overflow: hidden;
					background-color: #1a1a1a; /* Fallback color */
				}

				/* Parallax Background Container (Hides image when it's translated above) */
				.anj-why-parallax-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					overflow: hidden; /* CRITICAL: This hides the image when it's above the section */
					z-index: 1;
					pointer-events: none;
				}

				/* The actual background image layer */
				.anj-why-parallax-img {
					position: absolute;
					top: -50%; 
					left: 0;
					width: 100%;
					height: 200%; /* 200% height provides buffer for parallax movement */
					
					background-image: url('../images/main-slider/Banner_2.webp');
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					
					will-change: transform;
				}

				/* Ensure container sits on top of the background */
				.anj-why-section .container {
					position: relative;
					z-index: 2;
				}

				/* =========================================
				ENTRANCE ANIMATIONS - VERY SLOW & DRAMATIC
				========================================= */
				/* Initial Hidden States - Starting completely off-screen */
				.anj-why-left {
					padding-right: 40px;
					opacity: 0.3 !important; /* 👈 Changed from 0 to 0.3 - text is faintly visible during slide */
					visibility: hidden !important;
					transform: translateX(-100vw) !important; /* Starts completely off-screen to the left (100vw = full viewport width) */
					transition: opacity 2s ease-out 0.5s, transform 5s cubic-bezier(0.19, 1, 0.22, 1), visibility 5s !important; 
					/* 👆 Opacity becomes visible faster (2s with 0.5s delay) while transform takes 5s */
				}

				.anj-why-right {
					display: flex;
					flex-direction: column;
					gap: 35px;
					opacity: 0.3 !important; /* 👈 Changed from 0 to 0.3 - text is faintly visible during slide */
					visibility: hidden !important;
					transform: translateX(100vw) !important; /* Starts completely off-screen to the right (100vw = full viewport width) */
					transition: opacity 2s ease-out 1s, transform 5s cubic-bezier(0.19, 1, 0.22, 1) 0.8s, visibility 5s 0.8s !important; 
					/* 👆 Opacity becomes visible faster (2s with 1s delay) while transform takes 5s with 0.8s delay */
				}

				/* Triggered when section enters viewport */
				.anj-why-section.is-visible .anj-why-left,
				.anj-why-section.is-visible .anj-why-right {
					opacity: 1 !important;
					visibility: visible !important;
					transform: translateX(0) !important;
				}
				/* Left Side Text Styles */
				.franchise-title {
					font-family: 'Playfair Display', 'Cormorant Garamond', serif;
					font-size: 48px;
					font-weight: 700;
					color: #ffffff;
					line-height: 1.2;
					margin-bottom: 25px;
					text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8); 
				}

				.franchise-title .accent-text {
					color: #d4af37;
					font-style: italic;
				}

				.anj-why-description {
					font-family: 'Oxygen', sans-serif;
					font-size: 16px;
					line-height: 1.8;
					color: rgba(255, 255, 255, 0.95);
					margin-top: 15px;
					text-align: justify;
					text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); 
				}

				/* Right Side - Numbered Items */
				.anj-why-item {
					display: flex;
					align-items: center;
					gap: 30px;
					transition: transform 0.4s ease;
					cursor: pointer;
				}

				.anj-why-item:hover {
					transform: translateX(15px);
				}

				.anj-why-number {
					flex-shrink: 0;
					width: 90px;  
					height: 90px; 
					border-radius: 50%;
					background: linear-gradient(135deg, #c41e3a 0%, #8B0000 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: 'Oxygen', sans-serif;
					font-size: 32px;
					font-weight: 700;
					color: #ffffff;
					box-shadow: 0 4px 20px rgba(196, 30, 58, 0.4);
					transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
					border: 2px solid rgba(255,255,255,0.1);
				}

				.anj-why-item:hover .anj-why-number {
					background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
					color: #1a1a1a;
					transform: scale(1.1) rotate(5deg);
					box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
					border-color: #fff;
				}

				.anj-why-content {
					flex: 1;
				}

				.anj-why-item-title {
					font-family: 'Oxygen', sans-serif;
					font-size: 28px;
					font-weight: 800;
					color: #ffffff;
					margin: 0 0 8px 0;
					text-transform: capitalize;
					transition: color 0.3s ease;
					text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
				}

				.anj-why-item:hover .anj-why-item-title {
					color: #d4af37;
				}

				.anj-why-item-desc {
					font-family: 'Oxygen', sans-serif;
					font-size: 15px;
					line-height: 1.8;
					color: rgba(255, 255, 255, 0.85);
					margin: 0;
					transition: color 0.3s ease;
					text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
				}

				.anj-why-item:hover .anj-why-item-desc {
					color: rgba(255, 255, 255, 1);
				}

				/* =========================================
				RESPONSIVE DESIGN
				========================================= */
				@media (max-width: 991px) {
					.anj-why-section { padding: 60px 0; }
					.anj-why-left { padding-right: 0; margin-bottom: 40px; text-align: center; }
					.franchise-title { font-size: 32px; }
					.anj-why-description { text-align: center; max-width: 600px; margin: 0 auto; }
					.anj-why-right { max-width: 700px; margin: 0 auto; }
				}

				@media (max-width: 768px) {
					.anj-why-section { padding: 50px 0; }
					.container { padding-left: 20px; padding-right: 20px; }
					.franchise-title { font-size: 28px; margin-bottom: 15px; line-height: 1.3; }
					.anj-why-description { font-size: 14px; line-height: 1.8; margin-top: 10px; padding: 0 10px; }
					.anj-why-right { gap: 20px; }
					
					.anj-why-item { 
						gap: 20px; padding: 20px; 
						background: rgba(0, 0, 0, 0.3); 
						border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); 
					}
					.anj-why-number { width: 55px; height: 55px; font-size: 20px; flex-shrink: 0; }
					.anj-why-item-title { font-size: 17px; margin-bottom: 8px; }
					.anj-why-item-desc { font-size: 14px; line-height: 1.8; margin: 0; }
				}

				@media (max-width: 576px) {
					.anj-why-section { padding: 40px 0; }
					.container { padding-left: 15px; padding-right: 15px; }
					.franchise-title { font-size: 24px; margin-bottom: 15px; }
					.anj-why-description { font-size: 14px; line-height: 1.8; margin-top: 15px; text-align: justify; }
					.anj-why-right { gap: 15px; }
					.anj-why-item { flex-direction: row; text-align: left; gap: 15px; padding: 18px; background: rgba(0, 0, 0, 0.25); border-radius: 12px; margin-bottom: 0; }
					.anj-why-number { width: 50px; height: 50px; font-size: 18px; margin: 0; }
					.anj-why-content { flex: 1; min-width: 0; padding-right: 5px; }
					.anj-why-item-title { font-size: 16px; margin-bottom: 6px; line-height: 1.3; }
					.anj-why-item-desc { font-size: 14px; line-height: 1.8; margin: 0; }
				}

				@media (max-width: 480px) {
					.anj-why-section { padding: 35px 0; }
					.container { padding-left: 15px; padding-right: 15px; }
					.franchise-title { font-size: 22px; margin-bottom: 12px; }
					.anj-why-description { font-size: 14px; line-height: 1.8; margin-top: 10px; }
					.anj-why-right { gap: 15px; }
					.anj-why-item { gap: 15px; padding: 16px; border-radius: 12px; }
					.anj-why-number { width: 48px; height: 48px; font-size: 17px; }
					.anj-why-item-title { font-size: 15px; margin-bottom: 6px; }
					.anj-why-item-desc { font-size: 14px; line-height: 1.8; }
				}

				@media (max-width: 375px) {
					.anj-why-section { padding: 30px 0; }
					.franchise-title { font-size: 20px; }
					.anj-why-description { font-size: 14px; }
					.anj-why-item { padding: 14px; gap: 12px; }
					.anj-why-number { width: 44px; height: 44px; font-size: 16px; }
					.anj-why-item-title { font-size: 14px; }
					.anj-why-item-desc { font-size: 14px; }
				}