* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            padding: 0rem;
        }

        /* ============================================================
           HERO SECTION
           ============================================================ */
        .hero-section {
            max-width: 1600px;
            width: 100%;
            height: 90vh;
            min-height: 600px;
            max-height: 900px;
            border-radius: 0rem;
            overflow: hidden;
            position: relative;
            /*box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(204, 59, 59, 0.1);*/
            background: #ffffff;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.85;
            background-size: cover;
            background-position: center;
            transition: opacity 1.5s ease-in-out;
        }
p a {
    color: #f20101;
}
        .hero-bg.bg-1 {
            background-image: url('images/home/56f880d6-20cb-49f6-841e-41b82a33d538.webp');
            animation: kenBurns 20s ease-in-out infinite alternate;
        }
        .hero-bg.bg-2 {
            background-image: url('images/home/banner-6.webp');
            animation: kenBurns 22s ease-in-out infinite alternate-reverse;
        }
        .hero-bg.bg-3 {
            background-image: url('images/home/banner-5.webp');
            animation: kenBurns 24s ease-in-out infinite alternate;
        }
        .hero-bg.bg-4 {
            background-image: url('images/home/banner-8.jpeg');
            animation: kenBurns 21s ease-in-out infinite alternate-reverse;
        }
        .hero-bg.bg-5 {
            background-image: url('images/home/banner-9.jpeg');
            animation: kenBurns 23s ease-in-out infinite alternate;
        }
        .hero-bg.bg-6 {
            background-image: url('images/home/banner-7.jpeg');
            animation: kenBurns 23s ease-in-out infinite alternate;
        }
        .hero-bg.bg-7 {
            background-image: url('images/home/bannner-11.jpeg');
            animation: kenBurns 23s ease-in-out infinite alternate;
        }
        .hero-bg.bg-8 {
            background-image: url('images/home/banner-13.jpeg');
            animation: kenBurns 23s ease-in-out infinite alternate;
        }
        .hero-bg.bg-9 {
            background-image: url('images/home/banner-12.jpeg');
            animation: kenBurns 24s ease-in-out infinite alternate;
        }

        @keyframes kenBurns {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(1.12) translate(-2%, -2%); }
        }

        .hero-bg.active { opacity: 0.85; z-index: 1; }
        .hero-bg:not(.active) { opacity: 0; z-index: 0; }

        .hero-overlay {
            position: absolute;
            inset: 0;
            /*background: linear-gradient(135deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 16%) 50%, rgb(255 255 255 / 7%) 100%);*/
            z-index: 2;
            animation: overlayPulse 10s ease-in-out infinite;
        }

        @keyframes overlayPulse {
            0%, 100% { opacity: 0.95; }
            50% { opacity: 1; }
        }

        /*.hero-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 10;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        .hero-icons {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }

        .hero-icons .icon-float {
            position: absolute;
            font-size: 3.5rem;
            color: rgba(255, 255, 255, 0.15);
            animation: floatIcon 25s infinite ease-in-out;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .hero-icons .icon-float:nth-child(1) { top: 8%; left: 5%; font-size: 5rem; animation-duration: 22s; }
        .hero-icons .icon-float:nth-child(2) { top: 15%; right: 8%; font-size: 4rem; animation-duration: 28s; animation-delay: 2s; }
        .hero-icons .icon-float:nth-child(3) { bottom: 20%; left: 8%; font-size: 6rem; animation-duration: 20s; animation-delay: 4s; }
        .hero-icons .icon-float:nth-child(4) { bottom: 30%; right: 5%; font-size: 3.5rem; animation-duration: 30s; animation-delay: 1s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.15; }
            33% { transform: translate(30px, -35px) rotate(12deg) scale(1.1); opacity: 0.3; }
            66% { transform: translate(-25px, 30px) rotate(-8deg) scale(0.9); opacity: 0.2; }
        }

        /* ============================================================
           NAVIGATION BAR - Fully Transparent, Only Red Lines
           ============================================================ */
        .navbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 1.2rem 5.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 50;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-bottom: none;
            animation: slideDown 0.8s ease-out 0.1s both;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            overflow: visible;
        }

        @keyframes slideDown {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Animated red line at bottom of navbar */
        /*.navbar::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 94%;
            height: 1.5px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(204, 59, 59, 0.4) 15%,
                #ff4444 50%,
                rgba(204, 59, 59, 0.4) 85%,
                transparent 100%);
            animation: navbarLineGlow 3s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6), 0 0 30px rgba(204, 59, 59, 0.3);
        }*/

        @keyframes navbarLineGlow {
            0%, 100% {
                opacity: 0.5;
                box-shadow: 0 0 10px rgba(204, 59, 59, 0.4), 0 0 20px rgba(204, 59, 59, 0.2);
            }
            50% {
                opacity: 1;
                box-shadow: 0 0 20px rgba(204, 59, 59, 1), 0 0 40px rgba(255, 68, 68, 0.6), 0 0 60px rgba(255, 68, 68, 0.3);
            }
        }

        /* Red light sweep across navbar */
        /*.navbar::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 1.5px;
            background: linear-gradient(90deg,
                transparent,
                rgba(255, 68, 68, 1),
                rgba(255, 107, 107, 1),
                rgba(255, 68, 68, 1),
                transparent);
            animation: navbarSweep 4s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(255, 68, 68, 0.8), 0 0 40px rgba(255, 68, 68, 0.4);
        }*/

        @keyframes navbarSweep {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        /* ============================================================
           LOGO - Left Side with Image + Animations
           ============================================================ */
        .navbar .logo {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            text-decoration: none;
            position: relative;
            animation: logoEntry 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 0.3rem 0.5rem;
            border-radius: 1rem;
        }

        @keyframes logoEntry {
            0% { opacity: 0; transform: translateX(-30px) scale(0.9); }
            100% { opacity: 1; transform: translateX(0) scale(1); }
        }

        /* Logo glow pulse ring */
        .navbar .logo::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 1.2rem;
            background: radial-gradient(ellipse at center, rgba(204, 59, 59, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: -1;
            pointer-events: none;
        }

        .navbar .logo:hover::before {
            opacity: 1;
            animation: logoGlowPulse 2s ease-in-out infinite;
        }

        @keyframes logoGlowPulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .navbar .logo .logo-img {
            height: 55px;
            width: auto;
            display: block;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
            animation: logoFloat 4s ease-in-out infinite;
        }

        @keyframes logoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .navbar .logo:hover .logo-img {
            transform: scale(1.08) rotate(-2deg);
            filter: drop-shadow(0 4px 20px rgba(204, 59, 59, 0.5)) drop-shadow(0 0 30px rgba(204, 59, 59, 0.3));
            animation-play-state: paused;
        }

        /* Logo text next to image */
        .navbar .logo .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }

        .navbar .logo .logo-text .brand {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 800;
            color: #1a1a1a;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
            transition: all 0.4s ease;
        }

        .navbar .logo .logo-text .brand span {
            color: #f20101;
        }

        .navbar .logo:hover .logo-text .brand {
            color: #f20101;
            text-shadow: 0 0 20px rgba(204, 59, 59, 0.4), 0 2px 10px rgba(255, 255, 255, 0.8);
        }

        .navbar .logo .logo-text .tagline {
            font-size: 0.55rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #f20101;
            margin-top: 0.15rem;
            transition: all 0.4s ease;
            text-shadow: 0 1px 5px rgba(255, 255, 255, 0.8);
        }

        .navbar .logo:hover .logo-text .tagline {
            letter-spacing: 2.5px;
            text-shadow: 0 0 15px rgba(204, 59, 59, 0.5), 0 1px 5px rgba(255, 255, 255, 0.8);
        }

        /* ============================================================
           NAV LINKS
           ============================================================ */
        .navbar .nav-links {
            display: flex;
            align-items: center;
            gap: 1rem;
            list-style: none;
        }

        .navbar .nav-links > li {
            position: relative;
        }

        .navbar .nav-links > li > a {
            color: #1a1a1a;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            padding: 0.55rem 0.7rem;
            letter-spacing: 0.3px;
            text-shadow: 0 1px 5px rgba(255, 255, 255, 0.7);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: transparent;
        }

        .navbar .nav-links > li > a::before {
            content: '';
            position: absolute;
            top: 4px;
            right: 4px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #ff4444;
            opacity: 0;
            transform: scale(0);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 10px rgba(255, 68, 68, 0.9);
        }

        .navbar .nav-links > li:hover > a::before {
            opacity: 1;
            transform: scale(1);
            animation: dotPulse 1.2s ease-in-out infinite;
        }

        @keyframes dotPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 68, 68, 0.9); }
            50% { transform: scale(1.5); box-shadow: 0 0 20px rgba(255, 68, 68, 1); }
        }

        .navbar .nav-links > li > a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #f20101, #ff6b6b, #f20101);
            background-size: 200% 100%;
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 12px rgba(204, 59, 59, 0.8), 0 0 25px rgba(255, 68, 68, 0.4);
            border-radius: 2px;
        }

        .navbar .nav-links > li > a:hover::after,
        .navbar .nav-links > li:hover > a::after {
            width: 80%;
            animation: lineFlow 2s linear infinite;
        }

        @keyframes lineFlow {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        .navbar .nav-links > li > a:hover,
        .navbar .nav-links > li:hover > a {
            color: #f20101;
            transform: translateY(-2px);
            text-shadow: 0 0 15px rgba(204, 59, 59, 0.5), 0 1px 5px rgba(255, 255, 255, 0.7);
        }

        .navbar .nav-links > li > a i.caret {
            font-size: 0.6rem;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .navbar .nav-links > li:hover > a i.caret {
            transform: rotate(180deg);
            color: #f20101;
        }

        /* ============================================================
           BOOK NOW CTA
           ============================================================ */
        .navbar .nav-links > li > .nav-cta {
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #ffffff;
            padding: 0.6rem 1.8rem;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.85rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-shadow: none;
            border: none;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px -6px rgba(204, 59, 59, 0.5);
            cursor: pointer;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar .nav-links > li > .nav-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .navbar .nav-links > li > .nav-cta::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.8s ease;
        }

        .navbar .nav-links > li > .nav-cta:hover::before { transform: translateX(0); }
        .navbar .nav-links > li > .nav-cta:hover::after { transform: translateX(100%); }

        .navbar .nav-links > li > .nav-cta:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 15px 35px -6px rgba(204, 59, 59, 0.7);
        }

        /* ============================================================
           MEGA DROPDOWNS - WHITE Background
           ============================================================ */
        .mega-dropdown {
            position: absolute;
            top: calc(100% + 0px);
            left: 50%;
            transform: translateX(-50%) translateY(10px) scale(0.98);
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 1.5rem;
            padding: 1.8rem 1.6rem 1.5rem;
            border: 1px solid rgba(204, 59, 59, 0.15);
            box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(204, 59, 59, 0.05) inset;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 99;
            overflow: hidden;
        }

        .navbar .nav-links > li:hover .mega-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0) scale(1);
            background: rgba(255, 255, 255, 1);
            border-color: rgba(204, 59, 59, 0.25);
            box-shadow: 0 40px 100px -25px rgba(204, 59, 59, 0.2), 0 0 0 1px rgba(204, 59, 59, 0.1) inset;
        }

        .mega-dropdown::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: formBorderSlide 4s linear infinite;
            z-index: 5;
        }

        .mega-dropdown .bottom-border {
            position: absolute;
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: formBorderSlide 4s linear infinite reverse;
            z-index: 5;
        }

        @keyframes formBorderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(200%); }
        }

        .mega-dropdown .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #ff4444;
            box-shadow: 0 0 10px rgba(255, 68, 68, 0.9);
            pointer-events: none;
            z-index: 1;
            animation: particleFloat 6s ease-in-out infinite;
        }

        .mega-dropdown .particle:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
        .mega-dropdown .particle:nth-child(2) { top: 40%; right: 15%; animation-delay: 1.5s; }
        .mega-dropdown .particle:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 3s; }
        .mega-dropdown .particle:nth-child(4) { bottom: 40%; right: 10%; animation-delay: 4.5s; }

        @keyframes particleFloat {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
            50% { transform: translateY(-15px) scale(1.5); opacity: 1; }
        }

        /* Dropdown Sizes */
        .dropdown-wedding, .dropdown-corporate { width: 800px; }
        .dropdown-wedding .dropdown-grid,
        .dropdown-corporate .dropdown-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.3rem;
            position: relative;
            z-index: 2;
        }

        .dropdown-business, .dropdown-catering, .dropdown-excellence { width: 580px; }
        .dropdown-business .dropdown-grid,
        .dropdown-catering .dropdown-grid,
        .dropdown-excellence .dropdown-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            position: relative;
            z-index: 2;
        }

        /* Dropdown Columns */
        .dropdown-col {
            position: relative;
            animation: colEntry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        .dropdown-col:nth-child(1) { animation-delay: 0.1s; }
        .dropdown-col:nth-child(2) { animation-delay: 0.18s; }
        .dropdown-col:nth-child(3) { animation-delay: 0.26s; }

        @keyframes colEntry {
            0% { opacity: 0; transform: translateY(15px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .dropdown-col-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.9rem;
            padding-bottom: 0.6rem;
            border-bottom: 1.5px solid rgba(204, 59, 59, 0.15);
            position: relative;
        }

        .dropdown-col-header::after {
            content: '';
            position: absolute;
            bottom: -1.5px;
            left: 0;
            width: 40px;
            height: 1.5px;
            background: linear-gradient(90deg, #f20101, #ff6b6b, #f20101);
            background-size: 200% 100%;
            border-radius: 2px;
            box-shadow: 0 0 10px rgba(204, 59, 59, 0.6), 0 0 20px rgba(255, 68, 68, 0.3);
            animation: headerLinePulse 3s ease-in-out infinite, lineFlow 2s linear infinite;
        }

        @keyframes headerLinePulse {
            0%, 100% { width: 40px; opacity: 0.8; }
            50% { width: 60px; opacity: 1; }
        }

        .dropdown-col-header i {
            color: #f20101;
            font-size: 0.9rem;
            animation: iconPulse 3s ease-in-out infinite;
            filter: drop-shadow(0 0 4px rgba(204, 59, 59, 0.5));
        }

        @keyframes iconPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(204,59,59,0.5)); }
            50% { transform: scale(1.15) rotate(-5deg); color: #ff4444; filter: drop-shadow(0 0 12px rgba(255,68,68,0.9)); }
        }

        .dropdown-col-header h4 {
            font-family: 'Playfair Display', serif;
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #f20101;
            transition: all 0.4s ease;
        }

        /* Dropdown Items */
        .dropdown-items {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .dropdown-item {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            padding: 0.6rem 0.7rem;
            border-radius: 0.7rem;
            text-decoration: none;
            color: inherit;
            border: 1px solid transparent;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.5);
            animation: itemSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .dropdown-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.06), rgba(255, 107, 107, 0.02));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 0;
        }

        .dropdown-item::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.7s ease;
            z-index: 0;
        }

        .dropdown-item:hover::before { transform: scaleX(1); }
        .dropdown-item:hover::after { left: 100%; }

        .dropdown-item:hover {
            border-color: rgba(204, 59, 59, 0.2);
            transform: translateX(6px);
            box-shadow: 0 8px 25px -12px rgba(204, 59, 59, 0.3);
            background: rgba(255, 255, 255, 0.9);
        }

        .navbar .nav-links > li:hover .dropdown-item:nth-child(1) { animation-delay: 0.1s; }
        .navbar .nav-links > li:hover .dropdown-item:nth-child(2) { animation-delay: 0.15s; }
        .navbar .nav-links > li:hover .dropdown-item:nth-child(3) { animation-delay: 0.2s; }
        .navbar .nav-links > li:hover .dropdown-item:nth-child(4) { animation-delay: 0.25s; }
        .navbar .nav-links > li:hover .dropdown-item:nth-child(5) { animation-delay: 0.3s; }
        .navbar .nav-links > li:hover .dropdown-item:nth-child(6) { animation-delay: 0.35s; }
        .navbar .nav-links > li:hover .dropdown-item:nth-child(7) { animation-delay: 0.4s; }

        @keyframes itemSlideIn {
            0% { opacity: 0; transform: translateX(-20px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .dropdown-item .item-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 0.6rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
            box-shadow: 0 4px 15px -4px rgba(204, 59, 59, 0.5);
            flex-shrink: 0;
        }

        .dropdown-item:hover .item-icon {
            transform: scale(1.12) rotate(-10deg);
            box-shadow: 0 8px 25px -6px rgba(204, 59, 59, 0.8);
            background: linear-gradient(135deg, #d94444, #f20101);
        }

        .dropdown-item .item-content {
            flex: 1;
            position: relative;
            z-index: 1;
            min-width: 0;
        }

        .dropdown-item .item-content .item-title {
            font-size: 0.76rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 0.15rem;
            transition: all 0.4s ease;
            line-height: 1.3;
        }

        .dropdown-item:hover .item-content .item-title {
            color: #f20101;
        }

        .dropdown-item .item-content .item-desc {
            font-size: 0.66rem;
            color: #666;
            line-height: 1.4;
            transition: color 0.4s ease;
        }

        .dropdown-item:hover .item-content .item-desc {
            color: #333;
        }

        .dropdown-item .item-accent {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #f20101, #ff6b6b, #f20101);
            background-size: 100% 200%;
            transform: scaleY(0);
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-radius: 3px 0 0 3px;
            z-index: 2;
            box-shadow: 0 0 10px rgba(255, 68, 68, 0.8);
            animation: accentFlow 2s linear infinite;
        }

        @keyframes accentFlow {
            0% { background-position: 0% center; }
            100% { background-position: 0% 200%; }
        }

        .dropdown-item:hover .item-accent { transform: scaleY(1); }

        /* Dropdown Footer */
        .dropdown-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 1.2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(204, 59, 59, 0.15);
            position: relative;
            z-index: 2;
            animation: colEntry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
        }

        .dropdown-footer .footer-text {
            font-size: 0.7rem;
            color: #666;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .dropdown-footer .footer-text i {
            color: #f20101;
            animation: starSpin 4s ease-in-out infinite;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.2); }
        }

        .dropdown-footer .footer-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1.1rem;
            border-radius: 60px;
            font-size: 0.68rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #ffffff;
            box-shadow: 0 6px 20px -6px rgba(204, 59, 59, 0.5);
            position: relative;
            overflow: hidden;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }

        .dropdown-footer .footer-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 30px -6px rgba(204, 59, 59, 0.8);
        }

        .dropdown-footer .footer-btn i {
            font-size: 0.6rem;
            transition: transform 0.4s ease;
        }

        .dropdown-footer .footer-btn:hover i {
            transform: translateX(4px) rotate(-10deg);
        }

        /* Hamburger */
        .navbar .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 0.3rem;
        }

        .navbar .hamburger span {
            width: 28px;
            height: 2px;
            background: #1a1a1a;
            border-radius: 2px;
            transition: all 0.4s ease;
        }

        /* ============================================================
           SOCIAL SIDEBAR
           ============================================================ */
        .social-sidebar {
            position: relative;
            left: 2.5rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 6;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .social-sidebar .line-top {
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, transparent, rgba(204, 59, 59, 0.6));
            margin-bottom: 0.5rem;
            animation: lineGlow 3s ease-in-out infinite;
        }

        .social-sidebar .line-bottom {
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, rgba(204, 59, 59, 0.6), transparent);
            margin-top: 0.5rem;
            animation: lineGlow 3s ease-in-out infinite 1.5s;
        }

        @keyframes lineGlow {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; box-shadow: 0 0 10px rgba(204, 59, 59, 0.6); }
        }

        .social-sidebar a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            color: #f20101;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(255, 255, 255, 0.6);
            margin: 0.3rem 0;
        }

        .social-sidebar a:hover {
            color: #ffffff;
            transform: translateX(8px) scale(1.15);
            background: #f20101;
            box-shadow: 0 8px 30px -8px rgba(204, 59, 59, 0.6);
        }
        .ap-contai {
    width: 100%;
    padding: 0rem 4rem;
    display: flex;
    position: absolute;
    top: 50%;
}

        /* ============================================================
           HERO CONTENT
           ============================================================ */
        .hero-content {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            width: 88%;
            max-width: 1200px;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 3rem;
            align-items: center;
            animation: heroFade 1s ease-out 0.3s both;
            padding-left: 3rem;
            margin-top: 1.5rem;
        }

        @keyframes heroFade {
            0% { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        .hero-text { color: #1a1a1a; }

        .hero-text .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 255, 255, 0.7);
            color: #f20101;
            font-weight: 700;
            font-size: 0.72rem;
            letter-spacing: 2px;
            padding: 0.45rem 1.3rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.3);
            text-transform: uppercase;
            margin-bottom: 1rem;
            animation: badgeEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,
                       badgeFloat 4s ease-in-out infinite 1s;
            box-shadow: 0 4px 20px -4px rgba(204, 59, 59, 0.25);
        }

        @keyframes badgeEntry {
            0% { opacity: 0; transform: translateY(-15px) scale(0.8); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .hero-text .badge i {
            color: #f20101;
            animation: starSpin 3s ease-in-out infinite;
        }

        .typing-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.3rem;
            flex-wrap: wrap;
        }

        .typing-wrapper .static-text {
            font-size: 3rem;
            font-weight: 800;
            color: #1a1a1a;
            text-shadow: 0 2px 20px rgba(255, 255, 255, 0.95);
        }

        .typing-wrapper .static-text span { color: #f20101; }

        .typing-wrapper .typing-container {
            font-size: 3rem;
            font-weight: 800;
            color: #f20101;
            min-width: 200px;
            text-shadow: 0 2px 20px rgba(255, 255, 255, 0.95);
        }

        .typing-wrapper .typing-container .cursor {
            display: inline-block;
            width: 3px;
            height: 3rem;
            background: #f20101;
            margin-left: 4px;
            animation: blink 0.8s step-end infinite;
            vertical-align: bottom;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .hero-text .subtitle {
            font-size: 1rem;
            color: #222222;
            font-weight: 500;
            line-height: 1.6;
            max-width: 480px;
            margin-bottom: 1rem;
            text-shadow: 0 2px 15px rgba(255, 255, 255, 0.95);
        }

        .hero-text .subtitle strong { color: #f20101; font-weight: 700; }

        .hero-text .hero-stats {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .hero-text .hero-stats .stat {
            display: flex;
            flex-direction: column;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 0.5rem 0.8rem;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 0.8rem;
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        .hero-text .hero-stats .stat:hover {
            transform: translateY(-6px) scale(1.08);
            background: rgba(255, 255, 255, 0.75);
        }

        .hero-text .hero-stats .stat .number { font-size: 1.6rem; font-weight: 800; color: #1a1a1a; }
        .hero-text .hero-stats .stat:hover .number { color: #f20101; }
        .hero-text .hero-stats .stat .number span { color: #f20101; }

        .hero-text .hero-stats .stat .label {
            font-size: 0.7rem;
            color: #444;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* ============================================================
           HERO FORM
           ============================================================ */
        .hero-form {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-radius: 1.5rem;
            padding: 1.5rem;
            border: 1.5px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.15);
            animation: slideUpForm 0.8s ease-out 0.5s both;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .hero-form::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: formBorderSlide 4s linear infinite;
        }

        .hero-form:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 35px 80px -20px rgba(204, 59, 59, 0.25);
            background: rgba(255, 255, 255, 0.68);
        }

        @keyframes slideUpForm {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .hero-form .form-title {
            color: #333;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.6rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
        }

        .hero-form .form-title span { color: #f20101; }
        .hero-form .form-title i { color: #f20101; animation: calendarPulse 2s ease-in-out infinite; }

        @keyframes calendarPulse {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.15) rotate(-5deg); }
        }

        .hero-form .form-group {
            margin-bottom: 0.5rem;
            position: relative;
        }

        .hero-form .form-group input {
            width: 100%;
            padding: 0.65rem 1rem 0.65rem 2.6rem;
            border: 1.5px solid rgba(255, 255, 255, 0.7);
            border-radius: 0.8rem;
            background: rgba(255, 255, 255, 0.5);
            color: #1a1a1a;
            font-size: 0.8rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            outline: none;
            font-family: inherit;
        }

        .hero-form .form-group input::placeholder { color: #777; }

        .hero-form .form-group .input-prefix {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: #f20101;
            font-size: 0.8rem;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 2;
            opacity: 0.7;
        }

        .hero-form .form-group input:hover {
            border-color: rgba(204, 59, 59, 0.5);
            background: rgba(255, 255, 255, 0.72);
            transform: translateY(-2px);
        }

        .hero-form .form-group input:hover ~ .input-prefix { opacity: 1; }

        .hero-form .form-group input:focus {
            border-color: #f20101;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 4px rgba(204, 59, 59, 0.12);
            transform: scale(1.02) translateY(-2px);
        }

        .hero-form .form-group input:focus ~ .input-prefix { opacity: 1; }

        .hero-form .form-group .input-icon {
            position: absolute;
            right: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: #f20101;
            font-size: 0.75rem;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0.5;
        }

        .hero-form .form-group input:focus ~ .input-icon {
            opacity: 1;
            transform: translateY(-50%) scale(1.2) rotate(10deg);
        }

        .custom-select-wrapper {
            position: relative;
            width: 100%;
            user-select: none;
        }

        .custom-select-trigger {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0.65rem 1rem 0.65rem 2.6rem;
            border: 1.5px solid rgba(255, 255, 255, 0.7);
            border-radius: 0.8rem;
            background: rgba(255, 255, 255, 0.5);
            color: #1a1a1a;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .custom-select-trigger .prefix-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: #f20101;
            font-size: 0.8rem;
            opacity: 0.7;
        }

        .custom-select-trigger .selected-text {
            flex: 1;
            color: #777;
        }

        .custom-select-trigger .selected-text.has-value { color: #1a1a1a; }

        .custom-select-trigger .arrow-icon {
            margin-left: 0.5rem;
            color: #f20101;
            font-size: 0.65rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0.7;
        }

        .custom-select-trigger:hover {
            border-color: rgba(204, 59, 59, 0.5);
            background: rgba(255, 255, 255, 0.72);
            transform: translateY(-2px);
        }

        .custom-select-trigger:hover .prefix-icon,
        .custom-select-trigger:hover .arrow-icon { opacity: 1; }
        .custom-select-trigger:hover .arrow-icon { transform: rotate(180deg); }

        .custom-select-trigger.open {
            border-color: #f20101;
            background: rgba(255, 255, 255, 0.9);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .custom-options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.98);
            border: 1.5px solid rgba(204, 59, 59, 0.3);
            border-top: none;
            border-radius: 0 0 0.8rem 0.8rem;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 100;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
        }

        .custom-options.open { max-height: 280px; opacity: 1; visibility: visible; }

        .custom-option {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.55rem 1rem;
            color: #555;
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-bottom: 1px solid #f5f5f5;
        }

        .custom-option:last-child { border-bottom: none; }
        .custom-option .option-label { flex: 1; }

        .custom-option .option-check {
            opacity: 0;
            color: #f20101;
            font-size: 0.7rem;
        }

        .custom-option:hover {
            background: rgba(204, 59, 59, 0.08);
            color: #1a1a1a;
            padding-left: 1.5rem;
        }

        .custom-option.selected { background: rgba(204, 59, 59, 0.12); color: #f20101; }
        .custom-option.selected .option-check { opacity: 1; }

        .date-input-wrapper { position: relative; width: 100%; }

        .date-input-display {
            display: flex;
            align-items: center;
            padding: 0.65rem 1rem 0.65rem 2.6rem;
            border: 1.5px solid rgba(255, 255, 255, 0.7);
            border-radius: 0.8rem;
            background: rgba(255, 255, 255, 0.5);
            color: #1a1a1a;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }

        .date-input-display .prefix-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: #f20101;
            font-size: 0.8rem;
            opacity: 0.7;
        }

        .date-input-display .date-text { flex: 1; color: #777; }
        .date-input-display .date-text.has-value { color: #1a1a1a; }

        .date-input-display .calendar-icon {
            color: #f20101;
            font-size: 0.85rem;
            opacity: 0.7;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .date-input-display:hover {
            border-color: rgba(204, 59, 59, 0.5);
            background: rgba(255, 255, 255, 0.72);
            transform: translateY(-2px);
        }

        .date-input-display:hover .prefix-icon,
        .date-input-display:hover .calendar-icon { opacity: 1; }
        .date-input-display:hover .calendar-icon { transform: scale(1.25) rotate(-10deg); }

        .date-input-display:focus-within,
        .date-input-display.open {
            border-color: #f20101;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 4px rgba(204, 59, 59, 0.12);
        }

        .date-input-hidden {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 3;
        }

        .hero-form .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        .hero-form .submit-btn {
            width: 100%;
            padding: 0.7rem;
            border: none;
            border-radius: 0.8rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 0.2rem;
            box-shadow: 0 8px 24px -6px rgba(204, 59, 59, 0.5);
            position: relative;
            overflow: hidden;
        }

        .hero-form .submit-btn:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 18px 45px -8px rgba(204, 59, 59, 0.7);
        }

        .hero-form .form-footer {
            text-align: center;
            margin-top: 0.5rem;
            font-size: 0.6rem;
            color: #666;
        }

        .hero-form .form-footer i { color: #27ae60; }

        /* ============================================================
           MODAL
           ============================================================ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

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

        .modal-container {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(20px);
            border-radius: 1.8rem;
            max-width: 1000px;
            width: 100%;
            max-height: 94vh;
            overflow: hidden;
            position: relative;
            box-shadow: 0 50px 120px -25px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(204, 59, 59, 0.15);
            transform: scale(0.8) translateY(40px);
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
        }

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

        .modal-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: formBorderSlide 4s linear infinite;
            border-radius: 1.8rem 1.8rem 0 0;
            z-index: 10;
        }

        .modal-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: formBorderSlide 4s linear infinite reverse;
            border-radius: 0 0 1.8rem 1.8rem;
            z-index: 10;
        }

        .modal-header {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(15px);
            padding: 1.8rem 2rem 1.5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            border-bottom: 1px solid rgba(204, 59, 59, 0.1);
        }

        .modal-header::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 200%;
            background: radial-gradient(ellipse at center, rgba(204, 59, 59, 0.08), transparent 60%);
            animation: headerGlow 5s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes headerGlow {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
            50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f20101;
            border: 2px solid rgba(204, 59, 59, 0.2);
            color: #ffffff;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 10;
            box-shadow: 0 4px 15px -4px rgba(204, 59, 59, 0.5);
        }

        .modal-close:hover {
            background: #f20101;
            transform: rotate(90deg) scale(1.15);
            box-shadow: 0 8px 25px rgba(204, 59, 59, 0.6);
        }

        .modal-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.1), rgba(204, 59, 59, 0.05));
            color: #f20101;
            font-weight: 700;
            font-size: 0.6rem;
            letter-spacing: 2px;
            padding: 0.35rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.25);
            text-transform: uppercase;
            margin-bottom: 0.6rem;
            position: relative;
            z-index: 2;
            animation: badgeEntry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
                       badgeFloat 4s ease-in-out infinite 1s;
        }

        .modal-badge i {
            color: #f20101;
            animation: starSpin 3s ease-in-out infinite;
            font-size: 0.55rem;
        }

        .modal-header h2 {
            font-size: 1.6rem;
            font-weight: 800;
            color: #1a1a1a;
            letter-spacing: -0.5px;
            margin-bottom: 0.25rem;
            position: relative;
            z-index: 2;
            animation: titleSlide 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
        }

        @keyframes titleSlide {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .modal-header h2 span {
            color: #f20101;
            position: relative;
            display: inline-block;
        }

        .modal-header h2 span::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, #f20101, #ff6b6b);
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards;
        }

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

        .modal-header p {
            color: #777;
            font-size: 0.72rem;
            position: relative;
            z-index: 2;
            animation: titleSlide 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
        }

        .modal-body {
            display: grid;
            grid-template-columns: 1fr 1fr 1.2fr;
            gap: 0;
            flex: 1;
            overflow: hidden;
        }

        .modal-col {
            padding: 1.2rem;
            overflow-y: auto;
            max-height: calc(94vh - 140px);
        }

        .modal-col::-webkit-scrollbar { width: 4px; }
        .modal-col::-webkit-scrollbar-track { background: transparent; }
        .modal-col::-webkit-scrollbar-thumb { background: rgba(204, 59, 59, 0.3); border-radius: 2px; }

        .modal-col-1 { background: rgba(250, 250, 250, 0.7); border-right: 1px solid #f0f0f0; }
        .modal-col-2 { background: rgba(250, 250, 250, 0.7); border-right: 1px solid #f0f0f0; }
        .modal-col-3 { background: rgba(255, 255, 255, 0.55); }

        .col-title {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: #f20101;
            margin-bottom: 0.7rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding-bottom: 0.4rem;
            border-bottom: 2px solid rgba(204, 59, 59, 0.15);
        }

        .col-title i { animation: iconPulse 3s ease-in-out infinite; font-size: 0.72rem; }

        .contact-list { display: flex; flex-direction: column; gap: 0.4rem; }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.5rem 0.6rem;
            border-radius: 0.65rem;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.8);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .contact-item:hover {
            background: rgba(204, 59, 59, 0.08);
            border-color: rgba(204, 59, 59, 0.25);
            transform: translateX(5px);
            box-shadow: 0 6px 20px -8px rgba(204, 59, 59, 0.25);
        }

        .contact-item .contact-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(204, 59, 59, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f20101;
            font-size: 0.72rem;
            flex-shrink: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .contact-item:hover .contact-icon {
            background: #f20101;
            color: #fff;
            transform: scale(1.15) rotate(-10deg);
        }

        .contact-item .contact-detail { display: flex; flex-direction: column; flex: 1; min-width: 0; }

        .contact-item .contact-detail .label {
            font-size: 0.5rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .contact-item .contact-detail .value {
            font-size: 0.72rem;
            color: #1a1a1a;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.4rem;
        }

        .social-btn {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.5rem 0.55rem;
            border-radius: 0.6rem;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.85);
            color: #555;
            text-decoration: none;
            font-size: 0.65rem;
            font-weight: 600;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .social-btn i { font-size: 0.9rem; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

        .social-btn:hover { color: #fff; transform: translateY(-3px) scale(1.03); }
        .social-btn:hover i { transform: scale(1.2) rotate(-10deg); }

        .social-btn.whatsapp:hover { background: #25d366; box-shadow: 0 8px 20px -8px rgba(37, 211, 102, 0.6); }
        .social-btn.facebook:hover { background: #1877f2; box-shadow: 0 8px 20px -8px rgba(24, 119, 242, 0.6); }
        .social-btn.instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 8px 20px -8px rgba(220, 39, 67, 0.6); }
        .social-btn.youtube:hover { background: #ff0000; box-shadow: 0 8px 20px -8px rgba(255, 0, 0, 0.6); }

        .map-container {
            position: relative;
            border-radius: 0.65rem;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.85);
            height: 90px;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .map-container:hover {
            border-color: rgba(204, 59, 59, 0.3);
            box-shadow: 0 12px 30px -12px rgba(204, 59, 59, 0.25);
            transform: scale(1.02);
        }

        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            filter: grayscale(0.3) contrast(1.05);
            transition: filter 0.5s ease;
        }

        .map-container:hover iframe { filter: grayscale(0) contrast(1.05); }

        .map-overlay-btn {
            position: absolute;
            bottom: 0.4rem;
            right: 0.4rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #fff;
            padding: 0.3rem 0.7rem;
            border-radius: 60px;
            font-size: 0.55rem;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            box-shadow: 0 4px 15px -4px rgba(204, 59, 59, 0.6);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 5;
        }

        .map-overlay-btn:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-2px) scale(1.05);
        }

        .directions-buttons {
            display: flex;
            gap: 0.4rem;
            margin-top: 0.5rem;
        }

        .directions-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            padding: 0.45rem 0.4rem;
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.85);
            color: #666;
            font-size: 0.58rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .directions-btn i {
            font-size: 0.65rem;
            color: #f20101;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .directions-btn:hover {
            background: rgba(204, 59, 59, 0.08);
            border-color: rgba(204, 59, 59, 0.3);
            color: #f20101;
            transform: translateY(-2px);
        }

        .directions-btn:hover i { transform: scale(1.2) rotate(-10deg); }

        .modal-form-panel .form-title {
            color: #333;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.7rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
        }

        .modal-form-panel .form-title span { color: #f20101; }
        .modal-form-panel .form-title i {
            color: #f20101;
            animation: calendarPulse 2s ease-in-out infinite;
            font-size: 0.72rem;
        }

        .modal-form-panel .form-group {
            margin-bottom: 0.5rem;
            position: relative;
        }

        .modal-form-panel .form-group input,
        .modal-form-panel .form-group textarea,
        .modal-form-panel .form-group select {
            width: 100%;
            padding: 0.55rem 0.75rem 0.55rem 2.3rem;
            border: 1.5px solid rgba(255, 255, 255, 0.85);
            border-radius: 0.7rem;
            background: rgba(255, 255, 255, 0.55);
            color: #1a1a1a;
            font-size: 0.72rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            outline: none;
            font-family: inherit;
            appearance: none;
        }

        .modal-form-panel .form-group textarea {
            resize: vertical;
            min-height: 45px;
            padding-top: 0.6rem;
        }

        .modal-form-panel .form-group input::placeholder,
        .modal-form-panel .form-group textarea::placeholder { color: #888; }

        .modal-form-panel .form-group .input-prefix {
            position: absolute;
            left: 0.7rem;
            top: 0.7rem;
            color: #f20101;
            font-size: 0.7rem;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 2;
            opacity: 0.7;
        }

        .modal-form-panel .form-group input:hover,
        .modal-form-panel .form-group textarea:hover,
        .modal-form-panel .form-group select:hover {
            border-color: rgba(204, 59, 59, 0.4);
            background: rgba(255, 255, 255, 0.8);
        }

        .modal-form-panel .form-group input:focus,
        .modal-form-panel .form-group textarea:focus,
        .modal-form-panel .form-group select:focus {
            border-color: #f20101;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 0 0 3px rgba(204, 59, 59, 0.1);
        }

        .modal-form-panel .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.45rem;
        }

        .modal-form-panel .submit-btn {
            width: 100%;
            padding: 0.65rem;
            border: none;
            border-radius: 0.7rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #fff;
            font-weight: 700;
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            margin-top: 0.4rem;
            box-shadow: 0 6px 20px -5px rgba(204, 59, 59, 0.5);
            position: relative;
            overflow: hidden;
        }

        .modal-form-panel .submit-btn:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 35px -6px rgba(204, 59, 59, 0.7);
        }

        .modal-form-panel .submit-btn i {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .modal-form-panel .submit-btn:hover i { transform: translateX(6px) scale(1.15); }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1200px) {
            .dropdown-wedding, .dropdown-corporate { width: 700px; }
            .dropdown-business, .dropdown-catering, .dropdown-excellence { width: 520px; }
            .navbar { padding: 1.2rem 1.8rem; }
            .navbar .nav-links { gap: 0.8rem; }
            .navbar .logo .logo-img { height: 48px; }
            .navbar .logo .logo-text .brand { font-size: 1.2rem; }
        }

        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 2rem;
                top: 50%;
                transform: translate(-50%, -50%);
                padding: 2rem 0;
                padding-left: 0;
                margin-top: 3rem;
            }
            .typing-wrapper .static-text,
            .typing-wrapper .typing-container { font-size: 2.5rem; }
            .typing-wrapper .typing-container .cursor { height: 2.5rem; }
            .navbar { padding: 1rem 1.5rem; }
            .hero-section { height: auto; min-height: 900px; max-height: none; border-radius: 0rem; }
            .social-sidebar { left: 1.5rem; }
            .social-sidebar a { width: 38px; height: 38px; font-size: 0.9rem; }
            .dropdown-wedding, .dropdown-corporate {
                width: 620px;
                left: 0;
                transform: translateX(0) translateY(10px) scale(0.98);
            }
            .navbar .nav-links > li:hover .mega-dropdown {
                transform: translateX(0) translateY(0) scale(1);
            }
            .dropdown-wedding .dropdown-grid,
            .dropdown-corporate .dropdown-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .navbar .logo .logo-img { height: 42px; }
            .navbar .logo .logo-text .brand { font-size: 1.1rem; }
            .navbar .logo .logo-text .tagline { font-size: 0.5rem; }
        }

        @media (max-width: 768px) {
            .navbar .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                padding: 1.5rem;
                gap: 1rem;
                border-radius: 0 0 1rem 1rem;
                border: 1px solid rgba(204, 59, 59, 0.2);
                box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
            }
            .navbar .nav-links.open { display: flex; }
            .navbar .hamburger { display: flex; }
            .navbar .hamburger span { background: #1a1a1a; }
            .navbar .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
            .navbar .hamburger.active span:nth-child(2) { opacity: 0; }
            .navbar .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.navbar .nav-links > li > .mega-dropdown {
    display: none !important;
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.8rem 0 0.5rem 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    
    /* ✅ YAHAN SCROLL ADD KAREIN */
    max-height: 60vh !important;       /* Screen ki 60% height tak scroll */
    overflow-y: auto !important;       /* Vertical scroll enable */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
}

/* Jab parent li par .dropdown-open class lage */
.navbar .nav-links > li.dropdown-open > .mega-dropdown {
    display: block !important;
}
/* Custom Scrollbar for Mobile Dropdown */
.navbar .nav-links > li > .mega-dropdown::-webkit-scrollbar {
    width: 4px;
}

.navbar .nav-links > li > .mega-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.navbar .nav-links > li > .mega-dropdown::-webkit-scrollbar-thumb {
    background: rgba(242, 1, 1, 0.3);
    border-radius: 4px;
}

.navbar .nav-links > li > .mega-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(242, 1, 1, 0.6);
}

.ap-contai{
        padding: 0rem 0rem;
    }
    /* Jab parent li par .dropdown-open class lage */
    .navbar .nav-links > li.dropdown-open > .mega-dropdown {
        display: block !important;
    }

    /* Dropdown ke andar ka grid single column */
    .navbar .nav-links .mega-dropdown .dropdown-grid {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    /* Caret rotate jab open ho */
    .navbar .nav-links > li.dropdown-open > a .caret {
        transform: rotate(180deg);
        color: #F20101;
    }

    /* Dropdown footer mobile */
    .navbar .nav-links .mega-dropdown .dropdown-footer {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }

    /* Particles mobile par hide kar dein (warna layout kharab karte hain) */
    .navbar .nav-links .mega-dropdown .particle,
    .navbar .nav-links .mega-dropdown .bottom-border,
    .navbar .nav-links .mega-dropdown::before {
        display: none !important;
    }

            .navbar .logo .logo-img { height: 38px; }
            .navbar .logo .logo-text .brand { font-size: 1rem; }
            .navbar .logo .logo-text .tagline { display: none; }

            .typing-wrapper .static-text,
            .typing-wrapper .typing-container { font-size: 1.8rem; }
            .typing-wrapper .typing-container .cursor { height: 1.8rem; }
            .typing-wrapper { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
            .hero-section { min-height: 900px; border-radius: 0rem; }
            .hero-form { padding: 1.2rem; }
            .hero-form .form-row { grid-template-columns: 1fr; }
            .social-sidebar {
                position: absolute;
                left: 50%;
                bottom: 1rem;
                top: auto;
                transform: translateX(-50%);
                flex-direction: row;
                gap: 0.5rem;
            }
            .social-sidebar .line-top,
            .social-sidebar .line-bottom { width: 30px; height: 2px; margin: 0; }
            .social-sidebar a { margin: 0; }

            .modal-container { max-width: 95%; border-radius: 1.3rem; }
            .modal-body {
                grid-template-columns: 1fr;
                max-height: calc(94vh - 160px);
                overflow-y: auto;
            }
            .modal-col {
                max-height: none;
                border-right: none;
                border-bottom: 1px solid #f0f0f0;
            }
            .modal-header { padding: 1.4rem 1.2rem 1.2rem; }
            .modal-header h2 { font-size: 1.25rem; }
        }

        @media (max-width: 480px) {
            .typing-wrapper .static-text,
            .typing-wrapper .typing-container { font-size: 1.4rem; }
            .typing-wrapper .typing-container .cursor { height: 1.4rem; }
            .hero-form { padding: 1rem; }
            .navbar .logo .logo-img { height: 32px; }
            .navbar .logo .logo-text .brand { font-size: 0.85rem; }
            .hero-section { min-height: 1060px; border-radius: 0rem; }
            .social-sidebar a { width: 34px; height: 34px; font-size: 0.8rem; }
            .hero-text .badge { font-size: 0.6rem; padding: 0.35rem 0.9rem; letter-spacing: 1.5px; }
            .modal-container { border-radius: 1.2rem; }
            .modal-header { padding: 1.2rem 1rem 1rem; }
            .modal-header h2 { font-size: 1.1rem; }
            .modal-header p { font-size: 0.65rem; }
            .modal-col { padding: 1rem; }
            .social-grid { grid-template-columns: 1fr 1fr; }
            .modal-form-panel .form-row { grid-template-columns: 1fr; }
        }

        /* ============================================================
           CORPORATE EVENTS SECTION
           ============================================================ */
        .tuaam-corp-events-wrap {
            max-width: 1600px;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 3.5rem;
            position: relative;
            overflow: hidden;
        }

        .tuaam-corp-events-wrap:hover {
            box-shadow: 0 40px 90px -20px rgba(204, 59, 59, 0.15);
        }


        @keyframes tuaamBorderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Soft background blobs */
        .tuaam-ambient-blob {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(204, 59, 59, 0.06), transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .tuaam-ambient-blob.tuaam-blob-alpha {
            top: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            animation: tuaamBlobFloat 15s ease-in-out infinite;
        }

        .tuaam-ambient-blob.tuaam-blob-beta {
            bottom: -180px;
            left: -180px;
            width: 550px;
            height: 550px;
            animation: tuaamBlobFloat 18s ease-in-out infinite reverse;
        }

        @keyframes tuaamBlobFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.1); }
        }

        /* ============================================================
           BACKGROUND ANIMATED ICONS
           ============================================================ */
        .tuaam-float-icons-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .tuaam-float-icons-layer .tuaam-drift-icon {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(204, 59, 59, 0.05);
            animation: tuaamIconDrift 25s infinite ease-in-out;
        }

        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .tuaam-float-icons-layer .tuaam-drift-icon:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes tuaamIconDrift {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.03; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.08; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.05; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .tuaam-corp-heading-block {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 2;
        }

        .tuaam-corp-heading-block .tuaam-pill-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.12), rgba(204, 59, 59, 0.06));
            color: #F20101;
            font-weight: 700;
            font-size: 0.7rem;
            letter-spacing: 2.5px;
            padding: 0.45rem 1.3rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.25);
            text-transform: uppercase;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px -4px rgba(204, 59, 59, 0.2);
            animation: tuaamBadgeFloat 4s ease-in-out infinite;
        }

        .tuaam-corp-heading-block .tuaam-pill-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: tuaamBadgeShine 3s ease-in-out infinite;
        }

        @keyframes tuaamBadgeShine {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        @keyframes tuaamBadgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        .tuaam-corp-heading-block .tuaam-pill-badge i {
            color: #F20101;
            font-size: 0.7rem;
            animation: tuaamIconPulse 3s ease-in-out infinite;
        }

        @keyframes tuaamIconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); color: #ff4444; }
        }

        .tuaam-corp-heading-block .tuaam-pill-badge:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px -6px rgba(204, 59, 59, 0.35);
        }

        .tuaam-corp-heading-block h2 {
            font-size: 2.8rem;
            font-weight: 800;
            color: #1a1a1a;
            margin-top: 0.8rem;
            letter-spacing: -0.5px;
            line-height: 1.15;
            animation: tuaamTitleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        }

        @keyframes tuaamTitleEntry {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .tuaam-corp-heading-block h2 span {
            color: #F20101;
            position: relative;
            display: inline-block;
        }

        .tuaam-corp-heading-block h2 span::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, rgba(204, 59, 59, 0.15), rgba(255, 107, 107, 0.1));
            border-radius: 5px;
            z-index: -1;
            animation: tuaamUnderlinePulse 3s ease-in-out infinite;
        }

        @keyframes tuaamUnderlinePulse {
            0%, 100% { transform: scaleX(1); opacity: 0.8; }
            50% { transform: scaleX(1.05); opacity: 1; }
        }

        .tuaam-corp-heading-block .tuaam-sub-line {
            color: #666;
            font-size: 0.95rem;
            margin-top: 0.6rem;
            animation: tuaamTitleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
        }

        .tuaam-corp-heading-block .tuaam-sub-line strong {
            color: #F20101;
            font-weight: 700;
        }

        /* ============================================================
           SERVICES GRID - 5 Columns
           ============================================================ */
        .tuaam-service-tiles-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.3rem;
            position: relative;
            z-index: 1;
            margin-bottom: 2.5rem;
        }

        /* ============================================================
           SERVICE CARD
           ============================================================ */
        .tuaam-service-tile {
            border-radius: 1.3rem;
            overflow: hidden;
            background: #ffffff;
            border: 1.5px solid rgba(204, 59, 59, 0.1);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            animation: tuaamCardAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 25px -10px rgba(0, 0, 0, 0.06);
        }
.featured-card {
    text-decoration: none;
    color: inherit;
    display: grid; /* Already tha, lekin ensure karein */
}

.featured-card:hover {
    text-decoration: none;
    color: inherit;
}

/* Cursor pointer */
.featured-card {
    cursor: pointer;
}
        .tuaam-service-tile:nth-child(1) { animation-delay: 0.4s; }
        .tuaam-service-tile:nth-child(2) { animation-delay: 0.5s; }
        .tuaam-service-tile:nth-child(3) { animation-delay: 0.6s; }
        .tuaam-service-tile:nth-child(4) { animation-delay: 0.7s; }
        .tuaam-service-tile:nth-child(5) { animation-delay: 0.8s; }

        @keyframes tuaamCardAppear {
            0% { opacity: 0; transform: translateY(40px) scale(0.95); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .tuaam-service-tile:hover {
            transform: translateY(-12px) scale(1.02);
            border-color: rgba(204, 59, 59, 0.35);
            box-shadow: 0 35px 70px -20px rgba(204, 59, 59, 0.3), 0 0 0 1px rgba(204, 59, 59, 0.15);
        }

        /* Top animated red line (left → right) */
        .tuaam-service-tile::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #F20101, #ff6b6b);
            z-index: 6;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6);
        }

        /* Bottom animated red line (right → left) */
        .tuaam-service-tile::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(270deg, #F20101, #ff6b6b);
            z-index: 6;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6);
        }

        .tuaam-service-tile:hover::before,
        .tuaam-service-tile:hover::after {
            width: 100%;
        }

        /* ============================================================
           SERVICE IMAGE
           ============================================================ */
        .tuaam-tile-visual {
            position: relative;
            overflow: hidden;
            height: 170px;
            flex-shrink: 0;
            background: #f0ece8;
        }

        .tuaam-tile-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: block;
        }

        .tuaam-service-tile:hover .tuaam-tile-visual img {
            transform: scale(1.15);
        }

        /* Image overlay dark → red on hover */
        .tuaam-tile-visual .tuaam-visual-shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 75%);
            transition: all 0.6s ease;
            z-index: 1;
        }

        .tuaam-service-tile:hover .tuaam-visual-shade {
            background: linear-gradient(0deg, rgba(204, 59, 59, 0.75) 0%, rgba(204, 59, 59, 0.25) 50%, transparent 75%);
        }

        /* Shine sweep */
        .tuaam-tile-visual .tuaam-visual-glare {
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.9s ease;
            z-index: 2;
            pointer-events: none;
        }

        .tuaam-service-tile:hover .tuaam-visual-glare {
            left: 100%;
        }

        /* Inner white frame on image */
        .tuaam-tile-visual .tuaam-visual-outline {
            position: absolute;
            inset: 10px;
            border-radius: 0.8rem;
            border: 1.5px solid rgba(255, 255, 255, 0.35);
            z-index: 3;
            pointer-events: none;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .tuaam-service-tile:hover .tuaam-visual-outline {
            inset: 6px;
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.25) inset;
        }

        /* Image badge top-right */
        .tuaam-tile-visual .tuaam-visual-tag {
            position: absolute;
            top: 0.7rem;
            right: 0.7rem;
            background: #F20101;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 0.25rem 0.75rem;
            border-radius: 2rem;
            color: #ffffff;
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 4;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .tuaam-tile-visual .tuaam-visual-tag i {
            font-size: 0.5rem;
        }

        .tuaam-service-tile:hover .tuaam-visual-tag {
            background: #ffffff;
            color: #F20101;
            transform: scale(1.08);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        /* Service number bottom-left on image */
        .tuaam-tile-visual .tuaam-visual-index {
            position: absolute;
            bottom: 0.6rem;
            left: 0.8rem;
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.25);
            z-index: 4;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            line-height: 1;
            letter-spacing: -2px;
        }

        .tuaam-service-tile:hover .tuaam-visual-index {
            color: rgba(255, 255, 255, 0.55);
            transform: scale(1.1) translateY(-4px);
        }

        /* ============================================================
           SERVICE CONTENT
           ============================================================ */
        .tuaam-tile-body {
            padding: 1.1rem 1.2rem 1.3rem;
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .tuaam-tile-body .tuaam-tile-ico {
            width: 42px;
            height: 42px;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.1), rgba(204, 59, 59, 0.05));
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.7rem;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1.5px solid rgba(204, 59, 59, 0.12);
            position: relative;
            overflow: hidden;
        }

        .tuaam-tile-body .tuaam-tile-ico::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #F20101, #ff6b6b);
            transform: scale(0);
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-radius: 0.75rem;
        }

        .tuaam-service-tile:hover .tuaam-tile-ico::before {
            transform: scale(1);
        }

        .tuaam-service-tile:hover .tuaam-tile-ico {
            border-color: transparent;
            transform: scale(1.05) rotate(-6deg);
            box-shadow: 0 12px 30px -8px rgba(204, 59, 59, 0.5);
        }

        .tuaam-tile-body .tuaam-tile-ico i {
            font-size: 1.05rem;
            color: #F20101;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
        }

        .tuaam-service-tile:hover .tuaam-tile-ico i {
            color: #ffffff;
            transform: scale(1.15) rotate(-10deg);
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
        }

        .tuaam-tile-body h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.05rem;
            font-weight: 800;
            color: #1a1a1a;
            margin-bottom: 0.35rem;
            transition: color 0.4s ease;
            line-height: 1.25;
            letter-spacing: -0.3px;
        }

        .tuaam-service-tile:hover h3 {
            color: #F20101;
        }

        .tuaam-tile-body p {
            font-size: 0.78rem;
            color: #777;
            line-height: 1.5;
            transition: color 0.4s ease;
            flex: 1;
            margin-bottom: 0.6rem;
        }

        .tuaam-service-tile:hover p {
            color: #444;
        }

        /* ============================================================
           LEARN MORE LINK
           ============================================================ */
        .tuaam-tile-link {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #F20101;
            font-weight: 700;
            font-size: 0.72rem;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            padding-top: 0.3rem;
            align-self: flex-start;
            letter-spacing: 0.3px;
        }

        .tuaam-tile-link::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #F20101, #ff6b6b);
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 10px rgba(204, 59, 59, 0.6);
            border-radius: 2px;
        }

        .tuaam-tile-link:hover {
            transform: translateX(5px);
            letter-spacing: 0.5px;
        }

        .tuaam-tile-link:hover::before {
            width: 100%;
        }

        .tuaam-tile-link i {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-size: 0.65rem;
        }

        .tuaam-tile-link:hover i {
            transform: translateX(4px) rotate(-12deg);
        }

        /* ============================================================
           BOTTOM SECTION
           ============================================================ */
        .tuaam-corp-footer-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            padding-top: 2rem;
            position: relative;
            z-index: 1;
            animation: tuaamTitleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
        }

        .tuaam-corp-footer-bar .tuaam-prompt-text {
            color: #666;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 500;
        }

        .tuaam-corp-footer-bar .tuaam-prompt-text i {
            color: #F20101;
            font-size: 0.75rem;
            animation: tuaamIconPulse 3s ease-in-out infinite;
        }

        .tuaam-corp-footer-bar .tuaam-prompt-text strong {
            color: #F20101;
            font-weight: 700;
        }

        .tuaam-action-button {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.85rem 2.2rem;
            background: linear-gradient(135deg, #F20101, #b32e2e);
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            box-shadow: 0 10px 30px -8px rgba(204, 59, 59, 0.5);
            position: relative;
            overflow: hidden;
            font-family: inherit;
            letter-spacing: 0.3px;
        }

        .tuaam-action-button::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.7s ease;
        }

        .tuaam-action-button::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: translateX(-100%);
            transition: transform 0.9s ease;
        }

        .tuaam-action-button:hover::before {
            transform: translateX(0);
        }

        .tuaam-action-button:hover::after {
            transform: translateX(100%);
        }

        .tuaam-action-button:hover {
            background: linear-gradient(135deg, #d94444, #F20101);
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px -10px rgba(204, 59, 59, 0.7), 0 0 40px rgba(204, 59, 59, 0.3);
            letter-spacing: 0.8px;
        }

        .tuaam-action-button:active {
            transform: translateY(-2px) scale(0.98);
        }

        .tuaam-action-button i {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .tuaam-action-button:hover i {
            transform: translateX(8px) rotate(-12deg);
        }

        /* ============================================================
           FOOTER NOTE
           ============================================================ */
        .tuaam-trust-note {
            margin-top: 1.8rem;
            text-align: center;
            font-size: 0.7rem;
            color: #bbb;
            position: relative;
            z-index: 1;
            letter-spacing: 0.5px;
            animation: tuaamTitleEntry 0.8s ease-out 1.2s both;
        }

        .tuaam-trust-note i {
            color: #F20101;
            opacity: 0.4;
            animation: tuaamIconPulse 4s ease-in-out infinite;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1200px) {
            .tuaam-service-tiles-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.2rem;
            }
        }

        @media (max-width: 992px) {
            .tuaam-corp-events-wrap {
                padding: 3rem 2rem 2.5rem;
                border-radius: 2rem;
            }
            .tuaam-corp-heading-block h2 {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .tuaam-corp-events-wrap {
                padding: 2.5rem 1.2rem 2rem;
                border-radius: 1.8rem;
            }
            .tuaam-corp-heading-block h2 {
                font-size: 1.8rem;
            }
            .tuaam-service-tiles-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            .tuaam-tile-visual {
                height: 150px;
            }
            .tuaam-float-icons-layer .tuaam-drift-icon {
                font-size: 2rem !important;
                opacity: 0.03 !important;
            }
            .tuaam-corp-footer-bar {
                flex-direction: column;
                text-align: center;
            }
            .tuaam-action-button {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .tuaam-corp-events-wrap {
                padding: 2rem 1rem 1.5rem;
                border-radius: 1.5rem;
            }
            .tuaam-corp-heading-block h2 {
                font-size: 1.5rem;
            }
            .tuaam-service-tiles-grid {
                grid-template-columns: 1fr;
                gap: 0.9rem;
            }
            .tuaam-tile-visual {
                height: 180px;
            }
            .tuaam-tile-body {
                padding: 0.9rem 1rem 1rem;
            }
            .tuaam-tile-body h3 {
                font-size: 0.95rem;
            }
            .tuaam-tile-body p {
                font-size: 0.75rem;
            }
            .tuaam-tile-visual .tuaam-visual-index {
                font-size: 1.8rem;
            }
            .tuaam-action-button {
                padding: 0.75rem 1.8rem;
                font-size: 0.85rem;
            }
        }
        
         /* ============================================================
           EVENTS SECTION
           ============================================================ */
        .events-section {
            max-width: 1600px;
            width: 100%;
            position: relative;
            padding: 4rem 3rem 5rem;
            background: #ffffff;
            border-radius: 0rem;
            overflow: hidden;
            /*box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(204, 59, 59, 0.05);
            border: 1px solid rgba(204, 59, 59, 0.08);*/
        }

        /* Animated top border glow */
        /*.events-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 10;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Soft background blobs */
        .events-section .blob {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(204, 59, 59, 0.06), transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .events-section .blob-1 {
            top: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            animation: blobFloat 15s ease-in-out infinite;
        }

        .events-section .blob-2 {
            bottom: -180px;
            left: -180px;
            width: 550px;
            height: 550px;
            animation: blobFloat 18s ease-in-out infinite reverse;
        }

        @keyframes blobFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.1); }
        }

        /* Floating decorative icons */
        .events-section .deco-icon {
            position: absolute;
            font-size: 6rem;
            color: rgba(204, 59, 59, 0.05);
            animation: decoFloat 20s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .events-section .deco-icon.cake {
            top: 40px;
            left: 30px;
            font-size: 5.5rem;
            animation-duration: 18s;
        }

        .events-section .deco-icon.glasses {
            top: 50px;
            right: 40px;
            font-size: 6rem;
            animation-duration: 22s;
            animation-delay: 2s;
        }

        @keyframes decoFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
            33% { transform: translate(20px, -25px) rotate(8deg); opacity: 1; }
            66% { transform: translate(-15px, 20px) rotate(-5deg); opacity: 0.7; }
        }

        /* ============================================================
           SECTION HEADER
           ============================================================ */
        .section-header {
            text-align: center;
            position: relative;
            z-index: 2;
            margin-bottom: 3.5rem;
        }

        .section-header .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.12), rgba(204, 59, 59, 0.06));
            color: #f20101;
            font-weight: 700;
            font-size: 0.75rem;
            letter-spacing: 3px;
            padding: 0.5rem 1.4rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.25);
            text-transform: uppercase;
            margin-bottom: 1rem;
            animation: badgeEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,
                       badgeFloat 4s ease-in-out infinite 1s;
            box-shadow: 0 4px 20px -4px rgba(204, 59, 59, 0.2);
            position: relative;
            overflow: hidden;
        }

        .section-header .badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: badgeShine 3s ease-in-out infinite;
        }

        @keyframes badgeShine {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        @keyframes badgeEntry {
            0% { opacity: 0; transform: translateY(-15px) scale(0.8); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .section-header .badge i {
            color: #f20101;
            animation: starSpin 3s ease-in-out infinite;
            font-size: 0.7rem;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.3); }
        }

        .section-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            font-weight: 800;
            color: #1a1a1a;
            letter-spacing: -1px;
            line-height: 1.15;
            margin-bottom: 1.2rem;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
            position: relative;
        }

        .section-header h2 span {
            color: #f20101;
            position: relative;
            display: inline-block;
        }

        .section-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, rgba(204, 59, 59, 0.15), rgba(255, 107, 107, 0.1));
            border-radius: 5px;
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
        }

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

        @keyframes titleEntry {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .section-header p {
            font-size: 1rem;
            color: #666666;
            line-height: 1.7;
            max-width: 800px;
            margin: 0 auto;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
        }

        /* ============================================================
           EVENTS GRID
           ============================================================ */
        .events-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            position: relative;
            z-index: 2;
            margin-bottom: 3rem;
        }

        /* ============================================================
           EVENT CARD - Image based
           ============================================================ */
        .event-card {
            position: relative;
            border-radius: 1.5rem;
            overflow: hidden;
            height: 460px;
            cursor: pointer;
            animation: cardEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.15);
            border: 1.5px solid rgba(204, 59, 59, 0.08);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            isolation: isolate;
        }

        /* Staggered entry delays */
        .events-grid .event-card:nth-child(1) { animation-delay: 0.6s; }
        .events-grid .event-card:nth-child(2) { animation-delay: 0.75s; }
        .events-grid .event-card:nth-child(3) { animation-delay: 0.9s; }
        .events-grid .event-card:nth-child(4) { animation-delay: 1.05s; }

        @keyframes cardEntry {
            0% { opacity: 0; transform: translateY(40px) scale(0.95); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Background image */
        .event-card .card-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 0;
        }

        .event-card:hover .card-bg {
            transform: scale(1.15);
        }

        /* Dark gradient overlay */
        .event-card .card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                rgba(0, 0, 0, 0.92) 0%,
                rgba(0, 0, 0, 0.7) 40%,
                rgba(0, 0, 0, 0.3) 70%,
                rgba(0, 0, 0, 0.15) 100%);
            z-index: 1;
            transition: all 0.5s ease;
        }

        /* Red tint on hover */
        .event-card .card-overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                rgba(204, 59, 59, 0.5) 0%,
                rgba(204, 59, 59, 0.2) 40%,
                transparent 80%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .event-card:hover .card-overlay::before {
            opacity: 1;
        }

        /* Inner border (glass frame) */
        .event-card .card-frame {
            position: absolute;
            inset: 14px;
            border: 1.5px solid rgba(255, 255, 255, 0.25);
            border-radius: 1rem;
            z-index: 2;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .event-card:hover .card-frame {
            inset: 10px;
            border-color: rgba(255, 255, 255, 0.6);
            box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1);
        }

        /* Content */
        .event-card .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem 1.6rem;
            z-index: 3;
            color: #ffffff;
        }

        .event-card .card-content h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 0.8rem;
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }

        .event-card:hover .card-content h3 {
            transform: translateY(-3px);
            color: #ffe0e0;
        }

        /* Divider line under heading */
        .event-card .card-content h3::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 35px;
            height: 2px;
            background: linear-gradient(90deg, #ff6b6b, #f20101);
            border-radius: 2px;
            box-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .event-card:hover .card-content h3::after {
            width: 60px;
        }

        .event-card .card-content p {
            font-size: 0.85rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.85);
            margin-top: 1.2rem;
            transition: all 0.5s ease;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.6s ease, opacity 0.5s ease, margin-top 0.5s ease;
        }

        .event-card:hover .card-content p {
            max-height: 200px;
            opacity: 1;
        }

        /* Card number badge */
        .event-card .card-num {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #F20101;
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 4;
            backdrop-filter: blur(10px);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 20px -5px rgba(204, 59, 59, 0.5);
        }

        .event-card:hover .card-num {
            background: #ff4444;
            transform: scale(1.15) rotate(-10deg);
            box-shadow: 0 12px 30px -5px rgba(255, 68, 68, 0.7);
        }

        /* Shine sweep on hover */
        .event-card .shine {
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg,
                transparent 30%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 70%);
            transform: rotate(15deg);
            transition: left 0.9s ease;
            z-index: 3;
            pointer-events: none;
        }

        .event-card:hover .shine {
            left: 100%;
        }

        /* Border glow on hover */
        .event-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.5rem;
            padding: 2px;
            background: linear-gradient(135deg, #f20101, #ff6b6b, #f20101);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 5;
        }

        .event-card:hover::after {
            opacity: 1;
        }

        .event-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px -20px rgba(204, 59, 59, 0.35);
        }

        /* ============================================================
           CTA BUTTON
           ============================================================ */
        .cta-wrapper {
            display: flex;
            justify-content: center;
            position: relative;
            z-index: 2;
            animation: ctaEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
        }

        @keyframes ctaEntry {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            padding: 1rem 2.5rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0.5px;
            text-decoration: none;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px -8px rgba(204, 59, 59, 0.5);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Shine sweep effect */
        .cta-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transition: left 0.8s ease;
        }

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

        /* Pulse ring */
        .cta-btn::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 60px;
            border: 2px solid rgba(204, 59, 59, 0.5);
            opacity: 0;
            transition: all 0.5s ease;
        }

        .cta-btn:hover::after {
            opacity: 1;
            animation: ctaPulse 1.5s ease-out infinite;
        }

        @keyframes ctaPulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.15); opacity: 0; }
        }

        .cta-btn:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 20px 45px -10px rgba(204, 59, 59, 0.7);
            letter-spacing: 1px;
        }

        .cta-btn:active {
            transform: translateY(-2px) scale(1.02);
        }

        .cta-btn i {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-size: 0.9rem;
        }

        .cta-btn:hover i {
            transform: translateX(5px) scale(1.15);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1200px) {
            .events-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            .event-card {
                height: 420px;
            }
        }

        @media (max-width: 1024px) {
            .events-section {
                padding: 3rem 2rem 4rem;
                border-radius: 0rem;
            }
            .section-header h2 { font-size: 2.3rem; }
        }

        @media (max-width: 768px) {
            .events-section {
                padding: 2.5rem 1.2rem 3rem;
                border-radius: 0rem;
            }
            .section-header h2 { font-size: 1.8rem; }
            .section-header p { font-size: 0.9rem; }
            .events-grid {
                grid-template-columns: 1fr;
                gap: 1.2rem;
            }
            .event-card {
                height: 380px;
            }
            .event-card .card-content {
                padding: 1.6rem 1.3rem;
            }
            .event-card .card-content h3 {
                font-size: 1.2rem;
            }
            /* Show description always on mobile */
            .event-card .card-content p {
                max-height: 200px;
                opacity: 1;
            }
            .deco-icon { display: none; }
        }

        @media (max-width: 480px) {
            .events-section {
                padding: 2rem 1rem 2.5rem;
                border-radius: 0rem;
            }
            .section-header h2 { font-size: 1.5rem; }
            .section-header .badge { font-size: 0.65rem; padding: 0.4rem 1rem; letter-spacing: 2px; }
            .event-card { height: 340px; }
            .event-card .card-num { width: 36px; height: 36px; font-size: 0.85rem; }
            .event-card .card-content h3 { font-size: 1.1rem; }
            .event-card .card-content p { font-size: 0.8rem; }
            .cta-btn { padding: 0.85rem 2rem; font-size: 0.85rem; }
        }
        /* ============================================================
           TESTIMONIALS SECTION - White Background
           ============================================================ */
        .testimonials-section {
            max-width: 100%;
            width: 100%;
            background: #0d0d12;
            border-radius: 0rem;
            padding: 4rem 3.5rem 4.5rem;
            position: relative;
            overflow: hidden;
            border: 0px solid rgba(200, 60, 60, 0.04);
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .testimonials-section:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.testimonials-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.03);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all 0.6s ease;
        }

        .bg-icons .icon-float:hover {
            color: rgba(200, 60, 60, 0.08);
            transform: scale(1.2) rotate(15deg);
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.06; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.04; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .testimonials-header {
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 1;
        }

        .testimonials-header .badge {
            display: inline-block;
            background: #fef6f6;
            color: #F20101;
            font-weight: 600;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            padding: 0.25rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .testimonials-header .badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 4px 15px -6px rgba(200, 50, 50, 0.04);
        }

        .testimonials-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #ffffff;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
        }

        .testimonials-header h2 span {
            color: #F20101;
            position: relative;
        }

        .testimonials-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .testimonials-header .subtitle {
            color: #888;
            font-size: 1rem;
            margin-top: 0.2rem;
        }

        .testimonials-header .subtitle strong {
            color: #F20101;
        }

        /* Scroll indicator */
        .scroll-indicator {
            text-align: center;
            margin-top: 0.5rem;
            margin-bottom: 1rem;
            color: #b5a89e;
            font-size: 0.75rem;
            animation: pulseIndicator 2s ease-in-out infinite;
        }

        @keyframes pulseIndicator {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }

        .scroll-indicator i {
            color: #F20101;
            display: inline-block;
            animation: scrollArrow 1.5s ease-in-out infinite;
        }

        @keyframes scrollArrow {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(6px); }
        }

        /* ============================================================
           AUTO SCROLL CONTAINER
           ============================================================ */
        .scroll-container {
            position: relative;
            z-index: 1;
            overflow: hidden;
            border-radius: 1.5rem;
            margin-bottom: 2.5rem;
            cursor: grab;
        }

        .scroll-container:active {
            cursor: grabbing;
        }

        /* ============================================================
           SCROLL WRAPPER - Auto Scroll Right to Left
           ============================================================ */
        .scroll-wrapper {
            display: flex;
            gap: 1.5rem;
            animation: scrollRightToLeft 25s linear infinite;
            will-change: transform;
            padding: 0.3rem;
        }

        /* Pause on hover */
        .scroll-container:hover .scroll-wrapper {
            animation-play-state: paused;
        }

        @keyframes scrollRightToLeft {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* ============================================================
           TESTIMONIAL CARD - Clean White Style
           ============================================================ */
        .testimonial-card {
            min-width: 320px;
            max-width: 320px;
            background: #fafafc;
            border-radius: 1.5rem;
            padding: 1.8rem 1.8rem 2rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            flex-shrink: 0;
            cursor: default;
        }

        .testimonial-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.02), transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
        }

        .testimonial-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(200, 60, 60, 0.15);
            box-shadow: 0 15px 45px -12px rgba(200, 50, 50, 0.06);
            background: #ffffff;
        }

        .testimonial-card:hover::before {
            opacity: 1;
        }

        /* ============================================================
           QUOTE BADGE
           ============================================================ */
        .testimonial-card .quote-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: #fef6f6;
            color: #F20101;
            padding: 0.1rem 0.8rem;
            border-radius: 2rem;
            border: 1px solid rgba(200, 60, 60, 0.04);
            margin-bottom: 0.8rem;
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .testimonial-card:hover .quote-badge {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.08);
        }

        .testimonial-card .quote-badge i {
            font-size: 0.5rem;
        }

        /* ============================================================
           REVIEWER INFO
           ============================================================ */
        .testimonial-card .reviewer {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 0.6rem;
            position: relative;
            z-index: 1;
        }

        .testimonial-card .reviewer .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #F20101, #F20101);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
            flex-shrink: 0;
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px -6px rgba(204, 59, 59, 0.1);
        }

        .testimonial-card:hover .avatar {
            transform: scale(1.05) rotate(-5deg);
            box-shadow: 0 8px 25px -8px rgba(204, 59, 59, 0.15);
        }

        .testimonial-card .reviewer .info {
            flex: 1;
        }

        .testimonial-card .reviewer .info .name {
            color: #1a1a2a;
            font-weight: 700;
            font-size: 1rem;
            transition: color 0.3s ease;
        }

        .testimonial-card:hover .reviewer .info .name {
            color: #F20101;
        }

        .testimonial-card .reviewer .info .time {
            color: #999;
            font-size: 0.65rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .testimonial-card .reviewer .info .time .verified {
            color: #27ae60;
            font-size: 0.5rem;
        }

        /* ============================================================
           STARS
           ============================================================ */
        .testimonial-card .stars {
            color: #f39c12;
            font-size: 0.8rem;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .testimonial-card .stars i {
            animation: starPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .testimonial-card .stars i:nth-child(1) { animation-delay: 0.05s; }
        .testimonial-card .stars i:nth-child(2) { animation-delay: 0.1s; }
        .testimonial-card .stars i:nth-child(3) { animation-delay: 0.15s; }
        .testimonial-card .stars i:nth-child(4) { animation-delay: 0.2s; }
        .testimonial-card .stars i:nth-child(5) { animation-delay: 0.25s; }

        @keyframes starPop {
            0% { transform: scale(0) rotate(-20deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        /* ============================================================
           REVIEW TEXT
           ============================================================ */
        .testimonial-card .review-text {
            color: #666;
            font-size: 0.88rem;
            line-height: 1.7;
            margin-bottom: 0.8rem;
            position: relative;
            z-index: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
            padding-left: 1rem;
            border-left: 2px solid rgba(204, 59, 59, 0.1);
        }

        .testimonial-card:hover .review-text {
            color: #1a1a2a;
            border-left-color: rgba(204, 59, 59, 0.2);
        }

        /* ============================================================
           READ MORE LINK
           ============================================================ */
        .testimonial-card .read-more {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: #F20101;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.75rem;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
            background: rgba(204, 59, 59, 0.02);
            padding: 0.2rem 1rem 0.2rem 0.8rem;
            border-radius: 2rem;
            border: 1px solid rgba(204, 59, 59, 0.03);
        }

        .testimonial-card .read-more:hover {
            background: rgba(204, 59, 59, 0.04);
            transform: translateX(3px);
            border-color: rgba(204, 59, 59, 0.06);
        }

        .testimonial-card .read-more i {
            transition: transform 0.3s ease;
        }

        .testimonial-card .read-more:hover i {
            transform: translateX(4px) rotate(-10deg);
        }

        /* ============================================================
           BOTTOM SECTION
           ============================================================ */
        .testimonials-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            padding-top: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .testimonials-bottom .rating-badge {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            color: #888;
            font-size: 0.85rem;
        }

        .testimonials-bottom .rating-badge .google-icon {
            color: #F20101;
            font-size: 1.2rem;
        }

        .testimonials-bottom .rating-badge .rating-stars {
            color: #f39c12;
            font-size: 0.7rem;
            letter-spacing: 1px;
        }

        .view-all-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 2rem;
            background: #fef6f6;
            color: #F20101;
            border: 1px solid rgba(200, 60, 60, 0.06);
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .view-all-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.04), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .view-all-btn:hover::before {
            transform: translateX(0);
        }

        .view-all-btn:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px -8px rgba(200, 50, 50, 0.04);
        }

        .view-all-btn i {
            transition: transform 0.4s ease;
        }

        .view-all-btn:hover i {
            transform: translateX(4px);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 768px) {
            .testimonials-section {
                padding: 2.5rem 1.2rem 3rem;
                border-radius: 0rem;
            }
            .testimonials-header h2 {
                font-size: 2rem;
            }
            .testimonial-card {
                min-width: 260px;
                max-width: 260px;
                padding: 1.5rem 1.2rem 1.8rem;
            }
            .testimonial-card .review-text {
                font-size: 0.82rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .testimonials-bottom {
                flex-direction: column;
                text-align: center;
            }
            .scroll-wrapper {
                animation-duration: 18s;
            }
        }

        @media (max-width: 480px) {
            .testimonials-section {
                padding: 1.5rem 1rem 2rem;
                border-radius: 0rem;
            }
            .testimonials-header h2 {
                font-size: 1.6rem;
            }
            .testimonial-card {
                min-width: 220px;
                max-width: 220px;
                padding: 1.2rem 1rem 1.5rem;
            }
            .testimonial-card .reviewer .avatar {
                width: 38px;
                height: 38px;
                font-size: 0.8rem;
            }
            .testimonial-card .reviewer .info .name {
                font-size: 0.85rem;
            }
            .testimonial-card .review-text {
                font-size: 0.75rem;
                padding-left: 0.6rem;
            }
            .testimonial-card .stars {
                font-size: 0.7rem;
            }
            .view-all-btn {
                width: 100%;
                justify-content: center;
                padding: 0.6rem 1.5rem;
            }
            .scroll-wrapper {
                animation-duration: 15s;
            }
        }
        /* ============================================================
           FAQ SECTION
           ============================================================ */
        .faq-container {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 3rem 3rem 3.5rem;
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            border: 0px solid rgba(200, 60, 60, 0.04);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .faq-container:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.faq-container::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.03);
            animation: floatIcon 25s infinite ease-in-out;
        }

        .bg-icons .icon-float:nth-child(1) { top: 5%; left: 3%; font-size: 3.5rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 12%; right: 8%; font-size: 3rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 15%; left: 5%; font-size: 4rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 25%; right: 5%; font-size: 2.6rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 45%; left: 2%; font-size: 2.2rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 60%; right: 3%; font-size: 3.2rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 75%; left: 8%; font-size: 2.8rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 8%; right: 10%; font-size: 3.5rem; animation-duration: 27s; animation-delay: 4s; }

        @keyframes floatIcon {
            0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(20px, -25px) rotate(8deg) scale(1.05); opacity: 0.06; }
            66% { transform: translate(-15px, 20px) rotate(-5deg) scale(0.95); opacity: 0.04; }
            100% { transform: translate(10px, -10px) rotate(3deg) scale(1.02); opacity: 0.02; }
        }

        /* Animated dots */
        .bg-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-dots .dot {
            position: absolute;
            border-radius: 50%;
            background: rgba(200, 60, 60, 0.03);
            animation: dotFloat 25s infinite ease-in-out;
        }

        .bg-dots .dot:nth-child(1) { top: 8%; left: 5%; width: 18px; height: 18px; animation-duration: 22s; }
        .bg-dots .dot:nth-child(2) { top: 25%; right: 10%; width: 10px; height: 10px; animation-duration: 18s; animation-delay: 2s; }
        .bg-dots .dot:nth-child(3) { bottom: 20%; left: 8%; width: 22px; height: 22px; animation-duration: 25s; animation-delay: 4s; }
        .bg-dots .dot:nth-child(4) { bottom: 30%; right: 5%; width: 14px; height: 14px; animation-duration: 20s; animation-delay: 1s; }
        .bg-dots .dot:nth-child(5) { top: 50%; left: 3%; width: 16px; height: 16px; animation-duration: 28s; animation-delay: 3s; }
        .bg-dots .dot:nth-child(6) { top: 65%; right: 8%; width: 8px; height: 8px; animation-duration: 23s; animation-delay: 5s; }

        @keyframes dotFloat {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.05; }
            25% { transform: translate(25px, -35px) scale(1.5); opacity: 0.15; }
            50% { transform: translate(-15px, 25px) scale(0.7); opacity: 0.08; }
            75% { transform: translate(35px, 15px) scale(1.8); opacity: 0.12; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .faq-header {
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 1;
        }

        .faq-header .badge {
            display: inline-block;
            background: #fef6f6;
            color: #F20101;
            font-weight: 600;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            padding: 0.25rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.3s ease;
            margin-bottom: 0.5rem;
        }

        .faq-header .badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.02);
        }

        .faq-header h2 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1a1a2a;
            letter-spacing: -0.5px;
        }

        .faq-header h2 span {
            color: #F20101;
            position: relative;
        }

        .faq-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .faq-header p {
            color: #888;
            font-size: 0.95rem;
            margin-top: 0.3rem;
        }

        /* ============================================================
           FAQ ITEMS - Creative Accordion
           ============================================================ */
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            position: relative;
            z-index: 1;
        }

        .faq-item {
            border-radius: 1.2rem;
            background: #fafafc;
            border: 1px solid #eee;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }

        .faq-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: #F20101;
            transform: scaleY(0);
            transform-origin: top;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .faq-item:hover::before {
            transform: scaleY(1);
        }

        .faq-item:hover {
            border-color: rgba(200, 60, 60, 0.1);
            background: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 30px -10px rgba(200, 50, 50, 0.04);
        }

        .faq-item.active {
            border-color: rgba(200, 60, 60, 0.15);
            background: #ffffff;
            box-shadow: 0 8px 30px -10px rgba(200, 50, 50, 0.06);
        }

        .faq-item.active::before {
            transform: scaleY(1);
        }

        /* FAQ Question */
        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.2rem 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            gap: 1rem;
            position: relative;
        }

        .faq-question:hover {
            background: rgba(200, 50, 50, 0.02);
        }

        .faq-question .q-left {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
        }

        .faq-question .q-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(200, 50, 50, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #F20101;
            font-size: 0.8rem;
            flex-shrink: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .faq-item:hover .q-icon {
            background: rgba(200, 50, 50, 0.08);
            transform: scale(1.05) rotate(-5deg);
        }

        .faq-item.active .q-icon {
            background: #F20101;
            color: #ffffff;
            transform: scale(1.05);
        }

        .faq-question .q-text {
            font-weight: 600;
            font-size: 1rem;
            color: #1a1a2a;
            transition: color 0.3s ease;
        }

        .faq-item:hover .q-text {
            color: #F20101;
        }

        .faq-item.active .q-text {
            color: #F20101;
        }

        .faq-question .q-toggle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(200, 50, 50, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-size: 0.8rem;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            flex-shrink: 0;
        }

        .faq-item:hover .q-toggle {
            background: rgba(200, 50, 50, 0.08);
            color: #F20101;
        }

        .faq-item.active .q-toggle {
            background: #F20101;
            color: #ffffff;
            transform: rotate(180deg);
        }

        /* FAQ Answer */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.3s ease, opacity 0.3s ease;
            opacity: 0;
            padding: 0 1.5rem;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            opacity: 1;
            padding: 0 1.5rem 1.2rem;
        }

        .faq-answer p {
            color: #666;
            font-size: 0.92rem;
            line-height: 1.7;
            padding-top: 0.2rem;
            border-top: 1px solid rgba(200, 60, 60, 0.04);
        }

        .faq-answer p i {
            color: #F20101;
            margin-right: 6px;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 768px) {
            .faq-container {
                padding: 2rem 1.2rem;
                border-radius: 2rem;
            }
            .faq-header h2 {
                font-size: 1.8rem;
            }
            .faq-question {
                padding: 1rem 1rem;
            }
            .faq-question .q-text {
                font-size: 0.9rem;
            }
            .faq-item.active .faq-answer {
                padding: 0 1rem 1rem;
            }
            .faq-answer p {
                font-size: 0.85rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .bg-dots .dot {
                opacity: 0.03 !important;
            }
        }

        @media (max-width: 400px) {
            .faq-container {
                padding: 1.5rem 0.8rem;
                border-radius: 1.5rem;
            }
            .faq-header h2 {
                font-size: 1.4rem;
            }
            .faq-question .q-icon {
                width: 30px;
                height: 30px;
                font-size: 0.7rem;
            }
            .faq-question .q-toggle {
                width: 28px;
                height: 28px;
                font-size: 0.7rem;
            }
            .faq-question .q-text {
                font-size: 0.82rem;
            }
        }

        /* ============================================================
           ABOUT SECTION
           ============================================================ */
        .about-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 4rem 4.5rem;
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            border: 0px solid rgba(200, 60, 60, 0.04);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .about-section:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.about-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.03);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.06; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.04; }
        }

        /* ============================================================
           ANIMATED DOTS
           ============================================================ */
        .bg-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-dots .dot {
            position: absolute;
            border-radius: 50%;
            background: rgba(200, 60, 60, 0.03);
            animation: dotFloat 25s infinite ease-in-out;
        }

        .bg-dots .dot:nth-child(1) { top: 5%; left: 5%; width: 20px; height: 20px; animation-duration: 22s; }
        .bg-dots .dot:nth-child(2) { top: 20%; right: 8%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 2s; }
        .bg-dots .dot:nth-child(3) { bottom: 15%; left: 8%; width: 25px; height: 25px; animation-duration: 25s; animation-delay: 4s; }
        .bg-dots .dot:nth-child(4) { bottom: 30%; right: 5%; width: 15px; height: 15px; animation-duration: 20s; animation-delay: 1s; }
        .bg-dots .dot:nth-child(5) { top: 45%; left: 3%; width: 18px; height: 18px; animation-duration: 28s; animation-delay: 3s; }
        .bg-dots .dot:nth-child(6) { top: 60%; right: 6%; width: 10px; height: 10px; animation-duration: 23s; animation-delay: 5s; }
        .bg-dots .dot:nth-child(7) { top: 75%; left: 12%; width: 22px; height: 22px; animation-duration: 30s; animation-delay: 2s; }
        .bg-dots .dot:nth-child(8) { bottom: 8%; right: 15%; width: 14px; height: 14px; animation-duration: 26s; animation-delay: 4s; }

        @keyframes dotFloat {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.05; }
            25% { transform: translate(25px, -35px) scale(1.5); opacity: 0.2; }
            50% { transform: translate(-15px, 25px) scale(0.7); opacity: 0.08; }
            75% { transform: translate(35px, 15px) scale(1.8); opacity: 0.15; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .about-header {
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 1;
        }

        .about-header .badge {
            display: inline-block;
            background: #fef6f6;
            color: #F20101;
            font-weight: 600;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            padding: 0.25rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.3s ease;
            animation: badgePulse 3s ease-in-out infinite;
        }

        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(204, 59, 59, 0); }
            50% { box-shadow: 0 0 20px rgba(204, 59, 59, 0.04); }
        }

        .about-header .badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.02);
        }

        .about-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #1a1a2a;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        .about-header h2 span {
            color: #F20101;
            position: relative;
        }

        .about-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .about-header .subtitle {
            color: #F20101;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 0.2rem;
            letter-spacing: 0.5px;
        }

        /* ============================================================
           ABOUT GRID - Left Content | Right Video with Thumbnails
           ============================================================ */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        @media (max-width: 992px) {
            .about-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        /* ============================================================
           LEFT SIDE - CONTENT
           ============================================================ */
        .about-text {
            animation: fadeSlideLeft 0.8s ease-out;
            position: relative;
            z-index: 1;
        }

        @keyframes fadeSlideLeft {
            0% { opacity: 0; transform: translateX(-30px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .about-text .description {
            color: #666;
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 1.2rem;
        }

        .about-text .description strong {
            color: #F20101;
        }

        .about-text .highlight-text {
            background: #fef6f6;
            padding: 1rem 1.5rem;
            border-radius: 1rem;
            border-left: 4px solid #F20101;
            margin-bottom: 1.2rem;
            transition: all 0.4s ease;
        }

        .about-text .highlight-text:hover {
            background: #ffffff;
            box-shadow: 0 8px 30px -12px rgba(200, 50, 50, 0.06);
            transform: translateX(5px);
        }

        .about-text .highlight-text p {
            color: #555;
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .about-text .highlight-text p i {
            color: #F20101;
            margin-right: 0.5rem;
        }

        /* Stats */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.8rem;
            margin: 1.2rem 0;
        }

        @media (max-width: 600px) {
            .stats-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .stat-item {
            text-align: center;
            padding: 0.8rem 0.5rem;
            border-radius: 1rem;
            background: #fafafc;
            border: 1px solid #eee;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .stat-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.02), transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .stat-item:hover {
            border-color: rgba(200, 60, 60, 0.15);
            transform: translateY(-4px);
            box-shadow: 0 8px 30px -12px rgba(200, 50, 50, 0.06);
            background: #ffffff;
        }

        .stat-item:hover::before {
            opacity: 1;
        }

        .stat-item .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #F20101;
            display: block;
            line-height: 1.2;
        }

        .stat-item .stat-label {
            font-size: 0.65rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .stat-item .stat-icon {
            color: #F20101;
            font-size: 1rem;
            margin-bottom: 0.2rem;
            display: block;
            transition: transform 0.4s ease;
        }

        .stat-item:hover .stat-icon {
            transform: scale(1.15) rotate(-5deg);
        }

        .explore-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.8rem 2rem;
            background: #F20101;
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            margin-top: 0.3rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.25);
        }

        .explore-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .explore-btn:hover::before {
            transform: translateX(0);
        }

        .explore-btn:hover {
            background: #F20101;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 32px -8px rgba(200, 50, 50, 0.35);
        }

        .explore-btn i {
            transition: transform 0.4s ease;
        }

        .explore-btn:hover i {
            transform: translateX(5px) rotate(-5deg);
        }

        /* ============================================================
           RIGHT SIDE - VIDEO WITH THUMBNAILS ON HOVER
           ============================================================ */
        .video-container {
            position: relative;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.04);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            background: #1a1a2a;
            animation: fadeSlideRight 0.8s ease-out 0.3s both;
        }

        @keyframes fadeSlideRight {
            0% { opacity: 0; transform: translateX(30px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .video-container:hover {
            box-shadow: 0 12px 40px -12px rgba(200, 50, 50, 0.08);
            transform: scale(1.005) translateY(-2px);
        }

        /* Main Video */
        .main-video {
            position: relative;
            width: 100%;
            min-height: 320px;
            overflow: hidden;
            border-radius: 1.5rem;
        }

        .main-video video {
            width: 100%;
            height: 100%;
            min-height: 320px;
            object-fit: cover;
            display: block;
        }

        /* Video Overlay */
        .video-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            border-radius: 1.5rem;
        }

        .video-overlay:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .video-overlay .play-btn {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #F20101;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 2rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 30px -8px rgba(200, 50, 50, 0.3);
            backdrop-filter: blur(4px);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .video-overlay:hover .play-btn {
            transform: scale(1.1);
            background: rgba(204, 59, 59, 1);
            box-shadow: 0 12px 40px -8px rgba(200, 50, 50, 0.4);
        }

        .video-overlay .play-btn i {
            margin-left: 4px;
        }

        /* Video Badges */
        .video-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            padding: 0.3rem 1rem;
            border-radius: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            z-index: 2;
            animation: fadeIn 0.8s ease-out 0.5s both;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        .video-badge i {
            color: #F20101;
        }

        .video-duration {
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            padding: 0.2rem 0.8rem;
            border-radius: 2rem;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.7rem;
            font-weight: 500;
            border: 1px solid rgba(255, 255, 255, 0.04);
            z-index: 2;
            animation: fadeIn 0.8s ease-out 0.6s both;
        }

        /* ============================================================
           THUMBNAIL VIDEOS - Appear on Hover
           ============================================================ */
        .thumbnail-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem 1rem 1rem;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
            display: flex;
            gap: 0.6rem;
            justify-content: center;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 3;
            pointer-events: none;
        }

        .video-container:hover .thumbnail-container {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .thumbnail-item {
            width: 80px;
            height: 60px;
            border-radius: 0.6rem;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            flex-shrink: 0;
        }

        .thumbnail-item:hover {
            border-color: #F20101;
            transform: scale(1.1) translateY(-4px);
            box-shadow: 0 8px 25px -8px rgba(200, 50, 50, 0.3);
        }

        .thumbnail-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .thumbnail-item .thumb-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .thumbnail-item:hover .thumb-overlay {
            background: rgba(0, 0, 0, 0.05);
        }

        .thumbnail-item .thumb-overlay i {
            color: #ffffff;
            font-size: 0.8rem;
            opacity: 0.8;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .thumbnail-item .thumb-label {
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.45rem;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(0, 0, 0, 0.5);
            padding: 0.1rem;
            backdrop-filter: blur(4px);
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .about-section {
                padding: 2rem 1.2rem 2.5rem;
                border-radius: 2rem;
            }
            .about-header h2 {
                font-size: 2rem;
            }
            .about-header .subtitle {
                font-size: 0.95rem;
            }
            .about-text .description {
                font-size: 0.92rem;
            }
            .stat-item .stat-number {
                font-size: 1.6rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .bg-dots .dot {
                opacity: 0.03 !important;
            }
            .main-video video {
                min-height: 220px;
            }
            .video-overlay .play-btn {
                width: 60px;
                height: 60px;
                font-size: 1.4rem;
            }
            .thumbnail-item {
                width: 60px;
                height: 45px;
            }
        }

        @media (max-width: 768px) {
            .thumbnail-container {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.4rem;
                padding: 1rem 0.5rem;
            }
            .thumbnail-item {
                width: 50px;
                height: 38px;
            }
            .thumbnail-item .thumb-label {
                font-size: 0.35rem;
            }
        }

        @media (max-width: 480px) {
            .about-section {
                padding: 1.5rem 1rem 2rem;
                border-radius: 1.5rem;
            }
            .about-header h2 {
                font-size: 1.6rem;
            }
            .stats-row {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }
            .stat-item {
                padding: 0.6rem 0.3rem;
            }
            .stat-item .stat-number {
                font-size: 1.3rem;
            }
            .main-video video {
                min-height: 180px;
            }
            .video-overlay .play-btn {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
            .explore-btn {
                width: 100%;
                justify-content: center;
            }
            .video-badge {
                font-size: 0.5rem;
                padding: 0.2rem 0.6rem;
            }
            .video-duration {
                font-size: 0.6rem;
                padding: 0.15rem 0.6rem;
            }
            .thumbnail-item {
                width: 45px;
                height: 35px;
            }
            .thumbnail-container {
                gap: 0.3rem;
                padding: 0.8rem 0.3rem;
            }
        }

        /* ============================================================
           VIDEO REVIEWS SECTION - Horizontal Scroll on Hover
           ============================================================ */
        .reviews-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 4.5rem;
            position: relative;
            overflow: hidden;
            border: 0px solid rgba(200, 60, 60, 0.04);
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .reviews-section:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.reviews-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.03);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all 0.6s ease;
        }

        .bg-icons .icon-float:hover {
            color: rgba(200, 60, 60, 0.08);
            transform: scale(1.2) rotate(15deg);
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.06; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.04; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .reviews-header {
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 1;
        }

        .reviews-header .badge {
            display: inline-block;
            background: #fef6f6;
            color: #F20101;
            font-weight: 600;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            padding: 0.25rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .reviews-header .badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 4px 15px -6px rgba(200, 50, 50, 0.04);
        }

        .reviews-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #1a1a2a;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
        }

        .reviews-header h2 span {
            color: #F20101;
            position: relative;
        }

        .reviews-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .reviews-header .subtitle {
            color: #888;
            font-size: 1rem;
            margin-top: 0.2rem;
        }

        /* ============================================================
           HOVER SCROLL CONTAINER
           ============================================================ */
        .scroll-container {
            position: relative;
            z-index: 1;
            overflow: hidden;
            border-radius: 1.5rem;
            margin-bottom: 2.5rem;
            cursor: grab;
        }

        .scroll-container:active {
            cursor: grabbing;
        }

        /* Scroll indicator */
        .scroll-indicator {
            text-align: center;
            margin-bottom: 1rem;
            color: #999;
            font-size: 0.8rem;
            animation: pulseIndicator 2s ease-in-out infinite;
        }

        @keyframes pulseIndicator {
            0%, 100% { opacity: 0.4; transform: translateX(0); }
            50% { opacity: 1; transform: translateX(5px); }
        }

        .scroll-indicator i {
            color: #F20101;
            display: inline-block;
            animation: scrollArrow 1.5s ease-in-out infinite;
        }

        @keyframes scrollArrow {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(8px); }
        }

        /* ============================================================
           SCROLL WRAPPER - Right to Left on Hover
           ============================================================ */
        .scroll-wrapper {
            display: flex;
            gap: 1.5rem;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            will-change: transform;
            padding: 0.3rem;
        }

        /* Hover to scroll right to left */
        .scroll-container:hover .scroll-wrapper {
            transform: translateX(calc(-50% - 0.75rem));
        }

        /* ============================================================
           REVIEW CARD
           ============================================================ */
        .review-card {
            min-width: 280px;
            max-width: 280px;
            border-radius: 1.5rem;
            overflow: hidden;
            background: #fafafc;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            flex-shrink: 0;
            cursor: pointer;
        }

        .review-card:hover {
            transform: translateY(-6px) scale(1.02);
            border-color: rgba(200, 60, 60, 0.15);
            box-shadow: 0 12px 40px -12px rgba(200, 50, 50, 0.06);
            background: #ffffff;
        }

        .review-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.02), transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 1;
        }

        .review-card:hover::before {
            opacity: 1;
        }

        /* ============================================================
           VIDEO WRAPPER
           ============================================================ */
        .review-video {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16/9;
            background: #1a1a2a;
        }

        .review-video video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .review-card:hover .review-video video {
            transform: scale(1.05);
        }

        /* Play overlay */
        .video-play-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 2;
        }

        .review-card:hover .video-play-overlay {
            background: rgba(0, 0, 0, 0.05);
        }

        .video-play-overlay .play-circle {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: #F20101;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.3rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 30px -8px rgba(200, 50, 50, 0.2);
            backdrop-filter: blur(4px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .video-play-overlay .play-circle::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid rgba(204, 59, 59, 0.12);
            animation: ringPulse 2.5s ease-in-out infinite;
        }

        @keyframes ringPulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.3); opacity: 0; }
        }

        .review-card:hover .play-circle {
            transform: scale(1.1) rotate(-5deg);
            background: rgba(204, 59, 59, 1);
            box-shadow: 0 12px 40px -8px rgba(200, 50, 50, 0.3);
        }

        .video-play-overlay .play-circle i {
            margin-left: 3px;
            transition: transform 0.4s ease;
        }

        .review-card:hover .play-circle i {
            transform: scale(1.1);
        }

        /* Video badge */
        .video-badge {
            position: absolute;
            top: 0.6rem;
            right: 0.6rem;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            padding: 0.15rem 0.7rem;
            border-radius: 2rem;
            border: 1px solid rgba(200, 60, 60, 0.06);
            color: #888;
            font-size: 0.45rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            z-index: 3;
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px -6px rgba(0, 0, 0, 0.04);
        }

        .video-badge i {
            color: #F20101;
            transition: transform 0.4s ease;
        }

        .review-card:hover .video-badge {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: translateY(-2px);
        }

        .review-card:hover .video-badge i {
            transform: scale(1.15) rotate(-10deg);
        }

        /* ============================================================
           REVIEW INFO
           ============================================================ */
        .review-info {
            padding: 1rem 1.2rem 1.2rem;
            position: relative;
            z-index: 3;
        }

        .review-info .reviewer-name {
            color: #1a1a2a;
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            transition: color 0.3s ease;
        }

        .review-card:hover .reviewer-name {
            color: #F20101;
        }

        .review-info .reviewer-name .verified {
            color: #27ae60;
            font-size: 0.55rem;
            animation: verifiedPulse 2s ease-in-out infinite;
        }

        @keyframes verifiedPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        .review-info .reviewer-title {
            color: #999;
            font-size: 0.7rem;
            margin-top: 0.05rem;
            transition: color 0.3s ease;
        }

        .review-card:hover .reviewer-title {
            color: #666;
        }

        .review-info .review-text {
            color: #666;
            font-size: 0.8rem;
            line-height: 1.6;
            margin-top: 0.4rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.4s ease;
        }

        .review-card:hover .review-text {
            color: #1a1a2a;
        }

        .review-info .review-stars {
            color: #f39c12;
            font-size: 0.65rem;
            margin-top: 0.4rem;
            letter-spacing: 2px;
        }

        .review-info .review-stars i {
            animation: starPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .review-info .review-stars i:nth-child(1) { animation-delay: 0.05s; }
        .review-info .review-stars i:nth-child(2) { animation-delay: 0.1s; }
        .review-info .review-stars i:nth-child(3) { animation-delay: 0.15s; }
        .review-info .review-stars i:nth-child(4) { animation-delay: 0.2s; }
        .review-info .review-stars i:nth-child(5) { animation-delay: 0.25s; }

        @keyframes starPop {
            0% { transform: scale(0) rotate(-20deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        /* ============================================================
           BOTTOM BAR
           ============================================================ */
        .reviews-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            padding-top: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .reviews-bottom .tagline {
            color: #888;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .reviews-bottom .tagline:hover {
            color: #1a1a2a;
        }

        .reviews-bottom .tagline strong {
            color: #F20101;
            position: relative;
        }

        .reviews-bottom .tagline strong::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(204, 59, 59, 0.2);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        .reviews-bottom .bottom-actions {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .book-now-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 2rem;
            background: #F20101;
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.25);
            position: relative;
            overflow: hidden;
        }

        .book-now-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .book-now-btn:hover::before {
            transform: translateX(0);
        }

        .book-now-btn:hover {
            background: #F20101;
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 15px 35px -8px rgba(200, 50, 50, 0.4);
        }

        .book-now-btn:active {
            transform: scale(0.97);
        }

        .book-now-btn i {
            transition: transform 0.4s ease;
        }

        .book-now-btn:hover i {
            transform: translateX(6px) rotate(-8deg);
        }

        .contact-phone {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #888;
            font-size: 0.9rem;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
        }

        .contact-phone:hover {
            color: #1a1a2a;
            transform: translateX(4px);
        }

        .contact-phone i {
            color: #F20101;
            font-size: 1rem;
            transition: transform 0.4s ease;
        }

        .contact-phone:hover i {
            transform: scale(1.15) rotate(-8deg);
        }

        .contact-phone a {
            color: inherit;
            text-decoration: none;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 768px) {
            .reviews-section {
                padding: 2rem 1.2rem 2.5rem;
                border-radius: 2rem;
            }
            .reviews-header h2 {
                font-size: 2rem;
            }
            .reviews-header .subtitle {
                font-size: 0.9rem;
            }
            .review-card {
                min-width: 220px;
                max-width: 220px;
            }
            .review-info {
                padding: 0.8rem 1rem 1rem;
            }
            .review-info .reviewer-name {
                font-size: 0.8rem;
            }
            .review-info .review-text {
                font-size: 0.75rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .video-play-overlay .play-circle {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }
            .reviews-bottom {
                flex-direction: column;
                text-align: center;
            }
            .reviews-bottom .bottom-actions {
                justify-content: center;
            }
            .scroll-container:hover .scroll-wrapper {
                transform: translateX(calc(-50% - 0.5rem));
            }
        }

        @media (max-width: 480px) {
            .reviews-section {
                padding: 1.5rem 1rem 2rem;
                border-radius: 1.5rem;
            }
            .reviews-header h2 {
                font-size: 1.6rem;
            }
            .review-card {
                min-width: 180px;
                max-width: 180px;
            }
            .review-info .reviewer-name {
                font-size: 0.75rem;
            }
            .review-info .review-text {
                font-size: 0.7rem;
            }
            .video-play-overlay .play-circle {
                width: 38px;
                height: 38px;
                font-size: 0.9rem;
            }
            .book-now-btn {
                width: 100%;
                justify-content: center;
                padding: 0.6rem 1.5rem;
            }
            .contact-phone {
                font-size: 0.8rem;
            }
            .scroll-container:hover .scroll-wrapper {
                transform: translateX(calc(-50% - 0.3rem));
            }
        }
        /* ============================================================
           BLOG SECTION
           ============================================================ */
        .blog-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 4.5rem;
            position: relative;
            overflow: hidden;
            border: 0px solid rgba(200, 60, 60, 0.04);
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .blog-section:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.blog-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.02);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all 0.6s ease;
        }

        .bg-icons .icon-float:hover {
            color: rgba(200, 60, 60, 0.06);
            transform: scale(1.2) rotate(15deg);
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.05; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.03; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .blog-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

        .blog-header .badge {
            display: inline-block;
            background: #fef6f6;
            color: #F20101;
            font-weight: 600;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            padding: 0.25rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.4s ease;
        }

        .blog-header .badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.02);
        }

        .blog-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #1a1a2a;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
        }

        .blog-header h2 span {
            color: #F20101;
            position: relative;
        }

        .blog-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .blog-header .subtitle {
            color: #888;
            font-size: 0.95rem;
            margin-top: 0.2rem;
        }

        .blog-header .subtitle strong {
            color: #F20101;
        }

        /* ============================================================
           BLOG GRID - 3 Columns
           ============================================================ */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            position: relative;
            z-index: 1;
            margin-bottom: 2.5rem;
        }

        @media (max-width: 992px) {
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
        }

        @media (max-width: 600px) {
            .blog-grid {
                grid-template-columns: 1fr;
                gap: 1.2rem;
            }
        }

        /* ============================================================
           BLOG CARD - Premium Design with Images
           ============================================================ */
        .blog-card {
            border-radius: 1.5rem;
            overflow: hidden;
            background: #fafafc;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            animation: cardAppear 0.6s ease-out both;
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .blog-card:nth-child(1) { animation-delay: 0.05s; }
        .blog-card:nth-child(2) { animation-delay: 0.1s; }
        .blog-card:nth-child(3) { animation-delay: 0.15s; }

        @keyframes cardAppear {
            0% { opacity: 0; transform: translateY(30px) scale(0.95); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .blog-card:hover {
            transform: translateY(-10px) scale(1.015);
            border-color: rgba(200, 60, 60, 0.15);
            box-shadow: 0 20px 50px -12px rgba(200, 50, 50, 0.08);
            background: #ffffff;
        }

        /* Glow effect on hover */
        .blog-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.02), transparent 60%);
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 0;
        }

        .blog-card:hover::before {
            opacity: 1;
        }

        /* ============================================================
           BLOG IMAGE - With Actual Images
           ============================================================ */
        .blog-image {
            position: relative;
            overflow: hidden;
            height: 220px;
            flex-shrink: 0;
            background: #f0ece8;
        }

        .blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: block;
        }

        .blog-card:hover .blog-image img {
            transform: scale(1.06);
        }

        /* Image overlay gradient */
        .blog-image .image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, transparent 60%);
            transition: all 0.5s ease;
        }

        .blog-card:hover .image-overlay {
            background: linear-gradient(0deg, rgba(204, 59, 59, 0.1) 0%, transparent 60%);
        }

        /* Image tags */
        .blog-image .image-tags {
            position: absolute;
            top: 0.8rem;
            left: 0.8rem;
            right: 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            z-index: 2;
        }

        .blog-image .image-tags .category-tag {
            background: #F20101;
            backdrop-filter: blur(8px);
            padding: 0.15rem 0.8rem;
            border-radius: 2rem;
            color: #ffffff;
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            transition: all 0.4s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .blog-card:hover .image-tags .category-tag {
            background: rgba(204, 59, 59, 1);
            transform: scale(1.02);
        }

        .blog-image .image-tags .read-time {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            padding: 0.15rem 0.7rem;
            border-radius: 2rem;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.55rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        .blog-image .image-tags .read-time i {
            font-size: 0.45rem;
            opacity: 1;
            color: #F20101;
        }

        /* ============================================================
           BLOG CONTENT
           ============================================================ */
        .blog-content {
            padding: 1.2rem 1.5rem 1.5rem;
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .blog-content .blog-meta {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 0.5rem;
            font-size: 0.65rem;
            color: #b5a89e;
        }

        .blog-content .blog-meta .author {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .blog-content .blog-meta .author i {
            color: #F20101;
            font-size: 0.5rem;
        }

        .blog-content .blog-meta .dot {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #ddd;
        }

        .blog-content .blog-meta .date {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .blog-content .blog-meta .date i {
            color: #F20101;
            font-size: 0.5rem;
        }

        .blog-content h3 {
            font-size: 1rem;
            font-weight: 700;
            color: #1a1a2a;
            line-height: 1.4;
            margin-bottom: 0.5rem;
            transition: color 0.3s ease;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .blog-card:hover h3 {
            color: #F20101;
        }

        .blog-content p {
            color: #666;
            font-size: 0.85rem;
            line-height: 1.7;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
            flex: 1;
        }

        .blog-card:hover p {
            color: #555;
        }

        /* ============================================================
           READ MORE BUTTON
           ============================================================ */
        .read-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #F20101;
            font-weight: 600;
            font-size: 0.8rem;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            padding: 0.3rem 0;
            align-self: flex-start;
        }

        .read-more-btn::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #F20101;
            transition: width 0.4s ease;
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.1);
        }

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

        .read-more-btn:hover::before {
            width: 100%;
        }

        .read-more-btn i {
            transition: transform 0.4s ease;
        }

        .read-more-btn:hover i {
            transform: translateX(4px) rotate(-10deg);
        }

        /* ============================================================
           BOTTOM SECTION
           ============================================================ */
        .blog-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            padding-top: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .blog-bottom .explore-text {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-bottom .explore-text strong {
            color: #F20101;
        }

        .explore-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 2rem;
            background: #F20101;
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.2);
            position: relative;
            overflow: hidden;
        }

        .explore-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .explore-btn:hover::before {
            transform: translateX(0);
        }

        .explore-btn:hover {
            background: #F20101;
            transform: translateY(-3px);
            box-shadow: 0 12px 32px -8px rgba(200, 50, 50, 0.3);
        }

        .explore-btn i {
            transition: transform 0.4s ease;
        }

        .explore-btn:hover i {
            transform: translateX(4px);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .blog-section {
                padding: 2.5rem 1.5rem 3rem;
                border-radius: 2rem;
            }
            .blog-header h2 {
                font-size: 2.2rem;
            }
            .blog-image {
                height: 200px;
            }
        }

        @media (max-width: 768px) {
            .blog-section {
                padding: 2rem 1.2rem 2.5rem;
                border-radius: 1.8rem;
            }
            .blog-header h2 {
                font-size: 1.8rem;
            }
            .blog-image {
                height: 180px;
            }
            .blog-content {
                padding: 1rem 1.2rem 1.2rem;
            }
            .blog-content h3 {
                font-size: 0.95rem;
            }
            .blog-content p {
                font-size: 0.82rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .blog-bottom {
                flex-direction: column;
                text-align: center;
            }
            .explore-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .blog-section {
                padding: 1.5rem 1rem 2rem;
                border-radius: 1.5rem;
            }
            .blog-header h2 {
                font-size: 1.5rem;
            }
            .blog-grid {
                gap: 1rem;
            }
            .blog-image {
                height: 160px;
            }
            .blog-content {
                padding: 0.8rem 1rem 1rem;
            }
            .blog-content h3 {
                font-size: 0.85rem;
            }
            .blog-content p {
                font-size: 0.78rem;
            }
            .blog-content .blog-meta {
                font-size: 0.55rem;
            }
            .blog-image .image-tags .category-tag {
                font-size: 0.45rem;
                padding: 0.1rem 0.5rem;
            }
            .blog-image .image-tags .read-time {
                font-size: 0.45rem;
                padding: 0.1rem 0.5rem;
            }
            .read-more-btn {
                font-size: 0.75rem;
            }
        }
        
        /* ============================================================
           MAIN WRAPPER
           ============================================================ */
        .form-wrapper {
            max-width: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: 1.4fr 0.6fr;
            gap: 0;
            background: #ffffff;
            border-radius: 0rem;
            overflow: hidden;
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.08);
            border: 0px solid rgba(200, 60, 60, 0.04);
            position: relative;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .form-wrapper:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.1);
        }

        /* Animated border glow */
        .form-wrapper::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           LEFT SIDE - FORM
           ============================================================ */
        .form-card {
            padding: 2.8rem 2.8rem 3rem;
            position: relative;
            z-index: 1;
            background: #ffffff;
        }

        /* ============================================================
           BACKGROUND ANIMATIONS - Floating Food Icons
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.03);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(11) { top: 6%; left: 48%; font-size: 2.6rem; animation-duration: 31s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(12) { bottom: 38%; right: 12%; font-size: 3rem; animation-duration: 25s; animation-delay: 2s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.06; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.04; }
        }

        /* ============================================================
           ANIMATED DOTS BACKGROUND
           ============================================================ */
        .bg-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-dots .dot {
            position: absolute;
            border-radius: 50%;
            background: rgba(200, 60, 60, 0.04);
            animation: dotFloat 25s infinite ease-in-out;
        }

        .bg-dots .dot:nth-child(1) { top: 5%; left: 5%; width: 20px; height: 20px; animation-duration: 22s; }
        .bg-dots .dot:nth-child(2) { top: 20%; right: 8%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 2s; }
        .bg-dots .dot:nth-child(3) { bottom: 15%; left: 8%; width: 25px; height: 25px; animation-duration: 25s; animation-delay: 4s; }
        .bg-dots .dot:nth-child(4) { bottom: 30%; right: 5%; width: 15px; height: 15px; animation-duration: 20s; animation-delay: 1s; }
        .bg-dots .dot:nth-child(5) { top: 45%; left: 3%; width: 18px; height: 18px; animation-duration: 28s; animation-delay: 3s; }
        .bg-dots .dot:nth-child(6) { top: 60%; right: 6%; width: 10px; height: 10px; animation-duration: 23s; animation-delay: 5s; }
        .bg-dots .dot:nth-child(7) { top: 75%; left: 12%; width: 22px; height: 22px; animation-duration: 30s; animation-delay: 2s; }
        .bg-dots .dot:nth-child(8) { bottom: 8%; right: 15%; width: 14px; height: 14px; animation-duration: 26s; animation-delay: 4s; }

        @keyframes dotFloat {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.05; }
            25% { transform: translate(25px, -35px) scale(1.5); opacity: 0.2; }
            50% { transform: translate(-15px, 25px) scale(0.7); opacity: 0.08; }
            75% { transform: translate(35px, 15px) scale(1.8); opacity: 0.15; }
        }

        .content {
            position: relative;
            z-index: 2;
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .form-header {
            margin-bottom: 2rem;
        }

        .form-header .badge {
            display: inline-block;
            background: #fef6f6;
            color: #F20101;
            font-weight: 600;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            padding: 0.25rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .form-header .badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.02);
        }

        .form-header h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #1a1a2a;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
        }

        .form-header h2 span {
            color: #F20101;
            position: relative;
        }

        .form-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .form-header p {
            color: #888;
            font-size: 0.9rem;
            margin-top: 0.2rem;
        }

        /* ============================================================
           FORM FIELDS - Enhanced Hover Effects
           ============================================================ */
        .lead-form {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.2rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            position: relative;
        }

        .form-group label {
            font-weight: 600;
            font-size: 0.7rem;
            color: #888;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .form-group:hover label {
            color: #F20101;
            transform: translateX(4px);
        }

        .form-group label i {
            color: #F20101;
            font-size: 0.7rem;
            width: 16px;
            transition: transform 0.4s ease;
        }

        .form-group:hover label i {
            transform: scale(1.15) rotate(-5deg);
        }

        .form-group label .required {
            color: #F20101;
            animation: requiredPulse 2s ease-in-out infinite;
            display: inline-block;
        }

        @keyframes requiredPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        /* ============================================================
           INPUT BOXES - Creative Hover Effects
           ============================================================ */
        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 0.75rem 1rem;
            border: 2px solid #eee;
            border-radius: 60px;
            font-size: 0.9rem;
            background: #fafafc;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            color: #1a1a2a;
            font-weight: 500;
            outline: none;
            width: 100%;
            font-family: inherit;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
        }

        /* Input hover effect - lift & glow */
        .form-group input:hover,
        .form-group select:hover,
        .form-group textarea:hover {
            border-color: rgba(200, 60, 60, 0.25);
            background: #ffffff;
            transform: translateY(-2px) scale(1.005);
            box-shadow: 0 8px 25px -8px rgba(200, 50, 50, 0.08);
        }

        /* Input focus effect - scale & shadow */
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: #F20101;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(200, 50, 50, 0.04), 0 8px 30px -10px rgba(200, 50, 50, 0.08);
            transform: scale(1.015) translateY(-3px);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #b5a89e;
            font-weight: 400;
            transition: all 0.3s ease;
        }

        .form-group input:focus::placeholder,
        .form-group textarea:focus::placeholder {
            color: #F20101;
            opacity: 0.3;
            transform: translateX(5px);
        }

        .form-group textarea {
            border-radius: 1.2rem;
            resize: vertical;
            min-height: 70px;
            max-height: 130px;
        }

        /* ============================================================
           DATE INPUT
           ============================================================ */
        .date-input-wrapper {
            position: relative;
        }

        .date-input-wrapper input {
            padding-right: 3.5rem;
            cursor: pointer;
        }

        .date-input-wrapper .calendar-icon {
            position: absolute;
            right: 1.2rem;
            top: 50%;
            transform: translateY(-50%);
            color: #b5a89e;
            font-size: 1rem;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .date-input-wrapper input:hover ~ .calendar-icon,
        .date-input-wrapper input:hover + .calendar-icon {
            color: #F20101;
            transform: translateY(-50%) scale(1.1) rotate(-5deg);
        }

        .date-input-wrapper input:focus ~ .calendar-icon,
        .date-input-wrapper input:focus + .calendar-icon {
            color: #F20101;
            transform: translateY(-50%) scale(1.15) rotate(-8deg);
        }

        /* ============================================================
           SELECT
           ============================================================ */
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cc3b3b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1.2rem center;
            background-size: 12px 8px;
            cursor: pointer;
        }

        select option {
            padding: 0.6rem;
            color: #1a1a2a;
        }

        /* ============================================================
           SUBMIT BUTTON
           ============================================================ */
        .submit-btn {
            background: #F20101;
            border: none;
            padding: 0.9rem 2.5rem;
            border-radius: 60px;
            font-weight: 700;
            font-size: 1rem;
            color: white;
            letter-spacing: 0.5px;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.25);
            margin-top: 0.3rem;
            position: relative;
            overflow: hidden;
        }

        .submit-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .submit-btn:hover::before {
            transform: translateX(0);
        }

        .submit-btn i {
            transition: transform 0.4s ease;
        }

        .submit-btn:hover {
            background: #F20101;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 14px 32px -8px rgba(200, 50, 50, 0.35);
        }

        .submit-btn:hover i {
            transform: translateX(6px) rotate(-5deg);
        }

        .submit-btn:active {
            transform: scale(0.97);
        }

        /* ============================================================
           RIGHT SIDE - GOOGLE MAP
           ============================================================ */
        .map-container {
            background: #1a1a2a;
            position: relative;
            overflow: hidden;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Animated map overlay */
        .map-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at 30% 40%, rgba(204, 59, 59, 0.08), transparent 60%),
                radial-gradient(ellipse at 70% 60%, rgba(204, 59, 59, 0.05), transparent 50%);
            z-index: 1;
            pointer-events: none;
        }

        /* Animated dots on map */
        .map-dots {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .map-dots .dot {
            position: absolute;
            border-radius: 50%;
            background: rgba(204, 59, 59, 0.04);
            animation: dotFloat 25s infinite ease-in-out;
        }

        .map-dots .dot:nth-child(1) { top: 10%; left: 5%; width: 20px; height: 20px; animation-duration: 22s; }
        .map-dots .dot:nth-child(2) { top: 25%; right: 10%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 2s; }
        .map-dots .dot:nth-child(3) { bottom: 20%; left: 8%; width: 25px; height: 25px; animation-duration: 25s; animation-delay: 4s; }
        .map-dots .dot:nth-child(4) { bottom: 35%; right: 5%; width: 15px; height: 15px; animation-duration: 20s; animation-delay: 1s; }
        .map-dots .dot:nth-child(5) { top: 50%; left: 3%; width: 18px; height: 18px; animation-duration: 28s; animation-delay: 3s; }
        .map-dots .dot:nth-child(6) { top: 65%; right: 8%; width: 10px; height: 10px; animation-duration: 23s; animation-delay: 5s; }
        .map-dots .dot:nth-child(7) { top: 80%; left: 15%; width: 22px; height: 22px; animation-duration: 30s; animation-delay: 2s; }
        .map-dots .dot:nth-child(8) { bottom: 10%; right: 20%; width: 14px; height: 14px; animation-duration: 26s; animation-delay: 4s; }

        /* Google Map iframe */
        .map-iframe-wrapper {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            min-height: 400px;
            overflow: hidden;
        }

        .map-iframe-wrapper iframe {
            width: 100%;
            height: 100%;
            min-height: 400px;
            border: none;
            filter: grayscale(0.2) contrast(1.1);
            transition: filter 0.6s ease;
        }

        .map-iframe-wrapper:hover iframe {
            filter: grayscale(0) contrast(1);
        }

        /* Map overlay content */
        .map-overlay {
            position: absolute;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            z-index: 2;
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 1rem;
            padding: 1rem 1.2rem;
            border: 1px solid rgba(255, 255, 255, 0.04);
            animation: slideUp 0.8s ease-out 0.5s both;
            transition: all 0.4s ease;
        }

        .map-overlay:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-4px);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
        }

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

        .map-overlay .location-row {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .map-overlay .location-row i {
            color: #F20101;
            font-size: 1.2rem;
            width: 30px;
            text-align: center;
            animation: pinBounce 2s ease-in-out infinite;
        }

        @keyframes pinBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        .map-overlay .location-row .info {
            flex: 1;
        }

        .map-overlay .location-row .info .title {
            color: #ffffff;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .map-overlay .location-row .info .sub {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.75rem;
        }

        .map-overlay .location-row .open-btn {
            padding: 0.3rem 1rem;
            border: 1px solid rgba(204, 59, 59, 0.2);
            border-radius: 2rem;
            background: rgba(204, 59, 59, 0.05);
            color: #F20101;
            font-size: 0.7rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            white-space: nowrap;
        }

        .map-overlay .location-row .open-btn:hover {
            background: rgba(204, 59, 59, 0.12);
            border-color: #F20101;
            transform: scale(1.05);
        }

        /* Location badge on map */
        .map-badge {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            z-index: 2;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 0.3rem 1rem;
            border-radius: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.04);
            animation: fadeIn 0.8s ease-out 0.3s both;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        .map-badge span {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .map-badge span i {
            color: #F20101;
        }

        /* ============================================================
           FLATPICKR
           ============================================================ */
        .flatpickr-calendar {
            border-radius: 24px !important;
            box-shadow: 0 20px 50px -10px rgba(200, 50, 50, 0.08), 0 10px 25px -8px rgba(0, 0, 0, 0.06) !important;
            border: 1px solid rgba(200, 60, 60, 0.06) !important;
            padding: 0.5rem 0.5rem !important;
            background: #ffffff !important;
            animation: calendarPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        }

        @keyframes calendarPop {
            0% { transform: scale(0.92) translateY(12px); opacity: 0; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }

        .flatpickr-day {
            border-radius: 40px !important;
            transition: all 0.15s ease !important;
            font-weight: 500 !important;
            color: #1a1a2a !important;
        }
        .flatpickr-day:hover {
            background: #fef6f6 !important;
            color: #F20101 !important;
            border-color: rgba(200, 60, 60, 0.08) !important;
            transform: scale(1.05);
        }
        .flatpickr-day.selected {
            background: #F20101 !important;
            border-color: #F20101 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(200, 50, 50, 0.2) !important;
        }
        .flatpickr-day.today {
            border-color: #F20101 !important;
            color: #F20101 !important;
            font-weight: 700 !important;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .form-wrapper {
                grid-template-columns: 1fr;
                border-radius: 2rem;
            }
            .map-container {
                min-height: 300px;
                border-radius: 0 0 2rem 2rem;
            }
            .map-iframe-wrapper {
                border-radius: 0 0 2rem 2rem;
                min-height: 300px;
            }
            .map-iframe-wrapper iframe {
                min-height: 300px;
            }
        }

        @media (max-width: 600px) {
            .form-card {
                padding: 2rem 1.2rem;
            }
            .form-row {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            .form-header h2 {
                font-size: 1.6rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .bg-dots .dot {
                opacity: 0.03 !important;
            }
            .map-container {
                min-height: 250px;
            }
            .map-iframe-wrapper {
                min-height: 250px;
            }
            .map-iframe-wrapper iframe {
                min-height: 250px;
            }
            .map-overlay {
                bottom: 1rem;
                left: 1rem;
                right: 1rem;
                padding: 0.8rem;
            }
            .map-overlay .location-row {
                flex-wrap: wrap;
            }
            .map-badge {
                top: 1rem;
                right: 1rem;
                padding: 0.2rem 0.8rem;
            }
        }

        @media (max-width: 400px) {
            .form-header h2 {
                font-size: 1.3rem;
            }
            .submit-btn {
                font-size: 0.9rem;
                padding: 0.7rem 1.5rem;
            }
        }
        /* ============================================================
           FOOTER - White Background with Dot Circle Animations
           ============================================================ */
        .footer {
            background: #f1f1f1;
            color: #4a4a4a;
            padding: 1rem 2rem 1.5rem;
            position: relative;
            border-top: 4px solid #F20101;
            box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            margin-top: 50px;
        }

        /* ============================================================
           DOT CIRCLE BACKGROUND ANIMATIONS
           ============================================================ */
        .footer-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        /* Dot circle container */
        .dot-circle {
            position: absolute;
            border-radius: 50%;
            animation: floatCircle 30s infinite ease-in-out;
        }

        .dot-circle .ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(204, 59, 59, 0.06);
            animation: ringPulse 4s ease-in-out infinite;
        }

        .dot-circle .ring:nth-child(1) { inset: 0; animation-delay: 0s; }
        .dot-circle .ring:nth-child(2) { inset: 15%; animation-delay: 1.5s; border-color: rgba(204, 59, 59, 0.04); }
        .dot-circle .ring:nth-child(3) { inset: 30%; animation-delay: 3s; border-color: rgba(204, 59, 59, 0.03); }

        .dot-circle .center-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: rgba(204, 59, 59, 0.06);
            animation: dotPulse 3s ease-in-out infinite;
        }

        @keyframes ringPulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        @keyframes dotPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
            50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; }
        }

        @keyframes floatCircle {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(30px, -20px) rotate(90deg); }
            50% { transform: translate(-20px, 30px) rotate(180deg); }
            75% { transform: translate(20px, 15px) rotate(270deg); }
        }

        /* Individual dot circles - positioned */
        .dot-circle-1 { top: 5%; left: 2%; width: 120px; height: 120px; animation-duration: 28s; }
        .dot-circle-1 .center-dot { width: 12px; height: 12px; }
        .dot-circle-1 .ring { border-width: 1px; }

        .dot-circle-2 { top: 15%; right: 5%; width: 80px; height: 80px; animation-duration: 22s; animation-delay: 2s; }
        .dot-circle-2 .center-dot { width: 8px; height: 8px; background: rgba(204, 59, 59, 0.08); }
        .dot-circle-2 .ring { border-width: 1px; border-color: rgba(204, 59, 59, 0.05); }

        .dot-circle-3 { bottom: 10%; left: 3%; width: 150px; height: 150px; animation-duration: 32s; animation-delay: 4s; }
        .dot-circle-3 .center-dot { width: 14px; height: 14px; background: rgba(204, 59, 59, 0.04); }
        .dot-circle-3 .ring { border-width: 1.5px; }

        .dot-circle-4 { bottom: 20%; right: 8%; width: 100px; height: 100px; animation-duration: 26s; animation-delay: 1s; }
        .dot-circle-4 .center-dot { width: 10px; height: 10px; background: rgba(204, 59, 59, 0.07); }

        .dot-circle-5 { top: 40%; left: 1%; width: 60px; height: 60px; animation-duration: 35s; animation-delay: 3s; }
        .dot-circle-5 .center-dot { width: 6px; height: 6px; background: rgba(204, 59, 59, 0.09); }

        .dot-circle-6 { top: 55%; right: 2%; width: 90px; height: 90px; animation-duration: 24s; animation-delay: 5s; }
        .dot-circle-6 .center-dot { width: 9px; height: 9px; background: rgba(204, 59, 59, 0.05); }

        .dot-circle-7 { top: 70%; left: 6%; width: 130px; height: 130px; animation-duration: 30s; animation-delay: 2s; }
        .dot-circle-7 .center-dot { width: 13px; height: 13px; background: rgba(204, 59, 59, 0.03); }

        .dot-circle-8 { bottom: 5%; right: 12%; width: 70px; height: 70px; animation-duration: 27s; animation-delay: 4s; }
        .dot-circle-8 .center-dot { width: 7px; height: 7px; background: rgba(204, 59, 59, 0.08); }

        .dot-circle-9 { top: 25%; left: 15%; width: 50px; height: 50px; animation-duration: 33s; animation-delay: 1s; }
        .dot-circle-9 .center-dot { width: 5px; height: 5px; background: rgba(204, 59, 59, 0.1); }

        .dot-circle-10 { top: 80%; left: 25%; width: 110px; height: 110px; animation-duration: 29s; animation-delay: 3s; }
        .dot-circle-10 .center-dot { width: 11px; height: 11px; background: rgba(204, 59, 59, 0.04); }

        .dot-circle-11 { top: 10%; left: 35%; width: 45px; height: 45px; animation-duration: 31s; animation-delay: 5s; }
        .dot-circle-11 .center-dot { width: 4px; height: 4px; background: rgba(204, 59, 59, 0.12); }

        .dot-circle-12 { bottom: 30%; right: 20%; width: 85px; height: 85px; animation-duration: 25s; animation-delay: 2s; }
        .dot-circle-12 .center-dot { width: 8px; height: 8px; background: rgba(204, 59, 59, 0.06); }

        /* Small dot particles */
        .dot-particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(204, 59, 59, 0.06);
            animation: particleFloat 20s infinite ease-in-out;
        }

        .dot-particle:nth-child(1) { top: 5%; left: 45%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 0s; }
        .dot-particle:nth-child(2) { top: 45%; left: 85%; width: 3px; height: 3px; animation-duration: 22s; animation-delay: 3s; }
        .dot-particle:nth-child(3) { top: 75%; left: 55%; width: 5px; height: 5px; animation-duration: 20s; animation-delay: 6s; }
        .dot-particle:nth-child(4) { top: 25%; right: 45%; width: 3px; height: 3px; animation-duration: 24s; animation-delay: 1s; }
        .dot-particle:nth-child(5) { top: 60%; left: 25%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: 4s; }
        .dot-particle:nth-child(6) { top: 85%; right: 35%; width: 3px; height: 3px; animation-duration: 23s; animation-delay: 7s; }
        .dot-particle:nth-child(7) { top: 15%; left: 65%; width: 4px; height: 4px; animation-duration: 21s; animation-delay: 2s; }
        .dot-particle:nth-child(8) { top: 50%; left: 15%; width: 3px; height: 3px; animation-duration: 25s; animation-delay: 5s; }

        @keyframes particleFloat {
            0%, 100% { transform: translate(0, 0); opacity: 0.2; }
            25% { transform: translate(15px, -20px); opacity: 0.6; }
            50% { transform: translate(-10px, 15px); opacity: 0.3; }
            75% { transform: translate(20px, 10px); opacity: 0.5; }
        }


        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        .footer-container {
            max-width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           TOP SECTION - Brand & Tagline
           ============================================================ */
        .footer-brand {
            text-align: left;
            /*margin-bottom: 2.5rem;
            padding-bottom: 2rem;*/
            /*border-bottom: 1px solid #f0ece8;
            animation: fadeSlideDown 0.8s ease-out;*/
            position: relative;
            padding-top: 15px;
        }

        .footer-brand::after {
            /*content: '';
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, transparent);
            animation: glowLine 4s ease-in-out infinite;*/
        }

        @keyframes glowLine {
            0%, 100% { width: 100px; opacity: 0.3; }
            50% { width: 250px; opacity: 1; }
        }

        @keyframes fadeSlideDown {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .footer-brand .logo {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 2rem;
            font-weight: 700;
            color: #1a1a2a;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }

        .footer-brand .logo i {
            color: #F20101;
            font-size: 1.8rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: pulseIcon 3s ease-in-out infinite;
        }

        @keyframes pulseIcon {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1) rotate(-3deg); }
        }

        .footer-brand .logo:hover {
            transform: scale(1.02);
        }

        .footer-brand .logo:hover i {
            transform: rotate(-10deg) scale(1.2);
            animation: none;
        }

        .footer-brand .logo span {
            color: #F20101;
            transition: all 0.3s ease;
        }

        .footer-brand .logo:hover span {
            text-shadow: 0 0 30px rgba(204, 59, 59, 0.15);
        }

        .footer-brand .tagline {
            color: #888;
            font-size: 0.95rem;
            margin-top: 0.5rem;
            letter-spacing: 0.3px;
            max-width: 550px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            animation: fadeSlideUp 0.8s ease-out 0.3s both;
        }

        @keyframes fadeSlideUp {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .footer-brand .tagline strong {
            color: #F20101;
            font-weight: 600;
            position: relative;
            transition: all 0.3s ease;
        }

        .footer-brand .tagline strong::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(204, 59, 59, 0.3);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.3; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        /* ============================================================
           MAIN GRID - 4 Columns
           ============================================================ */
        .footer-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
            gap: 2.5rem;
            margin-bottom: 2.5rem;
        }

        @media (max-width: 992px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }
        }

        @media (max-width: 600px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        /* ============================================================
           COLUMN STYLES - Hover Effects WITHOUT Background Change
           ============================================================ */
        .footer-col {
            animation: fadeSlideUp 0.8s ease-out both;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 0.5rem;
            border-radius: 0.8rem;
            position: relative;
        }

        .footer-col:nth-child(1) { animation-delay: 0.1s; }
        .footer-col:nth-child(2) { animation-delay: 0.2s; }
        .footer-col:nth-child(3) { animation-delay: 0.3s; }
        .footer-col:nth-child(4) { animation-delay: 0.4s; }

        /* Hover effect - lift without background change */
        .footer-col:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px -12px rgba(204, 59, 59, 0.08);
        }

        .footer-col h4 {
            color: #1a1a2a;
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 1rem;
            position: relative;
            padding-bottom: 0.6rem;
            display: inline-block;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-col h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background: #F20101;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 10px rgba(204, 59, 59, 0.1);
        }

        .footer-col:hover h4::after {
            width: 55px;
            box-shadow: 0 0 25px rgba(204, 59, 59, 0.2);
        }

        .footer-col:hover h4 {
            color: #F20101;
            transform: translateX(3px);
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col ul li {
            margin-bottom: 0.5rem;
            opacity: 0.85;
            transition: all 0.3s ease;
        }

        .footer-col:hover ul li {
            opacity: 1;
        }

        .footer-col ul li a {
            color: #777;
            text-decoration: none;
            font-size: 0.88rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            position: relative;
            padding: 0.15rem 0;
            border-radius: 0.3rem;
        }

        .footer-col ul li a .icon-arrow {
            color: #F20101;
            font-size: 0.55rem;
            opacity: 0;
            transform: translateX(-10px) scale(0.3) rotate(-45deg);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Hover - no background change */
        .footer-col ul li a:hover {
            color: #F20101;
            transform: translateX(8px) scale(1.02);
            text-shadow: 0 0 20px rgba(204, 59, 59, 0.05);
        }

        .footer-col ul li a:hover .icon-arrow {
            opacity: 1;
            transform: translateX(0) scale(1) rotate(0deg);
        }

        /* ============================================================
           CONTACT COLUMN - Hover Without Background
           ============================================================ */
        .footer-col.contact-col ul li {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.3rem 0.3rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-radius: 0.5rem;
            position: relative;
        }

        .footer-col.contact-col ul li:hover {
            transform: translateX(8px) scale(1.01);
            box-shadow: 0 4px 15px -6px rgba(204, 59, 59, 0.06);
        }

        .footer-col.contact-col ul li i {
            color: #F20101;
            font-size: 0.95rem;
            width: 20px;
            text-align: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-col.contact-col ul li:hover i {
            transform: scale(1.2) rotate(-8deg);
            text-shadow: 0 0 30px rgba(204, 59, 59, 0.15);
        }

        .footer-col.contact-col ul li a,
        .footer-col.contact-col ul li span {
            color: #777;
            text-decoration: none;
            font-size: 0.88rem;
            transition: color 0.3s;
        }

        .footer-col.contact-col ul li a:hover {
            color: #F20101;
        }

        /* ============================================================
           SOCIAL ICONS
           ============================================================ */
        .social-icons {
            display: flex;
            gap: 0.7rem;
            margin-top: 0.3rem;
            flex-wrap: wrap;
        }

        .social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #f8f6f4;
            color: #888;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid #eee;
            position: relative;
            overflow: hidden;
        }

        .social-icons a::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(204, 59, 59, 0.15), transparent 70%);
            transform: scale(0);
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 0;
        }

        .social-icons a i {
            position: relative;
            z-index: 1;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .social-icons a:hover {
            color: #ffffff;
            background: #F20101;
            transform: translateY(-6px) scale(1.1);
            box-shadow: 0 12px 35px -8px rgba(204, 59, 59, 0.35);
            border-color: #F20101;
        }

        .social-icons a:hover::before {
            transform: scale(1.8);
        }

        .social-icons a:hover i {
            transform: scale(1.15) rotate(-8deg);
        }

        /* ============================================================
           NEWSLETTER
           ============================================================ */
        .newsletter-wrapper {
            margin-top: 0.8rem;
        }

        .newsletter-wrapper p {
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            transition: all 0.3s ease;
        }

        .newsletter-wrapper p i {
            color: #F20101;
            animation: pulseIcon 2.5s ease-in-out infinite;
        }

        .newsletter-form {
            display: flex;
            gap: 0.3rem;
            flex-wrap: wrap;
        }

        .newsletter-form input {
            flex: 1;
            min-width: 120px;
            padding: 0.5rem 0.9rem;
            border: 1px solid #e8e0da;
            border-radius: 2rem;
            background: #faf8f7;
            color: #1a1a2a;
            font-size: 0.85rem;
            outline: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .newsletter-form input:focus {
            border-color: #F20101;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(204, 59, 59, 0.06);
            transform: scale(1.02);
        }

        .newsletter-form input::placeholder {
            color: #b5a89e;
        }

        .newsletter-form button {
            padding: 0.5rem 1.2rem;
            border: none;
            border-radius: 2rem;
            background: #F20101;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            position: relative;
            overflow: hidden;
        }

        .newsletter-form button::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .newsletter-form button:hover::before {
            transform: translateX(0);
        }

        .newsletter-form button:hover {
            background: #F20101;
            transform: translateY(-4px) scale(1.04);
            box-shadow: 0 12px 35px -8px rgba(204, 59, 59, 0.35);
        }

        .newsletter-form button:hover i {
            transform: translateX(4px) rotate(-10deg);
        }

        /* ============================================================
           DIVIDER
           ============================================================ */
        .footer-divider {
            border: none;
            height: 1px;
            background: linear-gradient(to right, transparent, #eee, #ddd, #eee, transparent);
            margin: 1.5rem 0;
            position: relative;
            animation: fadeSlideUp 0.8s ease-out 0.6s both;
        }

        .footer-divider::after {
            content: 'Рюд';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(204, 59, 59, 0.08);
            font-size: 0.7rem;
            background: #ffffff;
            padding: 0 0.8rem;
            animation: spinPulse 6s ease-in-out infinite;
        }

        @keyframes spinPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
            50% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); }
        }

        /* ============================================================
           BOTTOM BAR
           ============================================================ */
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            padding-top: 0.3rem;
            animation: fadeSlideUp 0.8s ease-out 0.7s both;
        }

        .footer-bottom p {
            font-size: 0.8rem;
            color: #999;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .footer-bottom p:hover {
            color: #1a1a2a;
            transform: translateY(-2px) scale(1.02);
        }

        .footer-bottom p i {
            color: #F20101;
            animation: heartbeat 1.8s ease-in-out infinite;
            display: inline-block;
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            14% { transform: scale(1.2); }
            28% { transform: scale(1); }
            42% { transform: scale(1.2); }
            70% { transform: scale(1); }
        }

        .footer-bottom .bottom-links {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .footer-bottom .bottom-links a {
            color: #999;
            text-decoration: none;
            font-size: 0.8rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            padding: 0.1rem 0;
        }

        .footer-bottom .bottom-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #F20101;
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.1);
        }

        .footer-bottom .bottom-links a:hover {
            color: #1a1a2a;
            transform: translateY(-3px) scale(1.02);
        }

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

        .footer-bottom .bottom-links .divider {
            color: #ddd;
            animation: pulseDivider 3s ease-in-out infinite;
        }

        @keyframes pulseDivider {
            0%, 100% { opacity: 0.2; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }

        .footer-bottom .bottom-links .heart-link {
            color: #ddd;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: inline-block;
            font-size: 0.9rem;
        }

        .footer-bottom .bottom-links .heart-link:hover {
            color: #F20101;
            transform: scale(1.3) rotate(-10deg);
            text-shadow: 0 0 30px rgba(204, 59, 59, 0.2);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 768px) {
            .footer {
                padding: 3rem 1.2rem 1rem;
            }
            .footer-brand .logo {
                font-size: 1.8rem;
            }
            .footer-brand .tagline {
                font-size: 0.9rem;
                padding: 0 1rem;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
            .footer-bottom .bottom-links {
                justify-content: center;
            }
            .dot-circle-1, .dot-circle-3, .dot-circle-7,
            .dot-circle-10 { width: 60px; height: 60px; }
            .dot-circle-2, .dot-circle-4, .dot-circle-6,
            .dot-circle-8, .dot-circle-12 { width: 40px; height: 40px; }
            .dot-circle-5, .dot-circle-9, .dot-circle-11 { width: 30px; height: 30px; }
            .dot-circle .ring { display: none; }
            .dot-circle .center-dot { width: 6px !important; height: 6px !important; }
        }

        @media (max-width: 480px) {
            .footer {
                padding: 2rem 1rem 1rem;
            }
            .footer-grid {
                gap: 1.2rem;
            }
            .footer-col h4 {
                font-size: 0.8rem;
            }
            .footer-col ul li a,
            .footer-col.contact-col ul li a,
            .footer-col.contact-col ul li span {
                font-size: 0.82rem;
            }
            .social-icons a {
                width: 36px;
                height: 36px;
                font-size: 0.85rem;
            }
            .footer-brand .logo {
                font-size: 1.4rem;
            }
            .newsletter-form input {
                min-width: 80px;
                font-size: 0.8rem;
            }
            .newsletter-form button {
                font-size: 0.8rem;
                padding: 0.4rem 0.9rem;
            }
            .footer-bottom .bottom-links {
                gap: 0.8rem;
            }
            .dot-circle { display: none; }
            .dot-particle { display: none; }
        }
        /* ============================================================
           CATERING SERVICES SECTION
           ============================================================ */
        .catering-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 3rem;
            position: relative;
            overflow: hidden;
            /*border: 1px solid rgba(204, 59, 59, 0.08);
            box-shadow: 0 30px 70px -20px rgba(204, 59, 59, 0.1), 0 0 0 1px rgba(204, 59, 59, 0.04);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);*/
        }

        /*.catering-section:hover {
            box-shadow: 0 40px 90px -20px rgba(204, 59, 59, 0.15);
        }*/

        /* Animated border glow - Top */
        /*.catering-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        /* Animated border glow - Bottom */
        /*.catering-section::after {
            content: '';
            position: absolute;
            bottom: -1px;
            right: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: borderSlide 6s linear infinite reverse;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Soft background blobs */
        .bg-blob {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(204, 59, 59, 0.06), transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .bg-blob.blob-1 {
            top: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            animation: blobFloat 15s ease-in-out infinite;
        }

        .bg-blob.blob-2 {
            bottom: -180px;
            left: -180px;
            width: 550px;
            height: 550px;
            animation: blobFloat 18s ease-in-out infinite reverse;
        }

        @keyframes blobFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.1); }
        }

        /* ============================================================
           BACKGROUND ANIMATED ICONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(204, 59, 59, 0.05);
            animation: floatIcon 25s infinite ease-in-out;
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.03; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.08; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.05; }
        }

        /* ============================================================
           MAIN CONTENT
           ============================================================ */
        .catering-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 3rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           LEFT SIDE - TEXT CONTENT
           ============================================================ */
        .catering-text {
            animation: fadeSlideLeft 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes fadeSlideLeft {
            0% { opacity: 0; transform: translateX(-40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .catering-text .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.12), rgba(204, 59, 59, 0.06));
            color: #f20101;
            font-weight: 700;
            font-size: 0.7rem;
            letter-spacing: 2.5px;
            padding: 0.45rem 1.3rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.25);
            text-transform: uppercase;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px -4px rgba(204, 59, 59, 0.2);
        }

        .catering-text .badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: badgeShine 3s ease-in-out infinite;
        }

        @keyframes badgeShine {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        .catering-text .badge i {
            font-size: 0.65rem;
            animation: starSpin 3s ease-in-out infinite;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.3); }
        }

        .catering-text .badge:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px -6px rgba(204, 59, 59, 0.35);
        }

        .catering-text h2 {
            font-size: 2.1rem;
            font-weight: 800;
            color: #1a1a1a;
            margin-top: 0.8rem;
            letter-spacing: -0.5px;
            line-height: 1.15;
            transition: transform 0.4s ease;
        }

        .catering-text h2:hover {
            transform: translateX(4px);
        }

        .catering-text h2 span {
            color: #f20101;
            position: relative;
            display: inline-block;
        }

        .catering-text h2 span::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, rgba(204, 59, 59, 0.15), rgba(255, 107, 107, 0.1));
            border-radius: 5px;
            z-index: -1;
            animation: underlinePulse 3s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { transform: scaleX(1); opacity: 0.8; }
            50% { transform: scaleX(1.05); opacity: 1; }
        }

        .catering-text .subtitle {
            color: #666;
            font-size: 0.95rem;
            margin-top: 0.8rem;
            line-height: 1.7;
            transition: color 0.3s ease;
        }

        .catering-text .subtitle:hover {
            color: #444;
        }

        .catering-text .subtitle strong {
            color: #f20101;
            font-weight: 700;
        }

        /* ============================================================
           FEATURES LIST
           ============================================================ */
        .catering-text .features {
            margin-top: 1.8rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem 1rem;
        }

        .catering-text .features .feature-item {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.55rem 0.7rem;
            border-radius: 0.7rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: default;
            position: relative;
            overflow: hidden;
            border: 1px solid transparent;
            animation: featureSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .catering-text .features .feature-item:nth-child(1) { animation-delay: 0.4s; }
        .catering-text .features .feature-item:nth-child(2) { animation-delay: 0.45s; }
        .catering-text .features .feature-item:nth-child(3) { animation-delay: 0.5s; }
        .catering-text .features .feature-item:nth-child(4) { animation-delay: 0.55s; }
        .catering-text .features .feature-item:nth-child(5) { animation-delay: 0.6s; }
        .catering-text .features .feature-item:nth-child(6) { animation-delay: 0.65s; }

        @keyframes featureSlideIn {
            0% { opacity: 0; transform: translateX(-20px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Glass gradient on hover */
        .catering-text .features .feature-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 0.7rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.08), rgba(255, 107, 107, 0.04));
            transform: scale(0);
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 0;
        }

        /* Diagonal shine sweep */
        .catering-text .features .feature-item::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.7s ease;
            z-index: 0;
        }

        .catering-text .features .feature-item:hover::before {
            transform: scale(1);
        }

        .catering-text .features .feature-item:hover::after {
            left: 100%;
        }

        .catering-text .features .feature-item:hover {
            transform: translateX(8px) scale(1.03);
            border-color: rgba(204, 59, 59, 0.15);
            box-shadow: 0 8px 25px -10px rgba(204, 59, 59, 0.25);
        }

        .catering-text .features .feature-item i {
            color: #f20101;
            font-size: 1rem;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
            background: rgba(204, 59, 59, 0.1);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .catering-text .features .feature-item:hover i {
            color: #ffffff;
            background: #f20101;
            transform: scale(1.15) rotate(-10deg);
            box-shadow: 0 0 20px rgba(204, 59, 59, 0.5);
        }

        .catering-text .features .feature-item span {
            color: #555;
            font-size: 0.85rem;
            font-weight: 600;
            transition: color 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .catering-text .features .feature-item:hover span {
            color: #f20101;
        }

        /* ============================================================
           CTA BUTTON
           ============================================================ */
        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.9rem 2.2rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            margin-top: 1.8rem;
            box-shadow: 0 10px 30px -8px rgba(204, 59, 59, 0.5);
            position: relative;
            overflow: hidden;
            font-family: inherit;
            letter-spacing: 0.3px;
        }

        .cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.7s ease;
        }

        .cta-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: translateX(-100%);
            transition: transform 0.9s ease;
        }

        .cta-btn:hover::before {
            transform: translateX(0);
        }

        .cta-btn:hover::after {
            transform: translateX(100%);
        }

        .cta-btn:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px -10px rgba(204, 59, 59, 0.7), 0 0 40px rgba(204, 59, 59, 0.3);
            letter-spacing: 0.8px;
        }

        .cta-btn:active {
            transform: translateY(-2px) scale(0.98);
        }

        .cta-btn i {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .cta-btn:hover i {
            transform: translateX(8px) rotate(-12deg);
        }

        /* ============================================================
           RIGHT SIDE - IMAGES GRID WITH LINES
           ============================================================ */
        .catering-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.2rem;
            animation: fadeSlideRight 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
            position: relative;
        }

        @keyframes fadeSlideRight {
            0% { opacity: 0; transform: translateX(40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Decorative lines behind images */
        .catering-images::before {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            width: 60px;
            height: 60px;
            border-top: 3px solid #f20101;
            border-left: 3px solid #f20101;
            border-radius: 15px 0 0 0;
            opacity: 0.5;
            animation: cornerPulse 3s ease-in-out infinite;
            z-index: 0;
        }

        .catering-images::after {
            content: '';
            position: absolute;
            bottom: -15px;
            right: -15px;
            width: 60px;
            height: 60px;
            border-bottom: 3px solid #f20101;
            border-right: 3px solid #f20101;
            border-radius: 0 0 15px 0;
            opacity: 0.5;
            animation: cornerPulse 3s ease-in-out infinite 1.5s;
            z-index: 0;
        }

        @keyframes cornerPulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.1); }
        }

        /* ============================================================
           IMAGE WRAPPER WITH RED LINE BORDER
           ============================================================ */
        .catering-images .img-wrapper {
            border-radius: 1.2rem;
            overflow: hidden;
            position: relative;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            aspect-ratio: 1/1;
            background: #f0ece8;
            box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.15);
            z-index: 1;
            animation: imgZoomIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .catering-images .img-wrapper:nth-child(1) { animation-delay: 0.5s; }
        .catering-images .img-wrapper:nth-child(2) { animation-delay: 0.6s; }
        .catering-images .img-wrapper:nth-child(3) { animation-delay: 0.7s; }
        .catering-images .img-wrapper:nth-child(4) { animation-delay: 0.8s; }
        .catering-images .img-wrapper:nth-child(5) { animation-delay: 0.9s; }

        @keyframes imgZoomIn {
            0% { opacity: 0; transform: scale(0.85); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* ============================================================
           RED LINE DECORATION ON IMAGES
           ============================================================ */

        /* Top animated red line */
        .catering-images .img-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #f20101, #ff6b6b);
            z-index: 5;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6);
        }

        /* Bottom animated red line */
        .catering-images .img-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(270deg, #f20101, #ff6b6b);
            z-index: 5;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6);
        }

        .catering-images .img-wrapper:hover::before {
            width: 100%;
        }

        .catering-images .img-wrapper:hover::after {
            width: 100%;
        }

        /* Inner border overlay (static, animated on hover) */
        .catering-images .img-wrapper .border-frame {
            position: absolute;
            inset: 10px;
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            border-radius: 0.9rem;
            z-index: 4;
            pointer-events: none;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .catering-images .img-wrapper:hover .border-frame {
            inset: 6px;
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.2) inset;
        }

        /* Shine sweep on image */
        .catering-images .img-wrapper .img-shine {
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.9s ease;
            z-index: 3;
            pointer-events: none;
        }

        .catering-images .img-wrapper:hover .img-shine {
            left: 100%;
        }

        /* Image hover state */
        .catering-images .img-wrapper:hover {
            transform: scale(1.05) translateY(-8px);
            box-shadow: 0 30px 60px -15px rgba(204, 59, 59, 0.3), 0 0 0 2px rgba(204, 59, 59, 0.3);
            z-index: 3;
        }

        .catering-images .img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: block;
        }

        .catering-images .img-wrapper:hover img {
            transform: scale(1.12);
        }

        /* ============================================================
           IMAGE OVERLAY WITH LABEL
           ============================================================ */
        .catering-images .img-wrapper .img-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 65%);
            display: flex;
            align-items: flex-end;
            padding: 1.2rem;
            transition: all 0.5s ease;
            z-index: 2;
        }

        .catering-images .img-wrapper:hover .img-overlay {
            background: linear-gradient(0deg, rgba(204, 59, 59, 0.75) 0%, rgba(204, 59, 59, 0.2) 40%, transparent 65%);
        }

        .catering-images .img-wrapper .img-overlay .service-label {
            color: #ffffff;
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.3px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 0.4rem 0.9rem;
            border-radius: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .catering-images .img-wrapper:hover .img-overlay .service-label {
            background: #ffffff;
            color: #f20101;
            border-color: #ffffff;
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.4);
        }

        .catering-images .img-wrapper .img-overlay .service-label i {
            font-size: 0.7rem;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .catering-images .img-wrapper:hover .img-overlay .service-label i {
            transform: scale(1.2) rotate(-12deg);
            color: #f20101;
        }

        /* Glow effect on image */
        .catering-images .img-wrapper .img-glow {
            position: absolute;
            inset: 0;
            border-radius: 1.2rem;
            background: radial-gradient(circle at 50% 50%, rgba(204, 59, 59, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
            z-index: 1;
        }

        .catering-images .img-wrapper:hover .img-glow {
            opacity: 1;
        }

        /* Large image spans 2 columns */
        .catering-images .img-wrapper.large {
            grid-column: 1 / 3;
            aspect-ratio: 2/1;
        }

        /* ============================================================
           FOOTER NOTE
           ============================================================ */
        .footer-note {
            margin-top: 2.5rem;
            text-align: center;
            font-size: 0.7rem;
            color: #bbb;
            position: relative;
            z-index: 1;
            letter-spacing: 0.5px;
            animation: fadeIn 1s ease-out 1.2s both;
        }

        .footer-note i {
            color: #f20101;
            opacity: 0.5;
            animation: starSpin 4s ease-in-out infinite;
        }

        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .catering-section {
                padding: 3rem 2rem 2.5rem;
                border-radius: 0rem;
            }
            .catering-content {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
            .catering-text h2 {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .catering-section {
                padding: 2.5rem 1.5rem 2rem;
                border-radius: 0rem;
            }
            .catering-text h2 {
                font-size: 1.9rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.03 !important;
            }
            .catering-images .img-wrapper.large {
                aspect-ratio: 1.5/1;
            }
        }

        @media (max-width: 600px) {
            .catering-text .features {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            .catering-images {
                grid-template-columns: 1fr 1fr;
                gap: 0.8rem;
            }
            .catering-images .img-wrapper.large {
                grid-column: 1 / 3;
                aspect-ratio: 1.5/1;
            }
        }

        @media (max-width: 480px) {
            .catering-section {
                padding: 2rem 1rem 1.5rem;
                border-radius: 0rem;
            }
            .catering-text h2 {
                font-size: 1.5rem;
            }
            .catering-images {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }
            .catering-images .img-wrapper.large {
                grid-column: 1;
                aspect-ratio: 1.5/1;
            }
            .catering-images .img-wrapper .img-overlay .service-label {
                font-size: 0.7rem;
                padding: 0.3rem 0.7rem;
            }
            .cta-btn {
                width: 100%;
                justify-content: center;
                padding: 0.8rem 1.5rem;
                font-size: 0.85rem;
            }
        }
         /* ============================================================
           CATERING SERVICES SECTION
           ============================================================ */
        .catering-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 3rem;
            position: relative;
            overflow: hidden;
            /*border: 1px solid rgba(204, 59, 59, 0.08);
            box-shadow: 0 30px 70px -20px rgba(204, 59, 59, 0.1), 0 0 0 1px rgba(204, 59, 59, 0.04);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);*/
        }

        /*.catering-section:hover {
            box-shadow: 0 40px 90px -20px rgba(204, 59, 59, 0.15);
        }*/

        /* Animated border glow - Top */
        /*.catering-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        /* Animated border glow - Bottom */
        /*.catering-section::after {
            content: '';
            position: absolute;
            bottom: -1px;
            right: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f20101, #ff6b6b, #f20101, transparent);
            animation: borderSlide 6s linear infinite reverse;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Soft background blobs */
        .bg-blob {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(204, 59, 59, 0.06), transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .bg-blob.blob-1 {
            top: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            animation: blobFloat 15s ease-in-out infinite;
        }

        .bg-blob.blob-2 {
            bottom: -180px;
            left: -180px;
            width: 550px;
            height: 550px;
            animation: blobFloat 18s ease-in-out infinite reverse;
        }

        @keyframes blobFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.1); }
        }

        /* ============================================================
           BACKGROUND ANIMATED ICONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(204, 59, 59, 0.05);
            animation: floatIcon 25s infinite ease-in-out;
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.03; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.08; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.05; }
        }

        /* ============================================================
           MAIN CONTENT
           ============================================================ */
        .catering-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 3rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           LEFT SIDE - TEXT CONTENT
           ============================================================ */
        .catering-text {
            animation: fadeSlideLeft 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes fadeSlideLeft {
            0% { opacity: 0; transform: translateX(-40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .catering-text .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.12), rgba(204, 59, 59, 0.06));
            color: #f20101;
            font-weight: 700;
            font-size: 0.7rem;
            letter-spacing: 2.5px;
            padding: 0.45rem 1.3rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.25);
            text-transform: uppercase;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px -4px rgba(204, 59, 59, 0.2);
        }

        .catering-text .badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: badgeShine 3s ease-in-out infinite;
        }

        @keyframes badgeShine {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        .catering-text .badge i {
            font-size: 0.65rem;
            animation: starSpin 3s ease-in-out infinite;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.3); }
        }

        .catering-text .badge:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px -6px rgba(204, 59, 59, 0.35);
        }

        .catering-text h2 {
            font-size: 2.1rem;
            font-weight: 800;
            color: #1a1a1a;
            margin-top: 0.8rem;
            letter-spacing: -0.5px;
            line-height: 1.15;
            transition: transform 0.4s ease;
        }

        .catering-text h2:hover {
            transform: translateX(4px);
        }

        .catering-text h2 span {
            color: #f20101;
            position: relative;
            display: inline-block;
        }

        .catering-text h2 span::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, rgba(204, 59, 59, 0.15), rgba(255, 107, 107, 0.1));
            border-radius: 5px;
            z-index: -1;
            animation: underlinePulse 3s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { transform: scaleX(1); opacity: 0.8; }
            50% { transform: scaleX(1.05); opacity: 1; }
        }

        .catering-text .subtitle {
            color: #666;
            font-size: 0.95rem;
            margin-top: 0.8rem;
            line-height: 1.7;
            transition: color 0.3s ease;
        }

        .catering-text .subtitle:hover {
            color: #444;
        }

        .catering-text .subtitle strong {
            color: #f20101;
            font-weight: 700;
        }

        /* ============================================================
           FEATURES LIST
           ============================================================ */
        .catering-text .features {
            margin-top: 1.8rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem 1rem;
        }

        .catering-text .features .feature-item {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.55rem 0.7rem;
            border-radius: 0.7rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: default;
            position: relative;
            overflow: hidden;
            border: 1px solid transparent;
            animation: featureSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .catering-text .features .feature-item:nth-child(1) { animation-delay: 0.4s; }
        .catering-text .features .feature-item:nth-child(2) { animation-delay: 0.45s; }
        .catering-text .features .feature-item:nth-child(3) { animation-delay: 0.5s; }
        .catering-text .features .feature-item:nth-child(4) { animation-delay: 0.55s; }
        .catering-text .features .feature-item:nth-child(5) { animation-delay: 0.6s; }
        .catering-text .features .feature-item:nth-child(6) { animation-delay: 0.65s; }

        @keyframes featureSlideIn {
            0% { opacity: 0; transform: translateX(-20px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Glass gradient on hover */
        .catering-text .features .feature-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 0.7rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.08), rgba(255, 107, 107, 0.04));
            transform: scale(0);
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 0;
        }

        /* Diagonal shine sweep */
        .catering-text .features .feature-item::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.7s ease;
            z-index: 0;
        }

        .catering-text .features .feature-item:hover::before {
            transform: scale(1);
        }

        .catering-text .features .feature-item:hover::after {
            left: 100%;
        }

        .catering-text .features .feature-item:hover {
            transform: translateX(8px) scale(1.03);
            border-color: rgba(204, 59, 59, 0.15);
            box-shadow: 0 8px 25px -10px rgba(204, 59, 59, 0.25);
        }

        .catering-text .features .feature-item i {
            color: #f20101;
            font-size: 1rem;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
            background: rgba(204, 59, 59, 0.1);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .catering-text .features .feature-item:hover i {
            color: #ffffff;
            background: #f20101;
            transform: scale(1.15) rotate(-10deg);
            box-shadow: 0 0 20px rgba(204, 59, 59, 0.5);
        }

        .catering-text .features .feature-item span {
            color: #555;
            font-size: 0.85rem;
            font-weight: 600;
            transition: color 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .catering-text .features .feature-item:hover span {
            color: #f20101;
        }

        /* ============================================================
           CTA BUTTON
           ============================================================ */
        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.9rem 2.2rem;
            background: linear-gradient(135deg, #f20101, #f20101);
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            margin-top: 1.8rem;
            box-shadow: 0 10px 30px -8px rgba(204, 59, 59, 0.5);
            position: relative;
            overflow: hidden;
            font-family: inherit;
            letter-spacing: 0.3px;
        }

        .cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.7s ease;
        }

        .cta-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: translateX(-100%);
            transition: transform 0.9s ease;
        }

        .cta-btn:hover::before {
            transform: translateX(0);
        }

        .cta-btn:hover::after {
            transform: translateX(100%);
        }

        .cta-btn:hover {
            background: linear-gradient(135deg, #d94444, #f20101);
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px -10px rgba(204, 59, 59, 0.7), 0 0 40px rgba(204, 59, 59, 0.3);
            letter-spacing: 0.8px;
        }

        .cta-btn:active {
            transform: translateY(-2px) scale(0.98);
        }

        .cta-btn i {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .cta-btn:hover i {
            transform: translateX(8px) rotate(-12deg);
        }

        /* ============================================================
           RIGHT SIDE - IMAGES GRID WITH LINES
           ============================================================ */
        .catering-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.2rem;
            animation: fadeSlideRight 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
            position: relative;
        }

        @keyframes fadeSlideRight {
            0% { opacity: 0; transform: translateX(40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Decorative lines behind images */
        .catering-images::before {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            width: 60px;
            height: 60px;
            border-top: 3px solid #f20101;
            border-left: 3px solid #f20101;
            border-radius: 15px 0 0 0;
            opacity: 0.5;
            animation: cornerPulse 3s ease-in-out infinite;
            z-index: 0;
        }

        .catering-images::after {
            content: '';
            position: absolute;
            bottom: -15px;
            right: -15px;
            width: 60px;
            height: 60px;
            border-bottom: 3px solid #f20101;
            border-right: 3px solid #f20101;
            border-radius: 0 0 15px 0;
            opacity: 0.5;
            animation: cornerPulse 3s ease-in-out infinite 1.5s;
            z-index: 0;
        }

        @keyframes cornerPulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.1); }
        }

        /* ============================================================
           IMAGE WRAPPER WITH RED LINE BORDER
           ============================================================ */
        .catering-images .img-wrapper {
            border-radius: 1.2rem;
            overflow: hidden;
            position: relative;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            aspect-ratio: 1/1;
            background: #f0ece8;
            box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.15);
            z-index: 1;
            animation: imgZoomIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .catering-images .img-wrapper:nth-child(1) { animation-delay: 0.5s; }
        .catering-images .img-wrapper:nth-child(2) { animation-delay: 0.6s; }
        .catering-images .img-wrapper:nth-child(3) { animation-delay: 0.7s; }
        .catering-images .img-wrapper:nth-child(4) { animation-delay: 0.8s; }
        .catering-images .img-wrapper:nth-child(5) { animation-delay: 0.9s; }

        @keyframes imgZoomIn {
            0% { opacity: 0; transform: scale(0.85); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* ============================================================
           RED LINE DECORATION ON IMAGES
           ============================================================ */

        /* Top animated red line */
        .catering-images .img-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #f20101, #ff6b6b);
            z-index: 5;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6);
        }

        /* Bottom animated red line */
        .catering-images .img-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(270deg, #f20101, #ff6b6b);
            z-index: 5;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.6);
        }

        .catering-images .img-wrapper:hover::before {
            width: 100%;
        }

        .catering-images .img-wrapper:hover::after {
            width: 100%;
        }

        /* Inner border overlay (static, animated on hover) */
        .catering-images .img-wrapper .border-frame {
            position: absolute;
            inset: 10px;
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            border-radius: 0.9rem;
            z-index: 4;
            pointer-events: none;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .catering-images .img-wrapper:hover .border-frame {
            inset: 6px;
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.2) inset;
        }

        /* Shine sweep on image */
        .catering-images .img-wrapper .img-shine {
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.9s ease;
            z-index: 3;
            pointer-events: none;
        }

        .catering-images .img-wrapper:hover .img-shine {
            left: 100%;
        }

        /* Image hover state */
        .catering-images .img-wrapper:hover {
            transform: scale(1.05) translateY(-8px);
            box-shadow: 0 30px 60px -15px rgba(204, 59, 59, 0.3), 0 0 0 2px rgba(204, 59, 59, 0.3);
            z-index: 3;
        }

        .catering-images .img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: block;
        }

        .catering-images .img-wrapper:hover img {
            transform: scale(1.12);
        }

        /* ============================================================
           IMAGE OVERLAY WITH LABEL
           ============================================================ */
        .catering-images .img-wrapper .img-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 65%);
            display: flex;
            align-items: flex-end;
            padding: 1.2rem;
            transition: all 0.5s ease;
            z-index: 2;
        }

        .catering-images .img-wrapper:hover .img-overlay {
            background: linear-gradient(0deg, rgba(204, 59, 59, 0.75) 0%, rgba(204, 59, 59, 0.2) 40%, transparent 65%);
        }

        .catering-images .img-wrapper .img-overlay .service-label {
            color: #ffffff;
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.3px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 0.4rem 0.9rem;
            border-radius: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .catering-images .img-wrapper:hover .img-overlay .service-label {
            background: #ffffff;
            color: #f20101;
            border-color: #ffffff;
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.4);
        }

        .catering-images .img-wrapper .img-overlay .service-label i {
            font-size: 0.7rem;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .catering-images .img-wrapper:hover .img-overlay .service-label i {
            transform: scale(1.2) rotate(-12deg);
            color: #f20101;
        }

        /* Glow effect on image */
        .catering-images .img-wrapper .img-glow {
            position: absolute;
            inset: 0;
            border-radius: 1.2rem;
            background: radial-gradient(circle at 50% 50%, rgba(204, 59, 59, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
            z-index: 1;
        }

        .catering-images .img-wrapper:hover .img-glow {
            opacity: 1;
        }

        /* Large image spans 2 columns */
        .catering-images .img-wrapper.large {
            grid-column: 1 / 3;
            aspect-ratio: 2/1;
        }

        /* ============================================================
           FOOTER NOTE
           ============================================================ */
        .footer-note {
            margin-top: 2.5rem;
            text-align: center;
            font-size: 0.7rem;
            color: #bbb;
            position: relative;
            z-index: 1;
            letter-spacing: 0.5px;
            animation: fadeIn 1s ease-out 1.2s both;
        }

        .footer-note i {
            color: #f20101;
            opacity: 0.5;
            animation: starSpin 4s ease-in-out infinite;
        }

        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .catering-section {
                padding: 3rem 2rem 2.5rem;
                border-radius: 0rem;
            }
            .catering-content {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
            .catering-text h2 {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .catering-section {
                padding: 2.5rem 1.5rem 2rem;
                border-radius: 0rem;
            }
            .catering-text h2 {
                font-size: 1.9rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.03 !important;
            }
            .catering-images .img-wrapper.large {
                aspect-ratio: 1.5/1;
            }
        }

        @media (max-width: 600px) {
            .catering-text .features {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            .catering-images {
                grid-template-columns: 1fr 1fr;
                gap: 0.8rem;
            }
            .catering-images .img-wrapper.large {
                grid-column: 1 / 3;
                aspect-ratio: 1.5/1;
            }
        }

        @media (max-width: 480px) {
            .catering-section {
                padding: 2rem 1rem 1.5rem;
                border-radius: 0rem;
            }
            .catering-text h2 {
                font-size: 1.5rem;
            }
            .catering-images {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }
            .catering-images .img-wrapper.large {
                grid-column: 1;
                aspect-ratio: 1.5/1;
            }
            .catering-images .img-wrapper .img-overlay .service-label {
                font-size: 0.7rem;
                padding: 0.3rem 0.7rem;
            }
            .cta-btn {
                width: 100%;
                justify-content: center;
                padding: 0.8rem 1.5rem;
                font-size: 0.85rem;
            }
        }

        /* ============================================================
           WEDDING SERVICES SECTION - Full Image Cards
           ============================================================ */
        .wedding-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 4.5rem;
            position: relative;
            overflow: hidden;
            border: 0px solid rgba(200, 60, 60, 0.04);
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .wedding-section:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.wedding-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.02);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all 0.6s ease;
        }

        .bg-icons .icon-float:hover {
            color: rgba(200, 60, 60, 0.06);
            transform: scale(1.2) rotate(15deg);
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.05; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.03; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .wedding-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

        .wedding-header .brand-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: #fef6f6;
            color: #F20101;
            font-weight: 700;
            font-size: 0.65rem;
            letter-spacing: 1px;
            padding: 0.2rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.4s ease;
        }

        .wedding-header .brand-badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.02) translateY(-2px);
        }

        .wedding-header .brand-badge .heart {
            color: #F20101;
            animation: heartBeat 1.5s ease-in-out infinite;
            display: inline-block;
        }

        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            14% { transform: scale(1.2); }
            28% { transform: scale(1); }
            42% { transform: scale(1.2); }
            70% { transform: scale(1); }
        }

        .wedding-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #1a1a2a;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
        }

        .wedding-header h2 span {
            color: #F20101;
            position: relative;
        }

        .wedding-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .wedding-header .tagline {
            color: #888;
            font-size: 0.95rem;
            margin-top: 0.2rem;
        }

        .wedding-header .tagline strong {
            color: #F20101;
        }

        /* ============================================================
           SERVICES GRID - 3 Columns, 2 Rows
           ============================================================ */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            position: relative;
            z-index: 1;
            margin-bottom: 2.5rem;
        }

        @media (max-width: 992px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
        }

        @media (max-width: 600px) {
            .services-grid {
                grid-template-columns: 1fr;
                gap: 1.2rem;
            }
        }

        /* ============================================================
           SERVICE CARD - Full Image with Dark Overlay
           ============================================================ */
        .service-card {
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative;
            animation: cardAppear 0.7s ease-out both;
            cursor: pointer;
            aspect-ratio: 1/1;
            background: #1a1a2a;
            box-shadow: 0 4px 15px -6px rgba(0, 0, 0, 0.02);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .service-card:nth-child(1) { animation-delay: 0.05s; }
        .service-card:nth-child(2) { animation-delay: 0.1s; }
        .service-card:nth-child(3) { animation-delay: 0.15s; }
        .service-card:nth-child(4) { animation-delay: 0.2s; }
        .service-card:nth-child(5) { animation-delay: 0.25s; }
        .service-card:nth-child(6) { animation-delay: 0.3s; }

        @keyframes cardAppear {
            0% { opacity: 0; transform: translateY(40px) scale(0.95); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .service-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 50px -12px rgba(200, 50, 50, 0.08);
            z-index: 2;
        }

        /* ============================================================
           SERVICE IMAGE
           ============================================================ */
        .service-card .service-image {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .service-card .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: block;
        }

        .service-card:hover .service-image img {
            transform: scale(1.08);
        }

        /* ============================================================
           DARK OVERLAY - Enhanced for Readability
           ============================================================ */
        .service-card .service-image .dark-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 80%, transparent 100%);
            transition: all 0.6s ease;
            z-index: 1;
        }

        .service-card:hover .service-image .dark-overlay {
            background: linear-gradient(0deg, rgba(150, 30, 30, 0.85) 0%, rgba(180, 40, 40, 0.5) 40%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.1) 100%);
        }

        /* ============================================================
           CARD CONTENT
           ============================================================ */
        .service-card .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem 1.5rem 2rem;
            z-index: 2;
            transform: translateY(0);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Step badge */
        .service-card .card-content .step-badge {
            display: inline-block;
            background: #F20101;
            backdrop-filter: blur(8px);
            padding: 0.15rem 0.8rem;
            border-radius: 2rem;
            color: #ffffff;
            font-size: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease;
            margin-bottom: 0.3rem;
        }

        .service-card:hover .card-content .step-badge {
            background: rgba(204, 59, 59, 1);
            transform: scale(1.03);
        }

        /* Icon wrapper */
        .service-card .card-content .icon-wrapper {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.5rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .service-card:hover .card-content .icon-wrapper {
            background: #F20101;
            transform: scale(1.05) rotate(-8deg);
            box-shadow: 0 8px 25px -8px rgba(200, 50, 50, 0.15);
        }

        .service-card .card-content .icon-wrapper i {
            font-size: 1.1rem;
            color: #ffffff;
            transition: all 0.5s ease;
        }

        .service-card:hover .card-content .icon-wrapper i {
            transform: scale(1.1);
        }

        /* Title - Always white with shadow */
        .service-card .card-content h3 {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
            transition: color 0.3s ease;
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
        }

        .service-card:hover .card-content h3 {
            color: #ffffff;
            text-shadow: 0 2px 20px rgba(204, 59, 59, 0.2);
        }

        /* Description - White with better contrast */
        .service-card .card-content p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.85rem;
            line-height: 1.5;
            margin-bottom: 0.8rem;
            transition: all 0.5s ease;
            max-height: 0;
            opacity: 0;
            transform: translateY(10px);
            overflow: hidden;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
        }

        .service-card:hover .card-content p {
            max-height: 120px;
            opacity: 1;
            transform: translateY(0);
        }

        /* Read more link */
        .service-card .card-content .read-more {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.75rem;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            transform: translateX(-10px);
            background: #F20101;
            padding: 0.25rem 1.2rem 0.25rem 0.8rem;
            border-radius: 2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 15px -6px rgba(200, 50, 50, 0.15);
        }

        .service-card:hover .card-content .read-more {
            opacity: 1;
            transform: translateX(0);
        }

        .service-card .card-content .read-more:hover {
            transform: translateX(4px) scale(1.02);
            background: rgba(204, 59, 59, 1);
        }

        .service-card .card-content .read-more i {
            transition: transform 0.4s ease;
        }

        .service-card .card-content .read-more:hover i {
            transform: translateX(4px) rotate(-10deg);
        }

        /* ============================================================
           BOTTOM SECTION
           ============================================================ */
        .wedding-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            padding-top: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .wedding-bottom .cta-text {
            color: #888;
            font-size: 0.9rem;
        }

        .wedding-bottom .cta-text strong {
            color: #F20101;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 2rem;
            background: #F20101;
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.2);
            position: relative;
            overflow: hidden;
        }

        .cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .cta-btn:hover::before {
            transform: translateX(0);
        }

        .cta-btn:hover {
            background: #F20101;
            transform: translateY(-3px);
            box-shadow: 0 12px 32px -8px rgba(200, 50, 50, 0.3);
        }

        .cta-btn i {
            transition: transform 0.4s ease;
        }

        .cta-btn:hover i {
            transform: translateX(4px);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .wedding-section {
                padding: 2.5rem 1.5rem 3rem;
                border-radius: 2rem;
            }
            .wedding-header h2 {
                font-size: 2.2rem;
            }
            .service-card .card-content {
                padding: 1.2rem 1.2rem 1.5rem;
            }
            .service-card .card-content h3 {
                font-size: 1rem;
            }
            .service-card .card-content p {
                font-size: 0.8rem;
            }
        }

        @media (max-width: 768px) {
            .wedding-section {
                padding: 2rem 1.2rem 2.5rem;
                border-radius: 1.8rem;
            }
            .wedding-header h2 {
                font-size: 1.8rem;
            }
            .services-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }
            .service-card .card-content {
                padding: 1rem 1rem 1.2rem;
            }
            .service-card .card-content h3 {
                font-size: 0.9rem;
            }
            .service-card .card-content p {
                font-size: 0.75rem;
            }
            .service-card .card-content .icon-wrapper {
                width: 36px;
                height: 36px;
            }
            .service-card .card-content .icon-wrapper i {
                font-size: 0.9rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .wedding-bottom {
                flex-direction: column;
                text-align: center;
            }
            .cta-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .wedding-section {
                padding: 1.5rem 1rem 2rem;
                border-radius: 1.5rem;
            }
            .wedding-header h2 {
                font-size: 1.5rem;
            }
            .services-grid {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }
            .service-card .card-content {
                padding: 0.8rem 0.8rem 1rem;
            }
            .service-card .card-content h3 {
                font-size: 0.85rem;
            }
            .service-card .card-content p {
                font-size: 0.7rem;
            }
            .service-card .card-content .icon-wrapper {
                width: 32px;
                height: 32px;
            }
            .service-card .card-content .icon-wrapper i {
                font-size: 0.8rem;
            }
            .service-card .card-content .step-badge {
                font-size: 0.4rem;
                padding: 0.1rem 0.5rem;
            }
            .service-card .card-content .read-more {
                font-size: 0.65rem;
                padding: 0.2rem 0.8rem 0.2rem 0.6rem;
            }
        }
         /* ============================================================
           GALLERY SECTION
           ============================================================ */
        .gallery-section {
            max-width: 100%;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 4rem 3.5rem 4.5rem;
            position: relative;
            overflow: hidden;
            border: 0px solid rgba(200, 60, 60, 0.04);
            box-shadow: 0 30px 60px -15px rgba(200, 50, 50, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .gallery-section:hover {
            box-shadow: 0 40px 80px -20px rgba(200, 50, 50, 0.08);
        }

        /* Animated border glow */
        /*.gallery-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 5;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* ============================================================
           BACKGROUND ANIMATIONS
           ============================================================ */
        .bg-icons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bg-icons .icon-float {
            position: absolute;
            font-size: 2.8rem;
            color: rgba(200, 60, 60, 0.02);
            animation: floatIcon 25s infinite ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all 0.6s ease;
        }

        .bg-icons .icon-float:hover {
            color: rgba(200, 60, 60, 0.06);
            transform: scale(1.2) rotate(15deg);
        }

        .bg-icons .icon-float:nth-child(1) { top: 3%; left: 2%; font-size: 4rem; animation-duration: 22s; }
        .bg-icons .icon-float:nth-child(2) { top: 10%; right: 5%; font-size: 3.2rem; animation-duration: 28s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(3) { bottom: 12%; left: 3%; font-size: 4.5rem; animation-duration: 20s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(4) { bottom: 22%; right: 4%; font-size: 3rem; animation-duration: 30s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(5) { top: 38%; left: 1%; font-size: 2.5rem; animation-duration: 26s; animation-delay: 3s; }
        .bg-icons .icon-float:nth-child(6) { top: 52%; right: 2%; font-size: 3.5rem; animation-duration: 24s; animation-delay: 5s; }
        .bg-icons .icon-float:nth-child(7) { top: 72%; left: 6%; font-size: 3rem; animation-duration: 32s; animation-delay: 2s; }
        .bg-icons .icon-float:nth-child(8) { bottom: 6%; right: 8%; font-size: 3.8rem; animation-duration: 27s; animation-delay: 4s; }
        .bg-icons .icon-float:nth-child(9) { top: 22%; left: 22%; font-size: 2.2rem; animation-duration: 29s; animation-delay: 1s; }
        .bg-icons .icon-float:nth-child(10) { top: 62%; right: 20%; font-size: 2.8rem; animation-duration: 23s; animation-delay: 3s; }

        @keyframes floatIcon {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.02; }
            33% { transform: translate(25px, -30px) rotate(10deg) scale(1.08); opacity: 0.05; }
            66% { transform: translate(-20px, 25px) rotate(-6deg) scale(0.92); opacity: 0.03; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .gallery-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

        .gallery-header .brand-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: #fef6f6;
            color: #F20101;
            font-weight: 700;
            font-size: 0.65rem;
            letter-spacing: 1px;
            padding: 0.2rem 1rem;
            border-radius: 40px;
            border: 1px solid rgba(200, 60, 60, 0.06);
            text-transform: uppercase;
            transition: all 0.4s ease;
            animation: badgeGlow 3s ease-in-out infinite;
        }

        @keyframes badgeGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(204, 59, 59, 0); }
            50% { box-shadow: 0 0 20px rgba(204, 59, 59, 0.04); }
        }

        .gallery-header .brand-badge:hover {
            background: #ffffff;
            border-color: rgba(200, 60, 60, 0.12);
            transform: scale(1.02) translateY(-2px);
        }

        .gallery-header .brand-badge .heart {
            color: #F20101;
            animation: heartBeat 1.5s ease-in-out infinite;
            display: inline-block;
        }

        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            14% { transform: scale(1.2); }
            28% { transform: scale(1); }
            42% { transform: scale(1.2); }
            70% { transform: scale(1); }
        }

        .gallery-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #1a1a2a;
            margin-top: 0.5rem;
            letter-spacing: -0.5px;
            animation: fadeSlideDown 0.8s ease-out;
        }

        @keyframes fadeSlideDown {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .gallery-header h2 span {
            color: #F20101;
            position: relative;
        }

        .gallery-header h2 span::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(204, 59, 59, 0.15);
            animation: underlinePulse 2s ease-in-out infinite;
        }

        @keyframes underlinePulse {
            0%, 100% { opacity: 0.2; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.1); }
        }

        .gallery-header .tagline {
            color: #888;
            font-size: 0.95rem;
            margin-top: 0.2rem;
            animation: fadeSlideUp 0.8s ease-out 0.3s both;
        }

        @keyframes fadeSlideUp {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .gallery-header .tagline strong {
            color: #F20101;
        }

        /* ============================================================
           FILTER TABS
           ============================================================ */
        .filter-tabs {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
            animation: fadeSlideUp 0.8s ease-out 0.2s both;
        }

        .filter-tab {
            padding: 0.4rem 1.5rem;
            border-radius: 60px;
            border: 1px solid #eee;
            background: #fafafc;
            color: #888;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .filter-tab::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.04), transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .filter-tab:hover::before {
            opacity: 1;
        }

        .filter-tab:hover {
            border-color: rgba(200, 60, 60, 0.12);
            color: #1a1a2a;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 4px 15px -6px rgba(200, 50, 50, 0.04);
        }

        .filter-tab.active {
            background: #F20101;
            color: #ffffff;
            border-color: #F20101;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.2);
            transform: translateY(-2px);
        }

        .filter-tab.active::before {
            opacity: 0;
        }

        .filter-tab i {
            margin-right: 4px;
            transition: transform 0.4s ease;
        }

        .filter-tab:hover i {
            transform: rotate(-10deg) scale(1.1);
        }

        /* ============================================================
           GALLERY GRID
           ============================================================ */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            position: relative;
            z-index: 1;
        }

        @media (max-width: 992px) {
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        }

        @media (max-width: 480px) {
            .gallery-grid {
                grid-template-columns: 1fr 1fr;
                gap: 0.8rem;
            }
        }

        /* ============================================================
           GALLERY ITEM
           ============================================================ */
        .gallery-item {
            border-radius: 1.2rem;
            overflow: hidden;
            position: relative;
            animation: itemAppear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            cursor: pointer;
            aspect-ratio: 1/1;
            background: #f0ece8;
            box-shadow: 0 4px 15px -6px rgba(0, 0, 0, 0.02);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-style: preserve-3d;
            perspective: 800px;
        }

        .gallery-item:nth-child(1) { animation-delay: 0.05s; }
        .gallery-item:nth-child(2) { animation-delay: 0.1s; }
        .gallery-item:nth-child(3) { animation-delay: 0.15s; }
        .gallery-item:nth-child(4) { animation-delay: 0.2s; }
        .gallery-item:nth-child(5) { animation-delay: 0.05s; }
        .gallery-item:nth-child(6) { animation-delay: 0.1s; }
        .gallery-item:nth-child(7) { animation-delay: 0.15s; }
        .gallery-item:nth-child(8) { animation-delay: 0.2s; }

        @keyframes itemAppear {
            0% { opacity: 0; transform: scale(0.9) rotate(-3deg) translateY(20px); }
            100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
        }

        .gallery-item:hover {
            transform: translateY(-10px) scale(1.02) rotateY(2deg);
            box-shadow: 0 25px 55px -12px rgba(200, 50, 50, 0.1);
            z-index: 2;
        }

        /* Glow effect on hover */
        .gallery-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1.2rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.02), transparent 60%);
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 1;
            pointer-events: none;
        }

        .gallery-item:hover::before {
            opacity: 1;
        }

        /* Corner shine */
        .gallery-item::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(204, 59, 59, 0.03), transparent 60%);
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 1;
            pointer-events: none;
        }

        .gallery-item:hover::after {
            opacity: 1;
        }

        /* Different sizes for masonry effect */
        .gallery-item.tall {
            grid-row: span 2;
            aspect-ratio: auto;
            min-height: 300px;
        }

        .gallery-item.wide {
            grid-column: span 2;
            aspect-ratio: auto;
            min-height: 200px;
        }

        @media (max-width: 768px) {
            .gallery-item.tall {
                grid-row: span 1;
                min-height: auto;
                aspect-ratio: 1/1;
            }
            .gallery-item.wide {
                grid-column: span 1;
                min-height: auto;
                aspect-ratio: 1/1;
            }
        }

        /* ============================================================
           GALLERY IMAGE
           ============================================================ */
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s ease;
            display: block;
        }

        .gallery-item:hover img {
            transform: scale(1.08);
            filter: brightness(1.05);
        }

        /* ============================================================
           OVERLAY
           ============================================================ */
        .gallery-item .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 70%);
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.2rem;
            z-index: 2;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .gallery-item .overlay .event-tag {
            display: inline-block;
            background: #F20101;
            padding: 0.1rem 0.7rem;
            border-radius: 2rem;
            color: #ffffff;
            font-size: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            backdrop-filter: blur(4px);
            margin-bottom: 0.3rem;
            align-self: flex-start;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform: translateY(10px);
            opacity: 0;
        }

        .gallery-item:hover .overlay .event-tag {
            opacity: 1;
            transform: translateY(0);
            background: rgba(204, 59, 59, 1);
        }

        .gallery-item .overlay .event-title {
            color: #ffffff;
            font-size: 0.9rem;
            font-weight: 600;
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform: translateY(12px);
            opacity: 0;
        }

        .gallery-item:hover .overlay .event-title {
            transform: translateY(0);
            opacity: 1;
        }

        .gallery-item .overlay .event-type {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform: translateY(12px);
            opacity: 0;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
        }

        .gallery-item:hover .overlay .event-type {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.1s;
        }

        /* ============================================================
           VIEW ALL BUTTON
           ============================================================ */
        .gallery-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            padding-top: 1.5rem;
            position: relative;
            z-index: 1;
            margin-top: 2.5rem;
            animation: fadeSlideUp 0.8s ease-out 0.3s both;
        }

        .gallery-bottom .cta-text {
            color: #888;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .gallery-bottom .cta-text:hover {
            color: #1a1a2a;
        }

        .gallery-bottom .cta-text strong {
            color: #F20101;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 2rem;
            background: #F20101;
            color: #ffffff;
            border: none;
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            box-shadow: 0 8px 24px -6px rgba(200, 50, 50, 0.2);
            position: relative;
            overflow: hidden;
        }

        .cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .cta-btn:hover::before {
            transform: translateX(0);
        }

        .cta-btn:hover {
            background: #F20101;
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 15px 40px -8px rgba(200, 50, 50, 0.35);
        }

        .cta-btn:active {
            transform: scale(0.97);
        }

        .cta-btn i {
            transition: transform 0.4s ease;
        }

        .cta-btn:hover i {
            transform: translateX(6px) rotate(-8deg);
        }

        /* ============================================================
           LIGHTBOX
           ============================================================ */
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(12px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            animation: fadeIn 0.4s ease-out;
        }

        .lightbox.active {
            display: flex;
        }

        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .lightbox-content {
            max-width: 800px;
            max-height: 85vh;
            width: 100%;
            position: relative;
            animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes scaleIn {
            0% { transform: scale(0.8) translateY(30px) rotate(-2deg); opacity: 0; }
            100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
        }

        .lightbox-content img {
            width: 100%;
            height: 100%;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 1.2rem;
            box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
            animation: imageReveal 0.6s ease-out;
        }

        @keyframes imageReveal {
            0% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }

        .lightbox-content .lightbox-close {
            position: absolute;
            top: -1rem;
            right: -1rem;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #F20101;
            border: none;
            color: #ffffff;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px -6px rgba(200, 50, 50, 0.2);
        }

        .lightbox-content .lightbox-close:hover {
            transform: scale(1.1) rotate(90deg);
            background: rgba(204, 59, 59, 1);
        }

        .lightbox-content .lightbox-info {
            position: absolute;
            bottom: -3.5rem;
            left: 0;
            right: 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.85rem;
            animation: fadeSlideUp 0.6s ease-out 0.3s both;
        }

        .lightbox-content .lightbox-info strong {
            color: #ffffff;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .gallery-section {
                padding: 2.5rem 1.5rem 3rem;
                border-radius: 2rem;
            }
            .gallery-header h2 {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .gallery-section {
                padding: 2rem 1.2rem 2.5rem;
                border-radius: 1.8rem;
            }
            .gallery-header h2 {
                font-size: 1.8rem;
            }
            .filter-tab {
                padding: 0.3rem 1rem;
                font-size: 0.7rem;
            }
            .bg-icons .icon-float {
                font-size: 2rem !important;
                opacity: 0.02 !important;
            }
            .gallery-bottom {
                flex-direction: column;
                text-align: center;
            }
            .cta-btn {
                width: 100%;
                justify-content: center;
            }
            .lightbox-content .lightbox-close {
                top: 0.5rem;
                right: 0.5rem;
                width: 36px;
                height: 36px;
                font-size: 1rem;
            }
            .lightbox-content .lightbox-info {
                bottom: -2.5rem;
                font-size: 0.75rem;
            }
        }

        @media (max-width: 480px) {
            .gallery-section {
                padding: 1.5rem 1rem 2rem;
                border-radius: 1.5rem;
            }
            .gallery-header h2 {
                font-size: 1.5rem;
            }
            .gallery-grid {
                gap: 0.6rem;
            }
            .filter-tab {
                padding: 0.2rem 0.8rem;
                font-size: 0.6rem;
            }
            .gallery-item .overlay .event-title {
                font-size: 0.75rem;
            }
            .gallery-item .overlay .event-type {
                font-size: 0.6rem;
            }
            .gallery-item .overlay .event-tag {
                font-size: 0.4rem;
                padding: 0.05rem 0.5rem;
            }
            .gallery-item .overlay {
                padding: 0.6rem;
            }
        }
        
        
        /* ============================================================
           WHY US SECTION
           ============================================================ */
        .why-us-section {
            max-width: 1600px;
            width: 100%;
            background: #ffffff;
            border-radius: 0rem;
            padding: 3rem 2.5rem 3.5rem;
            position: relative;
            overflow: hidden;
            /*box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(204, 59, 59, 0.06);
            border: 1px solid rgba(204, 59, 59, 0.08);*/
        }

        /* Animated top border */
        /*.why-us-section::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -100%;
            width: 300%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: borderSlide 6s linear infinite;
            z-index: 10;
        }*/

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Decorative floating shapes */
        .why-us-section .shape {
            position: absolute;
            color: rgba(204, 59, 59, 0.08);
            animation: shapeFloat 12s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        .why-us-section .shape.pepper-left {
            top: 15%;
            left: 3%;
            font-size: 5rem;
            animation-delay: 0s;
            transform: rotate(-25deg);
        }

        .why-us-section .shape.salt-right {
            top: 8%;
            right: 5%;
            font-size: 4.5rem;
            animation-delay: 3s;
            transform: rotate(20deg);
        }

        .why-us-section .shape.spoon-bottom {
            bottom: 8%;
            left: 5%;
            font-size: 3.5rem;
            animation-delay: 6s;
            transform: rotate(45deg);
        }

        .why-us-section .shape.fork-bottom {
            bottom: 12%;
            right: 4%;
            font-size: 4rem;
            animation-delay: 4.5s;
            transform: rotate(-30deg);
        }

        @keyframes shapeFloat {
            0%, 100% {
                transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
                opacity: 0.08;
            }
            50% {
                transform: translateY(-20px) rotate(calc(var(--rot, 0deg) + 15deg)) scale(1.1);
                opacity: 0.15;
            }
        }

        /* Red radial glow accents */
        .why-us-section .glow-blob {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(204, 59, 59, 0.08), transparent 70%);
            pointer-events: none;
            z-index: 0;
            animation: blobPulse 8s ease-in-out infinite;
        }

        .why-us-section .glow-blob.blob-1 {
            top: -100px;
            left: -100px;
            width: 400px;
            height: 400px;
        }

        .why-us-section .glow-blob.blob-2 {
            bottom: -150px;
            right: -150px;
            width: 500px;
            height: 500px;
            animation-delay: 4s;
        }

        @keyframes blobPulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.15); opacity: 1; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .why-us-header {
            text-align: center;
            position: relative;
            z-index: 2;
            margin-bottom: 3rem;
            animation: headerFade 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        }

        @keyframes headerFade {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .why-us-header .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.12), rgba(255, 107, 107, 0.06));
            color: #F20101;
            font-weight: 700;
            font-size: 0.72rem;
            letter-spacing: 2px;
            padding: 0.45rem 1.3rem;
            border-radius: 40px;
            border: 1px solid rgba(204, 59, 59, 0.25);
            text-transform: uppercase;
            margin-bottom: 1rem;
            animation: badgeEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
                       badgeFloat 4s ease-in-out infinite 1.2s;
            box-shadow: 0 4px 20px -4px rgba(204, 59, 59, 0.2);
        }

        @keyframes badgeEntry {
            0% { opacity: 0; transform: translateY(-15px) scale(0.8); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .why-us-header .badge i {
            color: #F20101;
            animation: starSpin 3s ease-in-out infinite;
            font-size: 0.75rem;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.3); }
        }

        .why-us-header h2 {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-size: 2.6rem;
            font-weight: 800;
            color: #1a1a1a;
            letter-spacing: -0.5px;
            margin-bottom: 1rem;
            line-height: 1.2;
            animation: titleReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
        }

        @keyframes titleReveal {
            0% { opacity: 0; transform: translateY(20px); filter: blur(6px); }
            100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        .why-us-header h2 .highlight {
            color: #F20101;
            position: relative;
            display: inline-block;
        }

        .why-us-header h2 .highlight::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #F20101, #ff6b6b, #F20101);
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
            border-radius: 2px;
        }

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

        .why-us-header p {
            font-size: 1rem;
            color: #666666;
            line-height: 1.7;
            max-width: 720px;
            margin: 0 auto;
            animation: titleReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
        }

        /* ============================================================
           CARDS GRID
           ============================================================ */
        .why-us-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
        }

        .why-us-grid .card-row-2 {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.8rem;
            max-width: 850px;
            margin: 0 auto;
            width: 100%;
            margin-top: 0.2rem;
        }

        /* ============================================================
           CARD - Rich Design with Animations
           ============================================================ */
        .why-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-radius: 1.5rem;
            padding: 2rem 1.6rem;
            border: 1.5px solid rgba(204, 59, 59, 0.08);
            box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(204, 59, 59, 0.02) inset;
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: center;
            animation: cardEntry 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .why-card:nth-child(1) { animation-delay: 0.5s; }
        .why-card:nth-child(2) { animation-delay: 0.65s; }
        .why-card:nth-child(3) { animation-delay: 0.8s; }

        @keyframes cardEntry {
            0% { opacity: 0; transform: translateY(40px) scale(0.95); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Animated top border (red line) */
        .why-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            animation: cardBorderSlide 4s linear infinite;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .why-card:hover::before {
            opacity: 1;
        }

        @keyframes cardBorderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(200%); }
        }

        /* Radial red glow on hover */
        .why-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) scale(0);
            width: 150%;
            height: 100%;
            background: radial-gradient(ellipse at 50% 0%, rgba(204, 59, 59, 0.12), transparent 60%);
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            z-index: 0;
        }

        .why-card:hover::after {
            transform: translateX(-50%) scale(1);
        }

        .why-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: rgba(204, 59, 59, 0.25);
            box-shadow: 0 35px 80px -25px rgba(204, 59, 59, 0.25), 0 0 0 1px rgba(204, 59, 59, 0.1) inset;
            background: rgba(255, 255, 255, 0.9);
        }

        /* Icon wrapper */
        .why-card .icon-wrapper {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.2rem;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.1), rgba(255, 107, 107, 0.05));
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(204, 59, 59, 0.15);
        }

        /* Pulsing ring around icon */
        .why-card .icon-wrapper::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid rgba(204, 59, 59, 0.15);
            animation: ringPulse 3s ease-in-out infinite;
            opacity: 0.6;
        }

        @keyframes ringPulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.4;
                border-color: rgba(204, 59, 59, 0.15);
            }
            50% {
                transform: scale(1.15);
                opacity: 0.8;
                border-color: rgba(204, 59, 59, 0.35);
            }
        }

        .why-card:hover .icon-wrapper {
            transform: scale(1.1) rotate(-5deg);
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.18), rgba(255, 107, 107, 0.1));
            box-shadow: 0 10px 30px -10px rgba(204, 59, 59, 0.4);
        }

        .why-card .icon-wrapper i {
            font-size: 2rem;
            color: #F20101;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: drop-shadow(0 2px 6px rgba(204, 59, 59, 0.2));
            position: relative;
            z-index: 1;
        }

        .why-card:hover .icon-wrapper i {
            transform: rotate(360deg) scale(1.15);
            color: #ff4444;
            filter: drop-shadow(0 4px 15px rgba(255, 68, 68, 0.5));
        }

        /* Card title */
        .why-card h3 {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 0.9rem;
            letter-spacing: -0.3px;
            position: relative;
            z-index: 1;
            transition: color 0.4s ease;
        }

        .why-card:hover h3 {
            color: #F20101;
        }

        /* Card text */
        .why-card p {
            font-size: 0.88rem;
            color: #777777;
            line-height: 1.7;
            position: relative;
            z-index: 1;
            transition: color 0.4s ease;
        }

        .why-card:hover p {
            color: #555555;
        }

        /* Decorative corner accent */
        .why-card .corner-accent {
            position: absolute;
            top: 0;
            right: 0;
            width: 60px;
            height: 60px;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .why-card .corner-accent::before {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.15), rgba(255, 107, 107, 0.05));
            transform: rotate(45deg);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .why-card:hover .corner-accent::before {
            top: -25px;
            right: -25px;
            background: linear-gradient(135deg, rgba(204, 59, 59, 0.3), rgba(255, 107, 107, 0.1));
        }

        /* Bottom line animation */
        .why-card .bottom-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #F20101, #ff6b6b, #F20101, transparent);
            border-radius: 3px 3px 0 0;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 15px rgba(204, 59, 59, 0.5);
        }

        .why-card:hover .bottom-line {
            width: 80%;
        }

        /* ============================================================
           ROW 2 CARDS (2 cards centered)
           ============================================================ */
        .why-us-grid .card-row-2 .why-card {
            animation: cardEntry 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .why-us-grid .card-row-2 .why-card:nth-child(1) { animation-delay: 0.95s; }
        .why-us-grid .card-row-2 .why-card:nth-child(2) { animation-delay: 1.1s; }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1024px) {
            .why-us-section { padding: 2.5rem 1.8rem 3rem; border-radius: 0rem; }
            .why-us-header h2 { font-size: 2.2rem; }
            .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
            .why-us-grid .card-row-2 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
            .why-us-section .shape { font-size: 3rem !important; }
        }

        @media (max-width: 768px) {
            .why-us-section { padding: 2rem 1.2rem 2.5rem; border-radius: 0rem; }
            .why-us-header h2 { font-size: 1.7rem; }
            .why-us-header p { font-size: 0.88rem; }
            .why-us-grid { grid-template-columns: 1fr; gap: 1.2rem; }
            .why-us-grid .card-row-2 { grid-template-columns: 1fr; }
            .why-card { padding: 1.6rem 1.3rem; }
            .why-card .icon-wrapper { width: 68px; height: 68px; }
            .why-card .icon-wrapper i { font-size: 1.7rem; }
            .why-card h3 { font-size: 1.15rem; }
            .why-card p { font-size: 0.82rem; }
            .why-us-section .shape { display: none; }
        }

        @media (max-width: 480px) {
            body { padding: 0rem; }
            .why-us-section { padding: 1.5rem 1rem 2rem; border-radius: 0rem; }
            .why-us-header h2 { font-size: 1.35rem; }
            .why-us-header .badge { font-size: 0.62rem; padding: 0.35rem 0.9rem; letter-spacing: 1.5px; }
            .why-us-header p { font-size: 0.78rem; }
            .why-card { padding: 1.4rem 1rem; border-radius: 1.2rem; }
            .why-card .icon-wrapper { width: 60px; height: 60px; margin-bottom: 1rem; }
            .why-card .icon-wrapper i { font-size: 1.5rem; }
            .why-card h3 { font-size: 1rem; }
            .why-card p { font-size: 0.78rem; }
        }
        
        
        /* ============================================================
           SECTION CONTAINER — PURE WHITE BACKGROUND
           ============================================================ */
        .baat-pakki-section {
            max-width: 1600px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            background: #ffffff;
            border-radius: 0rem;
            overflow: hidden;
            padding: 5rem 3rem;
        }

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Very subtle dot pattern on white */
        .bp-bg-dots {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(192, 57, 43, 0.04) 1px, transparent 1px);
            background-size: 30px 30px;
            pointer-events: none;
            z-index: 0;
        }

        /* Decorative Floating Icons — very subtle */
        .bp-deco-icon {
            position: absolute;
            color: rgba(192, 57, 43, 0.04);
            animation: decoFloat 24s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .bp-deco-icon.d1 { top: 8%; left: 4%; font-size: 5rem; animation-duration: 22s; }
        .bp-deco-icon.d2 { bottom: 12%; right: 5%; font-size: 6rem; animation-duration: 26s; animation-delay: 2s; }
        .bp-deco-icon.d3 { top: 55%; right: 3%; font-size: 4rem; animation-duration: 30s; animation-delay: 4s; }
        .bp-deco-icon.d4 { bottom: 8%; left: 6%; font-size: 4.5rem; animation-duration: 24s; animation-delay: 1s; }

        @keyframes decoFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
            33% { transform: translate(25px, -30px) rotate(10deg); opacity: 0.7; }
            66% { transform: translate(-20px, 25px) rotate(-6deg); opacity: 0.5; }
        }

        /* ============================================================
           CORNER ORNAMENTS — RED, VERY SUBTLE
           ============================================================ */
        .bp-corner {
            position: absolute;
            width: 70px;
            height: 70px;
            border: 2px solid #F20101;
            opacity: 0.15;
            pointer-events: none;
            z-index: 1;
        }

        .bp-corner.tl {
            top: 1.5rem;
            left: 1.5rem;
            border-right: none;
            border-bottom: none;
            border-radius: 18px 0 0 0;
        }

        .bp-corner.tr {
            top: 1.5rem;
            right: 1.5rem;
            border-left: none;
            border-bottom: none;
            border-radius: 0 18px 0 0;
        }

        .bp-corner.bl {
            bottom: 1.5rem;
            left: 1.5rem;
            border-right: none;
            border-top: none;
            border-radius: 0 0 0 18px;
        }

        .bp-corner.br {
            bottom: 1.5rem;
            right: 1.5rem;
            border-left: none;
            border-top: none;
            border-radius: 0 0 18px 0;
        }

        /* ============================================================
           CONTENT WRAPPER
           ============================================================ */
        .bp-content {
            position: relative;
            z-index: 2;
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        /* ============================================================
           BADGE — RED
           ============================================================ */
        .bp-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: #ffffff;
            color: #F20101;
            font-weight: 700;
            font-size: 0.7rem;
            letter-spacing: 3.5px;
            padding: 0.55rem 1.6rem;
            border-radius: 40px;
            border: 1.5px solid rgba(192, 57, 43, 0.3);
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
            animation: badgeEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,
                       badgeFloat 4s ease-in-out infinite 1s;
            box-shadow: 0 6px 25px -6px rgba(192, 57, 43, 0.2);
        }

        @keyframes badgeEntry {
            0% { opacity: 0; transform: translateY(-15px) scale(0.8); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .bp-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(192, 57, 43, 0.06), transparent);
            animation: badgeShine 4s ease-in-out infinite;
        }

        @keyframes badgeShine {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        .bp-badge i {
            color: #F20101;
            animation: starSpin 4s ease-in-out infinite;
            font-size: 0.7rem;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.2); }
        }

        /* ============================================================
           HEADING — BLACK WITH RED ACCENT
           ============================================================ */
        .bp-heading {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            font-weight: 800;
            color: #000;
            letter-spacing: -1.2px;
            line-height: 1.15;
            margin-bottom: 1.2rem;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
            position: relative;
            z-index: 2;
        }

        @keyframes titleEntry {
            0% { opacity: 0; transform: translateY(25px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .bp-heading span {
            color: #F20101;
            position: relative;
            display: inline-block;
            font-style: italic;
        }

        .bp-heading span::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: -5px;
            right: -5px;
            height: 14px;
            background: linear-gradient(90deg, rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.04));
            border-radius: 8px;
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
        }

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

        /* Divider */
        .bp-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 1.5rem auto 2rem;
            max-width: 320px;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
        }

        .bp-divider .line {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F20101, transparent);
            border-radius: 2px;
        }

        .bp-divider i {
            color: #F20101;
            font-size: 0.9rem;
            animation: starSpin 6s ease-in-out infinite;
        }

        /* ============================================================
           PARAGRAPHS — DARK GRAY WITH RED HIGHLIGHTS
           ============================================================ */
        .bp-paragraph {
            font-size: 1.05rem;
            color: var(--gray);
            line-height: 1.85;
            margin-bottom: 1.6rem;
            animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
            position: relative;
            z-index: 2;
            text-align: left;
            padding: 0 1rem;
        }

        .bp-paragraph:nth-of-type(2) {
            animation-delay: 0.65s;
        }

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

        .bp-paragraph .highlight {
            color: #F20101;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }

        .bp-paragraph .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, #F20101, transparent);
            transform: scaleX(0);
            transform-origin: left;
            animation: highlightGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
        }

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

        /* ============================================================
           FEATURE PILLS — RED ACCENTS
           ============================================================ */
        .bp-features {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin: 2rem 0 2.5rem;
            position: relative;
            z-index: 2;
        }

        .bp-feature {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: #ffffff;
            border: 1.5px solid rgba(192, 57, 43, 0.2);
            padding: 0.65rem 1.3rem;
            border-radius: 60px;
            font-size: 0.78rem;
            font-weight: 600;
            color: #000;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: fadeUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.04);
            position: relative;
            overflow: hidden;
        }

        .bp-feature:nth-child(1) { animation-delay: 0.7s; }
        .bp-feature:nth-child(2) { animation-delay: 0.8s; }
        .bp-feature:nth-child(3) { animation-delay: 0.9s; }

        .bp-feature::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(192, 57, 43, 0.05), transparent 60%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .bp-feature:hover::before {
            transform: scaleX(1);
        }

        .bp-feature:hover {
            border-color: #F20101;
            transform: translateY(-4px);
            box-shadow: 0 14px 30px -8px rgba(192, 57, 43, 0.2);
        }

        .bp-feature i {
            color: #F20101;
            font-size: 0.8rem;
            transition: transform 0.4s ease;
            position: relative;
            z-index: 1;
        }

        .bp-feature span {
            position: relative;
            z-index: 1;
        }

        .bp-feature:hover i {
            transform: rotate(-15deg) scale(1.2);
        }

        /* ============================================================
           CTA BUTTON — RED WITH BLACK HOVER
           ============================================================ */
        .bp-cta-wrapper {
            display: flex;
            justify-content: center;
            animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
            position: relative;
            z-index: 2;
        }

        .bp-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: linear-gradient(135deg, #F20101, #F20101);
            color: #ffffff;
            padding: 1.1rem 2.8rem;
            border-radius: 60px;
            font-size: 0.95rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 12px 35px -8px rgba(192, 57, 43, 0.45);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.5px;
            border: 2px solid #F20101;
            cursor: pointer;
            font-family: inherit;
        }

        .bp-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.7s ease;
        }

        .bp-cta:hover::before {
            transform: translateX(0);
        }

        .bp-cta::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .bp-cta:hover::after {
            width: 400px;
            height: 400px;
        }

        .bp-cta:hover {
            background: linear-gradient(135deg, #000, #000);
            border-color: #000;
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 22px 55px -12px rgba(0, 0, 0, 0.4);
        }

        .bp-cta i {
            position: relative;
            z-index: 2;
            font-size: 1rem;
            transition: transform 0.4s ease;
        }

        .bp-cta span {
            position: relative;
            z-index: 2;
        }

        .bp-cta:hover i {
            transform: rotate(-15deg) scale(1.15);
        }

        /* Pulsing ring around CTA */
        .bp-cta-wrapper::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 260px;
            height: 80px;
            border-radius: 60px;
            border: 2px solid rgba(192, 57, 43, 0.2);
            animation: pulseRing 3s ease-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes pulseRing {
            0% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1024px) {
            .baat-pakki-section { padding: 4rem 2rem; }
            .bp-heading { font-size: 2.4rem; }
            .bp-paragraph { font-size: 1rem; }
        }

        @media (max-width: 768px) {
            .baat-pakki-section { padding: 3rem 1.5rem; border-radius: 1.8rem; }
            .bp-heading { font-size: 2rem; }
            .bp-paragraph { font-size: 0.95rem; padding: 0 0.5rem; }
            .bp-features { gap: 0.6rem; }
            .bp-feature { padding: 0.5rem 1rem; font-size: 0.72rem; }
            .bp-cta { padding: 0.95rem 2.2rem; font-size: 0.88rem; }
            .bp-corner { width: 50px; height: 50px; }
            .bp-deco-icon.d1, .bp-deco-icon.d2, .bp-deco-icon.d3, .bp-deco-icon.d4 { display: none; }
        }

        @media (max-width: 480px) {
            .baat-pakki-section { padding: 2.5rem 1rem; border-radius: 1.4rem; }
            .bp-heading { font-size: 1.7rem; }
            .bp-badge { font-size: 0.6rem; padding: 0.45rem 1.1rem; letter-spacing: 2px; }
            .bp-paragraph { font-size: 0.9rem; line-height: 1.75; }
            .bp-cta { padding: 0.85rem 1.8rem; font-size: 0.82rem; }
            .bp-corner { display: none; }
            .bp-features { flex-direction: column; align-items: center; }
        }
        

        :root {
            --red: #f20101;
            --red-dark: #f20101;
            --red-light: #f20101;
            --black: #0f0f0f;
            --black-2: #1a1a1a;
            --gray: #666666;
            --gray-light: #999999;
            --white: #ffffff;
        }
        /* ============================================================
           TEAM BUILDING SECTION — PURE WHITE BACKGROUND
           ============================================================ */
        .team-section {
            max-width: 1600px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            background: var(--white);
            border-radius: 0rem;
            overflow: hidden;
            padding: 5rem 3rem;
        }

        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Very subtle dot pattern on white */
        .ts-bg-dots {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(192, 57, 43, 0.04) 1px, transparent 1px);
            background-size: 30px 30px;
            pointer-events: none;
            z-index: 0;
        }

        /* Decorative Floating Icons — very subtle */
        .ts-deco-icon {
            position: absolute;
            color: rgba(192, 57, 43, 0.04);
            animation: decoFloat 24s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .ts-deco-icon.d1 { top: 8%; left: 4%; font-size: 5rem; animation-duration: 22s; }
        .ts-deco-icon.d2 { bottom: 12%; right: 5%; font-size: 6rem; animation-duration: 26s; animation-delay: 2s; }
        .ts-deco-icon.d3 { top: 55%; right: 3%; font-size: 4rem; animation-duration: 30s; animation-delay: 4s; }
        .ts-deco-icon.d4 { bottom: 8%; left: 6%; font-size: 4.5rem; animation-duration: 24s; animation-delay: 1s; }

        @keyframes decoFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
            33% { transform: translate(25px, -30px) rotate(10deg); opacity: 0.7; }
            66% { transform: translate(-20px, 25px) rotate(-6deg); opacity: 0.5; }
        }

        /* ============================================================
           CORNER ORNAMENTS — RED, VERY SUBTLE
           ============================================================ */
        .ts-corner {
            position: absolute;
            width: 70px;
            height: 70px;
            border: 2px solid var(--red);
            opacity: 0.15;
            pointer-events: none;
            z-index: 1;
        }

        .ts-corner.tl {
            top: 1.5rem;
            left: 1.5rem;
            border-right: none;
            border-bottom: none;
            border-radius: 18px 0 0 0;
        }

        .ts-corner.tr {
            top: 1.5rem;
            right: 1.5rem;
            border-left: none;
            border-bottom: none;
            border-radius: 0 18px 0 0;
        }

        .ts-corner.bl {
            bottom: 1.5rem;
            left: 1.5rem;
            border-right: none;
            border-top: none;
            border-radius: 0 0 0 18px;
        }

        .ts-corner.br {
            bottom: 1.5rem;
            right: 1.5rem;
            border-left: none;
            border-top: none;
            border-radius: 0 0 18px 0;
        }

        /* ============================================================
           CONTENT WRAPPER
           ============================================================ */
        .ts-content {
            position: relative;
            z-index: 2;
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        /* ============================================================
           EYEBROW TEXT — RED
           ============================================================ */
        .ts-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            color: var(--red);
            font-weight: 700;
            font-size: 0.75rem;
            letter-spacing: 3.5px;
            padding: 0.4rem 0;
            text-transform: uppercase;
            margin-bottom: 1rem;
            position: relative;
            animation: eyebrowEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        }

        @keyframes eyebrowEntry {
            0% { opacity: 0; transform: translateY(-15px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .ts-eyebrow .eyebrow-line {
            width: 35px;
            height: 2px;
            background: var(--red);
            border-radius: 2px;
            animation: lineGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
            transform-origin: left;
        }

        .ts-eyebrow .eyebrow-line.right {
            transform-origin: right;
        }

        @keyframes lineGrow {
            0% { transform: scaleX(0); }
            100% { transform: scaleX(1); }
        }

        .ts-eyebrow i {
            font-size: 0.55rem;
            animation: starSpin 4s ease-in-out infinite;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.3); }
        }

        /* ============================================================
           HEADING — BLACK WITH RED ACCENT
           ============================================================ */
        .ts-heading {
            font-family: 'Playfair Display', serif;
            font-size: 2.7rem;
            font-weight: 800;
            color: var(--black);
            letter-spacing: -1.2px;
            line-height: 1.15;
            margin-bottom: 1.2rem;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
            position: relative;
            z-index: 2;
        }

        @keyframes titleEntry {
            0% { opacity: 0; transform: translateY(25px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .ts-heading span {
            color: var(--red);
            position: relative;
            display: inline-block;
            font-style: italic;
        }

        .ts-heading span::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: -5px;
            right: -5px;
            height: 14px;
            background: linear-gradient(90deg, rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.04));
            border-radius: 8px;
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
        }

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

        /* Divider */
        .ts-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 1.5rem auto 2rem;
            max-width: 320px;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
        }

        .ts-divider .line {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--red), transparent);
            border-radius: 2px;
        }

        .ts-divider i {
            color: var(--red);
            font-size: 0.9rem;
            animation: starSpin 6s ease-in-out infinite;
        }

        /* ============================================================
           PARAGRAPH — DARK GRAY WITH RED HIGHLIGHTS
           ============================================================ */
        .ts-paragraph {
            font-size: 1.05rem;
            color: var(--gray);
            line-height: 1.85;
            margin-bottom: 1.6rem;
            animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0 1rem;
        }

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

        .ts-paragraph .highlight {
            color: var(--red);
            font-weight: 700;
            position: relative;
            display: inline-block;
        }

        .ts-paragraph .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--red), transparent);
            transform: scaleX(0);
            transform-origin: left;
            animation: highlightGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
        }

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

        /* ============================================================
           IMAGE GALLERY
           ============================================================ */
        .ts-gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.2rem;
            margin-top: 3.5rem;
            position: relative;
            z-index: 2;
        }

        .ts-gallery-item {
            position: relative;
            aspect-ratio: 1 / 1;
            border-radius: 1.4rem;
            overflow: hidden;
            background: #f5f5f5;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: galleryEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            cursor: pointer;
            box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.08);
            border: 1.5px solid rgba(192, 57, 43, 0.08);
        }

        /* Staggered animation delays */
        .ts-gallery-item:nth-child(1) { animation-delay: 0.7s; }
        .ts-gallery-item:nth-child(2) { animation-delay: 0.8s; }
        .ts-gallery-item:nth-child(3) { animation-delay: 0.9s; }
        .ts-gallery-item:nth-child(4) { animation-delay: 1s; }
        .ts-gallery-item:nth-child(5) { animation-delay: 1.1s; }
        .ts-gallery-item:nth-child(6) { animation-delay: 1.2s; }
        .ts-gallery-item:nth-child(7) { animation-delay: 1.3s; }
        .ts-gallery-item:nth-child(8) { animation-delay: 1.4s; }

        @keyframes galleryEntry {
            0% { opacity: 0; transform: translateY(30px) scale(0.9); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .ts-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .ts-gallery-item:hover img {
            transform: scale(1.15);
        }

        /* Overlay on hover */
        .ts-gallery-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(15, 15, 15, 0.85) 100%);
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 1;
        }

        .ts-gallery-item:hover::before {
            opacity: 1;
        }

        /* Shine sweep */
        .ts-gallery-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
            transform: rotate(15deg);
            transition: left 0.9s ease;
            z-index: 2;
            pointer-events: none;
        }

        .ts-gallery-item:hover::after {
            left: 100%;
        }

        .ts-gallery-item:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px -15px rgba(192, 57, 43, 0.3);
            border-color: rgba(192, 57, 43, 0.4);
            z-index: 3;
        }

        /* Gallery caption */
        .ts-gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.2rem 1rem 1rem;
            z-index: 3;
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: left;
        }

        .ts-gallery-item:hover .ts-gallery-caption {
            transform: translateY(0);
        }

        .ts-gallery-caption .caption-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            background: var(--red);
            color: var(--white);
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            padding: 0.25rem 0.7rem;
            border-radius: 30px;
            margin-bottom: 0.4rem;
        }

        .ts-gallery-caption h4 {
            font-family: 'Playfair Display', serif;
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.2px;
            line-height: 1.2;
        }

        .ts-gallery-caption p {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.4;
            margin-top: 0.2rem;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1024px) {
            .team-section { padding: 4rem 2rem; }
            .ts-heading { font-size: 2.3rem; }
            .ts-paragraph { font-size: 1rem; }
            .ts-gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        }

        @media (max-width: 768px) {
            .team-section { padding: 3rem 1.5rem; border-radius: 0rem; }
            .ts-heading { font-size: 1.95rem; }
            .ts-paragraph { font-size: 0.95rem; padding: 0 0.5rem; }
            .ts-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 2.5rem; }
            .ts-corner { width: 50px; height: 50px; }
            .ts-deco-icon.d1, .ts-deco-icon.d2, .ts-deco-icon.d3, .ts-deco-icon.d4 { display: none; }
        }

        @media (max-width: 480px) {
            .team-section { padding: 2.5rem 1rem; border-radius: 0rem; }
            .ts-heading { font-size: 1.65rem; }
            .ts-eyebrow { font-size: 0.6rem; letter-spacing: 2px; }
            .ts-eyebrow .eyebrow-line { width: 22px; }
            .ts-paragraph { font-size: 0.9rem; line-height: 1.75; }
            .ts-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
            .ts-gallery-caption h4 { font-size: 0.85rem; }
            .ts-gallery-caption p { font-size: 0.65rem; }
            .ts-corner { display: none; }
        }
        :root {
            --red: #f20101;
            --red-dark: #f20101;
            --red-light: #f20101;
            --black: #0f0f0f;
            --black-2: #1a1a1a;
            --gray: #666666;
            --gray-light: #999999;
            --white: #ffffff;
        }
        /* ============================================================
           EVENTS SECTION — PURE WHITE BACKGROUND
           ============================================================ */
        .events-section {
            max-width: 1600px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            background: var(--white);
            border-radius: 0rem;
            overflow: hidden;
            padding: 5rem 3rem;
        }


        @keyframes borderSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(33.33%); }
        }

        /* Subtle dot pattern */
        .ev-bg-dots {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(192, 57, 43, 0.04) 1px, transparent 1px);
            background-size: 30px 30px;
            pointer-events: none;
            z-index: 0;
        }

        /* Decorative Floating Icons — very subtle */
        .ev-deco-icon {
            position: absolute;
            color: rgba(192, 57, 43, 0.05);
            animation: decoFloat 24s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .ev-deco-icon.d1 { top: 8%; left: 4%; font-size: 5rem; animation-duration: 22s; }
        .ev-deco-icon.d2 { top: 10%; right: 5%; font-size: 5rem; animation-duration: 26s; animation-delay: 2s; }
        .ev-deco-icon.d3 { bottom: 15%; left: 3%; font-size: 4rem; animation-duration: 30s; animation-delay: 4s; }
        .ev-deco-icon.d4 { bottom: 12%; right: 4%; font-size: 4.5rem; animation-duration: 24s; animation-delay: 1s; }

        @keyframes decoFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
            33% { transform: translate(25px, -30px) rotate(10deg); opacity: 0.8; }
            66% { transform: translate(-20px, 25px) rotate(-6deg); opacity: 0.5; }
        }

        /* ============================================================
           CORNER ORNAMENTS
           ============================================================ */
        .ev-corner {
            position: absolute;
            width: 70px;
            height: 70px;
            border: 2px solid var(--red);
            opacity: 0.15;
            pointer-events: none;
            z-index: 1;
        }

        .ev-corner.tl {
            top: 1.5rem;
            left: 1.5rem;
            border-right: none;
            border-bottom: none;
            border-radius: 18px 0 0 0;
        }

        .ev-corner.tr {
            top: 1.5rem;
            right: 1.5rem;
            border-left: none;
            border-bottom: none;
            border-radius: 0 18px 0 0;
        }

        .ev-corner.bl {
            bottom: 1.5rem;
            left: 1.5rem;
            border-right: none;
            border-top: none;
            border-radius: 0 0 0 18px;
        }

        .ev-corner.br {
            bottom: 1.5rem;
            right: 1.5rem;
            border-left: none;
            border-top: none;
            border-radius: 0 0 18px 0;
        }

        /* ============================================================
           CONTENT WRAPPER
           ============================================================ */
        .ev-content {
            position: relative;
            z-index: 2;
            max-width: 950px;
            margin: 0 auto;
            text-align: center;
        }

        /* ============================================================
           EYEBROW TEXT — RED
           ============================================================ */
        .ev-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            color: var(--red);
            font-weight: 700;
            font-size: 0.75rem;
            letter-spacing: 3.5px;
            padding: 0.4rem 0;
            text-transform: uppercase;
            margin-bottom: 1rem;
            position: relative;
            animation: eyebrowEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        }

        @keyframes eyebrowEntry {
            0% { opacity: 0; transform: translateY(-15px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .ev-eyebrow .eyebrow-line {
            width: 35px;
            height: 2px;
            background: var(--red);
            border-radius: 2px;
            animation: lineGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
            transform-origin: left;
        }

        .ev-eyebrow .eyebrow-line.right {
            transform-origin: right;
        }

        @keyframes lineGrow {
            0% { transform: scaleX(0); }
            100% { transform: scaleX(1); }
        }

        .ev-eyebrow i {
            font-size: 0.55rem;
            animation: starSpin 4s ease-in-out infinite;
        }

        @keyframes starSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.3); }
        }

        /* ============================================================
           HEADING
           ============================================================ */
        .ev-heading {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--black);
            letter-spacing: -1.2px;
            line-height: 1.15;
            margin-bottom: 1.2rem;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
            position: relative;
            z-index: 2;
        }

        @keyframes titleEntry {
            0% { opacity: 0; transform: translateY(25px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .ev-heading span {
            color: var(--red);
            position: relative;
            display: inline-block;
            font-style: italic;
        }

        .ev-heading span::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: -5px;
            right: -5px;
            height: 14px;
            background: linear-gradient(90deg, rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.04));
            border-radius: 8px;
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
        }

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

        /* Divider */
        .ev-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 1.5rem auto 1.8rem;
            max-width: 320px;
            animation: titleEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
        }

        .ev-divider .line {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--red), transparent);
            border-radius: 2px;
        }

        .ev-divider i {
            color: var(--red);
            font-size: 0.9rem;
            animation: starSpin 6s ease-in-out infinite;
        }

        /* ============================================================
           PARAGRAPH
           ============================================================ */
        .ev-paragraph {
            font-size: 1.05rem;
            color: var(--gray);
            line-height: 1.85;
            margin-bottom: 1.6rem;
            animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0 1rem;
        }

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

        .ev-paragraph .highlight {
            color: var(--red);
            font-weight: 700;
            position: relative;
            display: inline-block;
        }

        .ev-paragraph .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--red), transparent);
            transform: scaleX(0);
            transform-origin: left;
            animation: highlightGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
        }

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

        /* ============================================================
           EVENT CARDS GRID — 4 CARDS
           ============================================================ */
        .ev-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-top: 3rem;
            position: relative;
            z-index: 2;
        }

        .ev-card {
            position: relative;
            height: 420px;
            border-radius: 1.8rem;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid rgba(192, 57, 43, 0.15);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 25px -10px rgba(0, 0, 0, 0.15);
            animation: cardEntry 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        @keyframes cardEntry {
            0% { opacity: 0; transform: translateY(45px) scale(0.94); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .ev-card:nth-child(1) { animation-delay: 0.7s; }
        .ev-card:nth-child(2) { animation-delay: 0.85s; }
        .ev-card:nth-child(3) { animation-delay: 1s; }
        .ev-card:nth-child(4) { animation-delay: 1.15s; }

        /* Background image */
        .ev-card .ev-card-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 1;
        }

        .ev-card:hover .ev-card-bg {
            transform: scale(1.12);
        }

        /* Dark gradient overlay */
        .ev-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(15, 15, 15, 0.15) 0%,
                rgba(15, 15, 15, 0.55) 55%,
                rgba(15, 15, 15, 0.9) 100%
            );
            z-index: 2;
            transition: all 0.6s ease;
        }

        .ev-card:hover::before {
            background: linear-gradient(
                180deg,
                rgba(192, 57, 43, 0.3) 0%,
                rgba(15, 15, 15, 0.7) 55%,
                rgba(15, 15, 15, 0.95) 100%
            );
        }

        /* Red border overlay on hover */
        .ev-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 3px solid var(--red);
            border-radius: 1.8rem;
            opacity: 0;
            transform: scale(0.94);
            transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 5;
            pointer-events: none;
        }

        .ev-card:hover::after {
            opacity: 1;
            transform: scale(1);
        }

        .ev-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 35px 70px -25px rgba(192, 57, 43, 0.45);
        }

        /* Card content */
        .ev-card-content {
            position: relative;
            z-index: 3;
            height: 100%;
            padding: 2rem 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            text-align: left;
        }

        .ev-card-content .ev-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(192, 57, 43, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.1rem;
            margin-bottom: 1rem;
            transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 20px -6px rgba(192, 57, 43, 0.6);
        }

        .ev-card:hover .ev-card-icon {
            background: var(--white);
            color: var(--red);
            transform: rotate(-10deg) scale(1.12);
            box-shadow: 0 12px 30px -6px rgba(255, 255, 255, 0.5);
        }

        .ev-card-content h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.3px;
            line-height: 1.25;
            margin-bottom: 0.7rem;
            transition: all 0.4s ease;
            position: relative;
            padding-bottom: 0.6rem;
        }

        .ev-card-content h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2.5px;
            background: var(--red);
            border-radius: 2px;
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .ev-card:hover .ev-card-content h3::after {
            width: 70px;
            background: var(--white);
        }

        .ev-card-content p {
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.82);
            line-height: 1.65;
            margin-bottom: 0.9rem;
            transition: all 0.4s ease;
        }

        .ev-card:hover .ev-card-content p {
            color: rgba(255, 255, 255, 0.95);
        }

        /* Read more link inside card */
        .ev-card-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--white);
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            text-decoration: none;
            opacity: 0;
            transform: translateY(15px);
            transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
            padding-bottom: 0.2rem;
            position: relative;
        }

        .ev-card-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1.5px;
            background: var(--red-light);
            transition: width 0.4s ease;
        }

        .ev-card:hover .ev-card-link {
            opacity: 1;
            transform: translateY(0);
        }

        .ev-card:hover .ev-card-link::after {
            width: 100%;
        }

        .ev-card-link i {
            font-size: 0.6rem;
            transition: transform 0.4s ease;
        }

        .ev-card:hover .ev-card-link i {
            transform: translateX(4px) rotate(-10deg);
        }

        /* Shine sweep */
        .ev-card-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(
                100deg,
                transparent 20%,
                rgba(255, 255, 255, 0.18) 50%,
                transparent 80%
            );
            transform: skewX(-20deg);
            transition: left 1s ease;
            z-index: 4;
            pointer-events: none;
        }

        .ev-card:hover .ev-card-shine {
            left: 150%;
        }

        /* ============================================================
           CTA ROW
           ============================================================ */
        .ev-cta-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 3.5rem;
            flex-wrap: wrap;
            animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
            position: relative;
            z-index: 2;
        }

        .ev-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            background: linear-gradient(135deg, var(--red), var(--red-dark));
            color: var(--white);
            padding: 1.1rem 2.6rem;
            border-radius: 60px;
            font-size: 0.92rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 12px 35px -8px rgba(192, 57, 43, 0.5);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.5px;
            border: 2px solid var(--red-dark);
            cursor: pointer;
            font-family: inherit;
        }

        .ev-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 60%);
            transform: translateX(-100%);
            transition: transform 0.7s ease;
        }

        .ev-cta:hover::before {
            transform: translateX(0);
        }

        .ev-cta:hover {
            background: linear-gradient(135deg, var(--black), var(--black-2));
            border-color: var(--black);
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 22px 55px -12px rgba(0, 0, 0, 0.45);
        }

        .ev-cta i {
            position: relative;
            z-index: 2;
            font-size: 0.9rem;
            transition: transform 0.4s ease;
        }

        .ev-cta span {
            position: relative;
            z-index: 2;
        }

        .ev-cta:hover i {
            transform: rotate(-15deg) scale(1.15);
        }

        /* Pulsing ring around CTA */
        .ev-cta-wrapper {
            position: relative;
        }

        .ev-cta-wrapper::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 290px;
            height: 78px;
            border-radius: 60px;
            border: 2px solid rgba(192, 57, 43, 0.25);
            animation: pulseRing 3s ease-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes pulseRing {
            0% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1200px) {
            .ev-heading { font-size: 2.4rem; }
            .ev-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.3rem;
            }
            .ev-card { height: 400px; }
        }

        @media (max-width: 1024px) {
            .events-section { padding: 4rem 2rem; }
            .ev-paragraph { font-size: 1rem; }
        }

        @media (max-width: 768px) {
            .events-section { padding: 3rem 1.5rem; border-radius: 0rem; }
            .ev-heading { font-size: 2rem; }
            .ev-paragraph { font-size: 0.95rem; padding: 0 0.5rem; }
            .ev-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                margin-top: 2.2rem;
            }
            .ev-card { height: 350px; }
            .ev-card-content { padding: 1.5rem 1.2rem; }
            .ev-card-content h3 { font-size: 1.15rem; }
            .ev-card-content p { font-size: 0.78rem; }
            .ev-cta { padding: 0.9rem 2rem; font-size: 0.85rem; }
            .ev-corner { width: 50px; height: 50px; }
            .ev-deco-icon.d1, .ev-deco-icon.d2, .ev-deco-icon.d3, .ev-deco-icon.d4 { display: none; }
        }

        @media (max-width: 480px) {
            .events-section { padding: 2.5rem 1rem; border-radius: 0rem; }
            .ev-heading { font-size: 1.6rem; }
            .ev-eyebrow { font-size: 0.62rem; letter-spacing: 2px; }
            .ev-eyebrow .eyebrow-line { width: 22px; }
            .ev-paragraph { font-size: 0.9rem; line-height: 1.75; }
            .ev-grid {
                grid-template-columns: 1fr;
                gap: 1.1rem;
            }
            .ev-card { height: 340px; }
            .ev-cta { padding: 0.85rem 1.7rem; font-size: 0.82rem; }
            .ev-corner { display: none; }
        }