:root {
         --primary-red: #d32f2f;
         /* Symbolizing Charity/Devotedness */
         --primary-blue: #dc2617;
         /* Symbolizing Humility/Mary */
         --light-gold: #f9f7f0;
         --text-dark: #333;
       }

       body {
         font-family: "Plus Jakarta Sans", sans-serif;
         color: var(--text-dark);
         line-height: 1.6;
         text-align: justify;
         font-size: large;
         /* Creates a warm center that fades to a crisp off-white */
         /* Mixing White, Bone, and Cream for a rich texture */
         background: linear-gradient(135deg, #FFFFFF 0%, #F9F7F2 50%, #F2EEE5 100%);
       }
       h1,h2,h3,h4{
        font-weight: 600;
       }
       .about-orange-label {
         letter-spacing: 0.05em;
         background: linear-gradient(135deg, #FF7E5F 0%, #E65100 100%);
         box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3);
         border-radius: 20px 20px 0px 0px;
       }

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

       .top-bar a {
         color: white;
         text-decoration: none;
         margin-left: 15px;
       }

       /* Navbar */
       .navbar {
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         background: white;
         padding: 15px 0;
       }

       .navbar-brand {
         font-family: 'Playfair Display', serif;
         font-weight: 700;
         color: var(--primary-red) !important;
         font-size: 1.5rem;
         display: flex;
         align-items: center;
       }

       .navbar-brand img {
         height: 60px;
         margin-right: 15px;
       }

       .nav-link {
         font-weight: 500;
         color: #444 !important;
         text-transform: uppercase;
         font-size: 0.9rem;
         padding: 10px 15px !important;
         transition: color 0.3s;
       }

       .nav-link:hover,
       .nav-link.active {
         color: var(--primary-red) !important;

       }

       .nav-link:hover {
         transition: color 1s;

       }

       .nav-link {
         font-size: .88rem;
         text-transform: capitalize;
         position: relative;
       }

       .nav-link.active {
         font-weight: bold;
       }

       .nav-link.active::after {
         content: " ";
         background-color: var(--primary-red);
         position: absolute;
         padding: 1px;
         bottom: 0px;
         left: 0px;
         width: 100%;
         animation: change-width 1s;
         border: 0px;
       }

       @keyframes change-width {
         from {
           width: 0px;
         }

         to {
           width: 100%;
         }
       }

       .dropdown-menu {
         border-radius: 0px;
       }

       .dropdown-item {
         padding: 10px;
       }

       .dropdown-item:hover i {
         color: red;
       }

       /* Hero Carousel */
       .hero-section {
         position: relative;
         background: url('https://images.unsplash.com/photo-1544256277-c472f8836547?q=80&w=1920&auto=format&fit=crop') no-repeat center center/cover;
         height: 600px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
       }

       .hero-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.5);
       }

       .hero-content {
         position: relative;
         z-index: 2;
         color: white;
         max-width: 800px;
         padding: 20px;
       }

       .hero-title {
         font-family: 'Playfair Display', serif;
         font-size: 3.5rem;
         margin-bottom: 20px;
       }

       .hero-subtitle {
         font-size: 1.2rem;
         font-style: italic;
         margin-bottom: 30px;
       }

       .btn-custom {
         background-color: var(--primary-red);
         color: white;
         padding: 12px 30px;
         border-radius: 30px;
         text-transform: uppercase;
         letter-spacing: 1px;
         border: none;
         transition: background 0.3s;
       }

       .btn-custom:hover {
         background-color: #b71c1c;
         color: white;
       }

       /* Introduction Section */
       .intro-section {
         padding: 80px 0;
         background-color: white;
       }

       .section-title {
         font-family: 'Playfair Display', serif;
         color: var(--primary-blue);
         margin-bottom: 30px;
         position: relative;
         padding-bottom: 15px;
       }

       .section-title::after {
         content: '';
         position: absolute;
         left: 0;
         bottom: 0;
         width: 60px;
         height: 3px;
         background-color: var(--primary-red);
       }

       .quote-box {
         background-color: var(--light-gold);
         padding: 30px;
         border-left: 5px solid var(--primary-red);
         font-style: italic;
         font-size: 1.1rem;
         margin: 20px 0;
       }

       /* Motto Section */
       .motto-banner {
         background-color: var(--primary-blue);
         color: white;
         padding: 60px 0;
         text-align: center;
       }

       /* Presence Cards */
       .presence-card {
         border: none;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
         transition: transform 0.3s;
         height: 100%;
       }

       .presence-card:hover {
         transform: translateY(-5px);
       }

       .card-header-custom {
         background-color: var(--primary-red);
         color: white;
         font-weight: bold;
         padding: 15px;
       }

       /* Footer */
       footer {
         /* Moves from top-left to bottom-right */
         /* A complex blend that adds a "wash" of light */
         background: rgb(45, 41, 77);
         background: radial-gradient(at 0% 0%, rgba(100, 92, 170, 0.5) 0%, transparent 50%),
           radial-gradient(at 100% 100%, rgba(80, 227, 194, 0.1) 0%, transparent 50%),
           rgb(45, 41, 77);
         color: #ccc;
         padding: 60px 0 20px;
         font-size: 0.9rem;
       }

       footer h5 {
         color: white;
         font-family: 'Playfair Display', serif;
         margin-bottom: 25px;
       }

       footer a {
         color: #ccc;
         text-decoration: none;
         display: block;
         margin-bottom: 10px;
       }

       footer a.linear {
         display: inline;
       }

       footer a:hover {
         color: var(--primary-red);
       }

       .footer-bottom {
         border-top: 1px solid #444;
         margin-top: 40px;
         padding-top: 20px;
         text-align: center;
       }


       /* 1. Define the Fade In Animation */
       @keyframes fadeIn {
         from {
           opacity: 0;
           transform: translateY(10px);
           /* Starts slightly lower */
         }

         to {
           opacity: 1;
           transform: translateY(0);
           /* Moves into place */
         }
       }

       /* 2. Apply Animation on Desktop Hover */
       @media (min-width: 992px) {
         .dropdown:hover .dropdown-menu {
           display: block;
           margin-top: 0;
           /* Ensures no gap so the mouse can reach the menu */
           animation: fadeIn 0.3s ease-out;
           /* Runs the animation */
         }
       }

       /* --- HERO CAROUSEL STYLES --- */

       /* 1. Enforce Fixed Height */
       .carousel-item {
         height: 600px;
         /* Keeps the height same as before */
         position: relative;
         overflow: hidden;
         /* Important for the zoom effect */
       }

       /* 2. Image Fit */
       .carousel-item img {
         height: 100%;
         width: 100%;
         object-fit: cover;
         /* Ensures image fills the area without stretching */
         transform-origin: center;
         transition: transform 5s ease;
         /* Smooth transition base */
       }

       /* 3. Ken Burns Zoom Effect */
       .carousel-item.active img {
         animation: kenBurns 6s infinite alternate;
         /* The "WOW" zoom effect */
       }

       @keyframes kenBurns {
         from {
           transform: scale(1);
         }

         to {
           transform: scale(1.15);
         }
       }

       /* 4. Caption Positioning */
       .carousel-caption {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 10;
         /* Above the overlay */
       }

       /* 5. Text Animations (Slide Up) */
       .animate-up {
         opacity: 0;
         transform: translateY(30px);
         animation: slideUpFade 1s forwards;
       }

       .delay-1 {
         animation-delay: 0.3s;
       }

       .delay-2 {
         animation-delay: 0.6s;
       }

       @keyframes slideUpFade {
         to {
           opacity: 1;
           transform: translateY(0);
         }
       }

       /* 6. Reuse your existing overlay */
       .hero-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.4);
         /* Darkens image so text pops */
         z-index: 5;
       }

       .label-section {
         padding: 5em 2em;
         text-align: center;
         background-image: url("../img/background1.jpeg");
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
       }

       /* --- MULTI-ITEM QUOTES SLIDER --- */
       .quotes-section {
         background-color: lightyellow;
         padding: 60px 0;
         color: black;
       }

       .quotes-section .carousel-item {
         height: auto;
       }

       .divider-icon {
         font-size: 1.5rem;
         color: rgba(255, 255, 255, 0.4);
         margin-top: 10px;
       }

       /* Individual Card Styling */
       .quote-card {
         background: rgba(255, 255, 255, 0.9);
         /* Semi-transparent white box */
         padding: 30px;
         border-radius: 8px;
         /* Rounded corners */
         height: 100%;
         /* Ensures all cards are same height */
         text-align: center;
         border: 1px solid rgba(255, 255, 255, 0.1);
         /* Subtle border */
         transition: transform 0.3s ease, background 0.3s;
       }

       .quote-card:hover {
         transform: translateY(-5px);
         /* Lift effect on hover */
         background: rgba(255, 255, 255, 0.2);
         /* Brighter on hover */
       }

       .quote-text {
         font-family: 'Playfair Display', serif;
         font-size: 1.25rem;
         /* Smaller font since we have 3 items */
         font-style: italic;
         margin-bottom: 20px;
         line-height: 1.6;
       }

       .quote-footer {
         font-family: 'Roboto', sans-serif;
         font-size: 1rem;
         text-transform: uppercase;
         letter-spacing: 1px;
         color: rgba(255, 255, 255, 0.7);
         padding: 20px 0px;
       }

       /* Mobile Responsiveness: Stack items on small screens */
       @media (max-width: 768px) {
         /* Bootstrap's 'row' will automatically stack columns vertically on mobile.
       But standard carousel logic hides the overflow. 
       If you want 1 item per slide on mobile, you need complex JS.
       Easiest CSS-only fix: Just let them stack in one slide (user scrolls down) 
       or hide the other 2 columns via utility classes if strict slider needed. */

         .quote-text {
           font-size: 1.1rem;
         }

         .quote-card {
           margin-bottom: 20px;
           /* Spacing when stacked */
         }
       }