/* index */
/* ===== DEEP BLUE TEAL & CORAL RED THEME ===== */
        body.page-index{
            /* Primary Colors */
            --primary: #0F3057;
            /* Deep Blue Teal */
            --primary-dark: #0A2440;
            /* Darker teal */
            --primary-light: #1A4770;
            /* Lighter teal */
            --primary-soft: #E8EEF5;
            /* Light teal tint */

            /* Secondary */
            --secondary: #00587A;
            /* Ocean Teal */
            --secondary-light: #1A6F91;
            --secondary-soft: #E5F0F7;

            /* Accent */
            --accent: #FF6B6B;
            /* Coral Red */
            --accent-light: #FF8A8A;
            --accent-soft: #FFF0F0;

            /* Backgrounds */
            --bg-main: #F7F9FB;
            /* Soft White */
            --bg-card: #FFFFFF;
            /* Pure white */
            --bg-soft: #F0F3F7;
            --bg-warm: #FAFCFE;

            /* Neutrals */
            --dark: #1B1B1B;
            --text-primary: #1B1B1B;
            --text-secondary: #444444;

            /* Borders & Shadows */
            --border-light: #E0E5EC;
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 8px 24px rgba(15, 48, 87, 0.12);
            --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);

            --transition: all 0.25s ease;
        }

        body.page-index *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body.page-index{
            font-family: 'Josefin Sans', sans-serif;
            color: var(--text-primary);
            overflow-x: hidden;
            background: var(--bg-main);
            font-weight: 400;
            line-height: 1.8;
            width: 100%;
            padding-top: 0 !important;
        }

        body.page-index h1, body.page-index h2, body.page-index h3, body.page-index h4, body.page-index h5, body.page-index h6{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--dark);
        }

        body.page-index p{
            font-weight: 400;
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            color: var(--text-secondary);
        }

        /* ===== LOADING PAGE - FULLY RESPONSIVE ===== */
        body.page-index #loading-page{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 9999;
            transition: opacity 0.7s ease, visibility 0.7s ease;
            padding: 20px;
        }

        body.page-index .loading-logo{
            width: min(200px, 60%);
            margin-bottom: clamp(20px, 4vh, 30px);
            animation: elegantGlow 2.5s infinite alternate;
            filter: brightness(1.1);
        }

        @keyframes elegantGlow{
            0% {
                filter: drop-shadow(0 0 5px var(--accent)) brightness(1);
            }

            100% {
                filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1);
            }
        }

        body.page-index .loading-spinner{
            width: min(70px, 15vw);
            height: min(70px, 15vw);
            border: 3px solid rgba(255, 107, 107, 0.1);
            border-top: 3px solid var(--accent);
            border-right: 3px solid var(--primary);
            border-radius: 50%;
            animation: spin 2s infinite linear;
            margin-bottom: clamp(15px, 3vh, 25px);
        }

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

            100% {
                transform: rotate(360deg);
            }
        }

        body.page-index .loading-progress{
            width: min(300px, 80%);
            height: 2px;
            background: rgba(255, 255, 255, 0.05);
            margin-top: clamp(15px, 3vh, 30px);
            overflow: hidden;
        }

        body.page-index .loading-progress-bar{
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide 1.5s infinite ease-in-out;
            transform: translateX(-100%);
        }

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

            100% {
                transform: translateX(100%);
            }
        }

        body.page-index .loading-text{
            color: var(--accent);
            font-size: clamp(0.8rem, 3vw, 1rem);
            letter-spacing: clamp(4px, 2vw, 8px);
            font-weight: 300;
            text-transform: uppercase;
            margin-top: clamp(15px, 3vh, 30px);
            font-family: 'Josefin Sans', sans-serif;
            text-align: center;
            word-break: break-word;
        }

        body.page-index #loading-page.loaded{
            opacity: 0;
            visibility: hidden;
        }

        body.page-index .main-content{
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        body.page-index .main-content.show{
            opacity: 1;
        }

        /* ===== NAVBAR - BOOTSTRAP ENHANCED ===== */
        body.page-index .navbar{
            background: var(--bg-main) !important;
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            transition: all 0.4s ease;
            border-bottom: 2px solid var(--primary);
            width: 100%;
        }

        body.page-index .navbar.scrolled{
            box-shadow: var(--shadow-hover);
        }

        body.page-index .navbar-brand img{
            height: clamp(50px, 8vw, 72px);
            width: auto;
            transition: transform 0.5s ease;
            max-width: 100%;
            width: 90px;
            height: 77px;
            margin-left: 30px;
        }

        body.page-index .navbar-brand:hover img{
            transform: scale(1.02);
        }

        body.page-index .navbar-toggler{
            border: 1px solid var(--primary);
            padding: 8px 12px;
        }

        body.page-index .navbar-toggler:focus{
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-index .navbar-toggler-icon{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        body.page-index .nav-link{
            color: var(--text-primary) !important;
            font-weight: 500;
            margin: 0 5px;
            padding: 8px 12px !important;
            position: relative;
            font-size: clamp(0.85rem, 2vw, 0.95rem);
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s;
            white-space: nowrap;
        }

        body.page-index .nav-link::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 12px;
            right: 12px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        body.page-index .nav-link:hover::after{
            transform: scaleX(1);
        }

        body.page-index .nav-link:hover{
            color: var(--primary) !important;
        }

        body.page-index .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 8px 20px;
            font-weight: 500;
            font-size: clamp(0.85rem, 2vw, 0.9rem);
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            color: white;
            white-space: nowrap;
        }

        body.page-index .btn-primary:hover{
            background: var(--accent-light) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

        /* ===== HERO SECTION - FULLY RESPONSIVE ===== */
        body.page-index .hero-section{
            height: 100vh;
            margin-top: 0;
            padding: 0;
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        body.page-index .hero-img{
            filter: brightness(0.7) saturate(1.1);
            transition: transform 12s ease;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body.page-index .carousel-item.active .hero-img{
            transform: scale(1.08);
        }

        body.page-index .hero-overlay{
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(15, 48, 87, 0.5), rgba(0, 88, 122, 0.8));
            z-index: 1;
        }

        body.page-index .hero-content{
            z-index: 3;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 900px;
            text-align: center;
            padding: 20px;
        }

        body.page-index .hero-subtitle{
            font-family: 'Josefin Sans', sans-serif;
            font-size: clamp(0.8rem, 2.5vw, 1.1rem);
            letter-spacing: clamp(3px, 1.5vw, 6px);
            text-transform: uppercase;
            color: var(--accent-light);
            margin-bottom: clamp(10px, 2vh, 20px);
            font-weight: 400;
        }

        body.page-index .hero-title{
            font-size: 63px;
            font-weight: 700;
            color: white;
            margin-bottom: clamp(15px, 3vh, 25px);
            line-height: 1.2;
            text-shadow: 6px 4px 15px rgba(0, 0, 0, 0.3);
            font-family: 'Libre Baskerville', serif;
            word-break: break-word;
        }

        body.page-index .hero-description{
            font-size: clamp(0.95rem, 2.5vw, 1.2rem);
            color: rgba(255, 255, 255, 0.95);
            max-width: 600px;
            margin: 0 auto clamp(20px, 4vh, 40px);
            font-weight: 400;
            line-height: 1.8;
            padding: 0 15px;
        }

        body.page-index .hero-buttons{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: clamp(10px, 2vw, 15px);
            padding: 0 15px;
        }

        body.page-index .btn-outline-light{
            border: 2px solid white;
            color: white;
            border-radius: 40px;
            padding: clamp(8px, 2vw, 12px) clamp(20px, 4vw, 35px);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            background: transparent;
            font-size: clamp(0.8rem, 2vw, 0.95rem);
            white-space: nowrap;
        }

        body.page-index .btn-outline-light:hover{
            background: white;
            color: var(--primary);
            border-color: white;
            transform: translateY(-2px);
        }

        /* ===== WELCOME SECTION ===== */
        body.page-index .welcome-section{
            padding: clamp(50px, 8vw, 100px) 0;
            background: var(--bg-main);
        }

        body.page-index .section-subtitle{
            color: var(--secondary);
            font-size: clamp(0.9rem, 2vw, 1rem);
            letter-spacing: clamp(3px, 1vw, 4px);
            text-transform: uppercase;
            margin-bottom: 10px;
            font-weight: 400;
        }

        body.page-index .section-title{
            color: var(--dark);
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 25px;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
        }

        body.page-index .divider{
            width: clamp(60px, 8vw, 80px);
            height: 3px;
            background: var(--accent);
            margin: clamp(15px, 3vh, 30px) 0;
        }

        body.page-index .welcome-text{
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: var(--text-secondary);
            margin: clamp(15px, 3vh, 30px) 0;
            line-height: 1.8;
        }

        body.page-index .signature{
            font-family: 'Libre Baskerville', serif;
            font-style: italic;
            color: var(--primary);
            font-size: clamp(1.1rem, 2.5vw, 1.3rem);
        }

        body.page-index .welcome-section img{
            width: 100%;
            height: auto;
            border-radius: 16px;
            box-shadow: var(--shadow-strong);
        }

        /* ===== GALLERY SECTION ===== */
        body.page-index .gallery-section{
            background: var(--bg-soft);
            padding: clamp(50px, 8vw, 100px) 0;
        }

        body.page-index .gallery-item{
            position: relative;
            overflow: hidden;
            height: clamp(250px, 40vw, 350px);
            cursor: pointer;
            box-shadow: var(--shadow-strong);
            border-radius: 16px;
            border: 2px solid transparent;
            transition: var(--transition);
            width: 100%;
        }

        body.page-index .gallery-item:hover{
            transform: translateY(-10px);
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        body.page-index .gallery-item img{
            transition: transform 1.2s;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body.page-index .gallery-item:hover img{
            transform: scale(1.1);
        }

        body.page-index .gallery-overlay{
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 48, 87, 0.95) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
            display: flex;
            align-items: flex-end;
            padding: clamp(20px, 4vw, 40px);
        }

        body.page-index .gallery-item:hover .gallery-overlay{
            opacity: 1;
        }

        body.page-index .gallery-overlay h5{
            color: var(--accent-light);
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            font-weight: 400;
            margin: 0;
            transform: translateY(20px);
            transition: transform 0.5s ease;
            font-family: 'Libre Baskerville', serif;
        }

        body.page-index .gallery-item:hover .gallery-overlay h5{
            transform: translateY(0);
        }

        body.page-index .gallery-overlay p{
            color: rgba(255, 255, 255, 0.9);
            font-size: clamp(0.8rem, 2vw, 0.9rem);
            margin: 5px 0 0;
            transform: translateY(20px);
            transition: transform 0.5s ease 0.1s;
        }

        body.page-index .gallery-item:hover .gallery-overlay p{
            transform: translateY(0);
        }

        /* ===== FEATURES SECTION ===== */
        body.page-index .features-section{
            padding: clamp(50px, 8vw, 100px) 0;
            background: #b3c6d9;
        }

        body.page-index .feature-card{
            text-align: center;
            padding: clamp(25px, 4vw, 40px) clamp(20px, 3vw, 30px);
            background: var(--bg-card);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            height: 100%;
            border-radius: 24px;
            border: 1px solid var(--border-light);
        }

        body.page-index .feature-card:hover{
            transform: translateY(-12px);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent);
        }

        body.page-index .feature-icon{
            width: clamp(60px, 10vw, 80px);
            height: clamp(60px, 10vw, 80px);
            margin: 0 auto clamp(15px, 3vh, 25px);
            background: var(--primary-soft);
            border: 2px solid var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: clamp(1.5rem, 3vw, 2rem);
            transition: var(--transition);
        }

        body.page-index .feature-card:hover .feature-icon{
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            transform: rotateY(180deg);
        }

        body.page-index .feature-card h3{
            font-size: clamp(1.2rem, 2.5vw, 1.5rem);
            margin-bottom: 12px;
            color: var(--primary);
        }

        body.page-index .feature-card p{
            color: var(--text-secondary);
            font-size: clamp(0.9rem, 1.8vw, 1rem);
        }

        /* ===== TESTIMONIALS SECTION ===== */
        body.page-index .testimonials-section{
            padding: clamp(50px, 8vw, 100px) 0;
            background: #b3c6d9;
        }

        body.page-index .testimonial-card{
            background: var(--bg-card);
            padding: clamp(25px, 4vw, 40px);
            border: 1px solid var(--border-light);
            transition: var(--transition);
            border-radius: 24px;
            box-shadow: var(--shadow-sm);
            height: 100%;
        }

        body.page-index .testimonial-card:hover{
            border-color: var(--accent);
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        body.page-index .testimonial-text{
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            font-style: italic;
            color: var(--text-primary);
            margin-bottom: 20px;
            line-height: 1.8;
        }

        body.page-index .testimonial-author{
            color: var(--primary);
            font-weight: 600;
            font-size: clamp(0.95rem, 2vw, 1.1rem);
        }

        body.page-index .testimonial-role{
            color: var(--text-secondary);
            font-size: clamp(0.8rem, 1.8vw, 0.9rem);
        }

        /* ===== FOOTER ===== */
        body.page-index .footer{
            background: #6f8798;
            color: rgba(255, 255, 255, 0.9);
            padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 3vw, 30px);
        }

        body.page-index .footer h5{
            color: #1d1c1c;
            font-weight: 500;
            font-size: clamp(1rem, 2vw, 1.1rem);
            margin-bottom: clamp(15px, 3vh, 25px);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-index .footer p{
            color: rgba(255, 255, 255, 0.8);
            font-size: clamp(0.85rem, 1.8vw, 0.95rem);
            line-height: 1.6;
        }

        body.page-index .footer-links a{
            color: rgba(255, 255, 255, 0.8);
            transition: all 0.3s;
            display: inline-block;
            margin-bottom: 10px;
            text-decoration: none;
            font-weight: 400;
            font-size: clamp(0.85rem, 1.8vw, 0.95rem);
        }

        body.page-index .footer-links a:hover{
            color: var(--accent-light);
            transform: translateX(5px);
        }

        body.page-index .social-icons{
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        body.page-index .social-icons a{
            width: clamp(36px, 6vw, 42px);
            height: clamp(36px, 6vw, 42px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: 0.3s;
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            text-decoration: none;
        }

        body.page-index .social-icons a:hover{
            background: var(--accent);
            color: var(--primary-dark) !important;
            transform: translateY(-5px);
            border-color: var(--accent);
        }

        body.page-index .input-group{
            max-width: 100%;
            flex-wrap: wrap;
        }

        body.page-index .input-group .form-control{
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: clamp(10px, 2vw, 12px) clamp(15px, 3vw, 20px);
            font-size: clamp(0.85rem, 1.8vw, 0.95rem);
            border-radius: 8px 0 0 8px;
            flex: 1 1 auto;
            min-width: 150px;
        }

        body.page-index .input-group .btn-primary{
            background: #4b686d !important;
            border: none;
            color: white;
            padding: clamp(10px, 2vw, 12px) clamp(15px, 3vw, 25px);
            border-radius: 0 8px 8px 0;
            font-size: clamp(0.85rem, 1.8vw, 0.95rem);
            white-space: nowrap;
        }

        body.page-index .input-group .btn-primary:hover{
            background: var(--accent-light) !important;
        }

        /* ===== BACK TO TOP ===== */
        body.page-index .back-to-top{
            position: fixed;
            bottom: clamp(20px, 4vw, 40px);
            right: clamp(20px, 4vw, 40px);
            width: clamp(40px, 7vw, 50px);
            height: clamp(40px, 7vw, 50px);
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            opacity: 0;
            transition: 0.3s;
            pointer-events: none;
            z-index: 99;
            text-decoration: none;
            border: none;
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }

        body.page-index .back-to-top.show{
            opacity: 1;
            pointer-events: auto;
        }

        body.page-index .back-to-top:hover{
            background: var(--accent);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* ===== VIDEO THUMBNAIL STYLES (HOVER REMOVED) ===== */
        body.page-index .video-thumbnail-wrapper{
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-strong);
            border: 3px solid var(--accent);
            transition: var(--transition);
            cursor: pointer;
        }

        /* Hover effects removed - only scale on wrapper kept for consistency but can stay */
        body.page-index .video-thumbnail-wrapper:hover{
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent-light);
        }

        /* Image hover removed */
        body.page-index .video-thumbnail-wrapper:hover img{
            /* transform: scale(1.05);  REMOVED */
        }

        /* Play button hover effect completely removed */
        body.page-index .video-thumbnail-wrapper:hover .play-button-overlay{
            /* background: var(--accent-light); REMOVED */
            /* transform: translate(-50%, -50%) scale(1.1); REMOVED */
            /* width: 100px; REMOVED */
            /* height: 100px; REMOVED */
        }

        body.page-index .play-button-overlay{
            position: absolute;
            top: 49%;
            left: 52%;
            transform: translate(-50%, -50%);
            background: var(--accent);
            color: white;
            width: 117px;
            height: 72px;
            border-radius: 13%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 34px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            border: 4px solid #dc7070;
            transition: none; /* Ensure no transition on hover */
            z-index: 10;
        }

        /* No hover effect at all */
        body.page-index .play-button-overlay:hover{
            /* No styles */
        }

        body.page-index .watch-on-youtube-badge{
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 500;
            backdrop-filter: blur(5px);
            border: 1px solid var(--accent);
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        body.page-index .watch-on-youtube-badge i{
            color: var(--accent);
            font-size: 18px;
        }

        /* ===== BOOTSTRAP OVERRIDES & RESPONSIVE BREAKPOINTS ===== */
        @media (max-width: 1199px){
            body.page-index .container{
                max-width: 960px;
            }
        }

        @media (max-width: 991px){
            body.page-index .container{
                max-width: 720px;
            }

            body.page-index .navbar-collapse{
                background: var(--bg-main);
                padding: 20px;
                border-radius: 16px;
                margin-top: 15px;
                box-shadow: var(--shadow-strong);
                max-height: 80vh;
                overflow-y: auto;
            }

            body.page-index .nav-link{
                white-space: normal;
                padding: 12px 15px !important;
                text-align: center;
            }

            body.page-index .nav-link::after{
                left: 50%;
                right: 50%;
                transform: translateX(-50%) scaleX(0);
            }

            body.page-index .nav-link:hover::after{
                left: 25%;
                right: 25%;
                transform: translateX(0) scaleX(1);
            }

            body.page-index .navbar-nav{
                align-items: center;
            }

            body.page-index .ms-lg-2{
                margin-left: 0 !important;
                margin-top: 10px;
            }

            body.page-index .btn-primary{
                white-space: normal;
                width: 100%;
                text-align: center;
            }
        }

        @media (max-width: 767px){
            body.page-index .container{
                max-width: 540px;
            }

            body.page-index .hero-title{
                font-size: clamp(2rem, 7vw, 2.8rem);
            }

            body.page-index .hero-subtitle{
                font-size: 0.85rem;
                letter-spacing: 3px;
            }

            body.page-index .gallery-item{
                height: 250px;
            }

            body.page-index .hero-buttons{
                flex-direction: column;
                align-items: center;
            }

            body.page-index .btn-outline-light{
                width: 100%;
                max-width: 250px;
            }

            body.page-index .section-title{
                font-size: clamp(1.8rem, 5vw, 2.2rem);
            }

            body.page-index .divider{
                margin: 15px auto 15px 0;
            }

            body.page-index .text-center .divider{
                margin: 15px auto;
            }

            body.page-index .row.align-items-center{
                text-align: center;
            }

            body.page-index .signature{
                text-align: center;
            }

            body.page-index .welcome-section img{
                margin-top: 30px;
            }

            body.page-index .play-button-overlay{
                width: 70px;
                height: 70px;
                font-size: 35px;
                border-width: 3px;
            }

            /* No hover effect for play button */
            body.page-index .video-thumbnail-wrapper:hover .play-button-overlay{
                /* width: 80px; REMOVED */
                /* height: 80px; REMOVED */
            }

            body.page-index .watch-on-youtube-badge{
                padding: 6px 12px;
                font-size: 14px;
                bottom: 10px;
                right: 10px;
            }
        }

        @media (max-width: 575px){
            body.page-index .hero-title{
                font-size: clamp(1.8rem, 6vw, 2.2rem);
            }

            body.page-index .hero-subtitle{
                font-size: 0.75rem;
                letter-spacing: 2px;
            }

            body.page-index .hero-description{
                font-size: 0.95rem;
            }

            body.page-index .gallery-item{
                height: 220px;
            }

            body.page-index .feature-card{
                padding: 25px 15px;
            }

            body.page-index .testimonial-card{
                padding: 25px 15px;
            }

            body.page-index .footer{
                text-align: center;
            }

            body.page-index .footer h5{
                text-align: center;
            }

            body.page-index .social-icons{
                justify-content: center;
            }

            body.page-index .footer-links a:hover{
                transform: none;
            }

            body.page-index .input-group{
                flex-direction: column;
                gap: 10px;
            }

            body.page-index .input-group .form-control{
                border-radius: 8px;
                width: 100%;
            }

            body.page-index .input-group .btn-primary{
                border-radius: 8px;
                width: 100%;
            }

            body.page-index .back-to-top{
                bottom: 15px;
                right: 15px;
                width: 35px;
                height: 35px;
                font-size: 0.9rem;
            }

            body.page-index .play-button-overlay{
                width: 60px;
                height: 60px;
                font-size: 30px;
                border-width: 3px;
            }

            body.page-index .video-thumbnail-wrapper:hover .play-button-overlay{
                /* width: 70px; REMOVED */
                /* height: 70px; REMOVED */
            }
        }

        @media (max-width: 380px){
            body.page-index .hero-title{
                font-size: 1.5rem;
            }

            body.page-index .hero-subtitle{
                font-size: 0.7rem;
                letter-spacing: 1px;
            }

            body.page-index .btn-primary, body.page-index .btn-outline-light{
                padding: 8px 15px;
                font-size: 0.8rem;
            }
        }

        /* Landscape orientation fix */
        @media (max-height: 600px) and (orientation: landscape){
            body.page-index .hero-section{
                height: auto;
                min-height: 100vh;
            }

            body.page-index .hero-content{
                padding: 40px 20px;
            }

            body.page-index .loading-logo{
                width: 120px;
            }

            body.page-index .loading-spinner{
                width: 40px;
                height: 40px;
            }
        }

        /* Ensure images are responsive */
        body.page-index img{
            max-width: 100%;
            height: auto;
        }

        /* Tablet specific */
        @media (min-width: 768px) and (max-width: 1024px){
            body.page-index .hero-title{
                font-size: 3.5rem;
            }

            body.page-index .gallery-item{
                height: 300px;
            }
        }

        body.page-index .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 15px 20px;
            font-weight: 500;
            font-size: clamp(0.85rem, 2vw, 0.9rem);
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            color: white;
            white-space: nowrap;

        }

        body.page-index .hero-title{
            font-size: 63PX;
            font-weight: 700;
            color: white;
            margin-bottom: clamp(15px, 3vh, 25px);
            line-height: 1.2;
            text-shadow: 6px 4px 15px rgba(0, 0, 0, 0.3);
            font-family: 'Libre Baskerville', serif;
            word-break: break-word;
        }

        body.page-index h1.hero-title.aos-init.aos-animate{
            font-size: 54px;
        }

        body.page-index img.loading-logo{
            width: 181px;
            height: 175px;
        }

        body.page-index img.hero-img{
            height: 912px;
        }

/* about */
body.page-about{
            --primary: #0F3057;        /* Deep Blue Teal */
            --primary-dark: #0A2440;    /* Darker teal */
            --primary-light: #1A4770;   /* Lighter teal */
            --primary-soft: #E8EEF5;    /* Light teal tint */
            
            /* Secondary - Ocean Teal */
            --secondary: #00587A;       /* Ocean Teal */
            --secondary-light: #1A6F91; 
            --secondary-soft: #E5F0F7;  
            
            /* Accent - Coral Red */
            --accent: #FF6B6B;          /* Coral Red */
            --accent-light: #FF8A8A;    
            --accent-soft: #FFF0F0;     
            
            /* Backgrounds */
            --bg-main: #F7F9FB;         /* Soft White */
            --bg-card: #FFFFFF;          /* Pure white */
            --bg-soft: #F0F3F7;          
            --bg-warm: #FAFCFE;          
            
            /* Neutrals */
            --dark: #1B1B1B;             
            --text-primary: #1B1B1B;     
            --text-secondary: #444444;    
            
            /* Borders & Shadows */
            --border-light: #E0E5EC;      
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 8px 24px rgba(255, 107, 107, 0.2);
            --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
            
            --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* ===== FIXED CONTAINER SIZING ===== */
        html body.page-about, body.page-about{
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
        }

        body.page-about{
            font-family: 'Josefin Sans', sans-serif;
            background: var(--bg-main);
            color: var(--text-primary);
            padding-top: 90px;
            font-weight: 400;
            line-height: 1.8;
            min-height: 100vh;
        }

        body.page-about h1, body.page-about h2, body.page-about h3, body.page-about h4, body.page-about h5, body.page-about h6{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--dark);
        }

        body.page-about p{
            font-weight: 400;
            font-size: 1.1rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        body.page-about .container{
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        /* ===== ENHANCED LOADING PAGE ===== */
        body.page-about #loading-page{
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            display: flex; justify-content: center; align-items: center; flex-direction: column;
            z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s ease;
            padding: 20px;
        }

        body.page-about .loading-logo{ 
            width: min(200px, 60%);
            margin-bottom: clamp(20px, 4vh, 30px); 
            animation: elegantGlow 2.5s infinite alternate;
            filter: brightness(1.1);
        }

        @keyframes elegantGlow{
            0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); }
            100% { filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1); }
        }

        body.page-about .loading-spinner{
            width: min(70px, 15vw);
            height: min(70px, 15vw);
            border: 3px solid rgba(255, 107, 107, 0.1);
            border-top: 3px solid var(--accent);
            border-right: 3px solid var(--primary);
            border-radius: 50%;
            animation: spin 2s infinite linear;
            margin-bottom: clamp(15px, 3vh, 25px);
        }

        body.page-about .loading-text{
            color: var(--accent);
            font-size: clamp(0.8rem, 3vw, 1rem);
            letter-spacing: clamp(4px, 2vw, 8px);
            font-weight: 300;
            text-transform: uppercase;
            margin-top: clamp(15px, 3vh, 30px);
            font-family: 'Josefin Sans', sans-serif;
            text-align: center;
            word-break: break-word;
        }

        body.page-about .loading-dots{
            display: inline-block;
            animation: dots 1.5s infinite;
        }

        body.page-about .loading-progress{
            width: min(300px, 80%);
            height: 2px;
            background: rgba(255, 255, 255, 0.05);
            margin-top: clamp(15px, 3vh, 30px);
            overflow: hidden;
        }

        body.page-about .loading-progress-bar{
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide 1.5s infinite ease-in-out;
            transform: translateX(-100%);
        }

        @keyframes spin{
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        @keyframes dots{
            0%, 20% { content: "."; }
            40% { content: ".."; }
            60%, 100% { content: "..."; }
        }

        body.page-about #loading-page.loaded{
            opacity: 0;
            visibility: hidden;
        }

        body.page-about .main-content{
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        body.page-about .main-content.show{
            opacity: 1;
        }

        /* ===== NAVBAR ===== */
        body.page-about .navbar{
            background: var(--bg-main) !important;
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            transition: all 0.4s ease;
            border-bottom: 2px solid var(--primary);
            width: 100%;
            left: 0;
            right: 0;
            z-index: 999;
        }

        body.page-about .navbar.scrolled{
            box-shadow: var(--shadow-hover);
        }

        body.page-about .navbar-brand img{
            height: 67px;
            transition: transform 0.5s ease;
            filter: brightness(1.1);
            width: 70px;
        }

        body.page-about .navbar-brand:hover img{
            transform: scale(1.02);
        }

        body.page-about .nav-link{
            color: var(--text-primary) !important;
            font-weight: 500;
            padding: 10px 18px !important;
            position: relative;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: color 0.3s;
        }

        body.page-about .nav-link::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 18px;
            right: 18px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        body.page-about .nav-link:hover::after, body.page-about .nav-link.active::after{
            transform: scaleX(1);
        }

        body.page-about .nav-link:hover, body.page-about .nav-link.active{
            color: var(--primary) !important;
        }

        body.page-about .navbar .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 8px 22px;
            font-weight: 500;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: var(--transition);
            color: white;
        }

        body.page-about .navbar .btn-primary:hover{
            background: var(--accent-light) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

        body.page-about .navbar-toggler{
            border: 1px solid var(--primary);
            padding: 0.25rem 0.75rem;
            background-color: transparent;
        }

        body.page-about .navbar-toggler:focus{
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-about .navbar-toggler-icon{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        body.page-about ul.navbar-nav.ms-auto{
            gap: 15px;
        }

        /* ===== SECTION HEADER ===== */
        body.page-about .section-header{
            background: transparent;
            padding: 60px 20px;
            text-align: center;
            margin: 20px auto 50px;
            max-width: 1100px;
        }

        body.page-about .section-header h1{
            color: var(--primary);
            font-weight: 800;
            font-size: 2.8rem;
            margin-bottom: 15px;
        }

        body.page-about .section-header p{
            color: var(--text-secondary);
            max-width: 800px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

        /* ===== PARAGRAPHY SECTION ===== */
        body.page-about .paragraphy{
            margin: 40px auto 70px;
            padding: 40px;
            max-width: 1000px;
            text-align: center;
            background: var(--bg-card);
            border-radius: 30px;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-strong);
            transition: var(--transition);
            color: var(--text-primary);
            position: relative;
            overflow: hidden;
        }

        body.page-about .paragraphy::before{
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.1), transparent);
            transition: left 0.8s ease;
        }

        body.page-about .paragraphy:hover::before{
            left: 100%;
        }

        body.page-about .paragraphy:hover{
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
            transform: translateY(-5px);
        }

        body.page-about .paragraphy p{
            color: var(--text-secondary);
            font-weight: 400;
        }

        /* ===== CARD FLEX LAYOUT ===== */
        body.page-about .card-flex{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            background: var(--bg-card);
            padding: 40px;
            border-radius: 30px;
            box-shadow: var(--shadow-strong);
            margin-bottom: 30px;
            border: 1px solid var(--border-light);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        body.page-about .card-flex::before{
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.1), transparent);
            transition: left 0.8s ease;
        }

        body.page-about .card-flex:hover::before{
            left: 100%;
        }

        body.page-about .card-flex:hover{
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
            transform: translateY(-8px);
        }

        body.page-about .card-flex.reverse{
            flex-direction: row-reverse;
        }

        body.page-about .text-side{
            flex: 1;
        }

        body.page-about .text-side h4{
            color: var(--primary);
            font-size: 2rem;
            margin-bottom: 20px;
        }

        body.page-about .text-side p{
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.8;
            margin: 0;
            font-weight: 400;
        }

        body.page-about .image-side{
            flex: 1;
            display: flex;
            justify-content: center;
        }

        body.page-about .image-side img{
            max-width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: var(--shadow-strong);
            border: 2px solid var(--border-light);
            transition: var(--transition);
            width: 100%;
            max-height: 300px;
            object-fit: cover;
        }

        body.page-about .image-side img:hover{
            transform: scale(1.05);
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        /* ===== CHILD ELEMENTS ANIMATION ===== */
        body.page-about .child2, body.page-about .child3, body.page-about .child4{
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
        }

        body.page-about .child2.show, body.page-about .child3.show, body.page-about .child4.show{
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== COMMITMENT SECTION ===== */
        body.page-about .commitment{
            position: relative;
            background: var(--bg-card);
            border-radius: 40px;
            padding: 60px 40px;
            margin: 60px auto;
            max-width: 1100px;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-strong);
            overflow: hidden;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.9s ease;
        }

        body.page-about .commitment.show{
            opacity: 1;
            transform: translateY(0);
        }

        body.page-about .commitment::before{
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 40px;
            padding: 2px;
            background: linear-gradient(270deg, var(--accent), var(--primary), var(--accent-light), var(--primary));
            background-size: 600% 600%;
            animation: borderFlow 6s linear infinite;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        @keyframes borderFlow{
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        body.page-about .commitment:hover{
            transform: translateY(-8px) scale(1.01);
            box-shadow: var(--shadow-hover);
        }

        body.page-about .commitment h3{
            text-align: center;
            font-size: 2.8rem;
            margin-bottom: 30px;
            color: var(--primary);
            position: relative;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.8s ease 0.3s;
        }

        body.page-about .commitment.show h3{
            opacity: 1;
            transform: translateY(0);
        }

        body.page-about .commitment h3::after{
            content: "";
            position: absolute;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            transition: width 0.8s ease 0.8s;
        }

        body.page-about .commitment.show h3::after{
            width: 150px;
        }

        body.page-about p.commimentpara{
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            font-size: 1.1rem;
            line-height: 1.9;
            color: var(--text-secondary);
            opacity: 0;
            transform: translateY(25px);
            transition: all 0.9s ease 0.6s;
        }

        body.page-about .commitment.show p.commimentpara{
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== WHY CHOOSE US SECTION ===== */
        body.page-about .why-choose-us{
            background: var(--bg-soft);
            padding: 80px 0;
            margin-top: 40px;
        }

        body.page-about .section-title{
            color: var(--primary);
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        body.page-about .lead{
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
        }

        body.page-about .feature-card{
            background: var(--bg-card);
            border-radius: 30px;
            padding: 40px 30px;
            text-align: center;
            min-height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border: 1px solid var(--border-light);
            transition: var(--transition);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        body.page-about .feature-card::before{
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.1), transparent);
            transition: left 0.8s ease;
        }

        body.page-about .feature-card:hover::before{
            left: 100%;
        }

        body.page-about .feature-card:hover{
            transform: translateY(-8px);
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
            background: var(--bg-main);
        }

        body.page-about .icon-circle{
            width: 80px;
            height: 80px;
            background: var(--primary-soft);
            border: 2px solid var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px auto;
            transition: var(--transition);
        }

        body.page-about .feature-card:hover .icon-circle{
            background: var(--accent);
            border-color: var(--accent);
            transform: rotateY(180deg);
        }

        body.page-about .icon-circle i{
            font-size: 34px;
            color: var(--primary);
            transition: var(--transition);
        }

        body.page-about .feature-card:hover .icon-circle i{
            color: white;
        }

        body.page-about .feature-card h4{
            color: var(--primary);
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        body.page-about .feature-card p{
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.7;
            margin: 0;
        }

        /* ===== FOOTER - ENHANCED ===== */
        body.page-about .footer{
            background: var(--primary-dark);
            color: rgba(255, 255, 255, 0.9);
            padding: 60px 0 25px;
            margin-top: 80px;
            border-top: 1px solid rgba(255, 107, 107, 0.3);
            width: 100%;
            overflow-x: hidden;
            position: relative;
        }

        body.page-about .footer::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: scanline 3s linear infinite;
        }

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

        body.page-about .footer h5{
            color: var(--accent-light);
            font-weight: 500;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-about .footer p{
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            font-size: 0.95rem;
        }

        body.page-about .footer-links a{
            color: rgba(255, 255, 255, 0.8);
            display: block;
            margin-bottom: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        body.page-about .footer-links a:hover{
            color: var(--accent-light);
            transform: translateX(5px);
        }

        body.page-about .social-icons{
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        body.page-about .social-icons a{
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            border-radius: 50%;
            color: #fff;
            transition: all 0.35s ease;
            text-decoration: none;
        }

        body.page-about .social-icons a:hover{
            background: var(--accent);
            color: var(--primary-dark) !important;
            transform: translateY(-5px) scale(1.1);
            border-color: var(--accent);
        }

        body.page-about .input-group{
            max-width: 400px;
        }

        body.page-about .input-group .form-control{
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            color: white;
            padding: 12px 20px;
        }

        body.page-about .input-group .form-control::placeholder{
            color: rgba(255, 255, 255, 0.6);
        }

        body.page-about .input-group .form-control:focus{
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-about .input-group .btn-primary{
            background: var(--accent);
            border: 1px solid var(--accent);
            color: white;
            padding: 12px 25px;
        }

        body.page-about .input-group .btn-primary:hover{
            background: var(--accent-light);
            border-color: var(--accent-light);
        }

        body.page-about hr{
            opacity: 0.2;
            border-color: rgba(255, 107, 107, 0.3);
            margin: 30px 0;
        }

        /* ===== BACK TO TOP BUTTON ===== */
        body.page-about .back-to-top{ 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            width: 45px; 
            height: 45px; 
            background: var(--primary); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.2rem; 
            opacity: 0; 
            transition: 0.3s; 
            pointer-events: none; 
            z-index: 99; 
            text-decoration: none;
            border: 1px solid var(--accent);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }
        
        body.page-about .back-to-top.show{ 
            opacity: 1; 
            pointer-events: auto; 
        }
        
        body.page-about .back-to-top:hover{
            background: var(--accent);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* ===== RESPONSIVE BREAKPOINTS ===== */
        @media (max-width: 1199px){
            body.page-about .container{ max-width: 960px; }
        }

        @media (max-width: 991px){
            body.page-about .container{ max-width: 720px; }
            
            body.page-about .navbar-collapse{
                background: white;
                padding: 20px;
                border-radius: 16px;
                margin-top: 15px;
                box-shadow: var(--shadow-strong);
            }
            
            body.page-about .nav-link{
                margin: 8px 0;
                text-align: center;
            }
            
            body.page-about .nav-link::after{
                left: 50%;
                right: 50%;
                transform: translateX(-50%) scaleX(0);
            }
            
            body.page-about .nav-link:hover::after{
                left: 25%;
                right: 25%;
                transform: translateX(0) scaleX(1);
            }
            
            body.page-about .ms-2{
                margin-left: 0 !important;
                margin-top: 10px;
            }
            
            body.page-about .btn-primary{
                width: 100%;
            }
            
            body.page-about .card-flex, body.page-about .card-flex.reverse{
                flex-direction: column;
                padding: 30px;
            }
            
            body.page-about .text-side{
                text-align: center;
            }
            
            body.page-about .image-side{
                justify-content: center;
            }
            
            body.page-about .commitment{
                padding: 40px 25px;
            }
            
            body.page-about .commitment h3{
                font-size: 2.2rem;
            }
        }

        @media (max-width: 768px){
            body.page-about{ 
                padding-top: 70px; 
            }
            
            body.page-about .section-header h1{
                font-size: 2rem;
            }
            
            body.page-about .paragraphy{
                padding: 30px 20px;
                margin: 30px auto;
            }
            
            body.page-about .card-flex{
                padding: 25px;
            }
            
            body.page-about .text-side h4{
                font-size: 1.6rem;
            }
            
            body.page-about .commitment{
                padding: 35px 20px;
                margin: 40px auto;
            }
            
            body.page-about .commitment h3{
                font-size: 1.8rem;
            }
            
            body.page-about p.commimentpara{
                font-size: 1rem;
            }
            
            body.page-about .feature-card{
                padding: 30px 20px;
            }
            
            body.page-about .feature-card h4{
                font-size: 1.3rem;
            }
            
            body.page-about .footer{
                text-align: center;
                padding: 40px 0 20px;
            }
            
            body.page-about .footer-links a:hover{
                transform: none;
            }
            
            body.page-about .social-icons{
                justify-content: center;
            }
            
            body.page-about .input-group{
                margin: 0 auto;
            }
            
            body.page-about .footer h5{
                text-align: center;
            }
        }

        @media (max-width: 576px){
            body.page-about .section-header{
                padding: 40px 15px;
            }
            
            body.page-about .section-header h1{
                font-size: 1.8rem;
            }
            
            body.page-about .text-side h4{
                font-size: 1.4rem;
            }
            
            body.page-about .commitment h3{
                font-size: 1.6rem;
            }
            
            body.page-about .icon-circle{
                width: 70px;
                height: 70px;
            }
            
            body.page-about .icon-circle i{
                font-size: 28px;
            }
            
            body.page-about .back-to-top{
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            body.page-about .input-group{
                flex-direction: column;
                gap: 10px;
            }
            
            body.page-about .input-group .form-control{
                border-radius: 8px;
                width: 100%;
            }
            
            body.page-about .input-group .btn-primary{
                border-radius: 8px;
                width: 100%;
            }
        }

        @media (max-width: 400px){
            body.page-about .loading-logo{
                width: 120px;
            }
            
            body.page-about .loading-progress{
                width: 200px;
            }
        }
        body.page-about .footer h5{
    color: #000000;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-about .footer{
    background: #6f8798;
    color: rgba(255, 255, 255, 0.9);
    padding: 60px 0 25px;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 107, 107, 0.3);
    width: 100%;
    overflow-x: hidden;
    position: relative;
}
body.page-about .navbar-brand img{
    height: 70px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 78px;
}
body.page-about .navbar-brand img{
    height: 81px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 91px;
}

/* about inline styles */
body.page-about .style-about-001 { width: 140px; filter: brightness(1.2); }

/* contactus */
/* ===== DEEP BLUE TEAL & CORAL RED THEME ===== */
        body.page-contactus{
            /* Primary Colors */
            --primary: #0F3057;        /* Deep Blue Teal */
            --primary-dark: #0A2440;    /* Darker teal */
            --primary-light: #1A4770;   /* Lighter teal */
            --primary-soft: #E8EEF5;    /* Light teal tint */
            
            /* Secondary - Ocean Teal */
            --secondary: #00587A;       /* Ocean Teal */
            --secondary-light: #1A6F91; 
            --secondary-soft: #E5F0F7;  
            
            /* Accent - Coral Red */
            --accent: #FF6B6B;          /* Coral Red */
            --accent-light: #FF8A8A;    
            --accent-soft: #FFF0F0;     
            
            /* Backgrounds */
            --bg-main: #F7F9FB;         /* Soft White */
            --bg-card: #FFFFFF;          /* Pure white */
            --bg-soft: #F0F3F7;          
            --bg-warm: #FAFCFE;          
            
            /* Neutrals */
            --dark: #1B1B1B;             
            --text-primary: #1B1B1B;     
            --text-secondary: #444444;    
            
            /* Borders & Shadows */
            --border-light: #E0E5EC;      
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 8px 24px rgba(255, 107, 107, 0.2);
            --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
            
            --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* ===== FIXED CONTAINER SIZING ===== */
        html body.page-contactus, body.page-contactus{
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
        }

        body.page-contactus{
            font-family: 'Josefin Sans', sans-serif;
            background: var(--bg-main);
            color: var(--text-primary);
            padding-top: 90px;
            font-weight: 400;
            line-height: 1.8;
            min-height: 100vh;
        }

        body.page-contactus h1, body.page-contactus h2, body.page-contactus h3, body.page-contactus h4, body.page-contactus h5, body.page-contactus h6{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--dark);
        }

        body.page-contactus p{
            font-weight: 400;
            font-size: 1.1rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        body.page-contactus .container{
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        body.page-contactus .contact-container{
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* ===== ENHANCED LOADING PAGE ===== */
        body.page-contactus #loading-page{
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            display: flex; justify-content: center; align-items: center; flex-direction: column;
            z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s ease;
            padding: 20px;
        }

        body.page-contactus .loading-logo{ 
            width: min(200px, 60%);
            margin-bottom: clamp(20px, 4vh, 30px); 
            animation: elegantGlow 2.5s infinite alternate;
            filter: brightness(1.1);
        }

        @keyframes elegantGlow{
            0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); }
            100% { filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1); }
        }

        body.page-contactus .loading-spinner{
            width: min(70px, 15vw);
            height: min(70px, 15vw);
            border: 3px solid rgba(255, 107, 107, 0.1);
            border-top: 3px solid var(--accent);
            border-right: 3px solid var(--primary);
            border-radius: 50%;
            animation: spin 2s infinite linear;
            margin-bottom: clamp(15px, 3vh, 25px);
        }

        body.page-contactus .loading-text{
            color: var(--accent);
            font-size: clamp(0.8rem, 3vw, 1rem);
            letter-spacing: clamp(4px, 2vw, 8px);
            font-weight: 300;
            text-transform: uppercase;
            margin-top: clamp(15px, 3vh, 30px);
            font-family: 'Josefin Sans', sans-serif;
            text-align: center;
            word-break: break-word;
        }

        body.page-contactus .loading-dots{
            display: inline-block;
            animation: dots 1.5s infinite;
        }

        body.page-contactus .loading-progress{
            width: min(300px, 80%);
            height: 2px;
            background: rgba(255, 255, 255, 0.05);
            margin-top: clamp(15px, 3vh, 30px);
            overflow: hidden;
        }

        body.page-contactus .loading-progress-bar{
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide 1.5s infinite ease-in-out;
            transform: translateX(-100%);
        }

        @keyframes spin{
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        @keyframes dots{
            0%, 20% { content: "."; }
            40% { content: ".."; }
            60%, 100% { content: "..."; }
        }

        body.page-contactus #loading-page.loaded{
            opacity: 0;
            visibility: hidden;
        }

        body.page-contactus .main-content{
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        body.page-contactus .main-content.show{
            opacity: 1;
        }

        /* ===== NAVBAR ===== */
        body.page-contactus .navbar{
            background: var(--bg-main) !important;
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            transition: all 0.4s ease;
            border-bottom: 2px solid var(--primary);
            width: 100%;
            left: 0;
            right: 0;
            z-index: 999;
        }

        body.page-contactus .navbar.scrolled{
            box-shadow: var(--shadow-hover);
        }

        body.page-contactus .navbar-brand img{
            height: 72px;
            transition: transform 0.5s ease;
            filter: brightness(1.1);
            width: 77px;
        }

        body.page-contactus .navbar-brand:hover img{
            transform: scale(1.02);
        }

        body.page-contactus .nav-link{
            color: var(--text-primary) !important;
            font-weight: 500;
            padding: 10px 18px !important;
            position: relative;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: color 0.3s;
        }

        body.page-contactus .nav-link::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 18px;
            right: 18px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        body.page-contactus .nav-link:hover::after, body.page-contactus .nav-link.active::after{
            transform: scaleX(1);
        }

        body.page-contactus .nav-link:hover, body.page-contactus .nav-link.active{
            color: var(--primary) !important;
        }

        body.page-contactus .navbar .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 8px 22px;
            font-weight: 500;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: var(--transition);
            color: white;
        }

        body.page-contactus .navbar .btn-primary:hover{
            background: var(--accent-light) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

        body.page-contactus .navbar-toggler{
            border: 1px solid var(--primary);
            padding: 0.25rem 0.75rem;
            background-color: transparent;
        }

        body.page-contactus .navbar-toggler:focus{
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-contactus .navbar-toggler-icon{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* ===== ENHANCED HERO SECTION ===== */
        body.page-contactus .contact-hero{
            background: transparent;
            padding: 60px 20px;
            text-align: center;
            margin: 20px auto 50px;
            max-width: 1100px;
        }

        body.page-contactus .contact-hero h1{
            font-weight: 800;
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--primary);
        }

        body.page-contactus .contact-hero p{
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto;
        }

        /* ===== CONTACT CARDS ===== */
        body.page-contactus .contact-card{
            background: var(--bg-card);
            border-radius: 25px;
            padding: 35px;
            color: var(--text-primary);
            height: 100%;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-strong);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        body.page-contactus .contact-card::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            transition: height 0.3s ease;
        }

        body.page-contactus .contact-card:hover{
            transform: translateY(-10px);
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        body.page-contactus .contact-card:hover::before{
            height: 6px;
        }

        body.page-contactus .contact-card .icon-wrapper{
            width: 70px;
            height: 70px;
            background: var(--primary-soft);
            border: 2px solid var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            color: var(--primary);
            font-size: 1.8rem;
            transition: var(--transition);
        }

        body.page-contactus .contact-card:hover .icon-wrapper{
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            transform: rotateY(180deg);
        }

        body.page-contactus .contact-card h3{
            color: var(--primary);
            font-weight: 700;
            margin-bottom: 20px;
            font-size: 1.6rem;
        }

        body.page-contactus .contact-card p{
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 15px;
            font-size: 0.95rem;
        }

        body.page-contactus .contact-card strong{
            color: var(--primary);
            font-weight: 600;
        }

        body.page-contactus .contact-card a{
            color: var(--primary-light);
            text-decoration: none;
            font-weight: 400;
            transition: color 0.3s ease;
        }

        body.page-contactus .contact-card a:hover{
            color: var(--accent);
        }

        /* ===== CONTACT METHOD ===== */
        body.page-contactus .contact-method{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background: var(--bg-soft);
            border-radius: 15px;
            transition: var(--transition);
            border: 1px solid var(--border-light);
        }

        body.page-contactus .contact-method:hover{
            background: var(--bg-main);
            border-color: var(--accent);
            transform: translateX(8px);
        }

        body.page-contactus .contact-method i{
            font-size: 2rem;
            color: var(--primary);
            margin-right: 15px;
            min-width: 40px;
        }

        body.page-contactus .contact-method:hover i{
            color: var(--accent);
        }

        body.page-contactus .contact-method p{
            margin: 0;
        }

        body.page-contactus .contact-method strong{
            color: var(--primary);
        }

        /* ===== HOURS CARD ===== */
        body.page-contactus .hours-card{
            background: var(--bg-card);
            border-radius: 25px;
            padding: 40px;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-strong);
            transition: var(--transition);
        }

        body.page-contactus .hours-card:hover{
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        body.page-contactus .hours-card h3{
            color: var(--primary);
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            font-size: 2rem;
        }

        body.page-contactus .hour-item{
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
            color: var(--text-primary);
        }

        body.page-contactus .hour-item:last-child{
            border-bottom: none;
        }

        body.page-contactus .hour-item .day{
            font-weight: 500;
            color: var(--primary);
        }

        body.page-contactus .hour-item .time{
            color: var(--text-secondary);
        }

        body.page-contactus .alert-info{
            background: var(--primary-soft);
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 15px;
            padding: 15px;
        }

        body.page-contactus .alert-info i{
            color: var(--accent);
        }

        /* ===== ADDITIONAL INFO SECTION ===== */
        body.page-contactus .col-md-4.text-center{
            padding: 20px;
        }

        body.page-contactus .col-md-4.text-center i{
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 15px;
            transition: var(--transition);
        }

        body.page-contactus .col-md-4.text-center:hover i{
            transform: scale(1.1);
            color: var(--accent);
        }

        body.page-contactus .col-md-4.text-center h5{
            color: var(--primary);
            margin: 15px 0 10px;
        }

        body.page-contactus .col-md-4.text-center p{
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* ===== FOOTER - ENHANCED ===== */
        body.page-contactus .footer{
            background: var(--primary-dark);
            color: rgba(255, 255, 255, 0.9);
            padding: 60px 0 25px;
            margin-top: 80px;
            border-top: 1px solid rgba(255, 107, 107, 0.3);
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        body.page-contactus .footer::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: scanline 3s linear infinite;
        }

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

        body.page-contactus .footer h5{
            color: var(--accent-light);
            font-weight: 500;
            margin-bottom: 25px;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-contactus .footer p{
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            font-size: 0.95rem;
        }

        body.page-contactus .footer-links a{
            color: rgba(255, 255, 255, 0.8);
            display: block;
            margin-bottom: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        body.page-contactus .footer-links a:hover{
            color: var(--accent-light);
            transform: translateX(5px);
        }

        body.page-contactus .social-icons{
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        body.page-contactus .social-icons a{
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            border-radius: 50%;
            color: #fff;
            transition: all 0.35s ease;
            text-decoration: none;
        }

        body.page-contactus .social-icons a:hover{
            background: var(--accent);
            color: var(--primary-dark) !important;
            transform: translateY(-5px) scale(1.1);
            border-color: var(--accent);
        }

        body.page-contactus .input-group{
            max-width: 400px;
        }

        body.page-contactus .input-group .form-control{
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            color: white;
            padding: 12px 20px;
        }

        body.page-contactus .input-group .form-control::placeholder{
            color: rgba(255, 255, 255, 0.6);
        }

        body.page-contactus .input-group .form-control:focus{
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-contactus .input-group .btn-primary{
            background: var(--accent);
            border: 1px solid var(--accent);
            color: white;
            padding: 12px 25px;
        }

        body.page-contactus .input-group .btn-primary:hover{
            background: var(--accent-light);
            border-color: var(--accent-light);
        }

        body.page-contactus hr{
            opacity: 0.2;
            border-color: rgba(255, 107, 107, 0.3);
            margin: 30px 0;
        }

        /* ===== BACK TO TOP BUTTON ===== */
        body.page-contactus .back-to-top{ 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            width: 45px; 
            height: 45px; 
            background: var(--primary); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.2rem; 
            opacity: 0; 
            transition: 0.3s; 
            pointer-events: none; 
            z-index: 99; 
            text-decoration: none;
            border: 1px solid var(--accent);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }
        
        body.page-contactus .back-to-top.show{ 
            opacity: 1; 
            pointer-events: auto; 
        }
        
        body.page-contactus .back-to-top:hover{
            background: var(--accent);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* ===== ANIMATIONS ===== */
        body.page-contactus .animate-on-scroll{
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        body.page-contactus .animate-on-scroll.animated{
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== RESPONSIVE BREAKPOINTS ===== */
        @media (max-width: 1199px){
            body.page-contactus .container{ max-width: 960px; }
        }

        @media (max-width: 991px){
            body.page-contactus .container{ max-width: 720px; }
            
            body.page-contactus .navbar-collapse{
                background: white;
                padding: 20px;
                border-radius: 16px;
                margin-top: 15px;
                box-shadow: var(--shadow-strong);
            }
            
            body.page-contactus .nav-link{
                margin: 8px 0;
                text-align: center;
            }
            
            body.page-contactus .nav-link::after{
                left: 50%;
                right: 50%;
                transform: translateX(-50%) scaleX(0);
            }
            
            body.page-contactus .nav-link:hover::after{
                left: 25%;
                right: 25%;
                transform: translateX(0) scaleX(1);
            }
            
            body.page-contactus .ms-2{
                margin-left: 0 !important;
                margin-top: 10px;
            }
            
            body.page-contactus .btn-primary{
                width: 100%;
            }
            
            body.page-contactus .contact-card{
                padding: 30px 25px;
            }
            
            body.page-contactus .contact-method{
                padding: 12px;
            }
        }

        @media (max-width: 768px){
            body.page-contactus{ 
                padding-top: 70px; 
            }
            
            body.page-contactus .contact-hero h1{
                font-size: 2.2rem;
            }
            
            body.page-contactus .contact-hero{
                padding: 40px 20px;
            }
            
            body.page-contactus .contact-card{
                padding: 25px 20px;
            }
            
            body.page-contactus .contact-method{
                padding: 10px;
            }
            
            body.page-contactus .contact-method i{
                font-size: 1.5rem;
            }
            
            body.page-contactus .hours-card{
                padding: 30px 20px;
            }
            
            body.page-contactus .hours-card h3{
                font-size: 1.8rem;
            }
            
            body.page-contactus .footer{
                text-align: center;
                padding: 40px 0 20px;
            }
            
            body.page-contactus .footer-links a:hover{
                transform: none;
            }
            
            body.page-contactus .social-icons{
                justify-content: center;
            }
            
            body.page-contactus .input-group{
                margin: 0 auto;
            }
            
            body.page-contactus .col-md-4.text-center{
                margin-bottom: 25px;
            }
            
            body.page-contactus .footer h5{
                text-align: center;
            }
        }

        @media (max-width: 576px){
            body.page-contactus .contact-hero h1{
                font-size: 1.8rem;
            }
            
            body.page-contactus .contact-hero p{
                font-size: 0.95rem;
            }
            
            body.page-contactus .contact-card h3{
                font-size: 1.4rem;
            }
            
            body.page-contactus .hour-item{
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            body.page-contactus .hour-item .day{
                margin-bottom: 5px;
            }
            
            body.page-contactus .back-to-top{
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            body.page-contactus .input-group{
                flex-direction: column;
                gap: 10px;
            }
            
            body.page-contactus .input-group .form-control{
                border-radius: 8px;
                width: 100%;
            }
            
            body.page-contactus .input-group .btn-primary{
                border-radius: 8px;
                width: 100%;
            }
        }

        @media (max-width: 400px){
            body.page-contactus .loading-logo{
                width: 120px;
            }
            
            body.page-contactus .loading-progress{
                width: 200px;
            }
        }
        body.page-contactus .footer{
    background: #6f8798;
    color: rgba(255, 255, 255, 0.9);
    padding: 60px 0 25px;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 107, 107, 0.3);
    width: 100%;
    position: relative;
    overflow: hidden;
}
body.page-contactus .footer h5{
    color: #000000;
    font-weight: 500;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-contactus .footer h5{
    color: #000000;
    font-weight: 500;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-contactus .footer{
    background: #6f8798;
    color: rgba(255, 255, 255, 0.9);
    padding: 60px 0 25px;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 107, 107, 0.3);
    width: 100%;
    position: relative;
    overflow: hidden;
}
body.page-contactus .navbar-brand img{
    height: 70px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 78px;
}
body.page-contactus .navbar-brand img{
    height: 70px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 78px;
}

/* contactus inline styles */
body.page-contactus .style-contactus-001 { color: var(--accent); }
body.page-contactus .style-contactus-002 { width: 140px; filter: brightness(1.2); }

/* dashboard */
body.page-dashboard{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#f2f3f5;
}

/* ===== Dashboard Container ===== */
body.page-dashboard .dashboard-container{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:30px;
}

/* ===== WT Card Style ===== */
body.page-dashboard .wt-card{
  background:#ffffff;
  border-radius:16px;
  padding:20px;
  border:1px solid #e5e7eb;
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  transition:all .22s ease;
  text-align:center;
}
body.page-dashboard .wt-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 55px rgba(0,0,0,.20);
}

/* Icon Circle */
body.page-dashboard .wt-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#fff;
  margin:0 auto 0 auto !important;
}

/* Icon Colors */
body.page-dashboard .bg-green{ background:#22c55e; }
body.page-dashboard .bg-blue{ background:#3b82f6; }
body.page-dashboard .bg-orange{ background:#f59e0b; }

/* Card Text */
body.page-dashboard .wt-title{
  font-weight:700;
  font-size:16px;
  margin:0 !important;
  padding:0 !important;
  line-height:1.1 !important;
}
body.page-dashboard .wt-desc{
  font-size:13px;
  color:#64748b;
  line-height:1.45;
}

/* Links */
body.page-dashboard .wt-link{
  text-decoration:none;
  color:inherit;
}

/* dashboard inline styles */
body.page-dashboard .style-dashboard-001 { padding:40px; }

/* facilllities */
/* ===== DEEP BLUE TEAL & CORAL RED THEME ===== */
    body.page-facilllities{
        /* Primary Colors */
        --primary: #0F3057;        /* Deep Blue Teal */
        --primary-dark: #0A2440;    /* Darker teal */
        --primary-light: #1A4770;   /* Lighter teal */
        --primary-soft: #E8EEF5;    /* Light teal tint */
        
        /* Secondary - Ocean Teal */
        --secondary: #00587A;       /* Ocean Teal */
        --secondary-light: #1A6F91; 
        --secondary-soft: #E5F0F7;  
        
        /* Accent - Coral Red */
        --accent: #FF6B6B;          /* Coral Red */
        --accent-light: #FF8A8A;    
        --accent-soft: #FFF0F0;     
        
        /* Backgrounds */
        --bg-main: #F7F9FB;         /* Soft White */
        --bg-card: #FFFFFF;          /* Pure white */
        --bg-soft: #F0F3F7;          
        --bg-warm: #FAFCFE;          
        
        /* Neutrals */
        --dark: #1B1B1B;             
        --text-primary: #1B1B1B;     
        --text-secondary: #444444;    
        
        /* Borders & Shadows */
        --border-light: #E0E5EC;      
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
        --shadow-hover: 0 8px 24px rgba(15, 48, 87, 0.12);
        --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
        
        --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        
        /* Footer Colors - Custom */
        --footer-bg: #6f8798;
        --footer-heading: #FF0000;  /* Bright Red */
    }

    /* ===== FIXED CONTAINER SIZING ===== */
    html body.page-facilllities, body.page-facilllities{
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        margin: 0;
        padding: 0;
    }

    body.page-facilllities{
        font-family: 'Josefin Sans', sans-serif;
        background: var(--bg-main);
        color: var(--text-primary);
        padding-top: 90px;
        font-weight: 400;
        line-height: 1.8;
        min-height: 100vh;
    }

    body.page-facilllities h1, body.page-facilllities h2, body.page-facilllities h3, body.page-facilllities h4, body.page-facilllities h5, body.page-facilllities h6{
        font-family: 'Libre Baskerville', serif;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.3;
        color: var(--dark);
    }

    body.page-facilllities p{
        font-weight: 400;
        font-size: 1.1rem;
        color: var(--text-secondary);
        line-height: 1.8;
    }

    body.page-facilllities .container{
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* ===== ENHANCED LOADING PAGE ===== */
    body.page-facilllities #loading-page{
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        display: flex; justify-content: center; align-items: center; flex-direction: column;
        z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s ease;
        padding: 20px;
    }

    body.page-facilllities .loading-logo{ 
        width: min(200px, 60%);
        margin-bottom: clamp(20px, 4vh, 30px); 
        animation: elegantGlow 2.5s infinite alternate;
        filter: brightness(1.1);
    }

    @keyframes elegantGlow{
        0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); }
        100% { filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1); }
    }

    body.page-facilllities .loading-spinner{
        width: min(70px, 15vw);
        height: min(70px, 15vw);
        border: 3px solid rgba(255, 107, 107, 0.1);
        border-top: 3px solid var(--accent);
        border-right: 3px solid var(--primary);
        border-radius: 50%;
        animation: spin 2s infinite linear;
        margin-bottom: clamp(15px, 3vh, 25px);
    }

    @keyframes spin{
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    body.page-facilllities .loading-progress{ 
        width: min(300px, 80%);
        height: 2px; 
        background: rgba(255,255,255,0.05); 
        margin-top: clamp(15px, 3vh, 30px); 
        overflow: hidden;
    }

    body.page-facilllities .loading-progress-bar{ 
        height: 100%; 
        width: 100%; 
        background: linear-gradient(90deg, var(--primary), var(--accent)); 
        animation: slide 1.5s infinite ease-in-out; 
        transform: translateX(-100%);
    }

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

    body.page-facilllities .loading-text{ 
        color: var(--accent);
        font-size: clamp(0.8rem, 3vw, 1rem);
        letter-spacing: clamp(4px, 2vw, 8px);
        font-weight: 300; 
        text-transform: uppercase; 
        margin-top: clamp(15px, 3vh, 30px);
        font-family: 'Josefin Sans', sans-serif;
        text-align: center;
        word-break: break-word;
    }

    body.page-facilllities .loading-dots{
        display: inline-block;
        animation: dots 1.5s infinite;
    }

    @keyframes dots{
        0%, 20% { content: "."; }
        40% { content: ".."; }
        60%, 100% { content: "..."; }
    }

    body.page-facilllities #loading-page.loaded{ opacity: 0; visibility: hidden; }
    body.page-facilllities .main-content{ opacity: 0; transition: opacity 1.2s ease; }
    body.page-facilllities .main-content.show{ opacity: 1; }

    /* ===== NAVBAR ===== */
    body.page-facilllities .navbar{
        background: var(--bg-main) !important;
        box-shadow: var(--shadow-sm);
        padding: 15px 0;
        transition: all 0.4s ease;
        border-bottom: 2px solid var(--primary);
        width: 100%;
        left: 0;
        right: 0;
        z-index: 999;
    }

    body.page-facilllities .navbar.scrolled{
        box-shadow: var(--shadow-hover);
    }

    body.page-facilllities .navbar-brand img{
        height: 53px;
        transition: transform 0.5s ease;
        filter: brightness(1.1);
    }

    body.page-facilllities .navbar-brand:hover img{
        transform: scale(1.02);
    }

    body.page-facilllities .nav-link{
        color: var(--text-primary) !important;
        font-weight: 500;
        padding: 10px 18px !important;
        position: relative;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: color 0.3s;
    }

    body.page-facilllities .nav-link::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 18px;
        right: 18px;
        height: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    body.page-facilllities .nav-link:hover::after, body.page-facilllities .nav-link.active::after{
        transform: scaleX(1);
    }

    body.page-facilllities .nav-link:hover, body.page-facilllities .nav-link.active{
        color: var(--primary) !important;
    }

    body.page-facilllities .navbar .btn-primary{
        background: var(--accent) !important;
        border: none;
        border-radius: 40px;
        padding: 8px 22px;
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: var(--transition);
        color: white;
    }

    body.page-facilllities .navbar .btn-primary:hover{
        background: var(--accent-light) !important;
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
        color: white;
    }

    body.page-facilllities .navbar-toggler{
        border: 1px solid var(--primary);
        padding: 0.25rem 0.75rem;
        background-color: transparent;
    }

    body.page-facilllities .navbar-toggler:focus{
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
        outline: none;
    }

    body.page-facilllities .navbar-toggler-icon{
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    body.page-facilllities ul.navbar-nav.ms-auto{
        gap: 15px;
    }

    /* ===== SIMPLE HEADER - MATCHING OTHER PAGES ===== */
    body.page-facilllities .facility-header{
        margin: 30px auto 50px;
        padding: 60px 20px;
        text-align: center;
        max-width: 1100px;
        background: transparent;
    }

    body.page-facilllities .facility-title{
        font-size: clamp(2.8rem, 7vw, 4rem);
        font-weight: 800;
        margin-bottom: 20px;
        color: var(--primary);
        font-family: 'Libre Baskerville', serif;
    }

    body.page-facilllities .facility-subtitle{
        font-size: clamp(1.1rem, 2.5vw, 1.3rem);
        max-width: 820px;
        margin: 0 auto;
        color: var(--text-secondary);
        line-height: 1.8;
    }
h1.facility-title {
    margin-top: 75px;
}
    /* ===== ENHANCED SERVICES CARDS ===== */
    body.page-facilllities .services-card{
        background: var(--bg-card);
        border-radius: 30px;
        border: 1px solid var(--border-light);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        transition: var(--transition);
        height: 100%;
        margin-bottom: 30px;
        position: relative;
    }

    body.page-facilllities .services-card::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,107,107,0.05), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }

    body.page-facilllities .services-card:hover{
        transform: translateY(-15px);
        border-color: var(--accent);
        box-shadow: var(--shadow-hover);
    }

    body.page-facilllities .services-card:hover::before{
        opacity: 1;
    }

    body.page-facilllities .services-card img{
        width: 100%;
        height: 240px;
        object-fit: cover;
        transition: transform 0.8s ease;
        position: relative;
        z-index: 1;
    }

    body.page-facilllities .services-card:hover img{
        transform: scale(1.1);
    }

    body.page-facilllities .icon-box{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -40px auto 20px;
        font-size: 2rem;
        border: 2px solid var(--primary);
        color: var(--primary);
        background: white;
        box-shadow: 0 10px 30px rgba(15, 48, 87, 0.15);
        transition: var(--transition);
        position: relative;
        z-index: 2;
        animation: iconPulse 2s ease-in-out infinite;
    }

    @keyframes iconPulse{
        0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(15, 48, 87, 0.15); }
        50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(255, 107, 107, 0.3); }
    }

    body.page-facilllities .services-card:hover .icon-box{
        background: var(--accent);
        border-color: var(--accent);
        color: white;
        transform: rotateY(180deg) scale(1.1);
        animation: none;
        box-shadow: 0 0 40px rgba(255, 107, 107, 0.5);
    }

    body.page-facilllities .services-card .p-4{
        padding: 20px 20px 30px !important;
        position: relative;
        z-index: 2;
    }

    body.page-facilllities .services-card h4{
        color: var(--primary);
        font-size: 1.5rem;
        margin-bottom: 12px;
        transition: color 0.3s ease;
    }

    body.page-facilllities .services-card:hover h4{
        color: var(--accent);
    }

    body.page-facilllities .services-card p{
        color: var(--text-secondary);
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    /* ===== SECTION TITLE ===== */
    body.page-facilllities .section-title{
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 40px;
        text-align: center;
        color: var(--dark);
        font-size: 2.5rem;
    }

    body.page-facilllities .section-title::after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, var(--accent), var(--primary));
        border-radius: 3px;
    }

    /* ===== BACK TO TOP BUTTON ===== */
    body.page-facilllities .back-to-top{ 
        position: fixed; 
        bottom: 30px; 
        right: 30px; 
        width: 45px; 
        height: 45px; 
        background: var(--primary); 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        color: white; 
        font-size: 1.2rem; 
        opacity: 0; 
        transition: 0.3s; 
        pointer-events: none; 
        z-index: 99; 
        text-decoration: none;
        border: 1px solid var(--accent);
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
    }
    
    body.page-facilllities .back-to-top.show{ 
        opacity: 1; 
        pointer-events: auto; 
    }
    
    body.page-facilllities .back-to-top:hover{
        background: var(--accent);
        color: white;
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    /* ===== FOOTER - CUSTOM COLORS ===== */
    body.page-facilllities .footer{
        background: #6f8798;
    color: rgba(255, 255, 255, 0.9);
        padding: 80px 0 30px;
        margin-top: 80px;
        border-top: 1px solid rgba(255, 107, 107, 0.3);
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    body.page-facilllities .footer::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        animation: scanline 3s linear infinite;
    }

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

    body.page-facilllities .footer h5{ 
        color: var(--footer-heading) !important;  /* Bright Red */
        font-weight: 500; 
        font-size: 1.1rem;
        margin-bottom: 25px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-family: 'Josefin Sans', sans-serif;
    }

    body.page-facilllities .footer p{
        color: rgba(255,255,255,0.8) !important;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    body.page-facilllities .footer-links a{ 
        color: rgba(255,255,255,0.8) !important; 
        transition: all 0.3s; 
        display: inline-block; 
        margin-bottom: 12px; 
        text-decoration: none; 
        font-weight: 400;
        font-size: 0.95rem;
        position: relative;
        padding-left: 0;
    }

    body.page-facilllities .footer-links a::before{
        content: '→';
        position: absolute;
        left: -20px;
        opacity: 0;
        transition: all 0.3s;
        color: var(--accent);
    }

    body.page-facilllities .footer-links a:hover{ 
        color: var(--accent-light) !important; 
        transform: translateX(8px); 
        padding-left: 5px;
    }

    body.page-facilllities .footer-links a:hover::before{
        opacity: 1;
        left: -10px;
    }

    body.page-facilllities .social-icons{
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    body.page-facilllities .social-icons a{
        width: 42px;
        height: 42px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255, 107, 107, 0.3);
        transition: 0.3s; 
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.1rem;
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }

    body.page-facilllities .social-icons a::before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: var(--accent);
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
        z-index: -1;
    }

    body.page-facilllities .social-icons a:hover{ 
        background: transparent;
        color: white !important; 
        transform: translateY(-5px) scale(1.1); 
        border-color: var(--accent);
    }

    body.page-facilllities .social-icons a:hover::before{
        width: 100%;
        height: 100%;
    }

    body.page-facilllities .input-group{
        max-width: 400px;
    }

    body.page-facilllities .input-group .form-control{
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255, 107, 107, 0.3);
        color: white;
        padding: 12px 20px;
        font-size: 0.95rem;
        border-radius: 8px 0 0 8px;
    }

    body.page-facilllities .input-group .form-control::placeholder{
        color: rgba(255,255,255,0.6);
    }

    body.page-facilllities .input-group .form-control:focus{
        background: rgba(255,255,255,0.15);
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
        outline: none;
    }

    body.page-facilllities .input-group .btn-primary{
        background: var(--accent);
        border: 1px solid var(--accent);
        color: white;
        padding: 12px 25px;
        border-radius: 0 8px 8px 0;
        font-size: 0.95rem;
        white-space: nowrap;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

    body.page-facilllities .input-group .btn-primary::before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        transform: translate(-50%, -50%);
        transition: width 0.5s, height 0.5s;
    }

    body.page-facilllities .input-group .btn-primary:hover{
        background: var(--accent-light);
        border-color: var(--accent-light);
        transform: translateY(-2px);
    }

    body.page-facilllities .input-group .btn-primary:hover::before{
        width: 300%;
        height: 300%;
    }

    body.page-facilllities hr{
        opacity: 0.2;
        border-color: rgba(255, 107, 107, 0.3);
        margin: 30px 0;
    }

    body.page-facilllities .copyright{
        color: rgba(255,255,255,0.6);
        font-size: 0.9rem;
    }

    /* ===== RESPONSIVE BREAKPOINTS ===== */
    @media (max-width: 1199px){
        body.page-facilllities .container{ max-width: 960px; }
    }

    @media (max-width: 991px){
        body.page-facilllities .container{ max-width: 720px; }
        
        body.page-facilllities .navbar-collapse{
            background: white;
            padding: 20px;
            border-radius: 16px;
            margin-top: 15px;
            box-shadow: var(--shadow-strong);
        }
        
        body.page-facilllities .nav-link{
            margin: 8px 0;
            text-align: center;
        }
        
        body.page-facilllities .nav-link::after{
            left: 50%;
            right: 50%;
            transform: translateX(-50%) scaleX(0);
        }
        
        body.page-facilllities .nav-link:hover::after{
            left: 25%;
            right: 25%;
            transform: translateX(0) scaleX(1);
        }
        
        body.page-facilllities .ms-2{
            margin-left: 0 !important;
            margin-top: 10px;
        }
        
        body.page-facilllities .btn-primary{
            width: 100%;
        }
        
        body.page-facilllities .services-card h4{
            font-size: 1.3rem;
        }
    }

    @media (max-width: 768px){
        body.page-facilllities{ 
            padding-top: 70px; 
        }
        
        body.page-facilllities .facility-header{
            padding: 40px 20px;
        }
        
        body.page-facilllities .facility-title{
            font-size: 2.3rem;
        }
        
        body.page-facilllities .facility-subtitle{
            font-size: 1rem;
        }
        
        body.page-facilllities .services-card img{
            height: 200px;
        }
        
        body.page-facilllities .footer{
            text-align: center;
            padding: 60px 0 25px;
        }
        
        body.page-facilllities .footer-links a:hover{
            padding-left: 0;
            transform: none;
        }
        
        body.page-facilllities .footer-links a::before{
            display: none;
        }
        
        body.page-facilllities .social-icons{
            justify-content: center;
        }
        
        body.page-facilllities .input-group{
            margin: 0 auto;
        }
        
        body.page-facilllities .footer h5{
            text-align: center;
        }
    }

    @media (max-width: 576px){
        body.page-facilllities .facility-title{
            font-size: 2rem;
        }
        
        body.page-facilllities .services-card h4{
            font-size: 1.2rem;
        }
        
        body.page-facilllities .icon-box{
            width: 70px;
            height: 70px;
            font-size: 1.6rem;
            margin-top: -35px;
        }
        
        body.page-facilllities .back-to-top{
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }
        
        body.page-facilllities .input-group{
            flex-direction: column;
            gap: 10px;
        }
        
        body.page-facilllities .input-group .form-control{
            border-radius: 8px;
            width: 100%;
        }
        
        body.page-facilllities .input-group .btn-primary{
            border-radius: 8px;
            width: 100%;
        }
    }

    @media (max-width: 400px){
        body.page-facilllities .loading-logo{
            width: 120px;
        }
        
        body.page-facilllities .loading-progress{
            width: 200px;
        }
        
        body.page-facilllities .facility-title{
            font-size: 1.8rem;
        }
    }

    /* Landscape orientation fix */
    @media (max-height: 600px) and (orientation: landscape){
        body.page-facilllities .loading-logo{
            width: 120px;
        }
        body.page-facilllities .loading-spinner{
            width: 40px;
            height: 40px;
        }
    }

    /* ===== ANIMATIONS ===== */
    body.page-facilllities [data-aos]{
        pointer-events: none;
    }
    
    body.page-facilllities [data-aos].aos-animate{
        pointer-events: auto;
    }

    /* Ensure images are responsive */
    body.page-facilllities img{
        max-width: 100%;
        height: auto;
    }
    
    /* Remove conflicting styles */
    body.page-facilllities .py-5{
        background-color: transparent;
        border: none;
    }
    body.page-facilllities .footer h5{
    color: #000000 !important;
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-facilllities .navbar-brand img{
    height: 70px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 78px;
}
body.page-facilllities img.loading-logo{
    width: 100px;
    height: 100px;
}
body.page-facilllities .navbar-brand img{
    height: 90px;  /* Increased from 70px to 90px */
    width: auto;   /* Maintains aspect ratio */
    transition: transform 0.5s ease;
    filter: brightness(1.1);
}
body.page-facilllities img.loading-logo{
    width: 10rem;
    height: 160px;
}

/* facilllities inline styles */
body.page-facilllities .style-facilllities-001 { max-width: 140px; filter: brightness(1.2); }

/* feedback */
/* ===== DEEP BLUE TEAL & CORAL RED THEME ===== */
        body.page-feedback{
            /* Primary Colors */
            --primary: #0F3057;        /* Deep Blue Teal */
            --primary-dark: #0A2440;    /* Darker teal */
            --primary-light: #1A4770;   /* Lighter teal */
            --primary-soft: #E8EEF5;    /* Light teal tint */
            
            /* Secondary - Ocean Teal */
            --secondary: #00587A;       /* Ocean Teal */
            --secondary-light: #1A6F91; 
            --secondary-soft: #E5F0F7;  
            
            /* Accent - Coral Red */
            --accent: #FF6B6B;          /* Coral Red */
            --accent-light: #FF8A8A;    
            --accent-soft: #FFF0F0;     
            
            /* Backgrounds */
            --bg-main: #F7F9FB;         /* Soft White */
            --bg-card: #FFFFFF;          /* Pure white */
            --bg-soft: #F0F3F7;          
            --bg-warm: #FAFCFE;          
            
            /* Neutrals */
            --dark: #1B1B1B;             
            --text-primary: #1B1B1B;     
            --text-secondary: #444444;    
            
            /* Borders & Shadows */
            --border-light: #E0E5EC;      
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 8px 24px rgba(255, 107, 107, 0.2);
            --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
            
            --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* ===== FIXED CONTAINER SIZING ===== */
        html body.page-feedback, body.page-feedback{
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
        }

        body.page-feedback{
            font-family: 'Josefin Sans', sans-serif;
            background: var(--bg-main);
            color: var(--text-primary);
            padding-top: 90px;
            font-weight: 400;
            line-height: 1.8;
            min-height: 100vh;
        }

        body.page-feedback h1, body.page-feedback h2, body.page-feedback h3, body.page-feedback h4, body.page-feedback h5, body.page-feedback h6{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--dark);
        }

        body.page-feedback p{
            font-weight: 400;
            font-size: 1.1rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        body.page-feedback .container{
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        /* ===== ENHANCED LOADING PAGE ===== */
        body.page-feedback #loading-page{
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            display: flex; justify-content: center; align-items: center; flex-direction: column;
            z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s ease;
            padding: 20px;
        }

        body.page-feedback .loading-logo{ 
            width: min(200px, 60%);
            margin-bottom: clamp(20px, 4vh, 30px); 
            animation: elegantGlow 2.5s infinite alternate;
            filter: brightness(1.1);
        }

        @keyframes elegantGlow{
            0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); }
            100% { filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1); }
        }

        body.page-feedback .loading-spinner{
            width: min(70px, 15vw);
            height: min(70px, 15vw);
            border: 3px solid rgba(255, 107, 107, 0.1);
            border-top: 3px solid var(--accent);
            border-right: 3px solid var(--primary);
            border-radius: 50%;
            animation: spin 2s infinite linear;
            margin-bottom: clamp(15px, 3vh, 25px);
        }

        body.page-feedback .loading-text{
            color: var(--accent);
            font-size: clamp(0.8rem, 3vw, 1rem);
            letter-spacing: clamp(4px, 2vw, 8px);
            font-weight: 300;
            text-transform: uppercase;
            margin-top: clamp(15px, 3vh, 30px);
            font-family: 'Josefin Sans', sans-serif;
            text-align: center;
            word-break: break-word;
        }

        body.page-feedback .loading-dots{
            display: inline-block;
            animation: dots 1.5s infinite;
        }

        body.page-feedback .loading-progress{
            width: min(300px, 80%);
            height: 2px;
            background: rgba(255, 255, 255, 0.05);
            margin-top: clamp(15px, 3vh, 30px);
            overflow: hidden;
        }

        body.page-feedback .loading-progress-bar{
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide 1.5s infinite ease-in-out;
            transform: translateX(-100%);
        }

        @keyframes spin{
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        @keyframes dots{
            0%, 20% { content: "."; }
            40% { content: ".."; }
            60%, 100% { content: "..."; }
        }

        body.page-feedback #loading-page.loaded{
            opacity: 0;
            visibility: hidden;
        }

        body.page-feedback .main-content{
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        body.page-feedback .main-content.show{
            opacity: 1;
        }

        /* ===== NAVBAR ===== */
        body.page-feedback .navbar{
            background: var(--bg-main) !important;
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            transition: all 0.4s ease;
            border-bottom: 2px solid var(--primary);
            width: 100%;
            left: 0;
            right: 0;
            z-index: 999;
        }

        body.page-feedback .navbar.scrolled{
            box-shadow: var(--shadow-hover);
        }

        body.page-feedback .navbar-brand img{
            height: 53px;
            transition: transform 0.5s ease;
            filter: brightness(1.1);
        }

        body.page-feedback .navbar-brand:hover img{
            transform: scale(1.02);
        }

        body.page-feedback .nav-link{
            color: var(--text-primary) !important;
            font-weight: 500;
            padding: 10px 18px !important;
            position: relative;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s;
        }

        body.page-feedback .nav-link::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 18px;
            right: 18px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        body.page-feedback .nav-link:hover::after, body.page-feedback .nav-link.active::after{
            transform: scaleX(1);
        }

        body.page-feedback .nav-link:hover, body.page-feedback .nav-link.active{
            color: var(--primary) !important;
        }

        body.page-feedback .navbar .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 8px 22px;
            font-weight: 500;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            color: white;
        }

        body.page-feedback .navbar .btn-primary:hover{
            background: var(--accent-light) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

        body.page-feedback .navbar-toggler{
            border: 1px solid var(--primary);
            padding: 0.25rem 0.75rem;
            background-color: transparent;
        }

        body.page-feedback .navbar-toggler:focus{
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-feedback .navbar-toggler-icon{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        body.page-feedback ul.navbar-nav.ms-auto{
            gap: 15px;
        }

        /* ===== FEEDBACK SECTION ===== */
        body.page-feedback .feedback-section{
            padding: 90px 0;
        }

        body.page-feedback .feedback-section .container{
            background: var(--bg-card);
            border-radius: 36px;
            padding: 70px;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-strong);
            max-width: 1200px;
        }

        body.page-feedback .feedback-title{
            font-size: 2.6rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
            font-family: 'Libre Baskerville', serif;
            text-align: center;
        }

        body.page-feedback .feedback-subtitle{
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 40px;
            font-weight: 400;
            text-align: center;
        }

        /* Feedback Form Card */
        body.page-feedback .feedback-form-card{
            background: var(--bg-card);
            padding: 50px;
            border-radius: 30px;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        body.page-feedback .feedback-form-card:hover{
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        body.page-feedback .feedback-form-card h4{
            margin-bottom: 30px;
            font-weight: 600;
            color: var(--primary);
            font-family: 'Libre Baskerville', serif;
        }

        /* Form Styles */
        body.page-feedback .form-control{
            background: var(--bg-main);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            padding: 14px 16px;
            border-radius: 14px;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-feedback .form-control::placeholder{
            color: var(--text-secondary);
        }

        body.page-feedback .form-control:hover{
            border-color: var(--accent);
            box-shadow: 0 0 12px rgba(255, 107, 107, 0.2);
        }

        body.page-feedback .form-control:focus{
            border-color: var(--accent);
            box-shadow: 0 0 16px rgba(255, 107, 107, 0.3);
            outline: none;
        }

        /* Custom Dropdown */
        body.page-feedback .custom-dropdown{
            background: var(--bg-main);
            color: var(--text-primary);
            font-weight: 400;
            padding: 14px 16px;
            border-radius: 14px;
            margin-bottom: 20px;
            border: 1px solid var(--border-light);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230F3057' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 16px;
            padding-right: 40px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        body.page-feedback .custom-dropdown:hover{
            border-color: var(--accent);
        }

        body.page-feedback .custom-dropdown:focus{
            border-color: var(--accent);
            box-shadow: 0 0 16px rgba(255, 107, 107, 0.3);
            outline: none;
        }

        body.page-feedback .custom-dropdown option{
            background: white;
            color: var(--text-primary);
            padding: 12px;
        }

        /* Validation Styles */
        body.page-feedback .form-control.invalid{
            border-color: #ff6b6b;
            box-shadow: 0 0 12px rgba(255, 107, 107, 0.4);
        }

        body.page-feedback .form-control.valid{
            border-color: var(--primary);
            box-shadow: 0 0 12px rgba(15, 48, 87, 0.4);
        }

        body.page-feedback .validation-message{
            font-size: 0.85rem;
            margin-top: -15px;
            margin-bottom: 15px;
            padding: 5px 10px;
            border-radius: 8px;
            display: none;
        }

        body.page-feedback .validation-message.error{
            background: rgba(255, 107, 107, 0.1);
            color: #ff6b6b;
            border-left: 3px solid #ff6b6b;
            display: block;
        }

        body.page-feedback .validation-message.success{
            background: rgba(15, 48, 87, 0.1);
            color: var(--primary);
            border-left: 3px solid var(--primary);
            display: block;
        }

        /* Rating Sections */
        body.page-feedback .rating-section{
            margin: 30px 0;
            padding: 20px;
            background: var(--bg-soft);
            border-radius: 20px;
            border: 1px solid var(--border-light);
            transition: var(--transition);
        }

        body.page-feedback .rating-section:hover{
            border-color: var(--accent);
            background: var(--bg-main);
        }

        body.page-feedback .rating-title{
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 20px;
            color: var(--primary);
            font-family: 'Libre Baskerville', serif;
        }

        /* Emoji Rating */
        body.page-feedback .emoji-rating{
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 20px;
        }

        body.page-feedback .emoji-option{
            flex: 1;
            text-align: center;
            cursor: pointer;
            padding: 15px 10px;
            border-radius: 15px;
            background: var(--bg-main);
            border: 2px solid var(--border-light);
            transition: all 0.3s ease;
        }

        body.page-feedback .emoji-option:hover{
            background: var(--primary-soft);
            border-color: var(--accent);
            transform: translateY(-5px);
        }

        body.page-feedback .emoji-option.selected{
            background: var(--primary-soft);
            border-color: var(--primary);
            box-shadow: 0 5px 15px rgba(15, 48, 87, 0.2);
        }

        body.page-feedback .emoji-option i{
            font-size: 2.5rem;
            margin-bottom: 10px;
            display: block;
        }

        body.page-feedback .emoji-option span{
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* Star Rating */
        body.page-feedback .star-rating{
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        body.page-feedback .stars{
            display: flex;
            gap: 8px;
        }

        body.page-feedback .star{
            font-size: 2rem;
            color: #ddd;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        body.page-feedback .star:hover, body.page-feedback .star.hovered{
            color: var(--accent);
            transform: scale(1.1);
            text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
        }

        body.page-feedback .star.selected{
            color: var(--accent);
        }

        body.page-feedback .rating-labels{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        body.page-feedback .rating-value{
            color: var(--primary);
            font-weight: 600;
        }

        /* Message Area */
        body.page-feedback textarea.form-control{
            min-height: 150px;
            resize: vertical;
        }

        /* Submit Button */
        body.page-feedback .feedback-btn{
            background: var(--accent) !important;
            border: none;
            padding: 16px;
            border-radius: 16px;
            font-weight: 600;
            color: white;
            transition: var(--transition);
            width: 100%;
            margin-top: 20px;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
        }

        body.page-feedback .feedback-btn:hover{
            background: var(--accent-light) !important;
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        body.page-feedback .feedback-btn:disabled{
            background: #ccc !important;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Rating Row */
        body.page-feedback .rating-row{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 30px 0;
        }

        /* Success Message */
        body.page-feedback .success-message{
            display: none;
            background: rgba(15, 48, 87, 0.1);
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 20px;
            border-radius: 15px;
            margin-top: 20px;
            text-align: center;
            animation: fadeIn 0.5s ease;
        }

        body.page-feedback .success-message.show{
            display: block;
        }

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

        /* ===== FOOTER - ENHANCED ===== */
        body.page-feedback .footer{
            background: var(--primary-dark);
            color: rgba(255, 255, 255, 0.9);
            padding: 80px 0 30px;
            margin-top: 80px;
            border-top: 1px solid rgba(255, 107, 107, 0.3);
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        body.page-feedback .footer::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: scanline 3s linear infinite;
        }

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

        body.page-feedback .footer h5{
            color: var(--accent-light);
            font-weight: 500;
            margin-bottom: 25px;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-feedback .footer p{
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            font-size: 0.95rem;
        }

        body.page-feedback .footer-links a{
            color: rgba(255, 255, 255, 0.8);
            display: block;
            margin-bottom: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
            font-weight: 400;
        }

        body.page-feedback .footer-links a:hover{
            color: var(--accent-light);
            transform: translateX(8px);
        }

        body.page-feedback .social-icons{
            display: flex;
            gap: 12px;
        }

        body.page-feedback .social-icons a{
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            border-radius: 50%;
            color: #fff;
            transition: all 0.35s ease;
            text-decoration: none;
        }

        body.page-feedback .social-icons a:hover{
            background: var(--accent);
            color: var(--primary-dark) !important;
            transform: translateY(-5px) scale(1.1);
            border-color: var(--accent);
        }

        body.page-feedback .input-group{
            max-width: 400px;
        }

        body.page-feedback .input-group .form-control{
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            color: white;
            padding: 12px 20px;
        }

        body.page-feedback .input-group .form-control::placeholder{
            color: rgba(255, 255, 255, 0.6);
        }

        body.page-feedback .input-group .form-control:focus{
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-feedback .input-group .btn-primary{
            background: var(--accent);
            border: 1px solid var(--accent);
            color: white;
            padding: 12px 25px;
        }

        body.page-feedback .input-group .btn-primary:hover{
            background: var(--accent-light);
            border-color: var(--accent-light);
        }

        body.page-feedback hr{
            opacity: 0.2;
            border-color: rgba(255, 107, 107, 0.3);
            margin: 30px 0;
        }

        /* ===== BACK TO TOP BUTTON ===== */
        body.page-feedback .back-to-top{ 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            width: 45px; 
            height: 45px; 
            background: var(--primary); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.2rem; 
            opacity: 0; 
            transition: 0.3s; 
            pointer-events: none; 
            z-index: 99; 
            text-decoration: none;
            border: 1px solid var(--accent);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }
        
        body.page-feedback .back-to-top.show{ 
            opacity: 1; 
            pointer-events: auto; 
        }
        
        body.page-feedback .back-to-top:hover{
            background: var(--accent);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1199px){
            body.page-feedback .container{ max-width: 960px; }
        }

        @media (max-width: 991px){
            body.page-feedback .container{ max-width: 720px; }
            
            body.page-feedback .navbar-collapse{
                background: white;
                padding: 20px;
                border-radius: 16px;
                margin-top: 15px;
                box-shadow: var(--shadow-strong);
            }
            
            body.page-feedback .nav-link{
                margin: 8px 0;
                text-align: center;
            }
            
            body.page-feedback .nav-link::after{
                left: 50%;
                right: 50%;
                transform: translateX(-50%) scaleX(0);
            }
            
            body.page-feedback .nav-link:hover::after{
                left: 25%;
                right: 25%;
                transform: translateX(0) scaleX(1);
            }
            
            body.page-feedback .ms-2{
                margin-left: 0 !important;
                margin-top: 10px;
            }
            
            body.page-feedback .btn-primary{
                width: 100%;
            }
            
            body.page-feedback .rating-row{
                grid-template-columns: 1fr;
                gap: 20px;
            }

            body.page-feedback .feedback-section .container{
                padding: 40px 30px;
            }

            body.page-feedback .feedback-form-card{
                padding: 30px 25px;
            }
        }

        @media (max-width: 768px){
            body.page-feedback{ 
                padding-top: 70px; 
            }
            
            body.page-feedback .emoji-rating{
                flex-direction: column;
                gap: 10px;
            }

            body.page-feedback .emoji-option{
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 12px 15px;
            }

            body.page-feedback .emoji-option i{
                font-size: 2rem;
                margin-bottom: 0;
            }

            body.page-feedback .star-rating{
                justify-content: center;
            }

            body.page-feedback .feedback-title{
                font-size: 2rem;
            }
            
            body.page-feedback .footer{
                text-align: center;
                padding: 60px 0 25px;
            }
            
            body.page-feedback .footer-links a:hover{
                transform: none;
            }
            
            body.page-feedback .social-icons{
                justify-content: center;
            }
            
            body.page-feedback .input-group{
                margin: 0 auto;
            }
        }

        @media (max-width: 576px){
            body.page-feedback .feedback-section .container{
                padding: 30px 20px;
            }

            body.page-feedback .feedback-form-card{
                padding: 25px 20px;
            }

            body.page-feedback .star{
                font-size: 1.8rem;
            }
            
            body.page-feedback .back-to-top{
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            body.page-feedback .input-group{
                flex-direction: column;
                gap: 10px;
            }
            
            body.page-feedback .input-group .form-control{
                border-radius: 8px;
                width: 100%;
            }
            
            body.page-feedback .input-group .btn-primary{
                border-radius: 8px;
                width: 100%;
            }
        }

        @media (max-width: 400px){
            body.page-feedback .loading-logo{
                width: 140px;
            }
            
            body.page-feedback .loading-progress{
                width: 250px;
            }
            
            body.page-feedback .feedback-title{
                font-size: 1.8rem;
            }
        }
        
        body.page-feedback .emoji-option i{
            font-size: 1.5rem;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
        }
        body.page-feedback .footer{
    background: #6f8798;
    color: rgba(255, 255, 255, 0.9);
    padding: 80px 0 30px;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 107, 107, 0.3);
    width: 100%;
    position: relative;
    overflow: hidden;
}
body.page-feedback .navbar-brand img{
    height: 67px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 80px;
}
body.page-feedback .footer h5{
    color: #000000;
    font-weight: 500;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-feedback .input-group .btn-primary{
    background: var(--accent);
    border: 1px solid var(--accent);
    color: white;
    padding: 6px 20px;
    width: 60px;
    height: 50px;
}
body.page-feedback .navbar-brand img{
    height: 81px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 91px;
}

/* feedback inline styles */
body.page-feedback .style-feedback-001 { max-width: 140px; filter: brightness(1.2); }

/* gallery */
/* ===== DEEP BLUE TEAL & CORAL RED THEME ===== */
        body.page-gallery{
            /* Primary Colors */
            --primary: #0F3057;        /* Deep Blue Teal */
            --primary-dark: #0A2440;    /* Darker teal */
            --primary-light: #1A4770;   /* Lighter teal */
            --primary-soft: #E8EEF5;    /* Light teal tint */
            
            /* Secondary - Ocean Teal */
            --secondary: #00587A;       /* Ocean Teal */
            --secondary-light: #1A6F91; 
            --secondary-soft: #E5F0F7;  
            
            /* Accent - Coral Red */
            --accent: #FF6B6B;          /* Coral Red */
            --accent-light: #FF8A8A;    
            --accent-soft: #FFF0F0;     
            
            /* Backgrounds */
            --bg-main: #F7F9FB;         /* Soft White */
            --bg-card: #FFFFFF;          /* Pure white */
            --bg-soft: #F0F3F7;          
            --bg-warm: #FAFCFE;          
            
            /* Neutrals */
            --dark: #1B1B1B;             
            --text-primary: #1B1B1B;     
            --text-secondary: #444444;    
            
            /* Borders & Shadows */
            --border-light: #E0E5EC;      
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 8px 24px rgba(255, 107, 107, 0.2);
            --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
            
            --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* ===== LOADING PAGE STYLES ===== */
        body.page-gallery #loading-page{
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            display: flex; justify-content: center; align-items: center; flex-direction: column;
            z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s ease;
            padding: 20px;
        }

        body.page-gallery .loading-logo{ 
            width: min(200px, 60%);
            margin-bottom: clamp(20px, 4vh, 30px); 
            animation: elegantGlow 2.5s infinite alternate;
            filter: brightness(1.1);
        }

        @keyframes elegantGlow{
            0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); }
            100% { filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1); }
        }

        body.page-gallery .loading-spinner{
            width: min(70px, 15vw);
            height: min(70px, 15vw);
            border: 3px solid rgba(255, 107, 107, 0.1);
            border-top: 3px solid var(--accent);
            border-right: 3px solid var(--primary);
            border-radius: 50%;
            animation: spin 2s infinite linear;
            margin-bottom: clamp(15px, 3vh, 25px);
        }

        body.page-gallery .loading-text{
            color: var(--accent);
            font-size: clamp(0.8rem, 3vw, 1rem);
            letter-spacing: clamp(4px, 2vw, 8px);
            font-weight: 300;
            text-transform: uppercase;
            margin-top: clamp(15px, 3vh, 30px);
            font-family: 'Josefin Sans', sans-serif;
            text-align: center;
            word-break: break-word;
        }

        body.page-gallery .loading-dots{
            display: inline-block;
            animation: dots 1.5s infinite;
        }

        body.page-gallery .loading-progress{
            width: min(300px, 80%);
            height: 2px;
            background: rgba(255,255,255,0.05);
            margin-top: clamp(15px, 3vh, 30px);
            overflow: hidden;
        }

        body.page-gallery .loading-progress-bar{
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide 1.5s infinite ease-in-out;
            transform: translateX(-100%);
        }

        @keyframes spin{
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        @keyframes dots{
            0%, 20% { content: "."; }
            40% { content: ".."; }
            60%, 100% { content: "..."; }
        }

        body.page-gallery #loading-page.loaded{
            opacity: 0;
            visibility: hidden;
        }

        body.page-gallery .main-content{
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        body.page-gallery .main-content.show{
            opacity: 1;
        }

        /* ===== BASE STYLES WITH NEW THEME ===== */
        body.page-gallery{
            font-family: 'Josefin Sans', sans-serif;
            color: var(--text-primary);
            overflow-x: hidden;
            background: var(--bg-main);
            font-weight: 400;
            line-height: 1.8;
            padding-top: 90px;
        }

        body.page-gallery h1, body.page-gallery h2, body.page-gallery h3, body.page-gallery h4, body.page-gallery h5, body.page-gallery h6{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--dark);
        }

        body.page-gallery p{
            font-weight: 400;
            font-size: 1.1rem;
            color: var(--text-secondary);
        }

        /* ===== NAVBAR ===== */
        body.page-gallery .navbar{
            background: var(--bg-main) !important;
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            transition: all 0.4s ease;
            border-bottom: 2px solid var(--primary);
            width: 100%;
        }

        body.page-gallery .navbar.scrolled{
            box-shadow: var(--shadow-hover);
        }

        body.page-gallery .navbar-brand img{
            height: 53px;
            transition: transform 0.5s ease;
            filter: brightness(1.1);
        }

        body.page-gallery .navbar-brand:hover img{
            transform: scale(1.02);
        }

        body.page-gallery .nav-link{
            color: var(--text-primary) !important;
            font-weight: 500;
            padding: 10px 18px !important;
            position: relative;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: color 0.3s;
        }

        body.page-gallery .nav-link::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 18px;
            right: 18px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        body.page-gallery .nav-link:hover::after, body.page-gallery .nav-link.active::after{
            transform: scaleX(1);
        }

        body.page-gallery .nav-link:hover, body.page-gallery .nav-link.active{
            color: var(--primary) !important;
        }

        body.page-gallery .navbar .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 8px 22px;
            font-weight: 500;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: var(--transition);
            color: white;
        }

        body.page-gallery .navbar .btn-primary:hover{
            background: var(--accent-light) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

        body.page-gallery .navbar-toggler{
            border: 1px solid var(--primary);
            padding: 0.25rem 0.75rem;
        }

        body.page-gallery .navbar-toggler:focus{
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-gallery .navbar-toggler-icon{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Section Header */
        body.page-gallery .section-header{
            background: transparent;
            padding: 60px 20px;
            text-align: center;
            margin: 20px auto 50px;
            max-width: 1100px;
        }

        body.page-gallery .section-header h1{
            color: var(--primary);
            font-weight: 800;
            font-size: 2.8rem;
        }

        body.page-gallery .section-header p{
            color: var(--text-secondary);
            max-width: 900px;
            margin: 0 auto;
            font-size: 1.05rem;
        }

        /* ===== GALLERY SECTION - ENHANCED PICTURE EFFECTS ===== */
        body.page-gallery .gallery-section{
            padding: 80px 0;
            background: var(--bg-soft);
        }

        body.page-gallery .gallery-item{
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-strong);
            height: 300px;
            border: 2px solid transparent;
        }

        body.page-gallery .gallery-item:hover{
            transform: translateY(-15px) scale(1.02);
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        body.page-gallery .gallery-item img{
            transition: transform 1.2s ease;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body.page-gallery .gallery-item:hover img{
            transform: scale(1.15);
        }

        body.page-gallery .gallery-overlay{
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 48, 87, 0.95) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
            display: flex;
            align-items: flex-end;
            padding: 30px;
        }

        body.page-gallery .gallery-item:hover .gallery-overlay{
            opacity: 1;
        }

        body.page-gallery .gallery-overlay h5{
            color: var(--accent-light);
            font-size: 1.5rem;
            font-weight: 400;
            margin: 0;
            transform: translateY(20px);
            transition: transform 0.5s ease;
            font-family: 'Libre Baskerville', serif;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        }

        body.page-gallery .gallery-item:hover .gallery-overlay h5{
            transform: translateY(0);
        }

        /* ===== EVENTS SECTION ===== */
        body.page-gallery .events-section{
            padding: 100px 0;
            background: var(--bg-warm);
            width: 100%;
        }

        body.page-gallery .events-section h2{
            font-family: 'Libre Baskerville', serif;
            font-weight: 800;
            font-size: 2.8rem;
            color: var(--primary);
            text-align: center;
            margin-bottom: 15px;
            position: relative;
        }

        body.page-gallery .events-section h2::after{
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            border-radius: 2px;
        }

        body.page-gallery .events-section .lead{
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 50px;
            text-align: center;
            line-height: 1.6;
        }

        body.page-gallery .event-card{
            background: var(--bg-card);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            height: 100%;
            border: 1px solid var(--border-light);
            margin-bottom: 30px;
        }

        body.page-gallery .event-card:hover{
            transform: translateY(-12px);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent);
        }

        body.page-gallery .event-card img{
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        body.page-gallery .event-card:hover img{
            transform: scale(1.08);
        }

        body.page-gallery .event-content{
            padding: 25px;
        }

        body.page-gallery .event-content h4{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 10px;
            line-height: 1.3;
        }

        body.page-gallery .event-content p{
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        /* ===== FOOTER - ENHANCED ===== */
        body.page-gallery .footer{
            background: var(--primary-dark);
            color: rgba(255,255,255,0.9);
            padding: 80px 0 30px;
            margin-top: 80px;
            border-top: 1px solid rgba(255, 107, 107, 0.3);
            position: relative;
            overflow: hidden;
        }

        body.page-gallery .footer::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: scanline 3s linear infinite;
        }

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

        body.page-gallery .footer h5{
            color: var(--accent-light);
            font-weight: 500;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-gallery .footer p{
            color: rgba(255,255,255,0.8);
            line-height: 1.6;
            font-size: 0.95rem;
        }

        body.page-gallery .footer-links a{
            color: rgba(255,255,255,0.8);
            display: block;
            margin-bottom: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
            font-weight: 400;
        }

        body.page-gallery .footer-links a:hover{
            color: var(--accent-light);
            transform: translateX(5px);
        }

        body.page-gallery .social-icons{
            display: flex;
            gap: 12px;
        }

        body.page-gallery .social-icons a{
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            border-radius: 50%;
            color: #fff;
            transition: all 0.35s ease;
            text-decoration: none;
        }

        body.page-gallery .social-icons a:hover{
            background: var(--accent);
            color: var(--primary-dark) !important;
            transform: translateY(-5px) scale(1.1);
            border-color: var(--accent);
        }

        body.page-gallery .input-group{
            max-width: 400px;
        }

        body.page-gallery .input-group .form-control{
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            color: white;
            padding: 12px 20px;
        }

        body.page-gallery .input-group .form-control::placeholder{
            color: rgba(255,255,255,0.6);
        }

        body.page-gallery .input-group .form-control:focus{
            background: rgba(255,255,255,0.15);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-gallery .input-group .btn-primary{
            background: var(--accent);
            border: 1px solid var(--accent);
            color: white;
            padding: 12px 25px;
        }

        body.page-gallery .input-group .btn-primary:hover{
            background: var(--accent-light);
            border-color: var(--accent-light);
        }

        body.page-gallery hr{
            opacity: 0.2;
            border-color: rgba(255, 107, 107, 0.3);
            margin: 30px 0;
        }

        /* ===== BACK TO TOP BUTTON ===== */
        body.page-gallery .back-to-top{ 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            width: 45px; 
            height: 45px; 
            background: var(--primary); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.2rem; 
            opacity: 0; 
            transition: 0.3s; 
            pointer-events: none; 
            z-index: 99; 
            text-decoration: none;
            border: 1px solid var(--accent);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }
        
        body.page-gallery .back-to-top.show{ 
            opacity: 1; 
            pointer-events: auto; 
        }
        
        body.page-gallery .back-to-top:hover{
            background: var(--accent);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* ===== ANIMATIONS ===== */
        body.page-gallery .animate-on-scroll{
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        body.page-gallery .animate-on-scroll.animated{
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1199px){
            body.page-gallery .container{ max-width: 960px; }
        }

        @media (max-width: 991px){
            body.page-gallery .container{ max-width: 720px; }
            
            body.page-gallery .navbar-collapse{
                background: white;
                padding: 20px;
                border-radius: 16px;
                margin-top: 15px;
                box-shadow: var(--shadow-strong);
            }
            
            body.page-gallery .nav-link{
                margin: 8px 0;
                text-align: center;
            }
            
            body.page-gallery .nav-link::after{
                left: 50%;
                right: 50%;
                transform: translateX(-50%) scaleX(0);
            }
            
            body.page-gallery .nav-link:hover::after{
                left: 25%;
                right: 25%;
                transform: translateX(0) scaleX(1);
            }
            
            body.page-gallery .ms-2{
                margin-left: 0 !important;
                margin-top: 10px;
            }
            
            body.page-gallery .btn-primary{
                width: 100%;
            }
        }

        @media (max-width: 768px){
            body.page-gallery{ padding-top: 70px; }
            
            body.page-gallery .section-header h1{
                font-size: 2rem;
            }
            
            body.page-gallery .gallery-item{ 
                height: 250px; 
            }
            
            body.page-gallery .events-section h2{
                font-size: 2.2rem;
            }
            
            body.page-gallery .footer{
                text-align: center;
                padding: 60px 0 25px;
            }
            
            body.page-gallery .footer h5{
                text-align: center;
            }
            
            body.page-gallery .social-icons{
                justify-content: center;
            }
            
            body.page-gallery .input-group{
                margin: 0 auto;
            }
        }

        @media (max-width: 576px){
            body.page-gallery .gallery-item{ 
                height: 220px; 
            }
            
            body.page-gallery .event-card{
                margin-bottom: 20px;
            }
            
            body.page-gallery .event-content{
                padding: 20px;
            }
            
            body.page-gallery .event-content h4{
                font-size: 1.2rem;
            }
            
            body.page-gallery .back-to-top{
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            body.page-gallery .input-group{
                flex-direction: column;
                gap: 10px;
            }
            
            body.page-gallery .input-group .form-control{
                border-radius: 8px;
                width: 100%;
            }
            
            body.page-gallery .input-group .btn-primary{
                border-radius: 8px;
                width: 100%;
            }
        }

        @media (max-width: 400px){
            body.page-gallery .loading-logo{
                width: 120px;
            }
            
            body.page-gallery .loading-progress{
                width: 200px;
            }
        }
        body.page-gallery .navbar-brand img{
    height: 70px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 78px;
}

/* gallery inline styles */
body.page-gallery .style-gallery-001 { color: var(--primary); }
body.page-gallery .style-gallery-002 { max-width: 600px; color: var(--text-secondary); }
body.page-gallery .style-gallery-003 { max-width: 140px; filter: brightness(1.2); }
body.page-gallery .style-gallery-004 { border: 3px solid var(--accent); }

/* index inline styles */
body.page-index .style-index-001 { text-decoration: none; color: inherit; display: block; }
body.page-index .style-index-002 { text-decoration: none; color: inherit; display: block; }
body.page-index .style-index-003 { max-width: 700px; }
body.page-index .style-index-004 { font-size: 2rem; }
body.page-index .style-index-005 { max-width: 700px; }
body.page-index .style-index-006 { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
body.page-index .style-index-007 { flex: 1 1 300px; max-width: 350px; min-width: 280px; }
body.page-index .style-index-008 { text-decoration: none; display: block; }
body.page-index .style-index-009 { margin-bottom: 10px; }
body.page-index .style-index-010 { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-index .style-index-011 { flex: 1 1 300px; max-width: 350px; min-width: 280px; }
body.page-index .style-index-012 { text-decoration: none; display: block; }
body.page-index .style-index-013 { margin-bottom: 10px; }
body.page-index .style-index-014 { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-index .style-index-015 { flex: 1 1 300px; max-width: 350px; min-width: 280px; }
body.page-index .style-index-016 { text-decoration: none; display: block; }
body.page-index .style-index-017 { margin-bottom: 10px; }
body.page-index .style-index-018 { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-index .style-index-019 { max-width: 140px; }

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

        html, body.page-login{
            height: 100%;
        }

        body.page-login{
            font-family: 'Poppins', sans-serif !important;
        }

        /* Background grey blur */
        body.page-login .bg-blur{
            position: fixed;
            inset: 0;
            z-index: -1;
            background: #ced4da;
        }

        body.page-login .bg-blur::before{
            content: "";
            position: absolute;
            inset: -80px;
            background:
                radial-gradient(600px 400px at 15% 20%, rgba(37, 99, 235, 0.20), transparent 60%),
                radial-gradient(600px 400px at 85% 80%, rgba(99, 102, 241, 0.14), transparent 60%),
                radial-gradient(500px 350px at 60% 30%, rgba(148, 163, 184, 0.35), transparent 60%);
            filter: blur(30px);
            transform: scale(1.05);
        }

        /* Card + shadow */
        body.page-login .auth-card{
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 18px 55px rgba(17, 24, 39, 0.12);
        }

        /* Reserve space so alert doesn't push layout */
        body.page-login .msg-slot{
            min-height: 46px;
        }

        /* Hide image on small screens */
        @media (max-width: 992px){
            body.page-login .login-image-col{
                display: none !important;
            }
        }

        /* =========================================================
   Password Split Input
   - Button covers right side of the input
   - Change --toggle-width to 20% (or 15% etc)
========================================================= */
        body.page-login{
            /* ✅ change this from 20% to 15% if you want smaller button */
            --toggle-width: 20%;
        }

        body.page-login .pw-split{
            display: flex;
            width: 100%;
            border: 0.5px solid #adb5bd;
            border-radius: 10px;
            overflow: hidden;
            /* important so right side is flush */
            background: #fff;
        }

        /* Remove input outer border because wrapper has border */
        body.page-login .pw-split .pw-input{
            border: 0 !important;
            border-radius: 0 !important;
            flex: 1 1 auto;
            min-width: 0;
            box-shadow: none !important;
        }

        /* Button takes fixed % of total width */
        body.page-login .pw-split .pw-toggle{
            width: var(--toggle-width);
            /* ✅ 20% by default */
            border: 0;
            background: #6c757d;
            color: #fff;
            font-size: 13px;
            font-weight: 400;
            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Make input focus outline nice */
        body.page-login .pw-split:focus-within{
            border-color: rgba(13, 110, 253, 0.7);
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        }

body.page-login .form-label, body.page-login .alert{
            font-size: 13px !important;
        }

        body.page-login input.form-control{
            font-size: 14px !important;
            border: 0.5px solid #adb5bd !important;
            border-radius: 10px !important;
            color: #343a40 !important;
        }

/* login inline styles */
body.page-login .style-login-001 { max-width: 980px; }
body.page-login .style-login-002 { object-fit: cover; }
body.page-login .style-login-003 { width:42px;height:42px;background:#eef2ff;border:1px solid #dbeafe;color:#2563eb; }
body.page-login .style-login-004 { font-size:12px; }

/* membership */
/* ===== DEEP BLUE TEAL & CORAL RED THEME ===== */
        body.page-membership{
            /* Primary Colors */
            --primary: #0F3057;        /* Deep Blue Teal */
            --primary-dark: #0A2440;    /* Darker teal */
            --primary-light: #1A4770;   /* Lighter teal */
            --primary-soft: #E8EEF5;    /* Light teal tint */
            
            /* Secondary - Ocean Teal */
            --secondary: #00587A;       /* Ocean Teal */
            --secondary-light: #1A6F91; 
            --secondary-soft: #E5F0F7;  
            
            /* Accent - Coral Red */
            --accent: #FF6B6B;          /* Coral Red */
            --accent-light: #FF8A8A;    
            --accent-soft: #FFF0F0;     
            
            /* Backgrounds */
            --bg-main: #F7F9FB;         /* Soft White */
            --bg-card: #FFFFFF;          /* Pure white */
            --bg-soft: #F0F3F7;          
            --bg-warm: #FAFCFE;          
            
            /* Neutrals */
            --dark: #1B1B1B;             
            --text-primary: #1B1B1B;     
            --text-secondary: #444444;    
            
            /* Borders & Shadows */
            --border-light: #E0E5EC;      
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 8px 24px rgba(255, 107, 107, 0.2);
            --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
            
            --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* ===== FIXED CONTAINER SIZING ===== */
        html body.page-membership, body.page-membership{
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
        }

        body.page-membership{
            font-family: 'Josefin Sans', sans-serif;
            background: var(--bg-main);
            color: var(--text-primary);
            padding-top: 90px;
            font-weight: 400;
            line-height: 1.8;
            min-height: 100vh;
        }

        body.page-membership h1, body.page-membership h2, body.page-membership h3, body.page-membership h4, body.page-membership h5, body.page-membership h6{
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--dark);
        }

        body.page-membership p{
            font-weight: 400;
            font-size: 1.1rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        body.page-membership .container{
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        /* ===== ENHANCED LOADING PAGE ===== */
        body.page-membership #loading-page{
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            display: flex; justify-content: center; align-items: center; flex-direction: column;
            z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s ease;
            padding: 20px;
        }

        body.page-membership .loading-logo{ 
            width: min(200px, 60%);
            margin-bottom: clamp(20px, 4vh, 30px); 
            animation: elegantGlow 2.5s infinite alternate;
            filter: brightness(1.1);
        }

        @keyframes elegantGlow{
            0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); }
            100% { filter: drop-shadow(0 0 30px var(--accent)) brightness(1.1); }
        }

        body.page-membership .loading-spinner{
            width: min(70px, 15vw);
            height: min(70px, 15vw);
            border: 3px solid rgba(255, 107, 107, 0.1);
            border-top: 3px solid var(--accent);
            border-right: 3px solid var(--primary);
            border-radius: 50%;
            animation: spin 2s infinite linear;
            margin-bottom: clamp(15px, 3vh, 25px);
        }

        body.page-membership .loading-text{
            color: var(--accent);
            font-size: clamp(0.8rem, 3vw, 1rem);
            letter-spacing: clamp(4px, 2vw, 8px);
            font-weight: 300;
            text-transform: uppercase;
            margin-top: clamp(15px, 3vh, 30px);
            font-family: 'Josefin Sans', sans-serif;
            text-align: center;
            word-break: break-word;
        }

        body.page-membership .loading-dots{
            display: inline-block;
            animation: dots 1.5s infinite;
        }

        body.page-membership .loading-progress{
            width: min(300px, 80%);
            height: 2px;
            background: rgba(255, 255, 255, 0.05);
            margin-top: clamp(15px, 3vh, 30px);
            overflow: hidden;
        }

        body.page-membership .loading-progress-bar{
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            animation: slide 1.5s infinite ease-in-out;
            transform: translateX(-100%);
        }

        @keyframes spin{
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        @keyframes dots{
            0%, 20% { content: "."; }
            40% { content: ".."; }
            60%, 100% { content: "..."; }
        }

        body.page-membership #loading-page.loaded{
            opacity: 0;
            visibility: hidden;
        }

        body.page-membership .main-content{
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        body.page-membership .main-content.show{
            opacity: 1;
        }

        /* ===== NAVBAR ===== */
        body.page-membership .navbar{
            background: var(--bg-main) !important;
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            transition: all 0.4s ease;
            border-bottom: 2px solid var(--primary);
            width: 100%;
            left: 0;
            right: 0;
            z-index: 999;
        }

        body.page-membership .navbar.scrolled{
            box-shadow: var(--shadow-hover);
        }

        body.page-membership .navbar-brand img{
            height: 53px;
            transition: transform 0.5s ease;
            filter: brightness(1.1);
        }

        body.page-membership .navbar-brand:hover img{
            transform: scale(1.02);
        }

        body.page-membership .nav-link{
            color: var(--text-primary) !important;
            font-weight: 500;
            padding: 10px 18px !important;
            position: relative;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s;
        }

        body.page-membership .nav-link::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 18px;
            right: 18px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        body.page-membership .nav-link:hover::after, body.page-membership .nav-link.active::after{
            transform: scaleX(1);
        }

        body.page-membership .nav-link:hover, body.page-membership .nav-link.active{
            color: var(--primary) !important;
        }

        body.page-membership .navbar .btn-primary{
            background: var(--accent) !important;
            border: none;
            border-radius: 40px;
            padding: 8px 22px;
            font-weight: 500;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            color: white;
        }

        body.page-membership .navbar .btn-primary:hover{
            background: var(--accent-light) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

        body.page-membership .navbar-toggler{
            border: 1px solid var(--primary);
            padding: 0.25rem 0.75rem;
            background-color: transparent;
        }

        body.page-membership .navbar-toggler:focus{
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-membership .navbar-toggler-icon{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15, 48, 87, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        body.page-membership ul.navbar-nav.ms-auto{
            gap: 15px;
        }

        /* ===== MEMBERSHIP HERO SECTION ===== */
        body.page-membership .membership-hero{
            margin: 30px auto 40px;
            padding: 60px 20px;
            text-align: center;
            max-width: 1100px;
        }

        body.page-membership .membership-hero h1{
            color: var(--primary);
            font-weight: 800;
            font-size: 2.5rem;
            margin-bottom: 15px;
			margin-top:122px;
        }

        body.page-membership .membership-hero p{
            color: var(--text-secondary);
            max-width: 900px;
            margin: 0 auto;
            font-size: 1.1rem;
        }
  body.page-membership h1 {
    margin-top: 122px;
}
 body.page-membership .section.membership-hero.aos-init.aos-animate {
    margin-top: 97px;
}
        /* ===== FORM CONTAINER ===== */
        body.page-membership .form-container{
            background: var(--bg-card);
            border-radius: 32px;
            padding: 30px 25px;
            box-shadow: var(--shadow-strong);
            margin-bottom: 50px;
            position: relative;
            border: 1px solid var(--border-light);
            transition: var(--transition);
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        body.page-membership .form-container:hover{
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        /* ===== SUCCESS ALERT ===== */
        body.page-membership .alert-success{
            background: rgba(15, 48, 87, 0.1);
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 16px;
            padding: 15px 20px;
            margin-bottom: 20px;
            animation: slideDown 0.5s ease;
            width: 100%;
            position: relative;
            z-index: 10;
        }

        body.page-membership .alert-success.show{
            display: flex;
            align-items: center;
        }

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

        /* ===== FORM SECTIONS ===== */
        body.page-membership .form-section{
            margin-bottom: 25px;
            background: var(--bg-soft);
            padding: 20px 18px;
            border-radius: 24px;
            border: 1px solid var(--border-light);
            transition: var(--transition);
            width: 100%;
        }

        body.page-membership .form-section:hover{
            border-color: var(--accent);
            background: var(--bg-main);
        }

        body.page-membership .form-section h2{
            color: var(--primary);
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--accent);
            font-size: 1.5rem;
        }

        body.page-membership .form-section h2 i{
            color: var(--accent);
        }

        /* ===== FORM LABELS ===== */
        body.page-membership .form-label{
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 6px;
            font-size: 0.9rem;
        }

        body.page-membership .required::after{
            content: " *";
            color: var(--accent);
        }

        /* ===== FORM CONTROLS ===== */
        body.page-membership .form-control, body.page-membership .form-select{
            background: var(--bg-main);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 14px;
            transition: var(--transition);
            color: var(--text-primary);
            font-family: 'Josefin Sans', sans-serif;
            width: 100%;
        }

        body.page-membership .form-control:focus, body.page-membership .form-select:focus{
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
            outline: none;
        }

        body.page-membership .form-control::placeholder{
            color: var(--text-secondary);
        }

        body.page-membership .form-select option{
            background: white;
            color: var(--text-primary);
        }

        /* ===== ROW LAYOUT FIX ===== */
        body.page-membership .row{
            display: flex;
            flex-wrap: wrap;
            margin-right: -8px;
            margin-left: -8px;
            width: calc(100% + 16px);
        }

        body.page-membership .col-md-6, body.page-membership .col-lg-3, body.page-membership .col-lg-4, body.page-membership .col-lg-2, body.page-membership .col-12{
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 12px;
        }

        /* ===== MEMBERSHIP CARDS ===== */
        body.page-membership .membership-type-card{
            background: var(--bg-main);
            border: 2px solid var(--border-light);
            border-radius: 20px;
            padding: 18px 10px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            height: 100%;
            width: 100%;
            margin-bottom: 0;
        }

        body.page-membership .membership-type-card:hover{
            transform: translateY(-5px);
            border-color: var(--accent);
            box-shadow: var(--shadow-hover);
        }

        body.page-membership .membership-type-card.selected{
            border-color: var(--primary);
            background: var(--primary-soft);
            box-shadow: 0 0 30px rgba(15, 48, 87, 0.2);
        }

        body.page-membership .membership-type-card h5{
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        body.page-membership .membership-price{
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent);
            margin: 8px 0;
        }

        body.page-membership .membership-duration{
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        body.page-membership .membership-type-card p{
            color: var(--text-secondary);
            font-size: 0.8rem;
            margin-top: 8px;
        }

        /* ===== TERMS BOX ===== */
        body.page-membership .terms-box{
            background: var(--bg-soft);
            border-radius: 16px;
            padding: 15px;
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid var(--border-light);
            margin-bottom: 15px;
        }

        body.page-membership .terms-box p{
            margin-bottom: 6px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            line-height: 1.3;
        }

        body.page-membership .terms-box p strong{
            color: var(--primary);
            font-size: 0.9rem;
        }

        /* ===== SUBMIT BUTTON ===== */
        body.page-membership .submit-btn{
            background: var(--accent) !important;
            border: none;
            color: white;
            padding: 12px 30px;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 12px;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            width: auto;
            min-width: 250px;
            max-width: 100%;
            white-space: normal;
            word-wrap: break-word;
        }

        body.page-membership .submit-btn:hover{
            background: var(--accent-light) !important;
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        body.page-membership .submit-btn i{
            font-size: 1rem;
        }

        /* ===== CONFIRMATION SECTION ===== */
        body.page-membership .confirmation-section{
            text-align: center;
            padding: 20px 15px;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        body.page-membership .confirmation-icon{
            font-size: 4rem;
            color: var(--primary);
            margin-bottom: 15px;
            animation: scaleIn 0.5s ease;
        }

        @keyframes scaleIn{
            from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
        }

        body.page-membership .confirmation-details{
            background: var(--bg-soft);
            border-radius: 24px;
            padding: 20px 15px;
            margin: 20px 0;
            text-align: left;
            border: 1px solid var(--border-light);
            width: 100%;
        }

        body.page-membership .detail-item{
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        body.page-membership .detail-item:last-child{
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        body.page-membership .detail-label{
            font-weight: 500;
            color: var(--primary);
            min-width: 120px;
            width: auto;
            font-size: 0.9rem;
        }

        body.page-membership .detail-value{
            color: var(--text-primary);
            flex: 1;
            word-break: break-word;
            font-size: 0.9rem;
        }

        body.page-membership .btn-outline-primary{
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 10px 20px;
            font-size: 0.9rem;
            border-radius: 50px;
            transition: var(--transition);
            min-width: 180px;
            max-width: 100%;
            white-space: normal;
            word-wrap: break-word;
        }

        body.page-membership .btn-outline-primary:hover{
            background: var(--primary);
            color: white;
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        body.page-membership .btn-primary{
            background: var(--accent);
            border: none;
            color: white;
            padding: 10px 20px;
            font-size: 0.9rem;
            border-radius: 50px;
            transition: var(--transition);
            min-width: 180px;
            max-width: 100%;
            white-space: normal;
            word-wrap: break-word;
        }

        body.page-membership .btn-primary:hover{
            background: var(--accent-light);
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        body.page-membership .confirmation-section .d-flex{
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        /* ===== BACK TO TOP BUTTON ===== */
        body.page-membership .back-to-top{ 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            width: 45px; 
            height: 45px; 
            background: var(--primary); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.2rem; 
            opacity: 0; 
            transition: 0.3s; 
            pointer-events: none; 
            z-index: 99; 
            text-decoration: none;
            border: 1px solid var(--accent);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }
        
        body.page-membership .back-to-top.show{ 
            opacity: 1; 
            pointer-events: auto; 
        }
        
        body.page-membership .back-to-top:hover{
            background: var(--accent);
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* ===== ERROR MESSAGES ===== */
        body.page-membership .text-danger{
            color: #ff6b6b !important;
            font-size: 0.8rem;
            margin-top: 4px;
        }

        body.page-membership .is-invalid{
            border-color: #ff6b6b !important;
        }

        /* ===== FOOTER - ENHANCED ===== */
        body.page-membership .footer{
            background: var(--primary-dark);
            color: rgba(255, 255, 255, 0.9);
            padding: 60px 0 25px;
            margin-top: 80px;
            border-top: 1px solid rgba(255, 107, 107, 0.3);
            width: 100%;
            overflow-x: hidden;
            position: relative;
        }

        body.page-membership .footer::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: scanline 3s linear infinite;
        }

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

        body.page-membership .footer h5{
            color: var(--accent-light);
            font-weight: 500;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-family: 'Josefin Sans', sans-serif;
        }

        body.page-membership .footer p{
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
            font-size: 0.9rem;
        }

        body.page-membership .footer-links a{
            color: rgba(255, 255, 255, 0.8);
            display: block;
            margin-bottom: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        body.page-membership .footer-links a:hover{
            color: var(--accent-light);
            transform: translateX(5px);
        }

        body.page-membership .social-icons{
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        body.page-membership .social-icons a{
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            border-radius: 50%;
            color: #fff;
            transition: all 0.35s ease;
            text-decoration: none;
            font-size: 0.9rem;
        }

        body.page-membership .social-icons a:hover{
            background: var(--accent);
            color: var(--primary-dark) !important;
            transform: translateY(-5px) scale(1.1);
            border-color: var(--accent);
        }

        body.page-membership .input-group{
            max-width: 100%;
            width: 100%;
        }

        body.page-membership .input-group .form-control{
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 107, 0.3);
            color: white;
            padding: 10px 15px;
            font-size: 0.9rem;
            width: 1%;
            flex: 1 1 auto;
        }

        body.page-membership .input-group .form-control::placeholder{
            color: rgba(255, 255, 255, 0.6);
        }

        body.page-membership .input-group .form-control:focus{
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
            outline: none;
        }

        body.page-membership .input-group .btn-primary{
            background: var(--accent);
            border: 1px solid var(--accent);
            color: white;
            padding: 10px 18px;
            font-size: 0.9rem;
        }

        body.page-membership .input-group .btn-primary:hover{
            background: var(--accent-light);
            border-color: var(--accent-light);
        }

        body.page-membership hr{
            opacity: 0.2;
            border-color: rgba(255, 107, 107, 0.3);
            margin: 20px 0;
        }

        /* ===== RESPONSIVE BREAKPOINTS ===== */
        @media (max-width: 1199px){
            body.page-membership .container{ max-width: 960px; }
        }

        @media (max-width: 991px){
            body.page-membership .container{ max-width: 720px; }
            
            body.page-membership .navbar-collapse{
                background: white;
                padding: 20px;
                border-radius: 16px;
                margin-top: 15px;
                box-shadow: var(--shadow-strong);
            }
            
            body.page-membership .nav-link{
                margin: 8px 0;
                text-align: center;
            }
            
            body.page-membership .nav-link::after{
                left: 50%;
                right: 50%;
                transform: translateX(-50%) scaleX(0);
            }
            
            body.page-membership .nav-link:hover::after{
                left: 25%;
                right: 25%;
                transform: translateX(0) scaleX(1);
            }
            
            body.page-membership .ms-2{
                margin-left: 0 !important;
                margin-top: 10px;
            }
            
            body.page-membership .btn-primary{
                width: 100%;
            }
            
            body.page-membership .membership-price{
                font-size: 1.3rem;
            }
            
            body.page-membership .membership-type-card{
                padding: 15px 8px;
            }
        }

        @media (max-width: 768px){
            body.page-membership{ 
                padding-top: 70px; 
            }
            
            body.page-membership .container{
                padding-left: 12px;
                padding-right: 12px;
            }
            
            body.page-membership .form-container{
                padding: 18px 15px;
                border-radius: 24px;
            }
            
            body.page-membership .form-section{
                padding: 18px 15px;
            }
            
            body.page-membership .form-section h2{
                font-size: 1.3rem;
            }
            
            body.page-membership .membership-hero{
                padding: 40px 15px;
            }
            
            body.page-membership .membership-hero h1{
                font-size: 2rem;
            }
            
            body.page-membership .membership-type-card{
                margin-bottom: 10px;
            }
            
            body.page-membership .detail-item{
                flex-direction: column;
                align-items: flex-start;
            }
            
            body.page-membership .detail-label{
                margin-bottom: 5px;
                width: 100%;
            }
            
            body.page-membership .detail-value{
                width: 100%;
            }
            
            body.page-membership .confirmation-section .d-flex{
                flex-direction: column !important;
                gap: 8px !important;
            }
            
            body.page-membership .confirmation-section .btn{
                width: 100%;
                margin: 0 !important;
            }
            
            body.page-membership .submit-btn{
                min-width: 100%;
            }
            
            body.page-membership .footer{
                text-align: center;
                padding: 40px 0 20px;
            }
            
            body.page-membership .footer-links a{
                justify-content: center;
            }
            
            body.page-membership .social-icons{
                justify-content: center;
            }
            
            body.page-membership .footer .col-lg-4, body.page-membership .footer .col-lg-2{
                margin-bottom: 25px;
            }
            
            body.page-membership .footer h5{
                text-align: center;
            }
        }

        @media (max-width: 576px){
            body.page-membership .form-container{
                padding: 15px 12px;
            }
            
            body.page-membership .form-section{
                padding: 15px 12px;
            }
            
            body.page-membership .membership-price{
                font-size: 1.2rem;
            }
            
            body.page-membership .confirmation-icon{
                font-size: 3.5rem;
            }
            
            body.page-membership h2{
                font-size: 1.3rem;
            }
            
            body.page-membership .back-to-top{
                bottom: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
            
            body.page-membership .input-group{
                flex-direction: column;
                gap: 10px;
            }
            
            body.page-membership .input-group .form-control{
                border-radius: 8px;
                width: 100%;
            }
            
            body.page-membership .input-group .btn-primary{
                border-radius: 8px;
                width: 100%;
            }
        }

        @media (max-width: 400px){
            body.page-membership .loading-logo{
                width: 120px;
            }
            
            body.page-membership .loading-progress{
                width: 200px;
            }
        }
        body.page-membership .footer h5{
    color: #010101;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-membership .footer{
    background: #6f8798;
    color: rgba(255, 255, 255, 0.9);
    padding: 60px 0 25px;
    margin-top: 80px;
    border-top: 1px solid rgba(255, 107, 107, 0.3);
    width: 100%;
    overflow-x: hidden;
    position: relative;
}
body.page-membership .footer h5{
    color: #010101;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Josefin Sans', sans-serif;
}
body.page-membership .navbar-brand img{
    height: 70px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 78px;
}
body.page-membership .navbar-brand img{
    height: 81px;
    transition: transform 0.5s ease;
    filter: brightness(1.1);
    width: 91px;
}

/* membership inline styles */
body.page-membership .style-membership-001 { border-color: var(--accent); }
body.page-membership .style-membership-002 { color: var(--text-primary); }
body.page-membership .style-membership-003 { color: var(--primary); }
body.page-membership .style-membership-004 { color: var(--text-secondary); }
body.page-membership .style-membership-005 { color: var(--primary); }
body.page-membership .style-membership-006 { color: var(--text-secondary); }
body.page-membership .style-membership-007 { width: 140px; filter: brightness(1.2); }

body.page-index .gallery-modal-image,
body.page-gallery .gallery-modal-image { border: 3px solid var(--accent); width: 100%; height: auto; }

body.page-index .navbar .login-btn,
body.page-about .navbar .login-btn,
body.page-contactus .navbar .login-btn,
body.page-facilllities .navbar .login-btn,
body.page-feedback .navbar .login-btn,
body.page-gallery .navbar .login-btn,
body.page-membership .navbar .login-btn {
    background: #6c757d !important;
    background-color: #6c757d !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
}

body.page-index .navbar .login-btn:hover,
body.page-about .navbar .login-btn:hover,
body.page-contactus .navbar .login-btn:hover,
body.page-facilllities .navbar .login-btn:hover,
body.page-feedback .navbar .login-btn:hover,
body.page-gallery .navbar .login-btn:hover,
body.page-membership .navbar .login-btn:hover {
    background: #5c636a !important;
    background-color: #5c636a !important;
    color: #ffffff !important;
    border-color: #5c636a !important;
}