:root {
            --ame-green: #004d26;
            --ame-gold: #c5a059;
            --text-white: #ffffff;
            --ame-accent-red: #8B0000; /* Dark red for college titles */
        }

        body, html { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background-color:#F0F7F6}

        /* =========================================================
           TOP BAR, LOGO, MAIN NAV - Left Exactly as you had them
           ========================================================= */
        .top-bar {
            background-color: var(--ame-green);
            color: var(--text-white);
            padding: 5px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .top-links a { color: white; text-decoration: none; margin-left: 15px; }

        .dropdown { position: relative; display: inline-block; cursor: pointer; padding: 5px 10px; }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 220px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 1001; /* High z-index */
            top: 100%;
        }
        .dropdown:hover .dropdown-content { display: block; }
        .dropdown-content a { color: #333; padding: 6px; text-decoration: none; display: block; border-bottom: 1px solid #eee; }

        .logo-section { background-color: var(--ame-green); padding: 10px 60px; display: flex; justify-content: space-between; align-items: center; color: white; border-top: 1px solid rgba(255,255,255,0.1); }
        .logo-placeholder { width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ame-green); font-weight: bold; font-size: 10px; text-align: center; border: 3px solid #fff; }
        
        .main-nav { background-color: var(--ame-green); padding: 0 60px; display: flex; gap: 30px; position: relative; border-top: 1px solid rgba(8,113,37,1.00); }
        .nav-item { color: white; text-decoration: none; font-weight: 500; padding: 15px 0; display: inline-block; }

        /* --- DESKTOP ANIMATED MEGA MENU --- (Unchanged from original) */
        .nav-wrapper { position: static; }
        .mega-menu {
            visibility: hidden;
            opacity: 0;
            transform: translateY(15px);
            transition: all 0.3s ease-in-out;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: white;
            box-shadow: 0px 15px 30px rgba(0,0,0,0.15);
            z-index: 999;
            padding: 40px 60px;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 25px;
            border-top: 2px solid var(--ame-gold);
        }
        .nav-wrapper:hover .mega-menu { visibility: visible; opacity: 1; transform: translateY(0); }
        .mega-column h4 { color: var(--ame-green); margin-top: 0; }
        .mega-column ul { list-style: none; padding: 0; }
        .mega-column ul li { padding: 5px 0; }
        .mega-column ul li a { color: #333; text-decoration: none; font-size: 14px; }

        /* --- CONTENT MAIN LAYOUT --- */
        .container { display: grid; grid-template-columns: 320px 1fr; gap: 20px; padding: 30px 60px; position: relative; }
/*        .hero-image { background: #ddd url('https://via.placeholder.com/1000x500') center/cover; min-height: 450px; }*/
		
		/* --- LUXURIA SLIDESHOW ANIMATION --- */
.hero-slideshow {
    position: relative;
    width: 100%;
    min-height: 450px;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.lux-slide {
    display: none;
    height: 450px;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.luxuria-effect {
    animation: luxuriaFade 5s infinite ease-in-out;
}
/* --- HERO SECTION MODIFICATION --- */
.hero-image { 
    background: #ddd url('https://via.placeholder.com/1000x500') center/cover; 
    min-height: 450px; 
    display: flex;             /* Added to center the button */
    align-items: center;       /* Vertical center */
    justify-content: center;    /* Horizontal center */
}

.hero-read-more {
    background-color: var(--ame-green);
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid var(--ame-gold);
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
}

.hero-read-more:hover {
    background-color: var(--ame-gold);
    color: var(--ame-green);
    transform: scale(1.05);
}
@keyframes luxuriaFade {
    0% { opacity: 0; transform: scale(1.1); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: scale(1); }
}

/* --- RESPONSIVE HAMBURGER STYLING --- */
@media screen and (max-width: 768px) {
    .menu-icon { 
        display: block !important; 
        color: var(--ame-gold); 
        text-align: right;
        background: var(--ame-green);
    }
    
    .hero-slideshow, .lux-slide {
        min-height: 250px;
        height: 250px;
    }

    /* Keep sidebar layout but stack vertically */
    .container { grid-template-columns: 1fr; }
}

        /* =========================================================
           SIDEBAR CASCADING MENU - This is the MODIFIED section
           ========================================================= */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 10px;
            /* Critical for absolute submenu positioning */
            position: relative; 
        }

        /* The main list container */
        .sidebar-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* The Main College Link Card */
        .college-item {
            position: relative; /* Submenu is positioned absolute to this item */
        }

        .college-card { 
            background: white; 
            padding: 20px; 
            border-radius: 4px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            cursor: pointer;
            text-decoration: none;
            color: #333;
            transition: background 0.2s ease, transform 0.2s ease;
            z-index: 2; /* Main card stays above popout shadow */
        }
        
        /* Subtle visual effect on hover for the main item */
        .college-item:hover .college-card {
            background-color: #fafafa;
            transform: translateX(3px);
            color: var(--ame-accent-red); /* Title color from image */
        }

        .college-card span.arrow { color: #aaa; font-size: 1.2em; transition: color 0.2s ease; }
        .college-item:hover .college-card span.arrow { color: var(--ame-gold); }

        /* --- THE SUBMENU POPOUT --- (Crucial changes) */
        .submenu-popout {
            /* Position it perfectly next to the parent item */
            position: absolute;
            top: 0;
            left: calc(100% + 1px); /* Starts right after the sidebar + 1px gap */
            width: calc(100vw - 320px - 140px); /* Extends full width of hero area, minus sidebar and padding */
            max-width: 800px; /* Limits maximum width on very large screens */
            height: fit-content;
            min-height: 100%; /* Covers at least the vertical space of the main item */
            
            /* Visual Styling from Attached Image */
            background: white;
            padding: 30px;
            border-radius: 4px;
            box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
            border-left: 2px solid var(--ame-gold); /* Side accent color */
            box-sizing: border-box;
            
            /* Hidden by default with a slight transition effect */
            visibility: hidden;
            opacity: 0;
            transform: translateX(10px);
            transition: visibility 0s linear 0.1s, opacity 0.3s ease, transform 0.3s ease;
            z-index: 10; /* Lower than top bar, but above main content */
        }

        /* Show Submenu on Hover */
        .college-item:hover .submenu-popout {
            visibility: visible;
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0s; /* Appears instantly on hover */
        }

        /* Submenu Contents Styling */
        .submenu-popout h3.popout-title {
            margin-top: 0;
            margin-bottom: 20px;
            color: var(--ame-accent-red); /* Specific Dark Red color */
            font-size: 1.3rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .submenu-popout .submenu-intro {
            color: #555;
            font-size: 1.1rem;
            margin-bottom: 25px;
            font-weight: 400;
        }

        .submenu-popout-cols {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
        }

        .submenu-col h4 { margin-top: 0; color: var(--ame-green); border-bottom: 1px solid #ddd; padding-bottom: 5px; }
        .submenu-col ul { list-style: none; padding: 0; margin: 0; }
        .submenu-col ul li { padding: 6px 0; }

        .submenu-col ul li a { 
            text-decoration: none; 
            color: #444; 
            font-size: 0.95rem; 
            transition: color 0.2s ease, padding-left 0.2s ease;
        }
        .submenu-col ul li a:hover { 
            color: var(--ame-green); 
            padding-left: 5px; 
            font-weight: 500;
        }

        /* =========================================================
           MOBILE RESPONSIVE RULES - Unchanged or slightly tweaked
           ========================================================= */
        .menu-icon { display: none; font-size: 28px; cursor: pointer; color: white; padding: 10px; background: var(--ame-green); }

        @media screen and (max-width: 768px) {
            .menu-icon { display: block; padding-left: 20px; }

            /* Hide TopBar on Mobile (as per your original CSS) */
            .main-nav, .top-bar { display: none; flex-direction: column; padding: 10px 20px; gap: 10px; }
            .show-menu { display: flex !important; }

            .top-links { flex-direction: column; display: flex; }
            .top-links a { margin: 5px 0; }

            .logo-section { flex-direction: column; text-align: center; padding: 20px; }
            
            /* Responsive Dropdown */
            .dropdown-content { position: static; width: 100%; background: #00361b; }
            .dropdown-content a { color: white; }

            /* Adjust Content Main Grid */
            .container { grid-template-columns: 1fr; padding: 15px; gap: 15px; }

            /* Mobile Sidebar / Accordion style */
            .sidebar { position: static; width: 100%; }
            .submenu-popout { 
                position: static; 
                width: 100%; 
                max-width: 100%;
                opacity: 1; 
                visibility: visible; 
                display: none; 
                box-shadow: none; 
                border-left: none; 
                border-top: 1px solid #eee;
                padding: 15px;
                transform: none;
                z-index: 1;
            }
            /* Add this class via JS on mobile click to toggle */
            .college-item.active-mobile .submenu-popout { display: block; }
        }
		


/* --- MEGA MENU RESPONSIVENESS --- */
@media screen and (max-width: 768px) {
    .mega-menu {
        position: static; /* Remove absolute positioning on mobile */
        display: none;    /* Hidden until parent is clicked */
        width: 100%;
        grid-template-columns: 1fr; /* Stack columns vertically */
        padding: 15px;
        box-shadow: none;
    }

    /* When the parent wrapper is active on mobile, show the menu */
    .nav-wrapper.active-mobile .mega-menu {
        display: block;
    }

    .mega-column {
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 10px;
    }
}

/* --- HERO SECTION & READ MORE BUTTON FIX --- */
.hero-slideshow {
    position: relative;
    width: 100%;
    height: 450px; /* Adjust height as needed */
    overflow: hidden;
}

.lux-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

/* Centering the Read More Button */
.hero-read-more {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly centers the button */
    z-index: 10;
    padding: 12px 30px;
    background-color: var(--ame-gold);
    color: var(--ame-green);
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    transition: 0.3s;
}

.hero-read-more:hover {
    background-color: white;
    color: var(--ame-green);
}
		/* --- FOOTER STYLES --- */ /* --- FOOTER STYLES --- */ 
 
congrat{
	display: flex;
	justify-content: center;
	align-items: center;
	/*background:#C5FDF5;*/
	/* background: hsla(170, 50%, 45%, 1);*/
	background:url("liQsYp.jpg");
	height: 30px;
	/* transition:all 0.3s ease;*/
 }
h2
{
	display: flex;
	color: transparent;
	font-size: 3.3vw;

}
h2 span
{
	animation: animate 3s linear infinite;
	animation-delay: calc(0.1s * var(--i));
}
@keyframes animate
{
	0%
	{
	color: #00b3ff;
		filter: blur(2px) hue-rotate(0deg);
		text-shadow: 0 0 10px #00b3ff,
			0 0 20px #00b3ff,
			0 0 40px #00b3ff,
			0 0 80px #00b3ff,
			0 0 120px #00b3ff,
			0 0 200px #00b3ff,
			0 0 300px #00b3ff,
			0 0 400px #00b3ff,
		
	}
	30%, 70%
	{
	   color: #fff;
		filter: blur(2px) hue-rotate(360deg);
		text-shadow: 0 0 10px #00b3ff,
			0 0 20px #00b3ff,
			0 0 40px #00b3ff,
			0 0 80px #00b3ff,
			0 0 120px #00b3ff,
			0 0 200px #00b3ff,
		 
		
	}
	100%{
		color: transparent;
		box-shadow: none;
		filter: blur(2px) hue-rotate(0deg);
	}
}
	
 
div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}
 	
		/* --- FOREST GREEN FOOTER STYLES --- */
.site-footer {
    background-color: var(--ame-green); /* Changed to Forest Green-forward */
    color: var(--text-white);
    margin-top: 50px;
    font-size: 14px;
    border-top: 4px solid var(--ame-gold);
}

.footer-top {
    padding: 60px 0;
}

.flex-columns {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.footer-column h4 {
    color: var(--ame-gold);
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-item p { opacity: 0.9; line-height: 1.5; margin: 0; }

.footer-column ul { list-style: none; padding: 0; }
.footer-column ul li { 
    margin-bottom: 10px; 
    padding-left: 15px; 
    position: relative; 
}
.footer-column ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ame-gold);
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: 0.3s;
}

.footer-column ul li a:hover {
    color: var(--ame-gold);
    opacity: 1;
}

.footer-bottom {
    background-color: rgba(0,0,0,0.2); /* Darker overlay for the bottom bar */
    padding: 20px 0;
}
/* --- REMOVE WHITE SPACE BELOW FOOTER ON MOBILE --- */
@media screen and (max-width: 768px) {
    html, body {
        margin: 0;
        padding: 0;
        height: auto;
        min-height: 100%;
        overflow-x: hidden; /* Prevents horizontal scrolling which can cause vertical white space */
    }

    .site-footer {
        margin-bottom: 0 !important;
        padding-bottom: 20px; /* Adjust if you want a small gap inside the footer */
    }

    /* Ensures the main container doesn't push the footer down unnecessarily */
    .container {
        padding-bottom: 0;
    }
}

/* --- UPDATED FLEXBOX STICKY FOOTER & RESPONSIVENESS --- */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f0f7f6;
    /* Create a flex container spanning the full viewport height */
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    overflow-x: hidden; /* Prevents horizontal scroll/ghost space */
}

/* Ensure the main content area grows to fill available vertical space */
.container {
    flex: 1 0 auto; /* This pushes the footer to the bottom */
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    padding: 30px 60px;
    box-sizing: border-box;
}

/* Ensure the footer does not shrink or have accidental top margins */
.site-footer {
    flex-shrink: 0; 
    margin-top: 0 !important;
}

/* Mobile Responsiveness Refinement */
@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Stack sidebar and hero vertically */
        padding: 15px;
        gap: 15px;
        flex: 1 0 auto; /* Maintain flex growth on mobile */
    }
    
    /* Remove accidental margins causing bottom gaps on mobile */
    .hero-slideshow {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    .flex-columns { flex-direction: column; text-align: center; }
    .contact-item { justify-content: center; }
    .footer-column ul li { padding-left: 0; }
    .footer-column ul li::before { display: none; }
}