/* Header page style */
:root {
    /* --brand-gradient: linear-gradient(
        115deg,
        #1F0E32 0%,
        #2B093B 25%,
        #580653 50%,
        #690752 68%,
        #8E0136 100% */
       
        --brand-gradient:  linear-gradient(127deg,rgba(69, 6, 19, 1) 0%,  rgba(181, 23, 9, 1)91%);

}

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

        body {
            font-family: 'Poppins', sans-serif;
            color: #5B4B42;
            overflow-x: hidden;
            scroll-behavior: smooth;
            padding-top: 120px; /* Space for fixed navbar */
        }

        /* Only header-related CSS is included below */
        .header-container-royal {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 32px;
        }

        /* Navbar */
        .header-navbar-royal {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px clamp(18px, 2.6vw, 40px);
            transition: 0.4s;
         background:linear-gradient(127deg,rgba(69, 6, 19, 1) 0%,  rgba(181, 23, 9, 1)91%);
        }
        .header-navbar-royal.header-scrolled {
               background:linear-gradient(127deg,rgba(69, 6, 19, 1) 0%,  rgba(181, 23, 9, 1)91%);

            padding: 14px clamp(18px, 2.6vw, 40px);
            box-shadow: 0 4px 25px rgba(0,0,0,0.2);
        }
        .header-nav-container {
            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: clamp(10px, 2vw, 32px);
            width: 100%;
        
    /* -- merged from index.php -- */

            position: relative;
            z-index: 2;
        

    /* -- merged from index.php -- */

            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: clamp(10px, 2vw, 32px);
            width: 100%;
        
}
        .header-logo-royal {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1vw, 12px);
            flex: 0 0 auto;
    /* -- merged from index.php -- */

            display: flex;
            align-items: center;
            gap: clamp(8px, 1vw, 12px);
            flex: 0 0 auto; 
        
 /* logo takes only the width it needs */
        }
        .header-nav-logo {
            width: 90px;
            height: 90px;
            object-fit: contain;
        }
        .header-logo-text {
            color: #fff;
            font-size: 28px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            flex-shrink: 0;
        
    /* -- merged from index.php -- */

            color: #fff;
            font-size: 28px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            flex-shrink: 0;
        
}
        .header-logo-text span { color: #fff; 
    /* -- merged from index.php -- */
 color: #fff; 
}
        .header-logo-text p {
            font-size: 10px;
            color:white;
            letter-spacing: 2px;
            margin-top: 5px;
            white-space: nowrap;
        
    /* -- merged from index.php -- */

            font-size: 10px;
            color:white;
            letter-spacing: 2px;
            margin-top: 5px;
            white-space: nowrap;
        
}
        .header-logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: inherit;
        
    /* -- merged from index.php -- */

            display: flex;
            align-items: center;
            text-decoration: none;
            color: inherit;
        
}
        .header-nav-links-royal {
            display: flex;
            gap: clamp(12px, 1.5vw, 30px);
            list-style: none;
            align-items: center;
            justify-content: center;
    /* -- merged from index.php -- */

            display: flex;
            gap: clamp(12px, 1.5vw, 30px);
            list-style: none;
            align-items: center;
            justify-content: center; 
            flex: 1 1 0%; 
            flex-wrap: nowrap;
            min-width: 0;
        
 /* keep links visually centered in the space between logo and buttons, matching original layout */
            flex: 1 1 0%; /* nav occupies all remaining space after the logo */
            flex-wrap: nowrap;
            min-width: 0;
        }
        .header-nav-links-royal li {
            position: relative;
            flex-shrink: 0;
        }
        .header-nav-links-royal a {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
            font-size: clamp(13.5px, calc(11.6px + 0.145vw), 14.4px);
            white-space: nowrap;
            transition: 0.2s;
            position: relative;
            display: block;
        
    /* -- merged from index.php -- */

            text-decoration: none;
            color: #fff;
            font-weight: 500;
            font-size: clamp(13.5px, calc(11.6px + 0.145vw), 14.4px);
            white-space: nowrap;
            transition: 0.2s;
            position: relative;
            display: block;
        
}
        .header-nav-links-royal a:hover { color: #FFFFFF; 
    /* -- merged from index.php -- */
 color: #FFFFFF; 
}
        .header-nav-links-royal a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: #D4A373;
            bottom: -6px;
            left: 0;
            transition: 0.3s;
        
    /* -- merged from index.php -- */

            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: #D4A373;
            bottom: -6px;
            left: 0;
            transition: 0.3s;
        
}
        .header-nav-links-royal a:hover:after { width: 100%; 
    /* -- merged from index.php -- */
 width: 100%; 
}

        /* Dropdown Menu Styles */
        .header-dropdown {
            position: relative;
        
    /* -- merged from index.php -- */

            position: relative;
        
}
        .header-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: linear-gradient(127deg,rgba(181, 23, 9, 1) 0%, rgba(69, 6, 19, 1) 91%);
            backdrop-filter: blur(12px);
            min-width: 220px;
            border-radius: 12px;
            padding: 12px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 100;
           
    /* -- merged from index.php -- */

            position: absolute;
            top: 100%;
            left: 0;
           background: linear-gradient(
    135deg,
    #900808 0%,
    #FF006E 100%
);
            backdrop-filter: blur(12px);
            min-width: 220px;
            border-radius: 12px;
            padding: 12px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 100;
          
            list-style: none;
        
 /* border: 1px solid rgba(212, 163, 115, 0.3); */
            list-style: none;
        }
        .header-dropdown:hover .header-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .header-dropdown-menu li {
            margin: 0;
        
    /* -- merged from index.php -- */

            margin: 0;
        
}
        .header-dropdown-menu a {
            padding: 10px 24px;
            color: #fff;
            font-size: 0.85rem;
            white-space: nowrap;
        
    /* -- merged from index.php -- */

            padding: 10px 24px;
            color: #fff;
            font-size: 0.85rem;
            white-space: nowrap;
        
}
        .header-dropdown-menu a:hover {
            background: rgba(212, 163, 115, 0.2);
            color: #fff;
        
    /* -- merged from index.php -- */

            background: rgba(212, 163, 115, 0.2);
            color: #fff;
        
}
        .header-dropdown-menu a:after {
            display: none;
        
    /* -- merged from index.php -- */

            display: none;
        
}

        /* Action Buttons Container */
        .header-action-buttons {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1vw, 15px);
            flex: 0 0 auto;
    /* -- merged from index.php -- */

            display: flex;
            align-items: center;
            gap: clamp(8px, 1vw, 15px);
            flex: 0 0 auto; 
        
 /* buttons keep their natural width, pinned to the right */
        }

        /* Login Button Styles */
        .header-btn-login-royal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            background: transparent;
            border: 1.5px solid white;
            color: white;
            padding: 10px clamp(16px, 1.6vw, 24px);
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.85rem;
            white-space: nowrap;
            flex-shrink: 0;
            transition: 0.35s ease;
            cursor: pointer;
        
    /* -- merged from index.php -- */

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            background: transparent;
            border: 1.5px solid white;
            color: white;
            padding: 10px clamp(16px, 1.6vw, 24px);
            border-radius: 60px;
            font-weight: 600;
            font-size: 0.85rem;
            white-space: nowrap;
            flex-shrink: 0;
            transition: 0.35s ease;
            cursor: pointer;
        
}
        .header-btn-login-royal:hover {
            background: rgba(243, 212, 122, 0.15);
            transform: translateY(-2px);
            color: #fff;
            border-color: #fff;
        
    /* -- merged from index.php -- */

            background: rgba(243, 212, 122, 0.15);
            transform: translateY(-2px);
            color: #fff;
            border-color: #fff;
        
}
        .header-btn-login-royal i {
            font-size: 1rem;
        
    /* -- merged from index.php -- */

            font-size: 1rem;
        
}
.header-btn-enquiry-royal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    text-decoration: none;

    background: linear-gradient(
        135deg,
        #6B4A05 0%,
        #A8780A 25%,
        #D4AF37 55%,
        #F1D77A 75%,
        #A8780A 100%
    );

    border: 1.5px solid #F3D47A;
    color: #ffffff;

    padding: 12px clamp(18px, 2vw, 28px);
    border-radius: 60px;

    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;

    transition: all 0.35s ease;
    cursor: pointer;

    box-shadow:
        0 4px 15px rgba(184, 134, 11, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.header-btn-enquiry-royal:hover {
    background: linear-gradient(
        135deg,
        #8C6508 0%,
        #C49A20 25%,
        #F3D47A 50%,
        #D4AF37 75%,
        #8C6508 100%
    );

    border-color: #FFE9A6;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 7px 22px rgba(184, 134, 11, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.header-btn-enquiry-royal i {
    font-size: 1rem;

    /* -- merged from index.php -- */

    font-size: 1rem;
}
        /* Mobile Menu Styles */
        .header-mobile-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 80%;
            max-width: 350px;
            height: 100vh;
             background: var(--brand-gradient);
            backdrop-filter: blur(12px);
            z-index: 1001;
            padding: 100px 30px 40px;
            transition: right 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            overflow-y: auto;
        
    /* -- merged from index.php -- */

            position: fixed;
            top: 0;
            right: -100%;
            width: 80%;
            max-width: 350px;
            height: 100vh;
             background: linear-gradient(
    135deg,
    #900808 0%,
    #FF006E 100%
);
            backdrop-filter: blur(12px);
            z-index: 1001;
            padding: 100px 30px 40px;
            transition: right 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            overflow-y: auto;
        
}
        .header-mobile-menu.header-active {
            right: 0;
        
    /* -- merged from index.php -- */

            right: 0;
        
}
        .header-mobile-menu-close {
            position: absolute;
            top: 25px;
            right: 25px;
            font-size: 28px;
            color: #fff;
            cursor: pointer;
        
    /* -- merged from index.php -- */

            position: absolute;
            top: 25px;
            right: 25px;
            font-size: 28px;
            color: #fff;
            cursor: pointer;
        
}
        .header-mobile-nav-links {
            list-style: none;
        
    /* -- merged from index.php -- */

            list-style: none;
        
}
        .header-mobile-nav-links li {
            margin-bottom: 20px;
        
    /* -- merged from index.php -- */

            margin-bottom: 20px;
        
}
        .header-mobile-nav-links a {
            color: #fff;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            display: block;
            padding: 8px 0;
        
    /* -- merged from index.php -- */

            color: #fff;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            display: block;
            padding: 8px 0;
        
}
        /* Mobile Dropdown */
        .header-mobile-dropdown-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 500;
            padding: 8px 0;
        
    /* -- merged from index.php -- */

            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 500;
            padding: 8px 0;
        
}
        .header-mobile-dropdown-btn i {
            transition: transform 0.3s ease;
        
    /* -- merged from index.php -- */

            transition: transform 0.3s ease;
        
}
        .header-mobile-dropdown-btn.header-active i {
            transform: rotate(180deg);
        
    /* -- merged from index.php -- */

            transform: rotate(180deg);
        
}
        .header-mobile-submenu {
            list-style: none;
            padding-left: 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        
    /* -- merged from index.php -- */

            list-style: none;
            padding-left: 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        
}
        .header-mobile-submenu.header-active {
            max-height: 300px;
        
    /* -- merged from index.php -- */

            max-height: 300px;
        
}
        .header-mobile-submenu li {
            margin-bottom: 12px;
        
    /* -- merged from index.php -- */

            margin-bottom: 12px;
        
}
        .header-mobile-submenu a {
            font-size: 0.9rem;
            color: #fff;
            padding: 6px 0;
        
    /* -- merged from index.php -- */

            font-size: 0.9rem;
            color: #fff;
            padding: 6px 0;
        
}
        .header-mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        
    /* -- merged from index.php -- */

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        
}
        .header-mobile-overlay.header-active {
            opacity: 1;
            visibility: visible;
        
    /* -- merged from index.php -- */

            opacity: 1;
            visibility: visible;
        
}

        /* Mobile Action Buttons */
        .header-mobile-action-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(243, 212, 122, 0.2);
        
    /* -- merged from index.php -- */

            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(243, 212, 122, 0.2);
        
}
        .header-mobile-login-btn {
            background: transparent;
            border: 1.5px solid #fff;
            color: #fff;
            padding: 12px;
            border-radius: 60px;
            text-align: center;
            font-weight: 600;
            transition: all 0.3s ease;
        
    /* -- merged from index.php -- */

            background: transparent;
            border: 1.5px solid #fff;
            color: #fff;
            padding: 12px;
            border-radius: 60px;
            text-align: center;
            font-weight: 600;
            transition: all 0.3s ease;
        
}
        .header-mobile-login-btn:hover {
            background: rgba(243, 212, 122, 0.15);
            color: #fff;
        
    /* -- merged from index.php -- */

            background: rgba(243, 212, 122, 0.15);
            color: #fff;
        
}
        .header-mobile-enquiry-btn {
             background: transparent;
              border: 1.5px solid #fff;
            color: #fff;
            padding: 12px;
            border-radius: 60px;
            text-align: center;
            font-weight: 700;
            transition: all 0.3s ease;
        
    /* -- merged from index.php -- */

             background: transparent;
              border: 1.5px solid #fff;
            color: #fff;
            padding: 12px;
            border-radius: 60px;
            text-align: center;
            font-weight: 700;
            transition: all 0.3s ease;
        
}
        .header-mobile-enquiry-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(243, 212, 122, 0.3);
        
    /* -- merged from index.php -- */

            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(243, 212, 122, 0.3);
        
}

        .header-mobile-toggle {
            display: none;
            color: #fff;
            font-size: 28px;
            cursor: pointer;
        
    /* -- merged from index.php -- */

            display: none;
            color: #fff;
            font-size: 28px;
            cursor: pointer;
        
}

        @media (max-width: 992px) {
            .header-nav-links-royal { display: none; }
            .header-action-buttons { display: none; }
            .header-mobile-toggle { display: block; }
            .header-container-royal { padding: 0 20px; }
        }
        
        .header-enquiry-popup select {
            padding: 12px 14px;
            border: 2px solid #E8E8E8;
            border-radius: 8px;
            background: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            color: #333;
        
    /* -- merged from index.php -- */

            padding: 12px 14px;
            border: 2px solid #E8E8E8;
            border-radius: 8px;
            background: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            color: #333;
        
}
        .header-enquiry-popup select:hover {
            border-color: #f3d47a;
        
    /* -- merged from index.php -- */

            border-color: #f3d47a;
        
}
        .header-enquiry-popup select:focus {
            outline: none;
            border-color: #f3d47a;
            box-shadow: 0 0 0 3px rgba(243, 212, 122, 0.1);
        
    /* -- merged from index.php -- */

            outline: none;
            border-color: #f3d47a;
            box-shadow: 0 0 0 3px rgba(243, 212, 122, 0.1);
        
}

        /* Overlay */
        .header-enquiry-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 2000;
            backdrop-filter: blur(4px);
            animation: fadeIn 0.3s ease;
            pointer-events: auto;
        
    /* -- merged from index.php -- */

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 2000;
            backdrop-filter: blur(4px);
            animation: fadeIn 0.3s ease;
            pointer-events: auto;
        
}

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Modal */
        .header-enquiry-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: #fff;
            width: 90%;
            max-width: 480px;
            max-height: 90vh;
            padding: 40px 35px;
            border-radius: 16px;
            z-index: 2001;
            display: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            animation: slideUp 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            overflow-y: auto;
        
    /* -- merged from index.php -- */

            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: #fff;
            width: 90%;
            max-width: 480px;
            max-height: 90vh;
            padding: 40px 35px;
            border-radius: 16px;
            z-index: 2001;
            display: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            animation: slideUp 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            overflow-y: auto;
        
}

        .header-enquiry-popup.header-show {
            display: block;
            transform: translate(-50%, -50%) scale(1);
        
    /* -- merged from index.php -- */

            display: block;
            transform: translate(-50%, -50%) scale(1);
        
}

        @keyframes slideUp {
            from {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
            to {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        .header-enquiry-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 16px;
            border-bottom: 2px solid #F5F5F5;
        
    /* -- merged from index.php -- */

            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 16px;
            border-bottom: 2px solid #F5F5F5;
        
}

        .header-enquiry-header h2 {
            font-size: 24px;
            color: #111;
            font-weight: 700;
            margin: 0;
            font-family: 'Poppins', sans-serif;
            letter-spacing: -0.5px;
        
    /* -- merged from index.php -- */

            font-size: 24px;
            color: #111;
            font-weight: 700;
            margin: 0;
            font-family: 'Poppins', sans-serif;
            letter-spacing: -0.5px;
        
}

        .header-enquiry-close {
            font-size: 28px;
            cursor: pointer;
            color: #900808;
            transition: all 0.3s ease;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        
    /* -- merged from index.php -- */

            font-size: 28px;
            cursor: pointer;
            color: #900808;
            transition: all 0.3s ease;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        
}

        .header-enquiry-close:hover {
            color:  #900808;
            background: rgba(243, 212, 122, 0.1);
        
    /* -- merged from index.php -- */

            color:  #900808;
            background: rgba(243, 212, 122, 0.1);
        
}

        /* Form */
        .header-enquiry-popup form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        
    /* -- merged from index.php -- */

            display: flex;
            flex-direction: column;
            gap: 16px;
        
}

        .header-enquiry-form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        
    /* -- merged from index.php -- */

            display: flex;
            flex-direction: column;
            gap: 6px;
        
}

        .header-enquiry-form-group label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #333;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        
    /* -- merged from index.php -- */

            font-size: 0.85rem;
            font-weight: 600;
            color: #333;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        
}

        .header-enquiry-popup input,
        .header-enquiry-popup textarea,
        .header-enquiry-popup select {
            padding: 12px 14px;
            border: 2px solid #E8E8E8;
            border-radius: 8px;
            font-size: 0.95rem;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            color: #333;
            background: #FAFAFA;
        
    /* -- merged from index.php -- */

            padding: 12px 14px;
            border: 2px solid #E8E8E8;
            border-radius: 8px;
            font-size: 0.95rem;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            color: #333;
            background: #FAFAFA;
        
}

        .header-enquiry-popup input::placeholder,
        .header-enquiry-popup textarea::placeholder {
            color: #AAA;
        
    /* -- merged from index.php -- */

            color: #AAA;
        
}

        .header-enquiry-popup input:hover,
        .header-enquiry-popup textarea:hover,
        .header-enquiry-popup select:hover {
            border-color: #900808;
            background: #fff;
        
    /* -- merged from index.php -- */

            border-color: #900808;
            background: #fff;
        
}

        .header-enquiry-popup input:focus,
        .header-enquiry-popup textarea:focus,
        .header-enquiry-popup select:focus {
            outline: none;
            border-color: #900808;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(144, 8, 8, 0.1);
        
    /* -- merged from index.php -- */

            outline: none;
            border-color: #900808;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(144, 8, 8, 0.1);
        
}

        .header-enquiry-popup textarea {
            resize: vertical;
            min-height: 100px;
            font-family: 'Poppins', sans-serif;
        
    /* -- merged from index.php -- */

            resize: vertical;
            min-height: 100px;
            font-family: 'Poppins', sans-serif;
        
}

        .header-enquiry-popup button {
            background: var(--brand-gradient);
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95rem;
            color: #fff;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 12px;
            box-shadow: 0 8px 20px rgba(243, 212, 122, 0.3);
        
    /* -- merged from index.php -- */

            background: linear-gradient(135deg, #900808 0%, #FF006E 100%);
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95rem;
            color: #fff;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 12px;
            box-shadow: 0 8px 20px rgba(243, 212, 122, 0.3);
        
}

        .header-enquiry-popup button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(243, 212, 122, 0.4);
             background: var(--brand-gradient);
        
    /* -- merged from index.php -- */

            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(243, 212, 122, 0.4);
             background: linear-gradient(135deg, #900808 0%, #FF006E 100%);
        
}

        .header-enquiry-popup button:active {
            transform: translateY(0);
        
    /* -- merged from index.php -- */

            transform: translateY(0);
        
}

        /* Thank you message */
        .header-thank-you {
            display: none;
            text-align: center;
            padding: 40px 20px;
        
    /* -- merged from index.php -- */

            display: none;
            text-align: center;
            padding: 40px 20px;
        
}

        .header-thank-you.header-show {
            display: block;
            animation: successPop 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        
    /* -- merged from index.php -- */

            display: block;
            animation: successPop 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        
}

        @keyframes successPop {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .header-success-icon {
            font-size: 64px;
            margin-bottom: 16px;
            animation: iconBounce 0.6s ease;
        
    /* -- merged from index.php -- */

            font-size: 64px;
            margin-bottom: 16px;
            animation: iconBounce 0.6s ease;
        
}

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

        .header-thank-you h3 {
            font-size: 22px;
            color: #111;
            margin: 12px 0 8px 0;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
        
    /* -- merged from index.php -- */

            font-size: 22px;
            color: #111;
            margin: 12px 0 8px 0;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
        
}

        .header-thank-you p {
            font-size: 14px;
            color: #666;
            margin: 8px 0 0 0;
            line-height: 1.6;
        
    /* -- merged from index.php -- */

            font-size: 14px;
            color: #666;
            margin: 8px 0 0 0;
            line-height: 1.6;
        
}
/* academy page style */
   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #FFF8F2 0%, #F9EEE7 100%);
            color: #5B4B42;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Page Container */
        .academy-academy-page {
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 32px 80px;
        }

        /* Hero Section */
        .academy-academy-hero {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }

        /* .academy-academy-hero::before {
            content: '✦';
            font-size: 60px;
            color: #D4A373;
            opacity: 0.3;
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            font-family: serif;
        } */

        .academy-academy-hero h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: -1px;
            background: black;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .academy-academy-hero p {
            font-size: 1.1rem;
            color: #6B5B50;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .academy-gold-divider {
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #D4A373, #F3D47A, #D4A373);
            margin: 25px auto 0;
            border-radius: 3px;
        }

        /* Coming Soon Main Section */
        .academy-coming-soon-section {
           background: var(--brand-gradient);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 80px 40px;
            text-align: center;
            margin-bottom: 70px;
            border: 1px solid rgba(212, 163, 115, 0.3);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .academy-coming-soon-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(212, 163, 115, 0.05) 0%, transparent 70%);
            animation: academy-rotate 20s linear infinite;
        }

        @keyframes academy-rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .academy-coming-soon-icon {
            font-size: 80px;
            color: #fff;
            margin-bottom: 30px;
            animation: academy-float 3s ease-in-out infinite;
        }

        @keyframes academy-float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        .academy-coming-soon-title {
            font-family: 'Poppins', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 20px;
           
        }

        .academy-coming-soon-title span {
            color: #fff;
        }

        .academy-coming-soon-subtitle {
            font-size: 1.2rem;
            color: #fff;
            margin-bottom: 30px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Countdown Timer */
        .academy-countdown-timer {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 50px 0;
            flex-wrap: wrap;
        }

        .academy-countdown-item {
            background: linear-gradient(135deg, #FFF8F2, #F9EEE7);
            padding: 25px 30px;
            border-radius: 20px;
            min-width: 120px;
            border: 1px solid rgba(212, 163, 115, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .academy-countdown-item:hover {
            transform: translateY(-5px);
            border-color: #D4A373;
            box-shadow: 0 15px 40px rgba(212, 163, 115, 0.15);
        }

        .academy-countdown-number {
            font-family: 'Poppins', sans-serif;
            font-size: 3rem;
            font-weight: 800;
            color: #9B1C31;
            display: block;
            line-height: 1;
        }

        .academy-countdown-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #6B5B50;
            margin-top: 10px;
            display: block;
            font-weight: 600;
        }

        /* Notify Button */
        .academy-notify-btn {
            background: var(--brand-gradient);
            color: white;
            border: none;
            padding: 16px 40px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 20px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .academy-notify-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(155, 28, 49, 0.3);
            gap: 18px;
            background: #900808;
        }

        /* Courses Preview Section */
        .academy-courses-preview {
            margin-bottom: 70px;
        }

        .academy-section-title {
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 600;
            color: #1A1A1A;
            margin-bottom: 20px;
        }

        .academy-section-subtitle {
            text-align: center;
            color: #6B5B50;
            margin-bottom: 50px;
            font-size: 1rem;
        }

        .academy-courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }

        .academy-course-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.4s ease;
            border: 1px solid rgba(212, 163, 115, 0.2);
            position: relative;
            overflow: hidden;
        }

        .academy-course-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(212, 163, 115, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .academy-course-card:hover::before {
            left: 100%;
        }

        .academy-course-card:hover {
            transform: translateY(-10px);
            border-color: #D4A373;
            box-shadow: 0 20px 40px rgba(212, 163, 115, 0.15);
        }

        .academy-course-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #FFF8F2, #F9EEE7);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2rem;
            color: #9B1C31;
            transition: all 0.3s ease;
        }

        .academy-course-card:hover .academy-course-icon {
            transform: scale(1.1);
            background: var(--brand-gradient);
            color: white;
        }

        .academy-course-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 15px;
        }

        .academy-course-desc {
            color: #6B5B50;
            line-height: 1.6;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .academy-course-badge {
            display: inline-block;
            background: rgba(212, 163, 115, 0.2);
            color: #9B1C31;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 1px;
        }

        /* Why Choose Us Section */
        .academy-why-choose-us {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 242, 0.9));
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 60px 40px;
            margin-bottom: 70px;
            border: 1px solid rgba(212, 163, 115, 0.3);
        }

        .academy-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .academy-feature-item {
            text-align: center;
            padding: 20px;
            transition: all 0.3s ease;
        }

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

        .academy-feature-icon {
            width: 70px;
            height: 70px;
           background: var(--brand-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.8rem;
            color: white;
            box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
        }

        .academy-feature-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 10px;
        }

        .academy-feature-desc {
            color: #6B5B50;
            font-size: 0.85rem;
            line-height: 1.5;
        }

        /* Notification Modal */
        .academy-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .academy-modal-overlay.academy-active {
            display: flex;
        }

        .academy-notify-modal {
            background: #FFFFFF;
            border-radius: 20px;
            max-width: 450px;
            width: 90%;
            padding: 40px;
            text-align: center;
            position: relative;
            animation: academy-modalSlideIn 0.3s ease;
            border: 1px solid rgba(212, 163, 115, 0.3);
        }

        @keyframes academy-modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .academy-modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }

        .academy-modal-close:hover {
            color: #9B1C31;
        }

        .academy-modal-icon {
            font-size: 60px;
            color: #D4A373;
            margin-bottom: 20px;
        }

        .academy-modal-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.8rem;
            color: #1A1A1A;
            margin-bottom: 15px;
        }

        .academy-modal-input {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #F0E8E0;
            border-radius: 12px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            margin: 15px 0;
            transition: all 0.3s;
        }

        .academy-modal-input:focus {
            outline: none;
            border-color: #D4A373;
            box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.1);
        }

        .academy-modal-btn {
            background: var(--brand-gradient);
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s;
        }

        .academy-modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(212, 163, 115, 0.3);
                background: #900808;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .academy-academy-page {
                padding: 40px 24px 60px;
            }
            .academy-academy-hero h1 {
                font-size: 3rem;
            }
            .academy-coming-soon-title {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px) {
            .academy-coming-soon-section {
                padding: 50px 25px;
            }
            .academy-countdown-item {
                padding: 15px 20px;
                min-width: 80px;
            }
            .academy-countdown-number {
                font-size: 2rem;
            }
            .academy-section-title {
                font-size: 2rem;
            }
            .academy-courses-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .academy-academy-page {
                padding: 30px 16px 50px;
            }
            .academy-countdown-timer {
                gap: 15px;
            }
            .academy-countdown-item {
                padding: 12px 15px;
                min-width: 65px;
            }
            .academy-countdown-number {
                font-size: 1.5rem;
            }
            .academy-coming-soon-title {
                font-size: 1.8rem;
            }
        }

        /* Animation */
        @keyframes academy-fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .academy-coming-soon-section,
        .academy-courses-preview,
        .academy-why-choose-us {
            animation: academy-fadeInUp 0.6s ease forwards;
        }
/* about page style */

body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(to bottom, #FFF8F2, #F9EEE7);
      color: #5B4B42;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    h1, h2, h3, h4, .about-luxury-heading {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    /* premium container */
    .about-container {
      max-width: 1300px;
      margin: 0 auto;
      padding: 2.5rem 2rem 4rem;
    }

    /* about section: LEFT IMAGE + RIGHT CONTENT */
    .about-about-wrapper {
      display: flex;
      align-items: center;
      gap: 4rem;
      flex-wrap: wrap;
      margin-bottom: 6rem;
    }

    .about-about-image {
      flex: 1;
      position: relative;
    }

    .about-about-content {
      flex: 1;
    }

    /* elegant label */
    .about-elegant-label {
      display: inline-block;
      font-size: 0.7rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      background: rgba(183, 140, 74, 0.12);
      padding: 0.35rem 1.2rem;
      border-radius: 40px;
      color: black;
      font-weight: 500;
      margin-bottom: 1rem;
      backdrop-filter: blur(2px);
      font-family: 'Poppins', sans-serif;
    }

    h1 {
      font-size: 4rem;
      line-height: 1.2;
      margin-bottom: 1.2rem;
      color: #4F3E35;
    }

    h1 span {
      background: linear-gradient(135deg, #C28A4E, #DEB066);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .about-gold-divider {
      width: 70px;
      height: 2px;
      background: linear-gradient(90deg, #DEB066, #f5e2b0);
      margin: 1.2rem 0 1.5rem 0;
    }

    .about-desc-text {
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 1.2rem;
      color: #5f4d42;
      font-weight: 400;
    }

    .about-highlight-quote {
      font-weight: 500;
      color: #b27a48;
      border-left: 3px solid #DEB066;
      padding-left: 1.2rem;
      margin: 1.5rem 0;
      font-size: 0.95rem;
      font-family: 'Poppins', sans-serif;
    }

    .about-luxury-list {
      list-style: none;
      margin-top: 1rem;
    }

    .about-luxury-list li {
      margin-bottom: 0.7rem;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.9rem;
      font-weight: 500;
    }

    .about-luxury-list li i {
      color: #DEB066;
      font-size: 0.85rem;
    }

    .about-signature {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 2rem;
    }

    .about-signature i {
      font-size: 2rem;
      color: #DEB066;
      opacity: 0.75;
    }

    .about-signature p {
      font-family: 'Poppins', sans-serif;
      font-style: italic;
      font-size: 1.2rem;
      color: #A07248;
    }

    /* premium image styling - left side with soft luxury shadow */
    .about-elegant-img {
      width: 100%;
      border-radius: 28px;
      box-shadow: 0 30px 40px -18px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(222, 176, 102, 0.25);
      transition: transform 0.5s ease;
      object-fit: cover;
      height: auto;
    }

    .about-elegant-img:hover {
      transform: scale(1.01);
    }

    .about-glass-badge {
      position: absolute;
      bottom: -15px;
      right: -15px;
      background: rgba(255, 248, 240, 0.9);
      backdrop-filter: blur(12px);
      border-radius: 50px;
      padding: 0.7rem 1.5rem;
      font-weight: 600;
      font-size: 0.8rem;
      color: #b27a48;
      border: 1px solid rgba(222, 176, 102, 0.6);
      box-shadow: 0 12px 18px -12px rgba(0,0,0,0.1);
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.5px;
    }

    /* Achievements section */
    .about-achievements-title {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      color: #4F3E35;
      margin-bottom: 0.5rem;
    }

    .about-gold-underline-center {
      width: 80px;
      height: 3px;
      background: #DEB066;
      margin: 0.8rem auto 3rem auto;
      border-radius: 4px;
    }

    .about-achievement-card {
      background: rgba(255, 250, 245, 0.75);
      backdrop-filter: blur(4px);
      padding: 2rem 1.5rem;
      text-align: center;
      transition: all 0.4s ease;
      border: 1px solid rgba(222, 176, 102, 0.35);
      box-shadow: 0 15px 25px -12px rgba(0, 0, 0, 0.05);
      padding: 0;
      overflow: hidden;
      border-radius: 20px;
      min-height: 420px;
    }

    .about-achievement-card:hover {
      transform: translateY(-8px);
      border-color: rgba(222, 176, 102, 0.7);
      box-shadow: 0 28px 35px -15px rgba(183, 140, 74, 0.2);
      background: rgba(255, 252, 245, 0.95);
    }

    .about-icon-gold {
      font-size: 2.5rem;
      color: #DEB066;
      margin-bottom: 1rem;
      display: inline-block;
      background: linear-gradient(145deg, #FFF5EA, #fffaf2);
      padding: 0.7rem;
      border-radius: 60px;
      box-shadow: 0 5px 12px rgba(0,0,0,0.02);
    }

    .about-counter-number {
      font-family: 'Poppins', sans-serif;
      font-size: 3rem;
      font-weight: 800;
      color: #C28A4E;
      line-height: 1.1;
      letter-spacing: -1px;
    }

    .about-counter-number span {
      font-size: 2.5rem;
      font-weight: 700;
    }

    .about-achievement-title {
      font-weight: 700;
      font-size: 1.2rem;
      margin: 0.6rem 0 0.3rem;
      color: #4F3E35;
      font-family: 'Poppins', sans-serif;
    }

    .about-achievement-sub {
      font-size: 0.8rem;
      color: #7F6A5C;
      font-weight: 400;
      padding-bottom: 25px;
    }


    /* Responsive: left image & right side content */
    @media (max-width: 1024px) {
      .about-about-wrapper {
        flex-direction: column;
        gap: 2.5rem;
      }
      h1 {
        font-size: 3rem;
      }
      .about-container {
        padding: 1.5rem;
      }
      .about-achievements-title {
        font-size: 2.5rem;
      }
    }

    @media (max-width: 640px) {
      h1 {
        font-size: 2.4rem;
      }
      .about-counter-number {
        font-size: 2.2rem;
      }
      .about-glass-badge {
        display: none;
      }
      .about-achievement-card {
        padding: 1.4rem;
      }
    }

    /* subtle animation */
    @keyframes about-fadeSlide {
      0% { opacity: 0; transform: translateX(-12px);}
      100% { opacity: 1; transform: translateX(0);}
    }

    .about-achievements-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 30px;
    }

    .about-achievement-img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      display: block;
    }

    .about-icon-gold,
    .about-achievement-title,
    .about-achievement-sub {
      padding-left: 25px;
      padding-right: 25px;
    }

    .about-icon-gold {
      padding-top: 20px;
    }

    .about-achievement-title {
      font-size: 24px;
      margin: 12px 0;
    }

    .about-animate-content {
      animation: about-fadeSlide 0.65s ease forwards;
    }

    /* Gallery page style */
     * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #fefaf5; font-family: 'Poppins', sans-serif; color: #2c2b28; scroll-behavior: smooth; overflow-x: hidden; }
    .gallery-main-container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
    .gallery-section { margin-bottom: 4rem; }

    .gallery-heading { text-align: center; padding: 4rem 0 2rem; animation: fadeUp 1s ease; }
    .gallery-heading h1 { font-family: 'Poppins', sans-serif; font-size: 4.5rem; font-weight: 600; background: black; background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.02em; margin-bottom: 1rem; }
    .gallery-heading p { font-size: 1.1rem; color: #5c5348; letter-spacing: 0.5px; line-height: 1.6; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

    .gallery-section-title { font-family: 'Poppins', sans-serif; font-size: 3.3rem; font-weight: 500; letter-spacing: -0.02em; color: #1e1c1a; text-align: center; width: 100%; margin-bottom: 0.5rem; }
    .gallery-section-title span { background: var(--brand-gradient);background-clip: text; -webkit-background-clip: text; color: transparent; }
    .gallery-gold-underline { width: 80px; height: 3px; background: #900808; margin: 0.8rem auto 2rem auto; border-radius: 4px; }

    .gallery-filter-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.5rem; }
    .gallery-filter-btn { background: transparent; border: 1.5px solid #900808; padding: 0.7rem 1.8rem; border-radius: 40px; font-family: 'Poppins', sans-serif; font-weight: 500; color: #8b6946; cursor: pointer; transition: all 0.3s ease; font-size: 0.85rem; letter-spacing: 0.3px; }
    .gallery-filter-btn.gallery-active, .gallery-filter-btn:hover { background: linear-gradient(135deg, #900808 0%, #900808 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(183,140,74,0.25); transform: translateY(-2px); }

    .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.8rem; margin-left: 30px; margin-right: 30px; }
    .gallery-item { position: relative; overflow: hidden; border-radius: 15px; cursor: pointer; transition: all 0.4s cubic-bezier(0.2,0.9,0.4,1.1); background: #ffffff; box-shadow: 0 12px 28px -10px rgba(0,0,0,0.08); border: 1px solid rgba(219,180,106,0.25); }
    .gallery-item img { width: 100%; height: 360px; object-fit: cover; transition: transform 0.6s ease; display: block; }
    .gallery-item:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -12px rgba(183,140,74,0.2); border-color: rgba(219,180,106,0.5); }
    .gallery-item:hover img { transform: scale(1.04); }
    .gallery-overlay-gold { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); padding: 1.2rem; transform: translateY(100%); transition: 0.35s ease; font-weight: 500; color: #900808; font-family: 'Poppins', sans-serif; font-size: 0.9rem; }
    .gallery-item:hover .gallery-overlay-gold { transform: translateY(0); }

    .gallery-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.94); backdrop-filter: blur(12px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s ease; }
    .gallery-lightbox.gallery-active { opacity: 1; visibility: visible; }
    .gallery-lightbox-img { max-width: 85%; max-height: 85%; border-radius: 15px; border: 2px solid #900808; box-shadow: 0 0 40px rgba(219,180,106,0.3); }
    .gallery-close-lightbox { position: absolute; top: 30px; right: 40px; font-size: 2.5rem; color: #900808; cursor: pointer; transition: 0.2s; }
    .gallery-close-lightbox:hover { color: #fff; transform: scale(1.05); }

    .gallery-stats-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; text-align: center; margin: 2rem 0 3rem; }
    .gallery-stat-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); padding: 1.8rem 2.2rem; border-radius: 20px; min-width: 180px; border: 1px solid rgba(219,180,106,0.3); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.06); transition: transform 0.3s ease; }
    .gallery-stat-card:hover { transform: translateY(-4px); border-color: #900808; }
    .gallery-stat-number { font-family: 'Poppins', sans-serif; font-size: 3rem; font-weight: 700; color: #900808; }
    .gallery-stat-label { font-size: 0.85rem; color: #6a655e; margin-top: 0.5rem; font-weight: 500; }

    /* ===================== VIDEO GRID ===================== */
    .gallery-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem; margin-top: 1rem; margin-left: 30px; margin-right: 30px; }

    .gallery-video-card { background: #ffffff; border-radius: 15px; overflow: hidden; border: 1px solid rgba(219,180,106,0.3); transition: all 0.35s ease; cursor: pointer; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.08); }
    .gallery-video-card:hover { transform: translateY(-8px); border-color: #900808; box-shadow: 0 20px 35px -12px rgba(183,140,74,0.25); }

    /* Thumbnail: actual <video> element shows first frame */
    .gallery-video-thumb-wrap { position: relative; height: 240px; overflow: hidden; background: #111; }
    .gallery-video-thumb-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

    .gallery-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.55); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #900808; font-size: 1.5rem; transition: 0.3s; backdrop-filter: blur(4px); }
    .gallery-video-card:hover .gallery-play-icon { background: var(--brand-gradient);color: #fff; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 20px rgba(219,180,106,0.5); }

    .gallery-video-info { padding: 1.2rem 1.5rem; }
    .gallery-video-info h3 { font-family: 'Poppins', sans-serif; font-size: 1.4rem; color: #1e1c1a; margin-bottom: 0.3rem; }
    .gallery-video-info p { font-size: 0.8rem; color: #8b6946; }

    /* ===================== VIDEO MODAL ===================== */
    .gallery-video-modal {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.95); backdrop-filter: blur(12px);
      z-index: 2100; display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; transition: 0.3s;
    }
    .gallery-video-modal.gallery-active { opacity: 1; visibility: visible; }

    /* Modal mein actual HTML5 video player */
    .gallery-modal-video-player {
      width: 85%;
      max-width: 960px;
      max-height: 80vh;
      border-radius: 15px;
      border: 3px solid #900808;
      box-shadow: 0 0 40px rgba(219,180,106,0.3);
      background: #000;
      outline: none;
    }

    .gallery-modal-close {
      position: absolute; top: 30px; right: 40px;
      font-size: 2.5rem; color: #900808; cursor: pointer; transition: 0.2s;
      background: none; border: none; line-height: 1;
    }
    .gallery-modal-close:hover { color: #fff; transform: scale(1.05); }

    /* ===================== MISC ===================== */
    .gallery-load-more-btn { display: block; margin: 2.5rem auto 0; background: transparent; border: 1.5px solid  #900808; color:  #900808; padding: 12px 40px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; font-family: 'Poppins', sans-serif; letter-spacing: 0.5px; }
    .gallery-load-more-btn:hover { background: var(--brand-gradient); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(183,140,74,0.3); }

    .gallery-reveal { opacity: 0; transform: translateY(35px); transition: all 0.8s ease; }
    .gallery-reveal.gallery-active { opacity: 1; transform: translateY(0); }

    @media (max-width: 1024px) {
      .gallery-heading h1 { font-size: 3.5rem; }
      .gallery-grid, .gallery-video-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
    }
    @media (max-width: 768px) {
      .gallery-heading h1 { font-size: 2.5rem; }
      .gallery-heading { padding: 2.5rem 0 1.5rem; }
      .gallery-grid, .gallery-video-grid { grid-template-columns: 1fr; gap: 1.2rem; }
      .gallery-item img { height: 300px; }
      .gallery-modal-video-player { width: 95%; }
      .gallery-stats-grid { gap: 1rem; }
      .gallery-stat-card { min-width: 140px; padding: 1.2rem 1.5rem; }
      .gallery-stat-number { font-size: 2.2rem; }
      .gallery-filter-btn { padding: 0.5rem 1.2rem; font-size: 0.75rem; }
    }
    @media (max-width: 480px) {
      .gallery-heading h1 { font-size: 2rem; }
      .gallery-gold-underline { margin: 0.5rem auto 1.5rem auto; }
    }
/* Index page style */
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(to bottom, #FFF8F2, #F9EEE7);
            color: #5B4B42;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        h1,
        h2,
        h3,
        h4,
        .header-luxury-heading {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .header-script-text {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
        }
        :root {
            --royal-red: #9B1C31;
            --rose-gold: #D4A373;
            --ivory: #FFF8F2;
            --cream: #F9EEE7;
            --gold-premium: #F3D47A;
            --matte-black: #111111;
            --soft-text: #5B4B42;
            --white: #FFFFFF;
            --shadow-luxury: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            --shadow-royal: 0 20px 35px -10px rgba(155, 28, 49, 0.15);
            --transition-lux: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        .header-container-royal {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 32px;
        }
        .header-section-royal {
            padding: 110px 0;
        }
        .header-btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-decoration: none;
            background: #6A0DAD;
            color: #fff;
            padding: 15px 32px;
            border-radius: 60px;
            font-weight: 700;
            border: none;
            transition: 0.35s ease;
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35);
        }
        .header-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(212, 175, 55, 0.45);
        }
        .header-btn-outline-royal {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition-lux);
            display: inline-block;
            text-decoration: none;
            backdrop-filter: blur(4px);
        }
        .header-btn-outline-royal:hover {
            background: white;
            color: #111111;
            transform: translateY(-3px);
            border-color: white;
        }

        /* ============================================================
           STICKY BUTTONS (Appointment + Feedback)
        ============================================================ */
        .header-sticky-btn-group {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-end;
        }

        .header-sticky-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ff006e;
            color: #fff;
            padding: 16px 10px;
            border-radius: 20px 0 0 20px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.5px;
            transition: all 0.25s ease;
            border: none;
            font-family: 'Poppins', sans-serif;
            min-width: 48px;
            box-shadow: -3px 3px 14px rgba(0, 0, 0, 0.18);
            text-align: center;
            line-height: 1.2;
        }
        .header-sticky-btn:hover {
            transform: scale(1.04);
            box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.25);
            background: #6A0DAD;
        }
        .header-sticky-btn span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            display: inline-block;
            white-space: nowrap;
            line-height: 1.2;
        }

        .header-sticky-btn-appointment {
           background: var(--brand-gradient);
        }
        .header-sticky-btn-appointment:hover {
            background: #6A0DAD;
        }

        .header-sticky-btn-feedback {
            background: #6A0DAD;
        }
        .header-sticky-btn-feedback:hover {
            background: var(--brand-gradient);
        }

        /* ============================================================
           MODALS (Appointment + Feedback)
        ============================================================ */
        .header-booking-modal,
        .header-feedback-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .header-booking-modal.header-open,
        .header-feedback-modal.header-open {
            display: flex;
            visibility: visible;
            opacity: 1;
        }
/* =========================
   FEEDBACK FORM CSS FIX
========================= */

#feedbackForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.header-form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.header-form-row.header-full {
    display: block;
}

.header-form-row input,
.header-form-row textarea {
    width: 100%;
    padding: 12px 18px;
    border: 1.5px solid #F0E3D9;
    border-radius: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #fff;
}

.header-form-row input:focus,
.header-form-row textarea:focus {
    border-color: #9B1C31;
    box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
}

.header-form-row textarea {
    resize: vertical;
    min-height: 120px;
}

/* File Upload */

.header-file-input-wrapper {
    width: 100%;
}

.header-file-input-wrapper input[type="file"] {
    display: none;
}

.header-file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 2px dashed #D4A373;
    border-radius: 15px;
    cursor: pointer;
    background: #FFF8F2;
    color: #9B1C31;
    font-weight: 600;
    transition: 0.3s ease;
}

.header-file-input-label:hover {
    background: #F9EEE7;
}

.header-file-name-display {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

/* Submit Button */

.header-submit-btn {
    width: 100%;
    border: none;
    padding: 14px 20px;
    border-radius: 20px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    background: var(--brand-gradient);
    transition: all 0.3s ease;
}

.header-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 0, 110, 0.3);
}

/* Mobile */

@media (max-width: 768px) {
    .header-form-row {
        flex-direction: column;
        gap: 12px;
    }
}
        .header-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(6px);
            cursor: pointer;
        }

        .header-modal-container {
            position: relative;
            background: #ffffff;
            width: 92%;
            max-width: 560px;
            border-radius: 16px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
            animation: modalSlideIn 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            overflow: hidden;
            z-index: 2001;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(-24px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .header-modal-header {
            background: linear-gradient(135deg, #9B1C31, #D4A373);
            color: #fff;
            padding: 20px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }
        .header-modal-header h3 {
            margin: 0;
            font-size: 1.5rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            color: #fff;
        }

        /* ---- CLOSE BUTTON (visible & clickable) ---- */
        .header-modal-close {
            background: rgba(255, 255, 255, 0.25);
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: #fff;
            font-size: 1.6rem;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            line-height: 1;
            font-weight: 300;
            user-select: none;
        }
        .header-modal-close:hover {
            background: rgba(255, 255, 255, 0.45);
            transform: rotate(90deg);
            border-color: #fff;
        }
        .header-modal-close:focus {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        /* ---- Modal Body ---- */
        .header-modal-body {
            padding: 28px 30px 32px;
            overflow-y: auto;
            flex: 1;
        }

        /* ==== Form styles used in both main and modal ==== */
        .header-royal-input-group {
            margin-bottom: 14px;
        }
        .header-royal-input-group input,
        .header-royal-input-group select,
        .header-royal-input-group textarea {
            width: 100%;
            padding: 12px 18px;
            background: #FFFFFF;
            border: 1.5px solid #F0E3D9;
            border-radius: 40px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #2C2C2C;
            transition: all 0.3s ease;
            outline: none;
        }
        .header-royal-input-group select {
            cursor: pointer;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%239B1C31" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 20px center;
        }
        .header-royal-input-group textarea {
            border-radius: 24px;
            resize: vertical;
            padding: 12px 18px;
        }
        .header-royal-input-group input:focus,
        .header-royal-input-group select:focus,
        .header-royal-input-group textarea:focus {
            border-color: #9B1C31;
            box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
        }

        .header-btn-book-appointment {
            width: 100%;
            background: var(--brand-gradient);
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.35s ease;
            box-shadow: 0 8px 18px -6px rgba(197, 138, 75, 0.4);
            margin-top: 8px;
        }
        .header-btn-book-appointment:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
            background: #900808;
        }
        .header-btn-book-appointment:hover i {
            transform: translateX(5px);
        }

        .header-modal-feedback {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 0.9rem;
            text-align: center;
            min-height: 20px;
            color: #b91c1c;
            background: rgba(185, 28, 28, 0.08);
        }
        .header-modal-feedback:empty {
            display: none;
        }

        /* ---- Success header variant ---- */
        .header-modal-header.header-success-header {
            background: linear-gradient(135deg, #2e7d32, #4caf50);
        }

        .header-thankyou-modal .header-modal-body {
            text-align: center;
            padding: 40px 30px;
        }
        .header-thankyou-modal .header-modal-body i {
            font-size: 3.4rem;
            color: #4caf50;
            margin-bottom: 16px;
        }
        .header-thankyou-modal .header-modal-body p {
            font-size: 1.05rem;
            color: #3d3d3d;
            margin-bottom: 6px;
        }
        .header-thankyou-modal .header-modal-body .header-sub-text {
            color: #7a6b5f;
            font-size: 0.95rem;
        }
        .header-close-thankyou-btn {
            margin-top: 22px;
            background: linear-gradient(135deg, #4caf50, #66bb6a);
            color: #fff;
            border: none;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Poppins', sans-serif;
        }
        .header-close-thankyou-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.35);
        }

        /* ============================================================
           RESPONSIVE TWEAKS
        ============================================================ */
        @media (max-width: 768px) {
            .header-sticky-btn-group {
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                gap: 8px;
            }
            .header-sticky-btn {
                padding: 12px 8px;
                font-size: 0.8rem;
                min-width: 36px;
                border-radius: 14px 0 0 14px;
            }
            .header-modal-container {
                width: 95%;
                max-width: 480px;
            }
            .header-modal-header {
                padding: 16px 20px;
            }
            .header-modal-header h3 {
                font-size: 1.2rem;
            }
            .header-modal-body {
                padding: 20px 18px 24px;
            }
            .header-modal-close {
                width: 38px;
                height: 38px;
                font-size: 1.3rem;
            }
        }
        @media (max-width: 480px) {
            .header-sticky-btn {
                padding: 10px 6px;
                font-size: 0.7rem;
                min-width: 30px;
                border-radius: 10px 0 0 10px;
            }
            .header-sticky-btn span {
                letter-spacing: 0.3px;
            }
            .header-royal-input-group input,
            .header-royal-input-group select,
            .header-royal-input-group textarea {
                font-size: 0.85rem;
                padding: 10px 14px;
            }
        }

        /* ============================================================
           HERO (existing – kept intact)
        ============================================================ */
        .header-pm-hero {
            position: relative;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            min-height: 560px;
            overflow: hidden;
            background: #111;
            margin-top: -60px;
        }
        .header-pm-hero .header-pm-hero-swiper,
        .header-pm-hero .swiper-wrapper {
            width: 100%;
            height: 100%;
        }
        .header-pm-hero .swiper-slide {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #111;
        }
        .header-pm-hero-slide-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1) translateZ(0);
            animation: pmKenBurns 9s ease-in-out infinite alternate;
            will-change: transform;
            backface-visibility: hidden;
        }
        .swiper-slide:nth-child(even) .header-pm-hero-slide-img {
            animation-duration: 11s;
        }
        .swiper-slide:nth-child(3n) .header-pm-hero-slide-img {
            animation-duration: 13s;
        }
        @keyframes pmKenBurns {
            0% {
                transform: scale(1) translate(0, 0);
            }
            100% {
                transform: scale(1.15) translate(-1.5%, -1.5%);
            }
        }
        .header-pm-hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(145deg, rgba(90, 15, 25, 0.55) 0%, rgba(60, 8, 18, 0.45) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.85) 100%);
            pointer-events: none;
        }
        .header-pm-hero-content-wrap {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            padding: 0 24px;
        }
        .header-pm-hero-content {
            max-width: 820px;
            width: 100%;
            text-align: center;
            color: #fff;
            pointer-events: auto;
        }
        .header-pm-hero-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 28px;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s forwards;
        }
        .header-pm-hero-badge .header-pm-badge-line {
            width: 44px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #F3D47A, transparent);
        }
        .header-pm-hero-badge .header-pm-badge-label {
            font-size: 0.8rem;
            letter-spacing: 3px;
            color: #F3D47A;
            font-weight: 600;
            text-transform: uppercase;
            background: rgba(243, 212, 122, 0.1);
            padding: 8px 20px;
            border-radius: 50px;
            border: 1px solid rgba(243, 212, 122, 0.3);
            backdrop-filter: blur(5px);
            white-space: nowrap;
        }
        .header-pm-hero-heading {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 4.4rem;
            line-height: 1.12;
            letter-spacing: -1px;
            margin-bottom: 22px;
            color: #fff;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.35s forwards;
        }
        .header-pm-hero-heading .header-pm-accent {
            background: linear-gradient(135deg, #F3D47A, #D4A373, #F3D47A);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .header-pm-hero-subheading {
            font-family: 'Poppins', sans-serif;
            font-size: 1.15rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.88);
            max-width: 660px;
            margin: 0 auto 42px;
            line-height: 1.8;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.55s forwards;
        }
        .header-pm-hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.75s forwards;
        }
        @keyframes pmFadeUp {
            from {
                opacity: 0;
                transform: translateY(45px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .header-pm-hero .header-pm-hero-prev,
        .header-pm-hero .header-pm-hero-next {
            width: 52px;
            height: 52px;
            margin-top: -26px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(243, 212, 122, 0.35);
            border-radius: 50%;
            backdrop-filter: blur(6px);
            color: #F3D47A;
            transition: all 0.35s ease;
            z-index: 5;
        }
        .header-pm-hero .header-pm-hero-prev:hover,
        .header-pm-hero .header-pm-hero-next:hover {
            background: linear-gradient(135deg, #F3D47A, #D4A373);
            color: #111;
            transform: scale(1.08);
        }
        .header-pm-hero .header-pm-hero-prev::after,
        .header-pm-hero .header-pm-hero-next::after {
            font-size: 16px;
            font-weight: 700;
        }
        .header-pm-hero .header-pm-hero-pagination {
            bottom: 110px !important;
            z-index: 5;
        }
        .header-pm-hero .header-pm-hero-pagination .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.55);
            opacity: 1;
            transition: all 0.35s ease;
        }
        .header-pm-hero .header-pm-hero-pagination .swiper-pagination-bullet-active {
            width: 30px;
            border-radius: 6px;
            background: linear-gradient(135deg, #F3D47A, #D4A373);
        }
        .header-pm-hero-scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            color: #F3D47A;
            font-size: 1.3rem;
            z-index: 5;
            pointer-events: none;
        }
        @media (max-width: 1200px) {
            .header-pm-hero-heading {
                font-size: 3.6rem;
            }
        }
        @media (max-width: 992px) {
            .header-pm-hero-heading {
                font-size: 3.1rem;
            }
            .header-pm-hero-subheading {
                font-size: 1.05rem;
            }
        }
        @media (max-width: 768px) {
            .header-pm-hero {
                min-height: 600px;
            }
            .header-pm-hero-heading {
                font-size: 2.3rem;
                margin-bottom: 16px;
            }
            .header-pm-hero-subheading {
                font-size: 1rem;
                margin-bottom: 32px;
            }
            .header-pm-hero-buttons {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            .header-pm-hero-buttons a {
                width: 100%;
                max-width: 320px;
                justify-content: center;
            }
            .header-pm-hero .header-pm-hero-prev,
            .header-pm-hero .header-pm-hero-next {
                width: 42px;
                height: 42px;
            }
            .header-pm-hero .header-pm-hero-pagination {
                bottom: 90px !important;
            }
        }
        @media (max-width: 480px) {
            .header-pm-hero-heading {
                font-size: 1.85rem;
            }
            .header-pm-hero-badge .header-pm-badge-label {
                font-size: 0.7rem;
                padding: 6px 14px;
                letter-spacing: 2px;
            }
            .header-pm-hero-subheading {
                font-size: 0.92rem;
            }
        }

        /* ============================================================
           EXISTING STYLES (preserved)
        ============================================================ */
        .header-section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 20px;
            color: #111111;
        }
        .header-section-title:after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #9B1C31, #D4A373);
            margin: 20px auto 0;
            border-radius: 3px;
        }
        .header-counter-grid-royal {
            display: flex;
            gap: 25px;
            margin: 40px 0;
            flex-wrap: wrap;
        }
        .header-royal-stat-card {
            background: white;
            padding: 28px 20px;
            border-radius: 10px;
            text-align: center;
            flex: 1;
            transition: 0.3s;
            border-bottom: 3px solid #9B1C31;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
        }
        .header-royal-stat-card i {
            font-size: 38px;
            background: linear-gradient(135deg, #9B1C31, #D4A373);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .header-services-section {
            background: linear-gradient(145deg, #FFF8F2 0%, #F9EEE7 100%);
            padding: 100px 0;
        }
        .header-section-heading {
            text-align: center;
            margin-bottom: 60px;
        }
        .header-sub-title {
            color: #9B1C31;
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            font-weight: 600;
        }
        .header-section-desc {
            max-width: 700px;
            margin: 15px auto 0;
            color: #6B5A4F;
            line-height: 1.8;
        }
        .header-service-grid-royal {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
            gap: 40px;
            margin-top: 20px;
        }
        .header-service-card-royal {
            background: #FFFFFF;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            border: 1px solid rgba(212, 163, 115, 0.2);
        }
        .header-service-card-royal:hover {
            transform: translateY(-12px);
            box-shadow: 0 35px 55px -15px rgba(155, 28, 49, 0.25);
        }
        .header-service-img-wrapper {
            width: 100%;
            height: 400px;
            overflow: hidden;
            background: #F4EAE1;
        }
        .header-service-card-royal img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        }
        .header-service-card-royal:hover img {
            transform: scale(1.06);
        }
        .header-service-content {
            padding: 28px 28px 32px;
            text-align: center;
            background: white;
        }
        .header-service-content h3 {
            font-size: 1.7rem;
            font-weight: 700;
            color: #2C2C2C;
            margin-bottom: 12px;
        }
        .header-service-content p {
            color: #6B5A4F;
            line-height: 1.6;
            font-size: 0.95rem;
            margin-bottom: 20px;
        }
        .header-btn-packages {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
             background: var(--brand-gradient);
            color: #fff;
            font-weight: 700;
            font-size: 0.9rem;
            padding: 12px 28px;
            border-radius: 30px;
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 20px -6px rgba(197, 138, 75, 0.4);
            width: 100%;
            justify-content: center;
            margin-top: 8px;
            transition: all 0.35s ease;
        }
        .header-btn-packages:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
             background: #900808;
        }
        .header-btn-packages:hover i {
            transform: translateX(5px);
        }
        .header-modal-overlay-old {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(15px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            cursor: pointer;
        }
        .header-modal-overlay-old.header-active {
            opacity: 1;
            visibility: visible;
        }
        .header-modal-container-old {
            max-width: 90vw;
            max-height: 90vh;
            position: relative;
            cursor: default;
        }
        .header-modal-image {
            max-width: 100%;
            max-height: 85vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 15px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            display: block;
            margin: 0 auto;
            border: 3px solid rgba(243, 212, 122, 0.6);
            animation: modalZoomIn 0.4s ease-out;
        }
        @keyframes modalZoomIn {
            from {
                opacity: 0;
                transform: scale(0.92);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        .header-modal-close-old {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #f3d47a, #c58a4b);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: #1E1E1E;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border: none;
        }
        .header-modal-close-old:hover {
            transform: rotate(90deg);
        }
        .header-team-grid-royal {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 45px;
        }
        .header-team-card-royal {
            text-align: center;
            background: white;
            padding: 30px 20px;
            border-radius: 15px;
            transition: var(--transition-lux);
        }
        .header-team-card-royal:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-royal);
        }
        .header-team-img-royal {
            width: 170px;
            height: 170px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #D4A373;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        .header-gallery-masonry-royal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.header-gallery-item-royal {
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
}

.header-gallery-item-royal img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: 0.6s;
}

.header-gallery-item-royal:hover img {
    transform: scale(1.08);
}
        .header-testimonials-section {
            background: transparent;
            padding: 110px 0;
        }
        .header-reviews-slider-container {
            margin-top: 50px;
            overflow: visible;
            width: 100%;
        }
        .swiper.header-reviews-swiper {
            padding: 20px 10px 50px 10px;
            overflow: visible;
        }
        .header-review-card {
            background: #FFFFFF;
            border-radius: 15px;
            padding: 32px 28px;
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(212, 163, 115, 0.2);
        }
        .header-review-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 30px 45px -15px rgba(155, 28, 49, 0.2);
        }
        .header-review-profile {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        }
        .header-review-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #D4A373;
        }
        .header-review-avatar-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #D4A373, #9B1C31);
            color: #fff;
            font-size: 1.4rem;
        }
        .header-reviewer-name {
            font-size: 1.2rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            color: #1E1E1E;
        }
        .header-verified-badge {
            font-size: 0.7rem;
            color: #9B1C31;
            font-weight: 500;
        }
        .header-review-stars {
            margin-bottom: 18px;
            color: #F3B33D;
            font-size: 1rem;
            letter-spacing: 2px;
        }
        .header-review-text {
            color: #4A3B32;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            flex: 1;
        }
        .header-google-icon {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            color: #9B1C31;
            font-size: 0.75rem;
        }
        .header-google-icon i {
            color: #EA4335;
        }
        .header-reviews-swiper .swiper-pagination-bullet {
            background: #D4A373;
            opacity: 0.5;
            width: 10px;
            height: 10px;
        }
        .header-reviews-swiper .swiper-pagination-bullet-active {
            background: #9B1C31;
            opacity: 1;
            width: 24px;
            border-radius: 6px;
        }
        .header-academy-royal {
            background: var(--brand-gradient);
            border-radius: 15px;
            padding: 80px 40px;
            text-align: center;
            border: 1px solid rgba(212, 163, 115, 0.3);
        }
        .header-academy-royal h2 {
            color: #Ffff;
        }
        .header-enquiry-single-card {
            background: #FFFFFF;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-luxury);
            display: flex;
            flex-wrap: wrap;
            transition: transform 0.3s ease;
            max-width: 1300px;
            margin: 0 auto;
        }
        .header-enquiry-single-card:hover {
            transform: translateY(-5px);
        }
        .header-enquiry-img-col {
            flex: 0.9;
            min-width: 260px;
            overflow: hidden;
        }
        .header-enquiry-img-col img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 380px;
            max-height: 560px;
        }
        .header-enquiry-form-col {
            flex: 1.1;
            min-width: 300px;
            padding: 32px 36px;
            background: white;
        }
        .header-enquiry-form-col .header-form-heading {
            font-size: 1.8rem;
            font-family: 'Poppins', sans-serif;
            color: #2C2C2C;
            margin-bottom: 6px;
            font-weight: 700;
        }
        .header-enquiry-form-col .header-form-sub {
            color: #9B1C31;
            font-size: 0.8rem;
            letter-spacing: 1px;
            margin-bottom: 20px;
            border-left: 3px solid #D4A373;
            padding-left: 10px;
        }
        .header-royal-input-group {
            margin-bottom: 14px;
        }
        .header-royal-input-group input,
        .header-royal-input-group select,
        .header-royal-input-group textarea {
            width: 100%;
            padding: 12px 18px;
            background: #FFFFFF;
            border: 1.5px solid #F0E3D9;
            border-radius: 40px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #2C2C2C;
            transition: all 0.3s ease;
            outline: none;
        }
        .header-royal-input-group select {
            cursor: pointer;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%239B1C31" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 20px center;
        }
        .header-royal-input-group textarea {
            border-radius: 24px;
            resize: vertical;
            padding: 12px 18px;
        }
        .header-royal-input-group input:focus,
        .header-royal-input-group select:focus,
        .header-royal-input-group textarea:focus {
            border-color: #9B1C31;
            box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
        }
        .header-btn-book-appointment {
            width: 100%;
          background: var(--brand-gradient);
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.35s ease;
            box-shadow: 0 8px 18px -6px rgba(197, 138, 75, 0.4);
            margin-top: 8px;
        }
        .header-btn-book-appointment:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
             background:  #900808;
        }
        .header-btn-book-appointment:hover i {
            transform: translateX(5px);
        }
        .header-map-section {
            padding: 80px 0;
            background: #fdf7f3;
        }
        .header-map-contact-wrapper {
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            gap: 0;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border-radius: 24px;
        }
        .header-map-container {
            flex: 1;
            min-width: 300px;
        }
        .header-map-container iframe {
            width: 100%;
            height: 450px;
            border: 0;
            display: block;
        }
        .header-contact-info {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 0 24px 24px 0;
        }
        .header-contact-info h2 {
            font-size: 36px;
            margin-bottom: 25px;
            color: #b8865b;
        }
        .header-contact-info p {
            font-size: 18px;
            color: #555;
            margin-bottom: 15px;
            line-height: 1.6;
        }


/* index page style */
    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(to bottom, #FFF8F2, #F9EEE7);
            color: #5B4B42;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        h1,
        h2,
        h3,
        h4,
        .index-luxury-heading {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .index-script-text {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
        }
        :root {
            --royal-red: #9B1C31;
            --rose-gold: #D4A373;
            --ivory: #FFF8F2;
            --cream: #F9EEE7;
            --gold-premium: #F3D47A;
            --matte-black: #111111;
            --soft-text: #5B4B42;
            --white: #FFFFFF;
            --shadow-luxury: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            --shadow-royal: 0 20px 35px -10px rgba(155, 28, 49, 0.15);
            --transition-lux: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        .index-container-royal {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 32px;
        }
        .index-section-royal {
            padding: 110px 0;
        }
        .index-btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-decoration: none;
            background: black;
            color: #fff;
            padding: 15px 32px;
            border-radius: 60px;
            font-weight: 700;
            border: none;
            transition: 0.35s ease;
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35);
        }
        .index-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(212, 175, 55, 0.45);
        }
        .index-btn-outline-royal {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition-lux);
            display: inline-block;
            text-decoration: none;
            backdrop-filter: blur(4px);
        }
        .index-btn-outline-royal:hover {
            background: white;
            color: #111111;
            transform: translateY(-3px);
            border-color: white;
        }

        /* ============================================================
           STICKY BUTTONS (Appointment + Feedback)
        ============================================================ */
        .index-sticky-btn-group {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-end;
        }

        .index-sticky-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ff006e;
            color: #fff;
            padding: 16px 10px;
            border-radius: 20px 0 0 20px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.5px;
            transition: all 0.25s ease;
            border: none;
            font-family: 'Poppins', sans-serif;
            min-width: 48px;
            box-shadow: -3px 3px 14px rgba(0, 0, 0, 0.18);
            text-align: center;
            line-height: 1.2;
        }
        .index-sticky-btn:hover {
            transform: scale(1.04);
            box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.25);
            background: #6A0DAD;
        }
        .index-sticky-btn span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            display: inline-block;
            white-space: nowrap;
            line-height: 1.2;
        }

        .index-sticky-btn-appointment {
           background: var(--brand-gradient);
        }
        .index-sticky-btn-appointment:hover {
            background: #6A0DAD;
        }

        .index-sticky-btn-feedback {
            background: #6A0DAD;
        }
        .index-sticky-btn-feedback:hover {
            background: var(--brand-gradient);
        }

        /* ============================================================
           MODALS (Appointment + Feedback)
        ============================================================ */
        .index-booking-modal,
        .index-feedback-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .index-booking-modal.index-open,
        .index-feedback-modal.index-open {
            display: flex;
            visibility: visible;
            opacity: 1;
        }
/* =========================
   FEEDBACK FORM CSS FIX
========================= */

#feedbackForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.index-form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.index-form-row.index-full {
    display: block;
}

.index-form-row input,
.index-form-row textarea {
    width: 100%;
    padding: 12px 18px;
    border: 1.5px solid #F0E3D9;
    border-radius: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #fff;
}

.index-form-row input:focus,
.index-form-row textarea:focus {
    border-color: #9B1C31;
    box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
}

.index-form-row textarea {
    resize: vertical;
    min-height: 120px;
}

/* File Upload */

.index-file-input-wrapper {
    width: 100%;
}

.index-file-input-wrapper input[type="file"] {
    display: none;
}

.index-file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 2px dashed #D4A373;
    border-radius: 15px;
    cursor: pointer;
    background: #FFF8F2;
    color: #9B1C31;
    font-weight: 600;
    transition: 0.3s ease;
}

.index-file-input-label:hover {
    background: #F9EEE7;
}

.index-file-name-display {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

/* Submit Button */

.index-submit-btn {
    width: 100%;
    border: none;
    padding: 14px 20px;
    border-radius: 20px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    background: var(--brand-gradient);
    transition: all 0.3s ease;
}

.index-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 0, 110, 0.3);
}

/* Mobile */

@media (max-width: 768px) {
    .index-form-row {
        flex-direction: column;
        gap: 12px;
    }
}
        .index-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(6px);
            cursor: pointer;
        }

        .index-modal-container {
            position: relative;
            background: #ffffff;
            width: 92%;
            max-width: 560px;
            border-radius: 16px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
            animation: modalSlideIn 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            overflow: hidden;
            z-index: 2001;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(-24px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .index-modal-header {
            background: linear-gradient(135deg, #9B1C31, #D4A373);
            color: #fff;
            padding: 20px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }
        .index-modal-header h3 {
            margin: 0;
            font-size: 1.5rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            color: #fff;
        }

        /* ---- CLOSE BUTTON (visible & clickable) ---- */
        .index-modal-close {
            background: rgba(255, 255, 255, 0.25);
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: #fff;
            font-size: 1.6rem;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            line-height: 1;
            font-weight: 300;
            user-select: none;
        }
        .index-modal-close:hover {
            background: rgba(255, 255, 255, 0.45);
            transform: rotate(90deg);
            border-color: #fff;
        }
        .index-modal-close:focus {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        /* ---- Modal Body ---- */
        .index-modal-body {
            padding: 28px 30px 32px;
            overflow-y: auto;
            flex: 1;
        }

        /* ==== Form styles used in both main and modal ==== */
        .index-royal-input-group {
            margin-bottom: 14px;
        
    /* -- merged from index.php -- */

            margin-bottom: 14px;
        
}
        .index-royal-input-group input,
        .index-royal-input-group select,
        .index-royal-input-group textarea {
            width: 100%;
            padding: 12px 18px;
            background: #FFFFFF;
            border: 1.5px solid #F0E3D9;
            border-radius: 40px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #2C2C2C;
            transition: all 0.3s ease;
            outline: none;
        
    /* -- merged from index.php -- */

            width: 100%;
            padding: 12px 18px;
            background: #FFFFFF;
            border: 1.5px solid #F0E3D9;
            border-radius: 40px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #2C2C2C;
            transition: all 0.3s ease;
            outline: none;
        
}
        .index-royal-input-group select {
            cursor: pointer;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%239B1C31" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 20px center;
        
    /* -- merged from index.php -- */

            cursor: pointer;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%239B1C31" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 20px center;
        
}
        .index-royal-input-group textarea {
            border-radius: 24px;
            resize: vertical;
            padding: 12px 18px;
        
    /* -- merged from index.php -- */

            border-radius: 24px;
            resize: vertical;
            padding: 12px 18px;
        
}
        .index-royal-input-group input:focus,
        .index-royal-input-group select:focus,
        .index-royal-input-group textarea:focus {
            border-color: #9B1C31;
            box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
        
    /* -- merged from index.php -- */

            border-color: #9B1C31;
            box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
        
}

        .index-btn-book-appointment {
            width: 100%;
            background: var(--brand-gradient);
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.35s ease;
            box-shadow: 0 8px 18px -6px rgba(197, 138, 75, 0.4);
            margin-top: 8px;
        
    /* -- merged from index.php -- */

            width: 100%;
          background: linear-gradient(
    135deg,
    #900808 0%,
    #FF006E 100%
);
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.35s ease;
            box-shadow: 0 8px 18px -6px rgba(197, 138, 75, 0.4);
            margin-top: 8px;
        
}
        .index-btn-book-appointment:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
            background: #900808;
        
    /* -- merged from index.php -- */

            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
             background:  #900808;
        
}
        .index-btn-book-appointment:hover i {
            transform: translateX(5px);
        
    /* -- merged from index.php -- */

            transform: translateX(5px);
        
}

        .index-modal-feedback {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 0.9rem;
            text-align: center;
            min-height: 20px;
            color: #b91c1c;
            background: rgba(185, 28, 28, 0.08);
        }
        .index-modal-feedback:empty {
            display: none;
        }

        /* ---- Success header variant ---- */
        .index-modal-header.index-success-header {
            background: linear-gradient(135deg, #2e7d32, #4caf50);
        
    /* -- merged from index.php -- */

            background: linear-gradient(135deg, #2e7d32, #4caf50);
        
}

        .index-thankyou-modal .index-modal-body {
            text-align: center;
            padding: 40px 30px;
        
    /* -- merged from index.php -- */

            text-align: center;
            padding: 40px 30px;
        
}
        .index-thankyou-modal .index-modal-body i {
            font-size: 3.4rem;
            color: #4caf50;
            margin-bottom: 16px;
        
    /* -- merged from index.php -- */

            font-size: 3.4rem;
            color: #4caf50;
            margin-bottom: 16px;
        
}
        .index-thankyou-modal .index-modal-body p {
            font-size: 1.05rem;
            color: #3d3d3d;
            margin-bottom: 6px;
        
    /* -- merged from index.php -- */

            font-size: 1.05rem;
            color: #3d3d3d;
            margin-bottom: 6px;
        
}
        .index-thankyou-modal .index-modal-body .index-sub-text {
            color: #7a6b5f;
            font-size: 0.95rem;
        
    /* -- merged from index.php -- */

            color: #7a6b5f;
            font-size: 0.95rem;
        
}
        .index-close-thankyou-btn {
            margin-top: 22px;
            background: linear-gradient(135deg, #4caf50, #66bb6a);
            color: #fff;
            border: none;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Poppins', sans-serif;
        
    /* -- merged from index.php -- */

            margin-top: 22px;
            background: linear-gradient(135deg, #4caf50, #66bb6a);
            color: #fff;
            border: none;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Poppins', sans-serif;
        
}
        .index-close-thankyou-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.35);
        
    /* -- merged from index.php -- */

            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.35);
        
}

        /* ============================================================
           RESPONSIVE TWEAKS
        ============================================================ */
        @media (max-width: 768px) {
            .index-sticky-btn-group {
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                gap: 8px;
            }
            .index-sticky-btn {
                padding: 12px 8px;
                font-size: 0.8rem;
                min-width: 36px;
                border-radius: 14px 0 0 14px;
            }
            .index-modal-container {
                width: 95%;
                max-width: 480px;
            }
            .index-modal-header {
                padding: 16px 20px;
            }
            .index-modal-header h3 {
                font-size: 1.2rem;
            }
            .index-modal-body {
                padding: 20px 18px 24px;
            }
            .index-modal-close {
                width: 38px;
                height: 38px;
                font-size: 1.3rem;
            }
        }
        @media (max-width: 480px) {
            .index-sticky-btn {
                padding: 10px 6px;
                font-size: 0.7rem;
                min-width: 30px;
                border-radius: 10px 0 0 10px;
            }
            .index-sticky-btn span {
                letter-spacing: 0.3px;
            }
            .index-royal-input-group input,
            .index-royal-input-group select,
            .index-royal-input-group textarea {
                font-size: 0.85rem;
                padding: 10px 14px;
            }
        }

        /* ============================================================
           HERO (existing – kept intact)
        ============================================================ */
        .index-pm-hero {
            position: relative;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            min-height: 560px;
            overflow: hidden;
            background: #111;
            margin-top: -60px;
        
    /* -- merged from index.php -- */

            position: relative;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            min-height: 560px;
            overflow: hidden;
            background: #111;
            margin-top: -60px;
        
}
        .index-pm-hero .index-pm-hero-swiper,
        .index-pm-hero .swiper-wrapper {
            width: 100%;
            height: 100%;
        
    /* -- merged from index.php -- */

            width: 100%;
            height: 100%;
        
}
        .index-pm-hero .swiper-slide {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #111;
        
    /* -- merged from index.php -- */

            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #111;
        
}
        .index-pm-hero-slide-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1) translateZ(0);
            animation: pmKenBurns 9s ease-in-out infinite alternate;
            will-change: transform;
            backface-visibility: hidden;
        
    /* -- merged from index.php -- */

            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1) translateZ(0);
            animation: pmKenBurns 9s ease-in-out infinite alternate;
            will-change: transform;
            backface-visibility: hidden;
        
}
        .swiper-slide:nth-child(even) .index-pm-hero-slide-img {
            animation-duration: 11s;
        
    /* -- merged from index.php -- */

            animation-duration: 11s;
        
}
        .swiper-slide:nth-child(3n) .index-pm-hero-slide-img {
            animation-duration: 13s;
        
    /* -- merged from index.php -- */

            animation-duration: 13s;
        
}
        @keyframes pmKenBurns {
            0% {
                transform: scale(1) translate(0, 0);
            }
            100% {
                transform: scale(1.15) translate(-1.5%, -1.5%);
            }
        }
        .index-pm-hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(145deg, rgba(90, 15, 25, 0.55) 0%, rgba(60, 8, 18, 0.45) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.85) 100%);
            pointer-events: none;
        
    /* -- merged from index.php -- */

            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(145deg, rgba(90, 15, 25, 0.55) 0%, rgba(60, 8, 18, 0.45) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.85) 100%);
            pointer-events: none;
        
}
        .index-pm-hero-content-wrap {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            padding: 0 24px;
        
    /* -- merged from index.php -- */

            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            padding: 0 24px;
        
}
        .index-pm-hero-content {
            max-width: 820px;
            width: 100%;
            text-align: center;
            color: #fff;
            pointer-events: auto;
        
    /* -- merged from index.php -- */

            max-width: 820px;
            width: 100%;
            text-align: center;
            color: #fff;
            pointer-events: auto;
        
}
        .index-pm-hero-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 28px;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s forwards;
        
    /* -- merged from index.php -- */

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 28px;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s forwards;
        
}
        .index-pm-hero-badge .index-pm-badge-line {
            width: 44px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #F3D47A, transparent);
        
    /* -- merged from index.php -- */

            width: 44px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #F3D47A, transparent);
        
}
        .index-pm-hero-badge .index-pm-badge-label {
            font-size: 0.8rem;
            letter-spacing: 3px;
            color: #F3D47A;
            font-weight: 600;
            text-transform: uppercase;
            background: rgba(243, 212, 122, 0.1);
            padding: 8px 20px;
            border-radius: 50px;
            border: 1px solid rgba(243, 212, 122, 0.3);
            backdrop-filter: blur(5px);
            white-space: nowrap;
        
    /* -- merged from index.php -- */

            font-size: 0.8rem;
            letter-spacing: 3px;
            color: #F3D47A;
            font-weight: 600;
            text-transform: uppercase;
            background: rgba(243, 212, 122, 0.1);
            padding: 8px 20px;
            border-radius: 50px;
            border: 1px solid rgba(243, 212, 122, 0.3);
            backdrop-filter: blur(5px);
            white-space: nowrap;
        
}
        .index-pm-hero-heading {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 4.4rem;
            line-height: 1.12;
            letter-spacing: -1px;
            margin-bottom: 22px;
            color: #fff;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.35s forwards;
        
    /* -- merged from index.php -- */

            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 4.4rem;
            line-height: 1.12;
            letter-spacing: -1px;
            margin-bottom: 22px;
            color: #fff;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.35s forwards;
        
}
        .index-pm-hero-heading .index-pm-accent {
            background: linear-gradient(135deg, #F3D47A, #D4A373, #F3D47A);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        
    /* -- merged from index.php -- */

            background: linear-gradient(135deg, #F3D47A, #D4A373, #F3D47A);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        
}
        .index-pm-hero-subheading {
            font-family: 'Poppins', sans-serif;
            font-size: 1.15rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.88);
            max-width: 660px;
            margin: 0 auto 42px;
            line-height: 1.8;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.55s forwards;
        
    /* -- merged from index.php -- */

            font-family: 'Poppins', sans-serif;
            font-size: 1.15rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.88);
            max-width: 660px;
            margin: 0 auto 42px;
            line-height: 1.8;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.55s forwards;
        
}
        .index-pm-hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.75s forwards;
        
    /* -- merged from index.php -- */

            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: pmFadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.75s forwards;
        
}
        @keyframes pmFadeUp {
            from {
                opacity: 0;
                transform: translateY(45px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .index-pm-hero .index-pm-hero-prev,
        .index-pm-hero .index-pm-hero-next {
            width: 52px;
            height: 52px;
            margin-top: -26px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(243, 212, 122, 0.35);
            border-radius: 50%;
            backdrop-filter: blur(6px);
            color: #F3D47A;
            transition: all 0.35s ease;
            z-index: 5;
        
    /* -- merged from index.php -- */

            width: 52px;
            height: 52px;
            margin-top: -26px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(243, 212, 122, 0.35);
            border-radius: 50%;
            backdrop-filter: blur(6px);
            color: #F3D47A;
            transition: all 0.35s ease;
            z-index: 5;
        
}
        .index-pm-hero .index-pm-hero-prev:hover,
        .index-pm-hero .index-pm-hero-next:hover {
            background: linear-gradient(135deg, #F3D47A, #D4A373);
            color: #111;
            transform: scale(1.08);
        
    /* -- merged from index.php -- */

            background: linear-gradient(135deg, #F3D47A, #D4A373);
            color: #111;
            transform: scale(1.08);
        
}
        .index-pm-hero .index-pm-hero-prev::after,
        .index-pm-hero .index-pm-hero-next::after {
            font-size: 16px;
            font-weight: 700;
        
    /* -- merged from index.php -- */

            font-size: 16px;
            font-weight: 700;
        
}
        .index-pm-hero .index-pm-hero-pagination {
            bottom: 110px !important;
            z-index: 5;
        
    /* -- merged from index.php -- */

            bottom: 110px !important;
            z-index: 5;
        
}
        .index-pm-hero .index-pm-hero-pagination .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.55);
            opacity: 1;
            transition: all 0.35s ease;
        
    /* -- merged from index.php -- */

            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.55);
            opacity: 1;
            transition: all 0.35s ease;
        
}
        .index-pm-hero .index-pm-hero-pagination .swiper-pagination-bullet-active {
            width: 30px;
            border-radius: 6px;
            background: linear-gradient(135deg, #F3D47A, #D4A373);
        
    /* -- merged from index.php -- */

            width: 30px;
            border-radius: 6px;
            background: linear-gradient(135deg, #F3D47A, #D4A373);
        
}
        .index-pm-hero-scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            color: #F3D47A;
            font-size: 1.3rem;
            z-index: 5;
            pointer-events: none;
        
    /* -- merged from index.php -- */

            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            color: #F3D47A;
            font-size: 1.3rem;
            z-index: 5;
            pointer-events: none;
        
}
        @media (max-width: 1200px) {
            .index-pm-hero-heading {
                font-size: 3.6rem;
            }
        }
        @media (max-width: 992px) {
            .index-pm-hero-heading {
                font-size: 3.1rem;
            }
            .index-pm-hero-subheading {
                font-size: 1.05rem;
            }
        }
        @media (max-width: 768px) {
            .index-pm-hero {
                min-height: 600px;
            }
            .index-pm-hero-heading {
                font-size: 2.3rem;
                margin-bottom: 16px;
            }
            .index-pm-hero-subheading {
                font-size: 1rem;
                margin-bottom: 32px;
            }
            .index-pm-hero-buttons {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            .index-pm-hero-buttons a {
                width: 100%;
                max-width: 320px;
                justify-content: center;
            }
            .index-pm-hero .index-pm-hero-prev,
            .index-pm-hero .index-pm-hero-next {
                width: 42px;
                height: 42px;
            }
            .index-pm-hero .index-pm-hero-pagination {
                bottom: 90px !important;
            }
        }
        @media (max-width: 480px) {
            .index-pm-hero-heading {
                font-size: 1.85rem;
            }
            .index-pm-hero-badge .index-pm-badge-label {
                font-size: 0.7rem;
                padding: 6px 14px;
                letter-spacing: 2px;
            }
            .index-pm-hero-subheading {
                font-size: 0.92rem;
            }
        }

        /* ============================================================
           EXISTING STYLES (preserved)
        ============================================================ */
        .index-section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 20px;
            color: #111111;
        
    /* -- merged from index.php -- */

            text-align: center;
            font-size: 3rem;
            margin-bottom: 20px;
            color: #111111;
        
}
        .index-section-title:after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #9B1C31, #D4A373);
            margin: 20px auto 0;
            border-radius: 3px;
        
    /* -- merged from index.php -- */

            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #9B1C31, #D4A373);
            margin: 20px auto 0;
            border-radius: 3px;
        
}
        .index-counter-grid-royal {
            display: flex;
            gap: 25px;
            margin: 40px 0;
            flex-wrap: wrap;
        
    /* -- merged from index.php -- */

            display: flex;
            gap: 25px;
            margin: 40px 0;
            flex-wrap: wrap;
        
}
        .index-royal-stat-card {
            background: white;
            padding: 28px 20px;
            border-radius: 10px;
            text-align: center;
            flex: 1;
            transition: 0.3s;
            border-bottom: 3px solid #9B1C31;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
        
    /* -- merged from index.php -- */

            background: white;
            padding: 28px 20px;
            border-radius: 10px;
            text-align: center;
            flex: 1;
            transition: 0.3s;
            border-bottom: 3px solid #9B1C31;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
        
}
        .index-royal-stat-card i {
            font-size: 38px;
            background: linear-gradient(135deg, #9B1C31, #D4A373);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        
    /* -- merged from index.php -- */

            font-size: 38px;
            background: linear-gradient(135deg, #9B1C31, #D4A373);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        
}
        .index-services-section {
            background: linear-gradient(145deg, #FFF8F2 0%, #F9EEE7 100%);
            padding: 100px 0;
        
    /* -- merged from index.php -- */

            background: linear-gradient(145deg, #FFF8F2 0%, #F9EEE7 100%);
            padding: 100px 0;
        
}
        .index-section-heading {
            text-align: center;
            margin-bottom: 60px;
        
    /* -- merged from index.php -- */

            text-align: center;
            margin-bottom: 60px;
        
}
        .index-sub-title {
            color: #9B1C31;
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            font-weight: 600;
        
    /* -- merged from index.php -- */

            color: #9B1C31;
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            font-weight: 600;
        
}
        .index-section-desc {
            max-width: 700px;
            margin: 15px auto 0;
            color: #6B5A4F;
            line-height: 1.8;
        
    /* -- merged from index.php -- */

            max-width: 700px;
            margin: 15px auto 0;
            color: #6B5A4F;
            line-height: 1.8;
        
}
        .index-service-grid-royal {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
            gap: 40px;
            margin-top: 20px;
        
    /* -- merged from index.php -- */

            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
            gap: 40px;
            margin-top: 20px;
        
}
        .index-service-card-royal {
            background: #FFFFFF;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            border: none;
            position: relative;
            z-index: 1;
            padding: 0;
        
    /* -- merged from index.php -- */

            background: #FFFFFF;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            border: 1px solid rgba(212, 163, 115, 0.2);
        
}
        /* Neon "chasing light" traveling border streak (CSS-only, conic-gradient + mask) */
        @property --index-border-angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }
        .index-service-card-royal::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            border-radius: inherit;
            padding: 4px;
            box-sizing: border-box;
            background: conic-gradient(
                from var(--index-border-angle),
                transparent 0deg,
                transparent 255deg,
                rgba(176, 38, 255, 0) 270deg,
                rgba(176, 38, 255, 0.95) 300deg,
                rgba(255, 62, 201, 1) 325deg,
                rgba(36, 224, 255, 1) 348deg,
                rgba(36, 224, 255, 0) 360deg
            );
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            filter: drop-shadow(0 0 3px rgba(255, 62, 201, 0.6)) drop-shadow(0 0 7px rgba(36, 224, 255, 0.35));
            animation: indexServiceBorderChase 4s linear infinite;
            animation-delay: inherit;
            will-change: --index-border-angle;
        }
        @keyframes indexServiceBorderChase {
            to { --index-border-angle: 360deg; }
        }
        /* Stagger each card so the highlights don't flash in sync */
        .index-service-card-royal:nth-of-type(1) { animation-delay: 0s; }
        .index-service-card-royal:nth-of-type(2) { animation-delay: -0.7s; }
        .index-service-card-royal:nth-of-type(3) { animation-delay: -1.4s; }
        .index-service-card-royal:nth-of-type(4) { animation-delay: -2.1s; }
        .index-service-card-royal:nth-of-type(5) { animation-delay: -2.8s; }
        .index-service-card-royal:nth-of-type(6) { animation-delay: -3.5s; }
        .index-service-card-royal:hover {
            transform: translateY(-12px);
            box-shadow: 0 35px 55px -15px rgba(155, 28, 49, 0.25);
        
    /* -- merged from index.php -- */

            transform: translateY(-12px);
            box-shadow: 0 35px 55px -15px rgba(155, 28, 49, 0.25);
        
}
        .index-service-card-royal:hover::before {
            animation-duration: 2.4s;
        }
        .index-service-img-wrapper {
            width: 100%;
            height: 400px;
            overflow: hidden;
            background: #F4EAE1;
            position: relative;
            z-index: 1;
        
    /* -- merged from index.php -- */

            width: 100%;
            height: 400px;
            overflow: hidden;
            background: #F4EAE1;
        
}
        .index-service-card-royal img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        
    /* -- merged from index.php -- */

            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        
}
        .index-service-card-royal:hover img {
            transform: scale(1.06);
        
    /* -- merged from index.php -- */

            transform: scale(1.06);
        
}
        .index-service-content {
            padding: 28px 28px 32px;
            text-align: center;
            background: white;
            position: relative;
            z-index: 1;
        
    /* -- merged from index.php -- */

            padding: 28px 28px 32px;
            text-align: center;
            background: white;
        
}
        .index-service-content h3 {
            font-size: 1.7rem;
            font-weight: 700;
            color: #2C2C2C;
            margin-bottom: 12px;
        
    /* -- merged from index.php -- */

            font-size: 1.7rem;
            font-weight: 700;
            color: #2C2C2C;
            margin-bottom: 12px;
        
}
        .index-service-content p {
            color: #6B5A4F;
            line-height: 1.6;
            font-size: 0.95rem;
            margin-bottom: 20px;
        
    /* -- merged from index.php -- */

            color: #6B5A4F;
            line-height: 1.6;
            font-size: 0.95rem;
            margin-bottom: 20px;
        
}
        .index-btn-packages {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
             background: var(--brand-gradient);
            color: #fff;
            font-weight: 700;
            font-size: 0.9rem;
            padding: 12px 28px;
            border-radius: 30px;
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 20px -6px rgba(197, 138, 75, 0.4);
            width: 100%;
            justify-content: center;
            margin-top: 8px;
            transition: all 0.35s ease;
        
    /* -- merged from index.php -- */

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
             background: linear-gradient(
    135deg,
    #900808 0%,
    #FF006E 100%
);
            color: #fff;
            font-weight: 700;
            font-size: 0.9rem;
            padding: 12px 28px;
            border-radius: 30px;
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 20px -6px rgba(197, 138, 75, 0.4);
            width: 100%;
            justify-content: center;
            margin-top: 8px;
            transition: all 0.35s ease;
        
}
        .index-btn-packages:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
             background: #900808;
        
    /* -- merged from index.php -- */

            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
             background: #900808;
        
}
        .index-btn-packages:hover i {
            transform: translateX(5px);
        
    /* -- merged from index.php -- */

            transform: translateX(5px);
        
}
        .index-modal-overlay-old {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(15px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            cursor: pointer;
        
    /* -- merged from index.php -- */

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(15px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            cursor: pointer;
        
}
        .index-modal-overlay-old.index-active {
            opacity: 1;
            visibility: visible;
        
    /* -- merged from index.php -- */

            opacity: 1;
            visibility: visible;
        
}
        .index-modal-container-old {
            max-width: 90vw;
            max-height: 90vh;
            position: relative;
            cursor: default;
        
    /* -- merged from index.php -- */

            max-width: 90vw;
            max-height: 90vh;
            position: relative;
            cursor: default;
        
}
        .index-modal-image {
            max-width: 100%;
            max-height: 85vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 15px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            display: block;
            margin: 0 auto;
            border: 3px solid rgba(243, 212, 122, 0.6);
            animation: modalZoomIn 0.4s ease-out;
        
    /* -- merged from index.php -- */

            max-width: 100%;
            max-height: 85vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 15px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            display: block;
            margin: 0 auto;
            border: 3px solid rgba(243, 212, 122, 0.6);
            animation: modalZoomIn 0.4s ease-out;
        
}
        @keyframes modalZoomIn {
            from {
                opacity: 0;
                transform: scale(0.92);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        .index-modal-close-old {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #f3d47a, #c58a4b);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: #1E1E1E;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border: none;
        
    /* -- merged from index.php -- */

            position: absolute;
            top: -20px;
            right: -20px;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #f3d47a, #c58a4b);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: #1E1E1E;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border: none;
        
}
        .index-modal-close-old:hover {
            transform: rotate(90deg);
        
    /* -- merged from index.php -- */

            transform: rotate(90deg);
        
}
        .index-team-grid-royal {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 45px;
        
    /* -- merged from index.php -- */

            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 45px;
        
}
        .index-team-card-royal {
            text-align: center;
            background: white;
            padding: 30px 20px;
            border-radius: 15px;
            transition: var(--transition-lux);
        
    /* -- merged from index.php -- */

            text-align: center;
            background: white;
            padding: 30px 20px;
            border-radius: 15px;
            transition: var(--transition-lux);
        
}
        .index-team-card-royal:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-royal);
        
    /* -- merged from index.php -- */

            transform: translateY(-8px);
            box-shadow: var(--shadow-royal);
        
}
        .index-team-img-royal {
            width: 170px;
            height: 170px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #D4A373;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        
    /* -- merged from index.php -- */

            width: 170px;
            height: 170px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #D4A373;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        
}
        .index-gallery-masonry-royal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    /* -- merged from index.php -- */

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.index-gallery-item-royal {
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;

    /* -- merged from index.php -- */

    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.index-gallery-item-royal img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: 0.6s;

    /* -- merged from index.php -- */

    width: 100%;
    height: 430px;
    object-fit: cover;
    transition: 0.6s;
}

.index-gallery-item-royal:hover img {
    transform: scale(1.08);

    /* -- merged from index.php -- */

    transform: scale(1.08);
}
        .index-testimonials-section {
            background: transparent;
            padding: 110px 0;
        
    /* -- merged from index.php -- */

            background: transparent;
            padding: 110px 0;
        
}
        .index-reviews-slider-container {
            margin-top: 50px;
            overflow: visible;
            width: 100%;
        
    /* -- merged from index.php -- */

            margin-top: 50px;
            overflow: visible;
            width: 100%;
        
}
        .swiper.index-reviews-swiper {
            padding: 20px 10px 50px 10px;
            overflow: visible;
        
    /* -- merged from index.php -- */

            padding: 20px 10px 50px 10px;
            overflow: visible;
        
}
        .index-review-card {
            background: #FFFFFF;
            border-radius: 15px;
            padding: 32px 28px;
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(212, 163, 115, 0.2);
        
    /* -- merged from index.php -- */

            background: #FFFFFF;
            border-radius: 15px;
            padding: 32px 28px;
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(212, 163, 115, 0.2);
        
}
        .index-review-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 30px 45px -15px rgba(155, 28, 49, 0.2);
        
    /* -- merged from index.php -- */

            transform: translateY(-6px);
            box-shadow: 0 30px 45px -15px rgba(155, 28, 49, 0.2);
        
}
        .index-review-profile {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        
    /* -- merged from index.php -- */

            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        
}
        .index-review-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #D4A373;
        
    /* -- merged from index.php -- */

            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #D4A373;
        
}
        .index-review-avatar-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #D4A373, #9B1C31);
            color: #fff;
            font-size: 1.4rem;
        
    /* -- merged from index.php -- */

            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #D4A373, #9B1C31);
            color: #fff;
            font-size: 1.4rem;
        
}
        .index-reviewer-name {
            font-size: 1.2rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            color: #1E1E1E;
        
    /* -- merged from index.php -- */

            font-size: 1.2rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            color: #1E1E1E;
        
}
        .index-verified-badge {
            font-size: 0.7rem;
            color: #9B1C31;
            font-weight: 500;
        
    /* -- merged from index.php -- */

            font-size: 0.7rem;
            color: #9B1C31;
            font-weight: 500;
        
}
        .index-review-stars {
            margin-bottom: 18px;
            color: #F3B33D;
            font-size: 1rem;
            letter-spacing: 2px;
        
    /* -- merged from index.php -- */

            margin-bottom: 18px;
            color: #F3B33D;
            font-size: 1rem;
            letter-spacing: 2px;
        
}
        .index-review-text {
            color: #4A3B32;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            flex: 1;
        
    /* -- merged from index.php -- */

            color: #4A3B32;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            flex: 1;
        
}
        .index-google-icon {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            color: #9B1C31;
            font-size: 0.75rem;
        
    /* -- merged from index.php -- */

            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            color: #9B1C31;
            font-size: 0.75rem;
        
}
        .index-google-icon i {
            color: #EA4335;
        
    /* -- merged from index.php -- */

            color: #EA4335;
        
}
        .index-reviews-swiper .swiper-pagination-bullet {
            background: #D4A373;
            opacity: 0.5;
            width: 10px;
            height: 10px;
        
    /* -- merged from index.php -- */

            background: #D4A373;
            opacity: 0.5;
            width: 10px;
            height: 10px;
        
}
        .index-reviews-swiper .swiper-pagination-bullet-active {
            background: #9B1C31;
            opacity: 1;
            width: 24px;
            border-radius: 6px;
        
    /* -- merged from index.php -- */

            background: #9B1C31;
            opacity: 1;
            width: 24px;
            border-radius: 6px;
        
}
        .index-academy-royal {
            background: var(--brand-gradient);
            border-radius: 15px;
            padding: 80px 40px;
            text-align: center;
            border: 1px solid rgba(212, 163, 115, 0.3);
        
    /* -- merged from index.php -- */

            background: linear-gradient(
    135deg,
    #900808 0%,
    #FF006E 100%
);
            border-radius: 15px;
            padding: 80px 40px;
            text-align: center;
            border: 1px solid rgba(212, 163, 115, 0.3);
        
}
        .index-academy-royal h2 {
            color: #Ffff;
        
    /* -- merged from index.php -- */

            color: #Ffff;
        
}
        .index-enquiry-single-card {
            background: #FFFFFF;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-luxury);
            display: flex;
            flex-wrap: wrap;
            transition: transform 0.3s ease;
            max-width: 1300px;
            margin: 0 auto;
        
    /* -- merged from index.php -- */

            background: #FFFFFF;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-luxury);
            display: flex;
            flex-wrap: wrap;
            transition: transform 0.3s ease;
            max-width: 1300px;
            margin: 0 auto;
        
}
        .index-enquiry-single-card:hover {
            transform: translateY(-5px);
        
    /* -- merged from index.php -- */

            transform: translateY(-5px);
        
}
        .index-enquiry-img-col {
            flex: 0.9;
            min-width: 260px;
            overflow: hidden;
        
    /* -- merged from index.php -- */

            flex: 0.9;
            min-width: 260px;
            overflow: hidden;
        
}
        .index-enquiry-img-col img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 380px;
            max-height: 560px;
        
    /* -- merged from index.php -- */

            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 380px;
            max-height: 560px;
        
}
        .index-enquiry-form-col {
            flex: 1.1;
            min-width: 300px;
            padding: 32px 36px;
            background: white;
        
    /* -- merged from index.php -- */

            flex: 1.1;
            min-width: 300px;
            padding: 32px 36px;
            background: white;
        
}
        .index-enquiry-form-col .index-form-heading {
            font-size: 1.8rem;
            font-family: 'Poppins', sans-serif;
            color: #2C2C2C;
            margin-bottom: 6px;
            font-weight: 700;
        
    /* -- merged from index.php -- */

            font-size: 1.8rem;
            font-family: 'Poppins', sans-serif;
            color: #2C2C2C;
            margin-bottom: 6px;
            font-weight: 700;
        
}
        .index-enquiry-form-col .index-form-sub {
            color: #9B1C31;
            font-size: 0.8rem;
            letter-spacing: 1px;
            margin-bottom: 20px;
            border-left: 3px solid #D4A373;
            padding-left: 10px;
        
    /* -- merged from index.php -- */

            color: #9B1C31;
            font-size: 0.8rem;
            letter-spacing: 1px;
            margin-bottom: 20px;
            border-left: 3px solid #D4A373;
            padding-left: 10px;
        
}
        .index-royal-input-group {
            margin-bottom: 14px;
        }
        .index-royal-input-group input,
        .index-royal-input-group select,
        .index-royal-input-group textarea {
            width: 100%;
            padding: 12px 18px;
            background: #FFFFFF;
            border: 1.5px solid #F0E3D9;
            border-radius: 40px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #2C2C2C;
            transition: all 0.3s ease;
            outline: none;
        }
        .index-royal-input-group select {
            cursor: pointer;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%239B1C31" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 20px center;
        }
        .index-royal-input-group textarea {
            border-radius: 24px;
            resize: vertical;
            padding: 12px 18px;
        }
        .index-royal-input-group input:focus,
        .index-royal-input-group select:focus,
        .index-royal-input-group textarea:focus {
            border-color: #9B1C31;
            box-shadow: 0 0 0 3px rgba(155, 28, 49, 0.1);
        }
        .index-btn-book-appointment {
            width: 100%;
          background: var(--brand-gradient);
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.35s ease;
            box-shadow: 0 8px 18px -6px rgba(197, 138, 75, 0.4);
            margin-top: 8px;
        }
        .index-btn-book-appointment:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px -8px rgba(155, 28, 49, 0.3);
             background:  #900808;
        }
        .index-btn-book-appointment:hover i {
            transform: translateX(5px);
        }
        .index-map-section {
            padding: 80px 0;
            background: #fdf7f3;
        
    /* -- merged from index.php -- */

            padding: 80px 0;
            background: #fdf7f3;
        
}
        .index-map-contact-wrapper {
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            gap: 0;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border-radius: 24px;
        
    /* -- merged from index.php -- */

            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            gap: 0;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border-radius: 24px;
        
}
        .index-map-container {
            flex: 1;
            min-width: 300px;
        
    /* -- merged from index.php -- */

            flex: 1;
            min-width: 300px;
        
}
        .index-map-container iframe {
            width: 100%;
            height: 450px;
            border: 0;
            display: block;
        
    /* -- merged from index.php -- */

            width: 100%;
            height: 450px;
            border: 0;
            display: block;
        
}
        .index-contact-info {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 0 24px 24px 0;
        
    /* -- merged from index.php -- */

            flex: 1;
            min-width: 300px;
            background: white;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 0 24px 24px 0;
        
}
        .index-contact-info h2 {
            font-size: 36px;
            margin-bottom: 25px;
            color: #b8865b;
        
    /* -- merged from index.php -- */

            font-size: 36px;
            margin-bottom: 25px;
            color: #b8865b;
        
}
        .index-contact-info p {
            font-size: 18px;
            color: #555;
            margin-bottom: 15px;
            line-height: 1.6;
        
    /* -- merged from index.php -- */

            font-size: 18px;
            color: #555;
            margin-bottom: 15px;
            line-height: 1.6;
        
}
          .index-hidden-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: 1s;
        }
        .index-revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .index-about-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 60px;
            align-items: center;
            width: 100%;
            overflow: hidden;
        }
        .index-about-flex>div {
            flex: 1 1 0;
            min-width: 0;
        }
        @media (max-width: 768px) {
            .index-about-flex {
                flex-direction: column;
                gap: 30px;
            }
            .index-about-flex>div {
                width: 100%;
            }
        }
        @media (max-width: 992px) {
            .index-container-royal {
                padding: 0 24px;
            }
            .index-section-title {
                font-size: 2.3rem;
            }
            .index-service-grid-royal {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
            .index-gallery-masonry-royal {
                grid-template-columns: repeat(2, 1fr);
            }
            .index-counter-grid-royal {
                flex-direction: column;
            }
            .index-royal-stat-card {
                width: 100%;
            }
            .index-map-contact-wrapper {
                flex-direction: column;
            }
            .index-contact-info {
                border-radius: 0 0 24px 24px;
            }
            .index-team-grid-royal {
                grid-template-columns: repeat(2, 1fr);
            }
            .index-enquiry-single-card {
                flex-direction: column;
            }
            .index-enquiry-img-col img {
                height: 350px;
            }
        }
        @media (max-width: 768px) {
            .index-section-royal {
                padding: 70px 0;
            }
            .index-services-section {
                padding: 60px 0;
            }
            .index-testimonials-section {
                padding: 60px 0;
            }
            .index-map-section {
                padding: 50px 0;
            }
            .index-section-title {
                font-size: 2rem;
                line-height: 1.3;
            }
            .index-service-grid-royal {
                grid-template-columns: 1fr;
            }
            .index-service-img-wrapper {
                height: 300px;
            }
            .index-gallery-masonry-royal {
                grid-template-columns: 1fr;
            }
            .index-gallery-item-royal img {
                height: 320px;
            }
            .index-team-grid-royal {
                grid-template-columns: 1fr;
            }
            .index-review-card {
                padding: 24px 20px;
            }
            .index-academy-royal {
                padding: 50px 20px;
            }
            .index-academy-royal h2 {
                font-size: 2rem;
            }
            .index-btn-primary,
            .index-btn-outline-royal,
            .index-btn-packages,
            .index-btn-book-appointment {
                width: 100%;
                justify-content: center;
            }
            .index-enquiry-form-col {
                padding: 24px 20px;
            }
            .index-enquiry-form-col .index-form-heading {
                font-size: 1.5rem;
            }
            .index-map-container iframe {
                height: 280px;
            }
            .index-contact-info {
                padding: 28px 20px;
            }
            .index-contact-info h2 {
                font-size: 1.8rem;
            }
            .index-footer-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }
            .index-whatsapp-float {
                width: 52px;
                height: 52px;
                font-size: 24px;
                left: 15px;
                bottom: 15px;
            }
            .index-back-to-top {
                width: 46px;
                height: 46px;
                right: 15px;
                bottom: 15px;
            }
        }
        @media (max-width: 480px) {
            .index-section-title {
                font-size: 1.7rem;
            }
            .index-service-content {
                padding: 22px 18px;
            }
            .index-service-content h3 {
                font-size: 1.3rem;
            }
            .index-gallery-item-royal img {
                height: 260px;
            }
            .index-team-img-royal {
                width: 130px;
                height: 130px;
            }
            .index-review-avatar {
                width: 50px;
                height: 50px;
            }
            .index-contact-info p {
                font-size: 15px;
            }
            .index-academy-royal h2 {
                font-size: 1.6rem;
            }
            .index-enquiry-form-col {
                padding: 20px 16px;
            }
            .index-footer-grid {
                gap: 28px;
            }
        }
        img {
            max-width: 100%;
            height: auto;
        
    /* -- merged from index.php -- */

            max-width: 100%;
            height: auto;
        
}
        .index-hero-bg-video {
            object-fit: cover;
        
    /* -- merged from index.php -- */

            object-fit: cover;
        
}
        iframe {
            max-width: 100%;
        
    /* -- merged from index.php -- */

            max-width: 100%;
        
}
        .index-service-card-royal,
        .index-review-card,
        .index-team-card-royal,
        .index-enquiry-single-card {
            overflow: hidden;
        
    /* -- merged from index.php -- */

            overflow: hidden;
        
}
        button,
        a,
        input,
        select,
        textarea {
            touch-action: manipulation;
        
    /* -- merged from index.php -- */

            touch-action: manipulation;
        
}
        body,
        html {
            -webkit-overflow-scrolling: touch;
        
    /* -- merged from index.php -- */

            -webkit-overflow-scrolling: touch;
        
}
        h1,
        h2,
        h3,
        h4,
        p {
            word-wrap: break-word;
        
    /* -- merged from index.php -- */

            word-wrap: break-word;
        
}
        html,
        body {
            width: 100%;
            overflow-x: hidden;
        
    /* -- merged from index.php -- */

            width: 100%;
            overflow-x: hidden;
        
}
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        
    /* -- merged from index.php -- */

            box-sizing: border-box;
        
}


        .index-btn-luxury-primary{
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 10px 30px rgba(255,0,110,0.35);
    border-radius: 30px;
    padding: 12px 28px;
    text-decoration: none;

    /* -- merged from index.php -- */

    background: linear-gradient(
    135deg,
    #900808 0%,
    #FF006E 100%
);
    color: #fff;
    box-shadow: 0 10px 30px rgba(255,0,110,0.35);
    border-radius: 30px;
    padding: 12px 28px;
    text-decoration: none;
}.index-btn-luxury-secondary{
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    color: #fff;
    border-radius: 30px;
    padding: 12px 28px;
    text-decoration: none;

    /* -- merged from index.php -- */

    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    color: #fff;
    border-radius: 30px;
    padding: 12px 28px;
    text-decoration: none;
}

/* service page style */

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

    body {
      background: #fefaf5;
      font-family: 'Poppins', sans-serif;
      color: #2c2b28;
      scroll-behavior: smooth;
    }

    .service-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem 2rem 4rem;
    }

    .service-section {
      margin-bottom: 6rem;
    }

    .service-section-title {
      font-family: 'Poppins', sans-serif;
      font-size: 3.3rem;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: #1e1c1a;
      text-align: center;
      margin-bottom: 0.5rem;
      width: 100%;
    }

    .service-section-title span {
      background: linear-gradient(135deg, #b78c4a 0%, #dbb46a 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .service-gold-underline {
      width: 80px;
      height: 3px;
      background: #dbb46a;
      margin: 0.5rem auto 2.5rem auto;
      border-radius: 4px;
    }

    /* ----- CAROUSEL STYLES ----- */
    .service-carousel-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 0.5rem 0 1.5rem;
    }

    .service-carousel-track {
      display: flex;
      gap: 28px;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    /* service card - FLEXIBLE COLUMN with consistent button alignment */
    .service-card {
      flex: 0 0 calc(33.333% - 19px);
      min-width: 260px;
      background: #ffffff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
      transition: all 0.4s ease;
      cursor: pointer;
      border: 1px solid rgba(219, 180, 106, 0.2);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 32px 48px -16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(219, 180, 106, 0.4);
    }

    .service-card-img {
      width: 100%;
      height: 380px;
      overflow: hidden;
      background: #f3ede7;
      position: relative;
      flex-shrink: 0;
    }

    .service-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
      display: block;
    }

    .service-card:hover .service-card-img img {
      transform: scale(1.08);
    }

    .service-card-content {
      padding: 1.6rem 1.4rem 1.8rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .service-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.7rem;
      font-weight: 600;
      letter-spacing: -0.2px;
      color: #28241f;
      margin-bottom: 0.6rem;
    }

    .service-desc {
      font-size: 0.85rem;
      line-height: 1.4;
      color: #6a655e;
      margin-bottom: 1.2rem;
      font-weight: 400;
      flex-grow: 1;
    }

    /* Removed price row styles, now button gets top margin directly */
    .service-btn-book {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
       background: linear-gradient(
  115deg,
  #1F0E32 0%,
  #2B093B 25%,
  #580653 50%,
  #690752 68%,
  #8E0136 100%
);
      color: #fff;
      font-weight: 700;
      font-size: 0.9rem;
      padding: 12px 20px;
      border-radius: 40px;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 20px -6px rgba(197, 138, 75, 0.4);
      width: 100%;
      justify-content: center;
      transition: all 0.35s ease;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.3px;
      margin-top: 12px;
    }

    .service-btn-book i {
      font-size: 0.85rem;
      transition: transform 0.2s;
    }

    .service-btn-book:hover {
       background: linear-gradient(
  115deg,
  #1F0E32 0%,
  #2B093B 25%,
  #580653 50%,
  #690752 68%,
  #8E0136 100%
);
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -8px rgba(197, 138, 75, 0.5);
      color: #fff;
    }

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

    /* navigation */
    .service-carousel-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 18px;
      margin-top: 28px;
    }

    .service-carousel-btn {
      background: #f2ebe2;
      border: none;
      width: 42px;
      height: 42px;
      border-radius: 60px;
      font-size: 1.2rem;
      color: #b78c4a;
      cursor: pointer;
      transition: all 0.2s;
    }

    .service-carousel-btn:hover {
      background: #dbb46a;
      color: white;
      transform: scale(1.02);
    }

    .service-dots-container {
      display: flex;
      gap: 10px;
    }

    .service-dot {
      width: 8px;
      height: 8px;
      background: #d4c3ae;
      border-radius: 50%;
      transition: all 0.2s;
      cursor: pointer;
    }

    .service-dot.service-active {
      background: #900808;
      width: 28px;
      border-radius: 12px;
    }

    /* MODAL STYLES - FIXED OVERLAPPING ISSUE */
    .service-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      z-index: 10000 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.2s, opacity 0.2s ease;
    }

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

    .service-modal-container {
      background: #ffffff;
      max-width: 560px;
      width: 90%;
      max-height: 85vh;
      border-radius: 15px;
      box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.4);
      overflow: hidden;
      transform: scale(0.96);
      transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      border: 1px solid rgba(144, 8, 8, 0.5);
      display: flex;
      flex-direction: column;
    }

    .service-modal-overlay.service-active .service-modal-container {
      transform: scale(1);
    }

    .service-modal-header {
       background: var(--brand-gradient);
      padding: 1.6rem 2rem;
      border-bottom: 2px solid #eedfcb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }

    .service-modal-header h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.9rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.3px;
    }

    .service-modal-header h3 i {
      color: #fff;
      margin-right: 10px;
    }

    .service-close-modal {
      background: #f2ebe2;
      border: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      color: #900808;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .service-close-modal:hover {
      background: #900808;
      color: white;
    }

    /* SCROLLABLE BODY */
    .service-modal-body {
      padding: 2rem 2rem 1.8rem;
      overflow-y: auto;
      flex: 1;
      scrollbar-width: thin;
      scrollbar-color: #900808 #f2ebe2;
    }

    .service-modal-body::-webkit-scrollbar {
      width: 6px;
    }

    .service-modal-body::-webkit-scrollbar-track {
      background: #f2ebe2;
      border-radius: 10px;
    }

    .service-modal-body::-webkit-scrollbar-thumb {
      background: #900808;
      border-radius: 10px;
    }

    .service-booking-detail {
      background: #fefaf5;
      padding: 0.9rem 1.2rem;
      border-radius: 15px;
      margin-bottom: 1.8rem;
      border-left: 5px solid #900808;
    }

    .service-booking-detail p {
      font-size: 0.95rem;
      font-weight: 500;
      color: #900808;
    }

    .service-booking-detail strong {
      color: #900808;
      font-weight: 700;
    }

    /* remove price indicator from modal (no price shown) */
    .service-form-group {
      margin-bottom: 1.5rem;
    }

    .service-form-group label {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #900808;
      margin-bottom: 0.5rem;
    }

    .service-form-group input, .service-form-group select {
      width: 100%;
      padding: 12px 16px;
      border-radius: 40px;
      border: 1.5px solid #eedfcb;
      font-family: 'Poppins', sans-serif;
      background: #fffdfa;
      transition: 0.2s;
      font-size: 0.95rem;
    }

    .service-form-group input:focus, .service-form-group select:focus {
      outline: none;
      border-color:  #900808;
      box-shadow: 0 0 0 3px rgba(144, 8, 8, 0.2);
    }

    .service-time-slots {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 8px;
    }

    .service-time-slot {
      background: #fefaf5;
      border: 1px solid #eedfcb;
      border-radius: 15px;
      padding: 8px 5px;
      text-align: center;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      color: #900808;
    }

    .service-time-slot.service-selected {
      background: #900808;
      border-color: #900808;
      color: #fff;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(144, 8, 8, 0.3);
    }

    .service-time-slot:hover {
      background:  #900808;
      transform: translateY(-2px);
      color: #fff;
    }

    .service-submit-booking {
      background: var(--brand-gradient);
      color: white;
      border: none;
      width: 100%;
      padding: 14px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1rem;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      cursor: pointer;
      transition: all 0.3s;
    }

    .service-submit-booking:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 20px -12px #900808;
    }

    @media (max-width: 1024px) {
      .service-card { flex: 0 0 calc(50% - 14px); }
      .service-container { padding: 1.5rem; }
      .service-section-title { font-size: 2.6rem; }
    }

    @media (max-width: 720px) {
      .service-card { flex: 0 0 100%; }
      .service-carousel-track { gap: 20px; }
      .service-container { padding: 1.2rem; }
      .service-section-title { font-size: 2.2rem; }
      .service-time-slots { grid-template-columns: repeat(2, 1fr); }
      .service-modal-body { padding: 1.5rem; }
      .service-modal-header { padding: 1.2rem 1.5rem; }
    }
/* ===== Sticky Social Media Icons (Right Side) ===== */
.index-social-sticky {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 9998;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.192),
        inset 0 0 5px rgba(255, 255, 255, 0.274),
        0 5px 15px rgba(0, 0, 0, 0.18);
    transition: 0.5s;
    padding: 0.4rem;
}
.index-social-sticky:hover {
    background: rgba(155, 28, 49, 0.08);
}
.index-social-sticky ul {
    padding: 0.6rem 0.3rem;
    display: flex;
    list-style: none;
    gap: 0.9rem;
    align-items: center;
    flex-direction: column;
    margin: 0;
}
.index-social-sticky ul li {
    cursor: pointer;
    position: relative;
    transition: 0.5s;
}
.index-social-item .index-social-svg {
    transition: all 0.3s;
    padding: 0.6rem;
    height: 22px;
    width: 22px;
    display: block;
    border-radius: 100%;
    color: #9B1C31;
    fill: currentColor;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
        inset 0 0 5px rgba(255, 255, 255, 0.5),
        0 5px 5px rgba(0, 0, 0, 0.164);
}
.index-social-item a {
    display: block;
    position: relative;
    z-index: 2;
}
.index-social-text {
    opacity: 0;
    border-radius: 5px;
    padding: 5px 10px;
    transition: all 0.3s;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--brand-gradient);
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%) translateX(10px);
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.18);
}
.index-social-item:hover .index-social-text {
    opacity: 1;
    transform: translateY(-50%) translateX(-6px);
}
.index-social-item:hover .index-social-svg {
    transform: translateX(-6px) scale(1.08);
    background: #fff;
    color: #FF006E;
}
.index-social-item span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #9B1C31;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
        inset 0 0 5px rgba(255, 255, 255, 0.5),
        0 5px 5px rgba(0, 0, 0, 0.164);
    border-radius: 50%;
    transition: all 0.3s;
    height: 22px;
    width: 22px;
    padding: 0.6rem;
}
.index-social-item:hover span {
    opacity: 1;
}
.index-social-item:hover span:nth-child(1) {
    opacity: 0.2;
    transform: translateX(-3px);
}
.index-social-item:hover span:nth-child(2) {
    opacity: 0.35;
    transform: translateX(-8px);
}
.index-social-item:hover span:nth-child(3) {
    opacity: 0.5;
    transform: translateX(-13px);
}
@media (max-width: 768px) {
    .index-social-sticky {
        right: 8px;
        padding: 0.3rem;
    }
    .index-social-item .index-social-svg,
    .index-social-item span {
        height: 18px;
        width: 18px;
        padding: 0.45rem;
    }
    .index-social-text {
        display: none;
    }
}

/* ===== Raksha Bandhan Offer Popup ===== */
.rakhi-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(43, 12, 12, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.rakhi-popup-overlay.rakhi-popup-active {
    opacity: 1;
    visibility: visible;
}
body.rakhi-popup-noscroll {
    overflow: hidden;
}
.rakhi-popup-box {
    position: relative;
    width: 100%;
    max-width: 530px;
    max-height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5FA 60%, #FFEEF6 100%);
    border-radius: 26px;
    padding: 25px 30px 20px;
    text-align: center;
    box-shadow: 0 30px 70px -20px rgba(155, 20, 80, 0.35), 0 0 0 1px rgba(255, 182, 217, 0.5);
    border: 1px solid rgba(255, 182, 217, 0.5);
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.4s ease;
}
.rakhi-popup-overlay.rakhi-popup-active .rakhi-popup-box {
    transform: scale(1);
    opacity: 1;
}
.rakhi-popup-pattern {
    position: absolute;
    top: 0;
    width: 90px;
    height: 90px;
    background-image: radial-gradient(circle at 30% 30%, rgba(255,0,110,0.1) 0 6px, transparent 7px),
                       radial-gradient(circle at 70% 20%, rgba(255,182,217,0.3) 0 5px, transparent 6px),
                       radial-gradient(circle at 50% 60%, rgba(255,210,125,0.25) 0 8px, transparent 9px);
    opacity: 0.7;
    pointer-events: none;
}
.rakhi-popup-pattern-left {
    left: 0;
    border-radius: 26px 0 0 0;
}
.rakhi-popup-pattern-right {
    right: 0;
    transform: scaleX(-1);
    border-radius: 0 26px 0 0;
}
.rakhi-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(155, 28, 49, 0.08);
    color: #6B2B45;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 2;
}
.rakhi-popup-close:hover {
    background: #9B1C31;
    color: #fff;
    transform: rotate(90deg);
}
.rakhi-popup-icon-wrap {
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
}
.rakhi-badge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #FFE9F4 0%, #FFFFFF 70%);
    box-shadow: 0 12px 28px -8px rgba(255, 0, 110, 0.35), inset 0 0 0 6px #FFFFFF, inset 0 0 0 8px rgba(255, 182, 217, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    position: relative;
    z-index: 1;
}
.rakhi-popup-rakhi-svg {
    width: 100%;
    height: 100%;
    animation: rakhiFloat 3s ease-in-out infinite;
}
@keyframes rakhiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.rakhi-popup-hurry-badge {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #FF6A2B 0%, #FF2E92 100%);
    padding: 9px 20px;
    border-radius: 30px;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px -6px rgba(255, 46, 146, 0.55);
    animation: rakhiBadgeGlow 2s ease-in-out infinite;
}
@keyframes rakhiBadgeGlow {
    0%, 100% { box-shadow: 0 8px 18px -6px rgba(255, 46, 146, 0.5); }
    50% { box-shadow: 0 8px 24px -4px rgba(255, 46, 146, 0.75); }
}
.rakhi-popup-title {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 800;
    color: #E5127A;
    margin-bottom: 14px;
}
.rakhi-popup-emotion {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #6B5A4F;
    margin-bottom: 6px;
    font-weight: 500;
}
.rakhi-popup-offer-box {
    margin: 20px 0 22px;
    padding: 22px 18px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(255, 182, 217, 0.6);
    box-shadow: 0 10px 25px -12px rgba(155, 28, 49, 0.2);
}
.rakhi-popup-offer-sub {
    font-weight: 700;
    font-size: 1rem;
    color: #3A2E28;
    margin-bottom: 8px;
}
.rakhi-popup-offer-worth {
    font-size: 0.9rem;
    color: #6B5A4F;
    margin-top: 6px;
}
.rakhi-popup-offer-worth span {
    color: #C9962E;
    font-weight: 800;
}
.rakhi-popup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    border-radius: 40px;
    background: linear-gradient(90deg, #FF7DC0 0%, #E5127A 55%, #9B0E52 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 14px 28px -8px rgba(229, 18, 122, 0.55);
    transition: all 0.3s ease;
}
.rakhi-popup-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -8px rgba(229, 18, 122, 0.65);
    color: #fff;
}
.rakhi-popup-footnote {
    margin-top: 16px;
    font-size: 0.75rem;
    color: #9B7E6F;
    letter-spacing: 0.3px;
}
@media (max-width: 480px) {
    .rakhi-popup-box {
        padding: 38px 20px 24px;
        border-radius: 20px;
    }
    .rakhi-popup-icon-wrap {
        width: 100px;
        height: 100px;
    }
    .rakhi-popup-title {
        font-size: 1.5rem;
    }
    .rakhi-popup-emotion {
        font-size: 0.88rem;
    }
    .rakhi-popup-offer-sub {
        font-size: 0.92rem;
    }
}

/* ===== Raksha Bandhan Popup — Premium Animation Enhancements ===== */

/* Top bar holding music + close buttons */
.rakhi-popup-topbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.rakhi-popup-close {
    position: static;
    width: 40px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(155, 28, 49, 0.08);
    color: #9B1C31;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.rakhi-popup-close:hover {
    background: #9B1C31;
    color: #fff;
    transform: rotate(90deg);
}
.rakhi-music-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(212, 163, 115, 0.18);
    color: #9B1C31;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.rakhi-music-btn:hover {
    background: #D4A373;
    color: #fff;
}

/* Floating ambient particles layer (flowers, sparkles, hearts) */
.rakhi-popup-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.rakhi-float-particle {
    position: absolute;
    top: 105%;
    opacity: 0.85;
    animation-name: rakhiFloatUp;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 0 4px rgba(255, 210, 125, 0.5));
}
@keyframes rakhiFloatUp {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.9; }
    50% {
        transform: translateY(-55vh) translateX(15px) rotate(180deg);
    }
    90% { opacity: 0.7; }
    100% {
        transform: translateY(-110vh) translateX(-10px) rotate(360deg);
        opacity: 0;
    }
}

/* Confetti burst on open */
.rakhi-confetti-piece {
    position: absolute;
    top: 6%;
    width: 7px;
    height: 12px;
    border-radius: 2px;
    opacity: 0.95;
    animation: rakhiConfettiFall 1.8s ease-out forwards;
    z-index: 2;
}
@keyframes rakhiConfettiFall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), 260px) rotate(var(--r));
        opacity: 0;
    }
}

/* Rakhi glow ring + gentle rotation/pulse */
.rakhi-popup-icon-wrap {
    position: relative;
}
.rakhi-glow-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 125, 0.55) 0%, rgba(255, 210, 125, 0) 70%);
    animation: rakhiGlowPulse 2.4s ease-in-out infinite;
    z-index: 0;
}
@keyframes rakhiGlowPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.08); }
}
.rakhi-popup-rakhi-svg {
    position: relative;
    z-index: 1;
    animation: rakhiFloat 3s ease-in-out infinite;
}
@keyframes rakhiFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.03); }
}
.rakhi-petals-spin {
    transform-origin: 100px 100px;
    animation: rakhiPetalsRotate 10s linear infinite;
}
@keyframes rakhiPetalsRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rakhi-sparkle {
    position: absolute;
    font-size: 1rem;
    animation: rakhiSparkleTwinkle 1.8s ease-in-out infinite;
    z-index: 2;
}
.rakhi-sparkle-1 { top: 0; left: 6px; animation-delay: 0s; }
.rakhi-sparkle-2 { top: 15%; right: 0; animation-delay: 0.5s; }
.rakhi-sparkle-3 { bottom: 8%; left: -4px; animation-delay: 1s; }
@keyframes rakhiSparkleTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Emotional Hindi text — fade up one line after another */
.rakhi-popup-emotion-wrap {
    margin-bottom: 4px;
}
.rakhi-fade-line {
    opacity: 0;
    transform: translateY(16px);
    animation: rakhiFadeUp 0.7s ease forwards;
    animation-delay: var(--d, 0s);
}
@keyframes rakhiFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Offer card discount pulse/glow */
.rakhi-popup-offer-sub {
    font-size: 0.85rem;
    color: #6B5A4F;
    margin-bottom: 8px;
}
.rakhi-popup-offer-discount {
    font-weight: 800;
    font-size: 1.15rem;
    color: #9B1C31;
    animation: rakhiDiscountPulse 1.8s ease-in-out infinite;
}
@keyframes rakhiDiscountPulse {
    0%, 100% {
        text-shadow: 0 0 0px rgba(255, 0, 110, 0);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 14px rgba(255, 0, 110, 0.45);
        transform: scale(1.04);
    }
}

/* CTA — glowing soft heartbeat */
.rakhi-popup-cta {
    animation: rakhiCtaHeartbeat 2.2s ease-in-out infinite, rakhiFadeUp 0.7s ease forwards;
    animation-delay: var(--d, 0s), var(--d, 0s);
    box-shadow: 0 12px 25px -8px rgba(155, 28, 49, 0.55), 0 0 0 rgba(255, 0, 110, 0.4);
}
@keyframes rakhiCtaHeartbeat {
    0%, 100% { box-shadow: 0 12px 25px -8px rgba(155, 28, 49, 0.55), 0 0 0 rgba(255, 0, 110, 0.35); }
    50% { box-shadow: 0 12px 30px -6px rgba(155, 28, 49, 0.65), 0 0 18px rgba(255, 0, 110, 0.45); }
}


@media (max-width: 480px) {
    .rakhi-popup-topbar {
        top: 8px;
        right: 8px;
    }
    .rakhi-music-btn,
    .rakhi-popup-close {
        width: 38px;
        height: 38px;
    }
}

/* ===================================================================
   MERGED FROM index.php (previously inline <style>, now centralized)
   =================================================================== */

/* ---- New selectors (not previously in style.css) ---- */

.index-pm-hero-video {

            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        
}

.index-gallery-item-royal::before {

    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 4px;
    box-sizing: border-box;
    background: conic-gradient(
        from var(--index-border-angle),
        transparent 0deg,
        transparent 255deg,
        rgba(176, 38, 255, 0) 270deg,
        rgba(176, 38, 255, 0.95) 300deg,
        rgba(255, 62, 201, 1) 325deg,
        rgba(36, 224, 255, 1) 348deg,
        rgba(36, 224, 255, 0) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 62, 201, 0.6)) drop-shadow(0 0 7px rgba(36, 224, 255, 0.35));
    animation: indexServiceBorderChase 4s linear infinite;
    will-change: --index-border-angle;
}

.index-gallery-item-royal:nth-of-type(1)::before {
 animation-delay: 0s; 
}

.index-gallery-item-royal:nth-of-type(2)::before {
 animation-delay: -0.7s; 
}

.index-gallery-item-royal:nth-of-type(3)::before {
 animation-delay: -1.4s; 
}

.index-gallery-item-royal:nth-of-type(4)::before {
 animation-delay: -2.1s; 
}

.index-gallery-item-royal:nth-of-type(5)::before {
 animation-delay: -2.8s; 
}

.index-gallery-item-royal:nth-of-type(6)::before {
 animation-delay: -3.5s; 
}

.index-gallery-item-royal:nth-of-type(7)::before {
 animation-delay: -4.2s; 
}

.index-gallery-item-royal:nth-of-type(8)::before {
 animation-delay: -4.9s; 
}

.index-gallery-item-royal:nth-of-type(9)::before {
 animation-delay: -5.6s; 
}

.index-gallery-item-royal:hover::before {

    animation-duration: 2.4s;
}

.rb-experience-section {

            --rbx-ivory: #FAF7F2;
            --rbx-burgundy: #7A1F2B;
            --rbx-wine: #9E3B4A;
            --rbx-gold: #C9A46C;
            --rbx-text: #24201F;
        
}

.rb-experience-frame {

            position: relative;
            background: var(--rbx-ivory);
            border: 1px solid rgba(201, 164, 108, 0.55);
            border-radius: 32px;
            box-shadow: 0 35px 70px -25px rgba(122, 31, 43, 0.18), 0 10px 30px rgba(0, 0, 0, 0.04);
            padding: 64px 60px 92px;
            overflow: hidden;
        
}

.rb-corner-leaf {

            position: absolute;
            top: 0;
            right: 0;
            opacity: 0.4;
            pointer-events: none;
            z-index: 1;
        
}

.rb-experience-inner {

            position: relative;
            z-index: 2;
            gap: 70px;
        
}

.rb-experience-image-col {

            flex: 0 0 46% !important;
            max-width: 46%;
            position: relative;
        
}

.rb-experience-image-frame-back {

            position: absolute;
            top: 18px;
            left: 18px;
            right: -18px;
            bottom: -18px;
            border: 1.5px solid var(--rbx-gold);
            border-radius: 26px;
            z-index: 1;
        
}

.rb-experience-image-frame-front {

            position: relative;
            z-index: 2;
            border-radius: 26px;
            overflow: hidden;
            box-shadow: 0 25px 55px -15px rgba(122, 31, 43, 0.25), 0 0 0 6px #FFFFFF;
        
}

.rb-experience-img {

            width: 100%;
            display: block;
            height: auto;
            max-height: 640px;
            object-fit: cover;
            border-radius: 26px;
            transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1);
        
}

.rb-experience-image-frame-front:hover .rb-experience-img {

            transform: scale(1.018);
        
}

.rb-experience-content {

            flex: 1 1 0;
            min-width: 0;
        
}

.rb-experience-heading {

            margin: 0 0 20px;
            line-height: 1.15;
            color: var(--rbx-text);
        
}

.rb-heading-line1 {

            display: block;
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-size: 2.6rem;
            color: var(--rbx-text);
            letter-spacing: 0;
        
}

.rb-heading-line1 strong {

            color: var(--rbx-burgundy);
            font-weight: 700;
        
}

.rb-heading-line2 {

            display: block;
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-weight: 600;
            color: var(--rbx-gold);
            font-size: 2.9rem;
            margin-top: 2px;
        
}

.rb-divider {

            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 260px;
            margin: 20px 0 28px;
        
}

.rb-divider-line {

            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--rbx-gold));
        
}

.rb-divider-line:last-child {

            background: linear-gradient(90deg, var(--rbx-gold), transparent);
        
}

.rb-divider-diamond {

            width: 7px;
            height: 7px;
            flex-shrink: 0;
            background: var(--rbx-gold);
            transform: rotate(45deg);
        
}

.rb-experience-intro {

            font-family: 'Playfair Display', serif !important;
            font-size: 1.3rem !important;
            font-weight: 600 !important;
            color: var(--rbx-burgundy) !important;
            margin: 0 0 18px !important;
        
}

.rb-experience-desc {

            font-family: 'Poppins', sans-serif;
            color: var(--rbx-text);
            font-size: 1rem;
            line-height: 1.9;
            margin: 0 0 18px;
            max-width: 640px;
            opacity: 0.85;
        
}

.rb-stats-grid {

            display: flex;
            gap: 22px;
            margin: 36px 0 30px;
            flex-wrap: wrap;
        
}

.rb-stat-card {

            background: #FFFFFF;
            border: 1px solid rgba(201, 164, 108, 0.4);
            border-bottom: 1px solid rgba(201, 164, 108, 0.4);
            border-radius: 18px;
            padding: 30px 18px 26px;
            text-align: center;
            flex: 1;
            min-width: 140px;
            box-shadow: 0 16px 34px -16px rgba(122, 31, 43, 0.15);
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        
}

.rb-stat-card:hover {

            transform: translateY(-4px);
            box-shadow: 0 22px 42px -16px rgba(122, 31, 43, 0.22);
        
}

.rb-stat-card i {

            font-size: 30px;
            background: linear-gradient(135deg, var(--rbx-burgundy), var(--rbx-gold));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: block;
            margin-bottom: 12px;
        
}

.rb-stat-divider {

            display: block;
            width: 26px;
            height: 1px;
            background: var(--rbx-gold);
            margin: 0 auto 14px;
            position: relative;
        
}

.rb-stat-divider::before {

            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 5px;
            height: 5px;
            background: var(--rbx-gold);
            transform: translate(-50%, -50%) rotate(45deg);
        
}

.rb-stat-card .index-count-num {

            font-family: 'Playfair Display', serif;
            font-size: 2.1rem;
            font-weight: 700;
            color: var(--rbx-burgundy);
            margin: 0 0 6px;
        
}

.rb-stat-card p {

            font-size: 0.85rem;
            color: var(--rbx-text);
            opacity: 0.75;
            margin: 0;
            line-height: 1.4;
        
}

.rb-badges-row {

            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin: 0;
            padding: 0;
        
}

.rb-badge {

            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--rbx-ivory);
            border: 1px solid rgba(201, 164, 108, 0.5);
            border-radius: 50px;
            padding: 8px 20px 8px 8px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--rbx-text);
            box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.25);
        
}

.rb-badge-check {

            width: 26px;
            height: 26px;
            flex-shrink: 0;
            border-radius: 50%;
            background: var(--rbx-burgundy);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.68rem;
        
}

.rb-experience-ornament {

            position: absolute;
            left: 50%;
            bottom: 28px;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 2;
            opacity: 0.6;
        
}

.rb-orn-line {

            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--rbx-gold));
        
}

.rb-orn-line.right {

            background: linear-gradient(90deg, var(--rbx-gold), transparent);
        
}

.rb-orn-mark {

            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 1px;
            color: var(--rbx-gold);
        
}

.rakhi-popup-img-slider {
 position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 20px;
        
}

.rakhi-popup-img-track {

             display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
            transition: transform 0.5s ease-in-out;
        
}

.rakhi-popup-img-slide {

         min-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
        
}

.rakhi-popup-img-slide img {

display: block;
    width: min(100%, 680px);
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    object-fit: contain;
    border-radius: 18px;

    /* Premium shadow */
    box-shadow: 0 15px 35px rgba(80, 20, 30, 0.18);
}

.rakhi-popup-img-nav {

            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.45);
            color: #fff;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: background 0.2s;
        
}

.rakhi-popup-img-nav:hover {

            background: rgba(0,0,0,0.7);
        
}

.rakhi-popup-img-prev {
 left: 8px; 
}

.rakhi-popup-img-next {
 right: 8px; 
}

.rakhi-popup-img-dots {

            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 6px;
            z-index: 5;
        
}

.rakhi-popup-img-dot {

            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
        
}

.rakhi-popup-img-dot-active {

            background: #fff;
            transform: scale(1.25);
        
}

.rakhi-popup-countdown {

            margin: 4px auto 16px;
            text-align: center;
        
}

.rakhi-popup-countdown-label {

            font-size: 0.85rem;
            color: #9B1C31;
            font-weight: 600;
            margin-bottom: 8px;
        
}

.rakhi-popup-countdown-boxes {

            display: flex;
            justify-content: center;
            gap: 8px;
        
}

.rakhi-popup-countdown-box {

            background: linear-gradient(135deg, #900808 0%, #FF006E 100%);
            color: #fff;
            border-radius: 10px;
            padding: 8px 10px;
            min-width: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 4px 10px rgba(155, 28, 49, 0.3);
        
}

.rakhi-popup-countdown-num {

            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1.1;
            font-family: 'Poppins', sans-serif;
        
}

.rakhi-popup-countdown-txt {

            font-size: 0.65rem;
            letter-spacing: 0.5px;
            opacity: 0.9;
            margin-top: 2px;
        
}

/* ---- @media / @keyframes / other at-rules ---- */

@media (max-width: 768px) {
            .index-sticky-btn-group {
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                gap: 8px;
            }
            .index-sticky-btn {
                padding: 12px 8px;
                font-size: 0.8rem;
                min-width: 36px;
                border-radius: 14px 0 0 14px;
            }
            .index-modal-container {
                width: 95%;
                max-width: 480px;
            }
            .index-modal-header {
                padding: 16px 20px;
            }
            .index-modal-header h3 {
                font-size: 1.2rem;
            }
            .index-modal-body {
                padding: 20px 18px 24px;
            }
            .index-modal-close {
                width: 38px;
                height: 38px;
                font-size: 1.3rem;
            }
        }

@media (max-width: 480px) {
            .index-sticky-btn {
                padding: 10px 6px;
                font-size: 0.7rem;
                min-width: 30px;
                border-radius: 10px 0 0 10px;
            }
            .index-sticky-btn span {
                letter-spacing: 0.3px;
            }
            .index-royal-input-group input,
            .index-royal-input-group select,
            .index-royal-input-group textarea {
                font-size: 0.85rem;
                padding: 10px 14px;
            }
        }

@keyframes pmKenBurns {
            0% {
                transform: scale(1) translate(0, 0);
            }
            100% {
                transform: scale(1.15) translate(-1.5%, -1.5%);
            }
        }

@keyframes pmFadeUp {
            from {
                opacity: 0;
                transform: translateY(45px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@media (max-width: 1200px) {
            .index-pm-hero-heading {
                font-size: 3.6rem;
            }
        }

@media (max-width: 992px) {
            .index-pm-hero-heading {
                font-size: 3.1rem;
            }
            .index-pm-hero-subheading {
                font-size: 1.05rem;
            }
        }

@media (max-width: 768px) {
            .index-pm-hero {
                min-height: 600px;
            }
            .index-pm-hero-heading {
                font-size: 2.3rem;
                margin-bottom: 16px;
            }
            .index-pm-hero-subheading {
                font-size: 1rem;
                margin-bottom: 32px;
            }
            .index-pm-hero-buttons {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            .index-pm-hero-buttons a {
                width: 100%;
                max-width: 320px;
                justify-content: center;
            }
            .index-pm-hero .index-pm-hero-prev,
            .index-pm-hero .index-pm-hero-next {
                width: 42px;
                height: 42px;
            }
            .index-pm-hero .index-pm-hero-pagination {
                bottom: 90px !important;
            }
        }

@media (max-width: 480px) {
            .index-pm-hero-heading {
                font-size: 1.85rem;
            }
            .index-pm-hero-badge .index-pm-badge-label {
                font-size: 0.7rem;
                padding: 6px 14px;
                letter-spacing: 2px;
            }
            .index-pm-hero-subheading {
                font-size: 0.92rem;
            }
        }

@keyframes modalZoomIn {
            from {
                opacity: 0;
                transform: scale(0.92);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

@media (max-width: 768px) {
            .index-footer-grid {
                gap: 35px;
            }
            .index-footer-title:after {
                width: 30px;
            }
        }

@media (max-width: 992px) {
            .rb-experience-frame {
                padding: 48px 36px 76px;
            }
            .rb-heading-line1 {
                font-size: 2.2rem;
            }
            .rb-heading-line2 {
                font-size: 2.4rem;
            }
        }

@media (max-width: 768px) {
            .rb-experience-frame {
                padding: 36px 22px 64px;
                border-radius: 26px;
            }
            .rb-experience-image-col {
                flex: 1 1 100% !important;
                max-width: 100%;
            }
            .rb-experience-image-frame-back {
                top: 12px;
                left: 12px;
                right: -12px;
                bottom: -12px;
                border-radius: 20px;
            }
            .rb-experience-image-frame-front,
            .rb-experience-img {
                border-radius: 20px;
                max-height: 420px;
            }
            .rb-stats-grid {
                flex-direction: column;
            }
            .rb-badges-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .rb-badge {
                width: 100%;
            }
        }

@media (max-width: 480px) {
            .rb-heading-line1 {
                font-size: 1.8rem;
            }
            .rb-heading-line2 {
                font-size: 2rem;
            }
            .rb-experience-frame {
                padding: 30px 16px 56px;
            }
        }

@media (max-width: 768px) {
            .index-about-flex {
                flex-direction: column;
                gap: 30px;
            }
            .index-about-flex>div {
                width: 100%;
            }
        }

@media (max-width: 992px) {
            .index-container-royal {
                padding: 0 24px;
            }
            .index-section-title {
                font-size: 2.3rem;
            }
            .index-service-grid-royal {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
            .index-gallery-masonry-royal {
                grid-template-columns: repeat(2, 1fr);
            }
            .index-counter-grid-royal {
                flex-direction: column;
            }
            .index-royal-stat-card {
                width: 100%;
            }
            .index-map-contact-wrapper {
                flex-direction: column;
            }
            .index-contact-info {
                border-radius: 0 0 24px 24px;
            }
            .index-team-grid-royal {
                grid-template-columns: repeat(2, 1fr);
            }
            .index-enquiry-single-card {
                flex-direction: column;
            }
            .index-enquiry-img-col img {
                height: 350px;
            }
        }

@media (max-width: 768px) {
            .index-section-royal {
                padding: 70px 0;
            }
            .index-services-section {
                padding: 60px 0;
            }
            .index-testimonials-section {
                padding: 60px 0;
            }
            .index-map-section {
                padding: 50px 0;
            }
            .index-section-title {
                font-size: 2rem;
                line-height: 1.3;
            }
            .index-service-grid-royal {
                grid-template-columns: 1fr;
            }
            .index-service-img-wrapper {
                height: 300px;
            }
            .index-gallery-masonry-royal {
                grid-template-columns: 1fr;
            }
            .index-gallery-item-royal img {
                height: 320px;
            }
            .index-team-grid-royal {
                grid-template-columns: 1fr;
            }
            .index-review-card {
                padding: 24px 20px;
            }
            .index-academy-royal {
                padding: 50px 20px;
            }
            .index-academy-royal h2 {
                font-size: 2rem;
            }
            .index-btn-primary,
            .index-btn-outline-royal,
            .index-btn-packages,
            .index-btn-book-appointment {
                width: 100%;
                justify-content: center;
            }
            .index-enquiry-form-col {
                padding: 24px 20px;
            }
            .index-enquiry-form-col .index-form-heading {
                font-size: 1.5rem;
            }
            .index-map-container iframe {
                height: 280px;
            }
            .index-contact-info {
                padding: 28px 20px;
            }
            .index-contact-info h2 {
                font-size: 1.8rem;
            }
            .index-footer-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }
            .index-whatsapp-float {
                width: 52px;
                height: 52px;
                font-size: 24px;
                left: 15px;
                bottom: 15px;
            }
            .index-back-to-top {
                width: 46px;
                height: 46px;
                right: 15px;
                bottom: 15px;
            }
            .rakhi-popup-img-slider {
        width: 100%;
        max-width: 100%;
    }

    .rakhi-popup-img-slide img {
        width: 94%;
        max-width: 500px;
        border-radius: 14px;
    }

    .rakhi-popup-box {
        padding-left: 15px;
        padding-right: 15px;
    }
        }

@media (max-width: 480px) {
            .index-section-title {
                font-size: 1.7rem;
            }
            .index-service-content {
                padding: 22px 18px;
            }
            .index-service-content h3 {
                font-size: 1.3rem;
            }
            .index-gallery-item-royal img {
                height: 260px;
            }
            .index-team-img-royal {
                width: 130px;
                height: 130px;
            }
            .index-review-avatar {
                width: 50px;
                height: 50px;
            }
            .index-contact-info p {
                font-size: 15px;
            }
            .index-academy-royal h2 {
                font-size: 1.6rem;
            }
            .index-enquiry-form-col {
                padding: 20px 16px;
            }
            .index-footer-grid {
                gap: 28px;
            }
        }


@media (max-width: 480px) {
              .rakhi-popup-box {
        width: calc(100% - 12px);
        max-width: 100%;
        padding: 15px 10px 14px;
        border-radius: 20px;
    }

    /* Offer Image Slider */
    .rakhi-popup-img-slider {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 14px;
    }

    .rakhi-popup-img-slide {
        width: 100%;
        min-width: 100%;
        padding: 0;
        margin: 0;
    }

    .rakhi-popup-img-slide img {
        display: block;
        width: 96%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 12px;
        object-fit: contain;
    }
        }

/* ===================================================================
   MERGED FROM index.php (previously inline <style>, now centralized)
   =================================================================== */

/* ---- New selectors (not previously in style.css) ---- */

.header-navbar-royal::before {

            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            border-radius: inherit;
            padding: 3px;
            box-sizing: border-box;
            background: conic-gradient(
                from var(--index-border-angle),
                transparent 0deg,
                transparent 255deg,
                rgba(243, 212, 122, 0) 270deg,
                rgba(243, 212, 122, 0.95) 300deg,
                rgba(255, 215, 130, 1) 325deg,
                rgba(255, 236, 179, 1) 348deg,
                rgba(255, 236, 179, 0) 360deg
            );
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            filter: drop-shadow(0 0 3px rgba(255, 215, 130, 0.7)) drop-shadow(0 0 7px rgba(243, 212, 122, 0.4));
            animation: indexServiceBorderChase 4s linear infinite;
            will-change: --index-border-angle;
        
}

.header-nav-logo {

            width: 90px;
            height: 90px;
            object-fit: contain;
        
}

.header-nav-links-royal li {

            position: relative;
            flex-shrink: 0;
        
}

.header-dropdown:hover .header-dropdown-menu {

            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        
}

/* ---- @media / @keyframes / other at-rules ---- */

@media (max-width: 992px) {
            .header-nav-links-royal { display: none; }
            .header-action-buttons { display: none; }
            .header-mobile-toggle { display: block; margin-left: auto; }
            .header-container-royal { padding: 0 20px; }
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes slideUp {
            from {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
            to {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

@keyframes successPop {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

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