:root {
           --primary-blue: #1a3a8a;
           --accent-blue: #2563eb;
           --text-dark: #111827;
           --text-muted: #6b7280;
       }

       body {
           font-family: 'Poppins', sans-serif;
           color: var(--text-dark);
           background-color: #fff;
           line-height: 1.6;
           overflow-x: hidden;
       }


       /* ===================================
    Header & Navbar
 ===================================== */

       /* Top Bar */
       .top-bar {
           background-color: var(--primary-blue);
           color: white;
           padding: 10px 0;
           font-size: 0.85rem;
       }

       /* Sub Header ribbon */
       .sub-header {
           background-color: #f8fafc;
           padding: 10px 0;
           border-bottom: 1px solid #e2e8f0;
           text-align: center;
           font-size: 0.85rem;
           font-weight: 600;
           color: #1e3a8a;
       }

       /* Navbar */
       .navbar {
           background: white;
           padding: 15px 0;
           border-bottom: 1px solid #edf2f7;
       }

       h1,
       h2,
       h3,
       .navbar-brand {
           font-family: 'Playfair Display', serif;
           font-weight: 700;
           color: var(--primary-blue) !important;
       }

       .navbar-brand {
           font-size: 1.1rem;
           display: flex;
           align-items: center;
       }

       .navbar-brand img {
           height: 35px;
           margin-right: 10px;
       }

       .nav-link {
           color: #4b5563 !important;
           font-weight: 500;
           margin: 0 8px;
           font-size: 0.9rem;
       }

       .nav-link:hover,
       .nav-link.active {
           color: var(--accent-blue) !important;
       }

       .btn-admin {
           background-color: #1e3a8a;
           color: white;
           border-radius: 6px;
           padding: 6px 20px;
           font-weight: 600;
           font-size: 0.9rem;
           text-decoration: none;
       }

       .btn-user {
           background-color: #3b82f6;
           color: white;
           border-radius: 6px;
           padding: 6px 20px;
           font-weight: 600;
           font-size: 0.9rem;
           margin-left: 10px;
           text-decoration: none;
       }

       /* =================================
        Homepage Styleing
       ===================================== */


       /* Hero Section */
       .hero-section {
           padding: 100px 0;
           background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
       }

       /* Decorative Image Blobs */
       .image-wrapper {
           position: relative;
           display: inline-block;
       }

       .image-wrapper::before {
           content: '';
           position: absolute;
           width: 100%;
           height: 100%;
           background: var(--decoration-color);
           border-radius: 30px;
           z-index: -1;
       }

       .blob-right::before {
           top: 20px;
           left: 20px;
       }

       .blob-left::before {
           top: 20px;
           left: -20px;
       }

       .decorated-img {
           border-radius: 25px;
           width: 100%;
           max-width: 450px;
           object-fit: cover;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       }

       /* Sections */
       section {
           padding: 80px 0;
       }

       .section-title {
           margin-bottom: 40px;
       }

       /* Mission Cards */
       .mission-card {
           border: none;
           border-radius: 20px;
           overflow: hidden;
           position: relative;
           height: 350px;
           transition: transform 0.3s ease;
       }

       .mission-card:hover {
           transform: translateY(-10px);
       }

       .mission-card img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .mission-overlay {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
           padding: 20px;
           color: white;
       }

       /* Gallery */
       .gallery-item {
           border-radius: 15px;
           overflow: hidden;
           margin-bottom: 20px;
           cursor: pointer;
       }

       .gallery-item img {
           transition: transform 0.5s;
           width: 100%;
           height: 250px;
           object-fit: cover;
       }

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

       .underline-accent {
           display: inline-block;
           position: relative;
       }

       .underline-accent::after {
           content: '';
           position: absolute;
           width: 60%;
           height: 4px;
           background: var(--accent-blue);
           bottom: -5px;
           left: 20%;
       }

       /* Testimonials */
       .testimonial-card {
           background: white;
           padding: 40px;
           border-radius: 20px;
           box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
           max-width: 700px;
           margin: 0 auto;
           text-align: center;
       }

       @media (max-width: 768px) {
           .hero-section {
               text-align: center;
               padding: 60px 0;
           }

           .decorated-img {
               margin-top: 40px;
           }

           .order-mobile-first {
               order: -1;
           }
       }


       /* ========================================
             Footer 
       ========================================*/
       footer {
           background-color: #fff;
           padding: 80px 0 20px;
           border-top: 1px solid #f3f4f6;
       }

       .footer-brand {
           font-weight: 700;
           color: #111827;
           font-size: 1.1rem;
           margin-bottom: 20px;
       }

       .footer-text {
           color: var(--text-muted);
           font-size: 0.9rem;
           margin-bottom: 20px;
       }

       .footer-links {
           list-style: none;
           padding: 0;
       }

       .footer-links li {
           margin-bottom: 12px;
       }

       .footer-links a {
           color: var(--text-muted);
           text-decoration: none;
           font-size: 0.9rem;
       }

       .footer-links a:hover {
           color: var(--accent-blue);
       }

       .map-container {
           border-radius: 10px;
           overflow: hidden;
           height: 220px;
           background-color: #f3f4f6;
       }