/* 2026 CSS Fix*/
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    overflow-y: visible; /* This MUST be visible or unset for sticky to work */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%; /* Flexible padding for smaller screens */
}

/* Tablet View (2 Columns) */
@media (max-width: 768px) {
    .usp-grid, .industrial-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        aspect-ratio: 1/1;
    }
    
    .hero-text-content h1 {
        font-size: 2.2rem;
    }
}

/* Mobile View (1 Column) */
@media (max-width: 600px) {
    .usp-grid, .industrial-grid, .footer-info-grid {
        grid-template-columns: 1fr; /* Full width stacks */
    }

    .hero-section {
        padding: 60px 20px;
        text-align: center;
    }

    .hero-actions {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        width: 100%;
    }

    .button {
        width: 100%; /* Big touch targets for thumbs */
        text-align: center;
    }
}

/*FOR THE INDEX POP UP*/
@media (max-width: 600px) {
    .modal-window {
        flex-direction: column; /* Stack sidebar on top of content */
        width: 95%;
        height: auto;
        max-height: 90vh;
        overflow-y: auto; /* Scrollable if text is long */
    }

    .modal-sidebar {
        padding: 20px;
        border-bottom: 2px solid #c58b43;
    }
    
    .subject-grid {
        grid-template-columns: 1fr; /* Single column for subjects */
    }
}

























/* --- 0. RESET AND UTILITIES (Based on Existing) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* MINI CONTACT ABOVE NAV */
.top-bar {
    background-color: #40439c; 
    color: white;
    padding: 10px 0;
    font-size: 13px;
    font-family: sans-serif;
    width: 100%;
}

.top-bar .container {
    display: flex;
    justify-content: space-between; /* Ensures contact left, socials right */    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    left: 20px;
}

/* Links & Icons*/
.top-bar a {
    color: white;
    text-decoration: none; /*Removesunderline*/
    margin-left: 20px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

/* This adds space specifically between the icon and the text */
.top-bar i {
    margin-right: 8px;
    color: #c58b43; /* Icons to match your logo accents */
}

.top-bar a:hover {
    color: #c58b43; /* Text turns gold on hover */
}

.top-bar-flex {
    display: flex;
    justify-content: space-between; /* Pushes contacts left, socials right */
    align-items: center;
}

/* Socials Specific Styles */
.top-bar-socials {
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Small divider */
    padding-left: 20px;
    margin-left: 20px;
}

.top-bar-socials a {
    margin-left: 15px; /* Tighter spacing for the top bar */
    font-size: 14px;
    transition: 0.3s ease;
}

/* Remove the icon margin for socials so they stay centered */
.top-bar-socials i {
    margin-right: 0; 
}

/* THE "LOCKDOWN" WHITE LOGO FIX */
header .social-links a, 
header .social-icons a,
.top-bar .social-links a,
.top-bar .social-icons a,
.top-bar-socials a,
[class*="social"] a i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Forces color on some modern browsers */
    opacity: 1 !important;
}

/* HOVER STATE */
header .social-links a:hover i,
.top-bar [class*="social"] a:hover i {
    color: #c58b43 !important;
    -webkit-text-fill-color: #c58b43 !important;
}

/* Mobile Fix: Stack them or hide socials if screen is too small */
@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column; /* Stacks contact info above socials */
        text-align: center;
        gap: 12px;
    }

    top-bar .container a {
        margin: 0 10px; /* Evens out spacing when stacked */
    }

    .top-bar-flex {
        flex-direction: column;
        gap: 10px;
    }
    .top-bar-socials {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        justify-content: center;
        display: none; /* Hides socials on small screens */
    }
}

@media (max-width: 480px) {
    .top-bar {
        font-size: 11px; /* Smaller font for very small phones */
    }
    
    .top-bar .contact-info {
        display: flex;
        gap: 8px;
    }
}

/*DOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONE*/










body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #40439c; /* Primary text color (Academy Blue/Purple) */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* New Utility Class for Centering Content */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto; /* Centers the content block */
}

.my-custom-line{
    border: 0;
    height: 3px;
    background: #c58b43; /* Academy Gold/Orange */
    margin: 20px 0 40px 0;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;
}

/* --- 1. TYPOGRAPHY & BUTTONS (Using Academy Colors) --- */

h1, h2, h3 {
    color: #40439c;
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem; /* Inspired by existing h1 size */
}

h2 {
    font-size: 2rem;
}

/* BUTTONS */
.button {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    -moz-transition: background-color 0.3s, border-color 0.3s;
    -ms-transition: background-color 0.3s, border-color 0.3s;
    -o-transition: background-color 0.3s, border-color 0.3s;
    letter-spacing: 1px;
    cursor: pointer;
    font-size: 14px;
}

.primary-cta {
    background-color: #c58b43; /* Academy Gold/Orange */
    color: white;
    border: 2px solid #c58b43;
}

.primary-cta:hover {
    background-color: #a87630;
    border-color: #a87630;
    transform: translate(-1px);
    -webkit-transform: translate(-1px);
    -moz-transform: translate(-1px);
    -ms-transform: translate(-1px);
    -o-transform: translate(-1px);
}

.secondary-cta {
    background-color: transparent;
    color: #c58b43;
    border: 2px solid #c58b43;
    margin-left: 10px   ;
}

.secondary-cta:hover {
    background-color: #fcf4e8;
}

/* --- INDUSTRIAL CTA BOX --- */
.admissions-prompt-section {
    padding: 80px 0;
    background: #fff; /* White background to make the blue box pop */
}

.industrial-cta-box {
    background-color: #40439c;
    padding: 60px;
    position: relative;
    overflow: hidden;
    color: white;
    text-align: left; /* Aligns with our asymmetric theme */
    border-left: 10px solid #c58b43; /* Added a heavy side-border for industrial feel */    
}

.cta-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        #c58b43,
        #c58b43 10px,
        #a87630 10px,
        #a87630 20px
    ); /* "Industrial Caution" Gold Stripe */
}

.status-badge {
    color: #cccccc;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 20px;
}

.industrial-cta-box h2 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1;
    color: white;
    text-align: left;
}

.industrial-cta-box p {
    font-size: 1.1rem;
    max-width: 800px;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Gold Button for Dark Backgrounds */
.secondary-cta-gold {
    background-color: #c58b43;
    color: white;
    padding: 18px 35px;
    text-decoration: none;
    font-weight: 900;
    display: inline-block;
    transition: 0.3s;
    border: none;
}

.secondary-cta-gold:hover {
    background-color: white;
    color: #40439c;
    transform: translateX(10px); /* Mechanical movement effect */
}

.cta-bg-ghost {
    position: absolute;
    right: -20px;
    bottom: -40px;
    font-size: 12rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    z-index: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.75rem;
    }

    .industrial-cta-box {
        padding: 40px 20px;
        text-align: center;
        border-left: none;
        border-bottom: 10px solid #c58b43;
    }
    .industrial-cta-box h2 { 
        font-size: 2rem;
        text-align: center;
    }

    .cta-content h2{
        text-align: center;
    }

    .secondary-cta{
        margin-left: 0;
        margin-top: 15px;
        display: block; /* Stack buttons on mobile */
    }

    .primary-cta {
        display: block;
    }

    .cta-bg-ghost{
        z-index: 0;
        display: none;
    }
}


























/* --- 2. HEADER/NAVIGATION STYLING --- */
    #main-header {
        position: -webkit-sticky; /* Support for older Safari */
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 9999; /* Ensures it stays above all other content */
        height: auto;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow so it pops against the content */
    }

    .header-container {
        display: flex;
        justify-content: space-between; /* Logo left, Nav right */
        align-items: center;
        padding: 10px 5%;
        max-width: 1400px; 
        margin: 0 auto;
    }

    .logo {
        margin: 0; /* Override the old centered margin */
        width: 250px;
        height: auto;
        max-width: none;
        flex-shrink: 0; /* This prevents the nav links from squishing the logo */
        align-items: center;
    }

/* logo size */
    .logo img {
        height: 115px;
        width: auto;
        transition: height 0.3s ease;
        -webkit-transition: height 0.3s ease;
        -moz-transition: height 0.3s ease;
        -ms-transition: height 0.3s ease;
        -o-transition: height 0.3s ease;
    }

    .main-nav ul {
        list-style: none;
        display: flex;
        gap: 30px;
        align-items: center;
        size: 120px;
        margin: 0;
        padding: 0;
    }

    .main-nav a {
        text-decoration: none;
        color: #40439c;
        font-size: 18px;
        font-weight: bold;
        padding: 8px 0;
        transition: color 0.3s;
        position: relative; /* For the underline effect */
        size: 120px;
        white-space: nowrap;
    }

    .main-nav a:hover, .main-nav a.active {
        color: #c58b43;
    }

    .main-nav a.active::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background: #c58b43;
        bottom: -2px;
        left: 0;
        transition: width 0.3 ease;
        -webkit-transition: width 0.3 ease;
        -moz-transition: width 0.3 ease;
        -ms-transition: width 0.3 ease;
        -o-transition: width 0.3 ease;
    }

    /* Hide the mobile menu toggle on desktop */
    .menu-toggle {
        display: none;
        width: 30px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        padding: 0;
        z-index: 1001;
    }

    /* The three bars */
    .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #40439c; /* ORE Blue */
        border-radius: 2px;
        position: absolute;
        transition: all 0.3s ease-in-out;
    }

    /* Position the bars */
    .menu-toggle span:nth-child(1) { top: 0; }
    .menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .menu-toggle span:nth-child(3) { bottom: 0; }

    /* When the menu is OPEN (optional: animate to an X) */
    .menu-toggle.active span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    @media (max-width: 768px) {
        .menu-toggle { display: block; }
    }

/* RESPONSIVE BREAKPOINTS */
/* Tablet & Smaller Desktop */
    @media (max-width: 1100px) {
        .menu-toggle { display: block; }

        .main-nav ul {
            gap: 15px; /* Tighter gap to stay in one line longer */
        }
        .logo img {
            height: 75px; /* Shrink logo slightly to save space */
        }

        .main-nav {
            position: absolute;
            top: 100%; /* Sits right under header */
            left: 0;
            width: 100%;
            background: white;
            max-height: 0; /* Hidden by default */
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }

    /* Use a JS class to toggle this */
        .main-nav.open {
            max-height: 500px; /* Expands menu */
        }

        .main-nav ul {
            flex-direction: column;
            padding: 20px 0;
            gap: 0;
        }

        .main-nav a {
            display: block;
            padding: 15px 5%;
            width: 90%;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .main-nav a.active::after {
            display: none; /* Hide horizontal underline on mobile */
        }

        .mobile-socials{
            margin-top: -10px;
        }

        .mobile-socials a{
            margin-left: -10px;
        }
    }

    @media (max-width: 375px) {
    /* Shift  */
        .mobile-menu-content{
            margin-top: -76px;
            
        }

        .mobile-menu-content li{
            margin-top: -15px;
        }

        .mobile-socials{
            margin-top: -10px;
        }

        .mobile-socials a{
            margin-left: -10px;
        }
    }







































/* --- 3. MAIN CONTENT SECTIONS --- */
/* Hero Section */
    .hero-section {
        position: relative;
    /* Account for header height to avoid scrolling on load */
        min-height: calc(100vh - 115px);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-color: #40439c; /* Fallback Academy Blue */
        padding: 100px 5%;
        text-align: center;
        color:#f9f9ff;
        text-shadow: #f9f9ff;

        padding: 60px 5%;
    /* Center the content vertically and horizontally */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    .hero-section h1 {
        font-size: clamp(3rem, 8vw, 5rem); /* Scales based on screen size */
        font-weight: 700; /* Extra Bold */
        line-height: 1.1; /* Tighter lines make it look 'fuller' */
        letter-spacing: -1px; /* Slightly closer letters for a modern look */
        color:#c58b43;
        max-width: 900px; /* Prevents text from stretching too wide on desktops */
        margin-bottom: 20px;
        text-transform: uppercase; /* Optional: adds more visual weight */
        text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
    }

/* Highlighted word within H1 */
    .hero-section h1 span {
        color: #c58b43; /* Academy Gold */
    }

    .hero-text-content {
        max-width: 800px;
        margin: auto auto;;
    }

    .hero-text-content .subtitle {
        font-size: clamp(1.1rem, 3vw, 1.4rem);
        font-weight: 400;
        color: #f9f9ff;
        max-width: 750px;
        margin: 0 auto 40px auto;
        line-height: 1.5;
        margin-bottom: 40px;
        opacity: 0.9;
    }

    /* HERO BUTTON */
    .hero-actions {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap; /* Wraps buttons on small screens */
    }

    .hero-actions .button {
        margin: 0;
        padding: 16px 40px;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

/* RESPONSIVE */
    @media (max-width: 768px) {
        .hero-section {
            padding: 40px 20px;
            min-height: 80vh; /* Shorter on mobile to show content below */
        }

        .hero-actions {
            flex-direction: column;
            width: 100%;
            max-width: 300px;
            /* Center everything*/
            margin: 0 auto; 
        }

        .hero-actions .button {
            width: 100%;
            text-align: center;
            /* Center the buttons */
            margin-bottom: 15px;
        }
    }

























/* USP Section */
/* --- INDUSTRIAL USP SECTION --- */
    .usp-section {
        padding: 100px 0;
        background-color: #fcfcfc; /* Subtle off-white to make white cards pop */
        content-visibility: auto;
        contain-intrinsic-size: 1px 500px; /* Estimates the height of the section */
    }

    .usp-intro {
        text-align: left; /* Aligns with our asymmetric design */
        max-width: 700px;
        margin-bottom: 60px;
    }

    .usp-intro .tagline {
        color: #c58b43;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 10px;
    }

    .usp-intro h2 {
        color: #40439c;
        font-size: clamp(2rem, 5vw, 2.8rem);
        font-weight: 750;
        margin: 0;
        text-align: left;
        line-height: 1.2;
    }

/* GRID LAYOUT */
    .usp-grid {
        display: grid;
        /* auto-fit creates as many columns as will fit, min 300px wide */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
    }

/* USP CARDS */
    .usp-card {
        display: flex;
        align-items: flex-start;
        padding: 40px 30px;
        background: #fff;
        border: 1px solid #e0e0e0;
        /* Hard Shadow instead of soft blur */
        box-shadow: 12px 12px 0px rgba(64, 67, 156, 0.05);
        border-left: 6px solid #c58b43; /* Gold accent */
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        cursor: default;
    }

    .usp-card:hover {
        box-shadow: 10px 10px 0px #40439c;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }

    .usp-icon-box {
        font-size: 2rem;
        color: #40439c;
        margin-right: 20px;
        margin-top: 5px;
        flex-shrink: 0; /* Prevents icon from squishing */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .usp-content h3 {
        color: #40439c;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 12px 0;
        margin-bottom: 10px;
        text-align: left;
    }

    .usp-content p {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.5;
        text-align: left;
        margin: 0;
    }

/* Mobile: Stack them nicely */
    @media (max-width: 768px) {
        .usp-section {
            padding: 60px 0;
        }
        .usp-grid {
            grid-template-columns: 1fr;
        }
        .usp-intro {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
        .usp-intro h2 { 
            text-align: center;
            margin-bottom: 10px;
        }
        .usp-card {
            padding: 30px;
            box-shadow: 8px 8px 0px rgba(64, 67, 156, 0.1); /* Slightly smaller shadow on mobile */
        }
    }

    @media (max-width: 480px) {
        .usp-card {
            flex-direction: column; /* Stack icon on top of text for narrow phones */
            text-align: center;
        }

        .usp-icon-box {
            margin-right: 0;
            margin-bottom: 20px;
            width: 100%;
        }

        .usp-content h3, .usp-content p {
            text-align: center;
        }
        .usp-intro h2 { 
            text-align: center;
            margin-bottom: 10px;
        }
    }















































/* --- INDUSTRIAL COURSE CARDS --- */
    .courses-preview-industrial {
        padding: 100px 0;
        background-color: #fcfcfc;
        overflow: hidden;
    }

    .preview-header {
        margin-bottom: 50px;
        text-align: center;
        font-weight: 600;
    }

    .preview-header .hollow-title {
        font-size: clamp(2rem, 6vw, 3.5rem);
        font-weight: 900;
        color: #a87630;
        line-height: 1;
        text-transform: uppercase;
    }

    .preview-header .solid-blue {
        color: #40439c;
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        font-weight: 800;
        margin-top: 5px;
        display: block;
    }

/* GRID LAYOUT */
    .industrial-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 50px;
    }

/* 1. The Main Container */
    .spec-card {
        width: 100%;
        height: 480px; /* IMPORTANT: Must have a fixed height */
        perspective: 1000px; /* Gives the 3D depth */
        background: transparent;
        border: 1px solid #eee;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* 2. The Rotating Wrapper */
    .card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform-style: preserve-3d; /* Keeps children in 3D space */
    }

    .spec-img-box {
        position: relative;
        height: 220px;
        overflow: hidden;
    }

    .spec-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* This is the magic property: it crops without stretching */
        transition: 0.8s ease;
        -webkit-transition: 0.8s ease;
        -moz-transition: 0.8s ease;
        -ms-transition: 0.8s ease;
        -o-transition: 0.8s ease;
    }

    .spec-tag {
        position: absolute;
        top: 20px;
        left: 0;
        background: #c58b43;
        color: white;
        padding: 8px 20px;
        font-size: 0.75rem;
        font-weight: 900;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        z-index: 10;
    }

    .spec-body {
        padding: 35px;
        text-align: left;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .spec-body h3 {
        color: #40439c;
        font-size: 1.5rem;
        margin: 0 0 15px 0;
        font-weight: 800;
        text-align: left;
    }

    .spec-body p {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 25px;
        text-align: left;
    }

    .spec-link {
        text-decoration: none;
        color: #c58b43;
        font-weight: 900;
        font-size: 0.85rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        transition: 0.3s;
        margin-top: auto; /* Pushes link to bottom of card */
    }

/* --- HOVER EFFECTS --- */
    .spec-card:hover .card-inner {
        transform: rotateY(180deg);
    }

    .spec-card:hover {
        transform: translate(-10px, -10px);
        box-shadow: 20px 20px 0px #40439c; /* Hard Offset Shadow */
    }

    /* 4. Common Face Styling */
    .card-front, .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
        background: #fff;
        border: 1px solid #eee;
        display: flex;
        flex-direction: column;
    }

    /* 5. Back Side Positioning */
    .card-back {
        transform: rotateY(180deg); /* Pre-rotated so it faces away */
        justify-content: center;
        background: #fff;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centers everything vertically */
        align-items: center;
        text-align: center;
    }

    .back-content {
        width: 100%;
    }

    .back-title {
        color: #40439c;
        font-size: 1.2rem;
        font-weight: 800;
        margin-bottom: 15px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .back-title.secondary {
        font-size: 0.9rem;
        margin-top: 20px;
    }

/* --- Style the List --- */
    .back-details {
        list-style: none;
        padding: 0;
        margin: 0 auto 20px;
        display: inline-block; /* Keeps the list items centered as a block */
        text-align: left;
    }

    .back-details li {
        font-size: 0.85rem;
        margin-bottom: 10px;
        color: #555;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .back-details i {
        color: #c58b43; /* Matches your accent color */
        width: 15px;
    }

    .details-list {
        list-style: none;
        padding: 0;
        display: inline-block;
        text-align: left;
    }

    .details-list li {
        font-size: 0.85rem;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #555;
    }

    .details-list i {
        color: #c58b43; /* Your gold accent */
        width: 18px;
    }

/* --- Subject "Pills" (Instead of a long paragraph) --- */
    .focus-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        margin-top: auto;
        margin-bottom: 20px;
    }

    .focus-tags span {
        background: #f0f1ff;
        color: #40439c;
        font-size: 0.7rem;
        padding: 4px 10px;
        border-radius: 50px; /* Rounded pill look */
        font-weight: 700;
    }

    .subject-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .subject-tags span {
        background: #f0f1ff;
        color: #40439c;
        font-size: 0.7rem;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 700;
    }

/* Force the footer to the bottom */
    .spec-footer {
        margin-top: auto; /* Forces the link to stick to the bottom */
        padding-top: 15px;
    }

    .card-back .spec-footer {
        margin-top: auto;
        width: 100%;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }

    .spec-card:hover .spec-img-box img {
        transform: scale(1.15);
        -webkit-transform: scale(1.15);
        -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -o-transform: scale(1.15);
    }

    .spec-card:hover .spec-link::after {
        margin-left: 12px;
    }

/* --- RESPONSIVE FIXES --- */
    @media (max-width: 768px) {
        .industrial-grid {
            grid-template-columns: 1fr;
            padding: 0 15px;
            gap: 40px;
        }

        .spec-card:hover {
            transform: translate(-5px, -5px);
            box-shadow: 10px 10px 0px #40439c; /* Smaller shadow on mobile */
        }
        .spec-body h3 {
        color: #40439c;
        font-size: 1.5rem;
        margin: 0 0 15px 0;
        font-weight: 800;
        text-align: left;
    }
    }




























/* Bottom CTA */
    .full-catalog-cta {
        margin-top: 60px;
        text-align: center;
    }

    .industrial-outline-btn {
        padding: 15px 40px;
        border: 2px solid #40439c;
        color: #40439c;
        text-decoration: none;
        font-weight: 900;
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: all 0.3s ease;
    }

    .industrial-outline-btn:hover {
        background: #40439c;
        color: white;
    }

/* --- INDUSTRIAL TESTIMONIALS --- */
    .testimonials-industrial {
        padding: 120px 0 180px 0;
        background-color: #40439c; /* Navy Base */
        color: white;
        position: relative;
        overflow: hidden;

        background-image: 
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 40px 40px; /* Creates a 30px grid */
    }

    /* Background Decoration - "VERIFIED" watermark */
    .testimonials-industrial::before {
        content: "VERIFIED";
        position: absolute;
        bottom: -20px;
        left: 20px;
        font-size: clamp(5rem, 15vw, 10rem);
        font-weight: 900;
        color: rgba(255, 255, 255, 0.03);
        pointer-events: none;
        z-index: 0;
    }

    .testimonial-header {
        margin-bottom: 60px;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    .testimonial-header .outline-text {
        display: block;
        font-size: 4rem;
        font-weight: 900;
        color: #a87630;
        -webkit-text-stroke: 1px #ffffff;
        line-height: 1;
        text-transform: uppercase;
    }

    .testimonial-header .solid-blue {
        display: block;
        font-size: clamp(2.5rem, 8vw, 4.5rem);
        font-weight: 900;
        color: #fff;
        line-height: 0.8;
        text-transform: uppercase;
    }

    /* Viewport & Slider */
    .testimonial-viewport {
        max-width: 900px;
        margin: 0 auto;
        min-height: 300px;
        position: relative;
        overflow: hidden;
        z-index: 2;
    }

    .testimonial-slide {
        display: none;
        text-align: left;
        padding: 50px;
        border-left: 5px solid #c58b43;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(1px);
        animation: fadeIn 0.6s ease-out;
        -webkit-animation: fadeIn 0.6s ease;
    }

    .testimonial-slide.active {
        display: block;
    }

    .quote-icon {
        font-size: 3.5rem;
        color: #c58b43;
        margin-bottom: 25px;
        display: block;
    }

    .testimonial-slide p {
        font-size: clamp(1.1rem, 3vw, 1.6rem);
        font-style: italic;
        line-height: 1.6;
        margin-bottom: 30px;
        color: #f1f1f1;
        font-weight: 300;
    }

    .testimonial-meta {
        display: flex;
        flex-direction: column;
    }

    .artisan-name {
        font-weight: 900;
        font-size: 1.2rem;
        color: #c58b43;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .artisan-trade {
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9rem;
        color: rgba(255,255,255,0.7);
        margin-top: 5px;
        letter-spacing: 1px;
    }

    /* Dots */
    .testimonial-dots {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 50px;
    }

    .dot {
        width: 30px;
        height: 6px;
        background: rgba(255,255,255,0.2);
        cursor: pointer;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }

    .dot.active {
        background: #c58b43;
        width: 60px;
    }

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

/* RESPONSIVE */
/* --- MOBILE RESPONSIVENESS --- */
    @media (max-width: 768px) {
        .testimonials-industrial {
            padding: 80px 0;
        }

        .testimonial-slide {
            padding: 30px 20px;
            margin: 0 15px;
        }

        .testimonial-header .outline-text, 
        .testimonial-header .solid-blue {
            line-height: 1.1;
        }

        .dot {
            width: 20px;
        }
        
        .dot.active {
            width: 40px;
        }
    }
















/* --- BLUEPRINT OFFSET FOOTER --- */
    #industrial-footer {
        background-color: #40439c; /* Brand Navy */
        padding: 100px 0 0 0;
        position: relative;
        overflow: hidden;
        color: white;
    }

/* Massive Ghost Text in Background */
    .footer-bg-text {
        position: absolute;
        top: -20px;
        right: -20px;
        font-size: clamp(8rem, 20vw, 15rem);
        font-weight: 900;
        color: rgba(255, 255, 255, 0.03);
        pointer-events: none;
        line-height: 1;
        z-index: 1;
    }

    .footer-main-content {
        display: flex;
        gap: 80px;
        padding-bottom: 80px;
        position: relative;
        z-index: 2;
    }

    .footer-brand-section {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligns logo and text to the left */
    }

    #industrial-footer::before {
        content: "SPEC-REF: ORE-2026-V1";
        position: absolute;
        writing-mode: vertical-rl;
        left: 20px;
        top: 100px;
        font-family: 'Courier New', monospace;
        font-size: 10px;
        color: rgba(255,255,255,0.2);
        letter-spacing: 3px;
        z-index: 1;
    }

    /* Logo Styling */
    .footer-logo-text {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        line-height: 0.9;
        position: relative;
        cursor: default;
    }

    .ore-main {
        font-size: 3.5rem; /* Large and Bold */
        font-weight: 900;
        color: #fff;
        letter-spacing: -2px;
        text-transform: uppercase;
    }

    .ore-sub {
        font-size: 1.2rem;
        font-weight: 700;
        color: #c58b43; /* Brand Gold */
        letter-spacing: 6px; /* Spread out for technical look */
        margin-top: 5px;
        padding-left: 4px;
        text-transform: uppercase;
    }

    .brand-line {
        width: 45px;
        height: 5px;
        background: #c58b43;
        margin-top: 15px;
        transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* Hover effect to make it feel "Interactive" */
    .footer-logo-text:hover .brand-line {
        width: 100%;
        transition: 0.4s ease-in-out;
        -webkit-transition: 0.4s ease-in-out;
        -moz-transition: 0.4s ease-in-out;
        -ms-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
    }

    .footer-mission {
        font-size: 1.1rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.7);
        max-width: 400px;
        text-align: left;
    }

    /* Right Side Grid */
    .footer-info-grid {
        flex: 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .footer-nav-col h4 {
        color: #c58b43; /* Brand Gold */
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 3px;
        margin-bottom: 30px;
        text-align: left;
        text-transform: uppercase;
    }

    .footer-nav-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-nav-col li {
        margin-bottom: 15px;
        text-align: left;
    }

    .footer-nav-col a, .footer-nav-col p {
        color: white;
        text-decoration: none;
        font-size: 0.95rem;
        line-height: 1.5;
        transition: 0.3s;
        text-align: left;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
}

    .footer-nav-col a:hover {
        color: #c58b43;
        padding-left: 8px;
    }

    /* Bottom Strip */
    .footer-technical-strip {
        background: rgba(0, 0, 0, 0.3);
        padding: 30px 0;
        margin-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .strip-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: 'Courier New', monospace;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
    }

    .strip-links a {
        color: rgba(255, 255, 255, 0.5);
        margin-left: 20px;
        text-decoration: none;
        transition: 0.3s;
    }

    .strip-links a:hover { color: #c58b43; }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 12px; /* Space between icon and text */
        margin-bottom: 15px;
        font-size: 0.95rem;
    }

    .contact-icon {
        color: #c58b43; /* Brand Gold */
        width: 20px;    /* Fixed width keeps text aligned vertically */
        font-size: 1.1rem;
        text-align: center;
    }

    .contact-item a {
        color: white;
        text-decoration: none;
        transition: 0.3s;
    }

    .contact-item a:hover {
        color: #c58b43;
    }

/* --- Social Media Links --- */
    .footer-socials {
        display: flex;
        gap: 12px;
        margin-top: 25px;
        margin-bottom: 30px;
    }

    .footer-socials a {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-decoration: none;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        border-radius: 2px; /* Slight rounding for a machined look */
    }

    .footer-socials a:hover {
        background-color: #c58b43; /* Brand Gold */
        border-color: #c58b43;
        color: #40439c; /* Brand Navy for contrast */
        transform: translateY(-3px);
    }


/* Mobile Adjustments */
/* --- RESPONSIVE ADJUSTMENTS --- */
    @media (max-width: 1100px) {
        .footer-main-content { gap: 40px; }
        .footer-info-grid { grid-template-columns: repeat(2, 1fr); }
        .footer-nav-col{
            display: none;
        }
    }

    @media (max-width: 768px) {
        #industrial-footer::before { display: none; } /* Hide sidebar spec on mobile */
        
        .footer-main-content {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer-brand-section {
            align-items: center;
        }

        .footer-mission {
            text-align: center;
        }

        .footer-info-grid {
            grid-template-columns: 1fr;
            width: 100%;
            gap: 50px;
        }

        .footer-nav-col h4, .footer-nav-col li {
            text-align: center;
        }

        .footer-socials {
            justify-content: center;
        }

        .strip-flex {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }

        .strip-links a {
            margin: 0 10px;
        }
        .footer-nav-col{
            display: none;
        }
    }

























/* --- PREMIUM MOBILE MENU --- */
    #mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        /*Slightlywiderformodernfeel*/max-width: 350px;
        height: 100vh;
        background: #40439c;
        /*SolidNavy*/z-index: 99999;
        padding: 50px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        /*Smootherslide*/box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        -webkit-transition: transform 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        -moz-transition: transform 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        -ms-transition: transform 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        -o-transition: transform 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
}

    #mobile-menu.visible {
        transform: translateX(0);
    }

/* Background Overlay when menu is open */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 99998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .menu-overlay.visible {
        display: block;
        opacity: 1;
    }

/* Close Button Styling */
    .menu-close {
        position: absolute;
        top: 25px;
        right: 25px;
        background: none;
        border: none;
        color: white;
        font-size: 2.2rem;
        cursor: pointer;
        line-height: 1;
        z-index: 2001;
        transition: transform 0.3s ease;
    }

    .menu-close:hover {
        transform: rotate(90deg);
        color: #c58b43;
    }

    .mobile-menu-content {
        padding: 80px 40px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .mobile-logo-area {
        margin-bottom: 40px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 25px;
    }

    .mobile-logo-area img {
        height: 45px;
        width: auto;
        filter: brightness(0) invert(1); /* Makes logo white */
    }

    #mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #mobile-menu li {
        margin-bottom: 10px;
        overflow: hidden; /* For entrance animation */
    }

    #mobile-menu a {
        text-decoration: none;
        color: white;
        font-size: 1.4rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        display: block;
        padding: 18px 0;
        transition: 0.3s ease;
        border-bottom: none; /* Removed the boring line */
    }

    #mobile-menu a.active {
        color: #c58b43; /* ORE Gold */
    }

    #mobile-menu a:hover {
        color: #c58b43;
        padding-left: 12px; /* Subtle interaction nudge */
    }

    /* Footer Section */
    .mobile-menu-footer {
        margin-top: auto; /* Pushes to bottom */
        padding-top: 40px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .mobile-menu-footer span {
        color: #c58b43;
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 3px;
        display: block;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .mobile-socials {
        display: flex;
        gap: 15px;
        color: white;
    }

    .mobile-socials a i {
        color: white;
        font-size: 1.2rem;
        transition: 0.3s;
    }

    .mobile-socials a:hover i {
        color: #c58b43;
    }

/* STAGGERED LINK ANIMATION */
    #mobile-menu.visible li {
        animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        opacity: 0;
    }

    #mobile-menu.visible li:nth-child(1) { animation-delay: 0.1s; }
    #mobile-menu.visible li:nth-child(2) { animation-delay: 0.15s; }
    #mobile-menu.visible li:nth-child(3) { animation-delay: 0.2s; }
    #mobile-menu.visible li:nth-child(4) { animation-delay: 0.25s; }
    #mobile-menu.visible li:nth-child(5) { animation-delay: 0.3s; }
    #mobile-menu.visible li:nth-child(6) { animation-delay: 0.35s; }


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

/* FORCE VISIBILITY ON MOBILE MENU ICONS */
    #mobile-menu .mobile-socials i {
        display: inline-block !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
        color: #ffffff !important;
        font-family: "Font Awesome 6 Brands" !important; /* Forces the correct font weight */
        font-weight: 400;
        font-size: 1.4rem;
        width: 45px;
        height: 45px;
        min-width: 25px;
        text-align: center;
        margin-left: -15px;
    }

    /* Ensure the links themselves aren't zero-width */
    #mobile-menu .mobile-socials a {
        display: inline-flex !important;
        text-decoration: none !important;
        padding: 10px;
    }





































/* CONTACT PAGE*/
/* --- INTERNAL PAGE STYLING (About & Contact) --- */
/* --- PRESTIGE CONTACT STYLES --- */
    #ore-contact-portal {
        --navy: #40439c;
        --gold: #c58b43;
        --off-white: #f9fbfb;
        background: #fff;
        overflow-x: hidden;
        min-height: 100vh;

    }

    /* ASYMMETRIC HEADER SECTION */
    .executive-contact-header {
        background: #fff;
        padding-top: 0px;
    }

    .header-split {
        display: flex;
        min-height: 600px;
        background: #f4f4f4;
    }

    .header-text-block {
        flex: 1.2;
        background: var(--navy);
        color: #fff;
        padding: 120px 8% 120px 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Industrial Angle */
        clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
        z-index: 2;
    }

    .inner-content { max-width: 550px; }

    .top-label {
        color: var(--gold);
        font-weight: 900;
        font-size: 0.8rem;
        letter-spacing: 3px;
        display: block;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .split-title {
        font-size: clamp(2.5rem, 6vw, 4rem);
        line-height: 1.1;
        font-weight: 900;
        margin-bottom: 30px;
        text-align: left;
    }

    .split-title .highlight {
        color: var(--gold);
        text-align: left;
        }

    .intro-p {
        font-size: 1.1rem;
        line-height: 1.6;
        opacity: 0.9;
        margin-bottom: 40px;
        font-weight: 300;
    }

    .quick-access-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 30px;
    }

    .q-item {
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: monospace;
        letter-spacing: 1px;
    }

    .q-item i { color: var(--gold); font-size: 1.1rem; }

/* VISUAL BLOCK (RIGHT SIDE) */
    .header-visual-block {
        flex: 1;
        margin-left: -8%;
        z-index: 1;
        position: relative;
    }

    .visual-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .visual-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(20%) contrast(1.1);
        animation: slowZoom 20s infinite alternate;
    }

    @keyframes slowZoom {
        from { transform: scale(1); }
        to { transform: scale(1.15); }
    }

    .floating-accent-box {
        position: absolute;
        bottom: 40px;
        right: 40px;
        background: #fff;
        padding: 25px;
        box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
        border-left: 5px solid var(--gold);
        position: absolute; bottom: 20px; right: -20px;
        z-index: 10;
    }

    .floating-accent-box strong { 
        display: block; 
        font-size: 1.2rem; 
        color: var(--navy);
        font-weight: 900;
    }

    .floating-accent-box span { 
        font-size: 0.8rem; 
        color: #666; 
        text-transform: uppercase;
        letter-spacing: 1px;
    }



/* FADE SLIDER STYLES */
/* Container for the slider */
    .fade-slider {
        position: relative;
        width: 100%;
        aspect-ratio: 2/3; /* Keeps height consistent to prevent scroll jumps */
        overflow: hidden;
        border-radius: 8px;
    }

    /* Position images on top of each other */
    .fade-slider img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: cssFadeLoop 12s infinite; /* 4s per image x 3 images */
    }

    /* Stagger the start times for each image */
    .fade-slider img:nth-child(1) { animation-delay: 0s; }
    .fade-slider img:nth-child(2) { animation-delay: 4s; }
    .fade-slider img:nth-child(3) { animation-delay: 8s; }

    @keyframes cssFadeLoop {
        0% { opacity: 0; }
        10% { opacity: 1; }  /* Fade In */
        33% { opacity: 1; }  /* Stay Visible */
        43% { opacity: 0; }  /* Fade Out */
        100% { opacity: 0; }
    }

/* MAIN SPLIT LAYOUT */
    .inquiry-section {
        padding: 120px 0;
    }

    .main-split {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 100px;
        align-items: start;
    }

    /* FORM STYLING */
    .form-heading h2 { font-size: 2.2rem; font-weight: 900; margin-bottom: 10px; }
    .form-heading p { color: #888; margin-bottom: 40px; font-size: 0.9rem; }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .field.full-width { grid-column: span 2; }

    .field label {
        display: block;
        font-weight: 900;
        font-size: 0.75rem;
        letter-spacing: 1px;
        margin-bottom: 10px;
        color: var(--navy);
        text-transform: uppercase;
    }

    .field input, .field select, .field textarea {
        width: 100%;
        padding: 18px;
        border: 1px solid #eee;
        background: var(--off-white);
        font-family: inherit;
        font-size: 1rem;
        transition: 0.3s;
    }

    .field input:focus, .field textarea:focus {
        outline: none;
        border-color: var(--gold);
        background: #fff;
        box-shadow: 10px 10px 0px rgba(197, 139, 67, 0.05);
    }

    .submit-action-btn {
        margin-top: 40px;
        background: var(--navy);
        color: #fff;
        border: none;
        padding: 22px 60px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 3px;
        cursor: pointer;
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -ms-transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .submit-action-btn:hover {
        background: var(--gold);
        transform: translate(-5px, -5px);
        box-shadow: 10px 10px 0px var(--navy);
    }

    /* SIDE INFO */
    .info-group { margin-bottom: 40px; }
    .info-group h4 { font-size: 0.8rem; letter-spacing: 2px; color: var(--gold); margin-bottom: 10px; }
    .info-group p, .info-group a { font-size: 1.1rem; color: var(--navy); font-weight: 700; text-decoration: none; }

    .embedded-map {
        height: 350px;
        border: 1px solid #eee;
        filter: grayscale(1) contrast(1.2);
        -webkit-filter: grayscale(1);
    }

    .embedded-map iframe {
        width: 100%; height: 100%; border: 0;
        pointer-events: none; /* Disables interaction by default */
        transition: 0.3s;
    }

    .embedded-map.active iframe {
        pointer-events: auto; /* Re-enables interaction when clicked */
    }

/* Styling for the clickable address in the contact section */
    .contact-map-link {
        color: white; /* Matches your header text color */
        text-decoration: none;
        transition: opacity 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

    .contact-map-link:hover {
        opacity: 0.8;
        text-decoration: underline; /* Optional: adds visual cue on hover */
    }

    /* Ensure the icon next to the link stays aligned */
    .q-item i {
        margin-right: 10px;
    }


/* MOBILE RESPONSIVE */
    @media (max-width: 1024px) {
        .header-split { min-height: auto; flex-direction: column; }
        .header-text-block { 
            clip-path: none; 
            padding: 80px 5%; 
            text-align: center;
            align-items: center;
        }
        .split-title { text-align: center; }
        .header-visual-block { 
            margin-left: 0; 
            height: 400px; 
        }    
        .main-split { 
            grid-template-columns: 1fr; 
            gap: 80px; 
        }
        .form-grid { grid-template-columns: 1fr; }
        .field.full-width { grid-column: span 1; }
        .floating-accent-box {
            bottom: 20px;
            right: 20px;
            padding: 20px;
        }
    }

    @media (max-width: 600px) {
        .form-grid { grid-template-columns: 1fr; }
        .field.full-width { grid-column: span 1; }
        .quick-access-icons { justify-content: center; }
    }































/* --- GLOBAL CONTAINER --- */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 25px;
    }

    .brand-line {
        height: 4px;
        width: 60px;
        background: #c58b43;
        margin: 20px 0;
    }

    /* --- INTERNAL HERO SECTION --- */
    .internal-hero-section {
        background-size: cover;
        background: linear-gradient(rgba(30, 31, 74, 0.85), rgba(30, 31, 74, 0.85)), 
                    url('images/Photo3.webp');
        background-position: center;
        color: white;
        padding: 120px 0;
        text-align: center;
        background-attachment: fixed; /* Parallax effect for depth */
        border-bottom: 5px solid #c58b43;
    }

    .internal-hero-section h1 {
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 900;
        margin-bottom: 10px;
        color: #c58b43; /* Industrial Gold */
        text-transform: uppercase;
        letter-spacing: -1px;   
    }

/* --- GALLERY SECTION --- */
    #ore-gallery-portal {
        --navy: #40439c;
        --gold: #c58b43;
        background: #fff;
    }

/* HERO & SPLIT SECTION (Same as previous for consistency) */
    .gallery-hero-v2 { 
        display: flex; 
        height: 80vh; 
        align-items: center; 
    }
    .hero-image-wrapper { 
        flex: 1.5; 
        height: 100%; 
        position: relative; 
        overflow: hidden; 
    }

    .hero-main-img { 
        width: 100%; 
        height: 100%; 
        background-size: cover; 
        background-position: center;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); 
    }

    .hero-text-wrapper { 
        flex: 1; 
        padding: 80px 5%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .outline-title { 
        font-size: clamp(3rem, 8vw, 5.5rem); 
        font-weight: 900; 
        line-height: 0.8; 
        color: var(--gold); 
        text-transform: uppercase;
    }

    .solid-blue { color: var(--navy); display: block;}

    .split-gallery-view { display: flex; }
    .gallery-sidebar { flex: 0.7; background: var(--navy); color: white; padding: 100px 50px; }
    .sticky-box { position: sticky; top: 100px; }
    .outline-text { -webkit-text-stroke: 1px #fff; color: transparent; }

/* GRID AREA */
    .gallery-main-grid {
        flex: 2; 
        padding: 80px 60px; 
        background-color: #f9f9f9;
        background-image: linear-gradient(rgba(249,249,249,0.96), rgba(249,249,249,0.96)),
                        url('https://www.transparenttextures.com/patterns/graphy.png');
    }

    .grid-layout { 
        display: block; 
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
        gap: 20px;
        column-count: 3;
        column-gap: 25px;
        padding: 20px 0;
    }

/* AUTOMATED CARD STYLING */
    .gallery-card {
        background: white; 
        border: 1px solid #eee; 
        padding: 12px;
        break-inside: avoid; /* Prevents card from splitting across columns */
        opacity: 0; 
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease;
        display: inline-block;
        width: 100%;
        margin-bottom: 20px;
        break-inside: avoid;
    }


    .gallery-card.revealed { opacity: 1; transform: translateY(0); }

    .gallery-card:hover { border-color: var(--gold); transform: translateY(-5px); }

    .card-image { 
        width: 100%; 
        height: auto; 
        overflow: hidden; 
        background: #111; 
    }

    .card-image img { 
        width: 100%; 
        height: auto;
        display: block;
        object-fit: cover; 
        filter: grayscale(100%); 
        transition: 0.5s ease; 
        cursor: zoom-in;
    }

    .gallery-card:hover img { filter: grayscale(0%); transform: scale(1.05); }

    .card-label { display: flex; justify-content: space-between; margin-top: 15px; font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; }
    .ref-no { color: var(--gold); font-weight: 900; }

    /* --- MINIMALIST CAMPUS FLOW (Mobile) --- */
    @media (max-width: 992px) {
            /* 1. CAMPUS VISUALS BLOCK: Full Width & Clean */
            .internal-hero-section {
                background: #fff; /* Kill the navy background */
                padding: 20px 0 0 0;
                text-align: center;
            }

            .internal-hero-section h1 {
                font-size: 2.2rem;
                color: var(--navy);
                -webkit-text-stroke: 0;
                margin-bottom: 2px;   /* Tightens space between Title and P tag */
            }

        .hero-image-wrapper {
            flex: none;
            width: 100%;
            height: 300px;
            margin: 0 auto 30px;
            overflow: hidden;
            border-radius: 8px;
            margin-top: -10px;    /* Reduced drastically from -90px to prevent overlap */
            margin-bottom: 0px;   /* Removed negative bottom margin to stabilize layout */
        }

        .internal-hero-section p {
            color: #666;
            font-size: 0.9rem;
            max-width: 80%;
            margin-bottom: 15px;  /* Control distance to the next block */
        }

        /* 2. THE TRANSITION BAR: Slim "Database" Strip */
        .split-gallery-view {
            flex-direction: column;
        }

        .gallery-sidebar {
            padding: 15px 20px;
            background: #f4f4f4; /* Light technical grey */
            color: var(--navy);
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .sticky-box {
            position: static;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Hide the bulky text, keep the "Inventory" feel */
        .gallery-sidebar p, 
        .gallery-sidebar .brand-line,
        .gallery-sidebar h3 { 
            display: none; 
        }

        .sticky-box .outline-text {
            font-size: 0.7rem;
            color: var(--navy);
            -webkit-text-stroke: 0;
            font-weight: 900;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* 3. THE GALLERY: Edge-to-Edge Grid */
        .gallery-main-grid {
            padding: 20px 10px;
            background: #fff;
            /*CENTER*/
            display: flex;
        }

        .grid-layout {
            display: grid;
            /* Change from 4 columns to 2 for better visibility on mobile */
            grid-template-columns: repeat(2, 1fr); 
            gap: 12px;
        }

        .gallery-card {
            margin-bottom: 10px;
            border: none;
            padding: 0;
            background: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .card-image {
            height: auto;
            width: 100%;
            aspect-ratio: 3 / 2; 
            /* Essential: This scales the image to fill the box without stretching */
            object-fit: cover; 
            /* Ensures the focus stays on the center of the landscape shot */
            object-position: center;
        }

        .card-label {
            padding: 8px;
            font-size: 0.55rem;
        }

        .hero-text-wrapper {
            margin-top: -90px;
            margin-bottom: -90px;
        }

        .gallery-sidebar{
            display: none;
        }

        #ore-gallery-portal{
            margin-top: -20px;
        }
    }

















/* LIGHTBOX */
    .lightbox-overlay {
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background: rgba(10, 11, 30, 0.98); /* Deep Navy-Black for contrast */    
        z-index: 9999; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        backdrop-filter: blur(5px);
    }

    #lightbox-img { 
        max-width: 90%; 
        max-height: 75vh; 
        border: 2px solid var(--gold); 
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
        object-fit: contain;
    }

    #lightbox-caption { 
        color: white; 
        margin-top: 15px; 
        letter-spacing: 2px; 
        font-weight: 900; 
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    .close-btn { 
        position: absolute; 
        top: 30px; 
        right: 30px; 
        color: white; 
        font-size: 40px; 
        cursor: pointer; 
        line-height: 1  ;
    }

    @media (max-width: 992px) {
        .split-gallery-view, .gallery-hero-v2 { flex-direction: column; }
        .hero-main-img { clip-path: none; height: 300px; }
    }






























/*CONTACT FORM POP UP*/
/* Popup Box */
/* Popup Overlay */
    .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* slightly darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    /* Prevent scrolling background when popup is open */
    overflow-y: auto;
    }

/* Popup Visible */
    .popup.visible {
    opacity: 1;
    visibility: visible;
    }

/* Popup Box */
    .popup-content {
    background: #fff;
    border-radius: 12px;
    padding: 40px 30px; 
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    max-width: 400px;
    width: 90%;
    position: relative; /* Context for absolute close button */
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    }

    /* When popup appears, scale up */
    .popup.visible .popup-content {
    transform: scale(1);
    }

    /* Success/Error States */
    .popup-content.success {
    border-left: 6px solid #28a745; /* green */
    }
    .popup-content.error {
    border-left: 6px solid #dc3545; /* red */
    }

    /* Close Button */
    #popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    padding: 5px; /* Increases touch target area */
    line-height: 1;
    color: #888;
    transition: color 0.2s ease;
    display: none !important;
    opacity: 0; pointer-events: none;
    }

    #popup-close:hover {
    color: #000;
    }

    /* Popup Text */
    #popup-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #40439c; /* academy blue */
    }
    #popup-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    }

/* --- MOBILE SPECIFIC ADJUSTMENTS --- */
    @media (max-width: 480px) {
        .popup-content {
            padding: 35px 20px; /* Narrower padding on small phones */
            width: 95%; /* Use more available width */
        }

        #popup-title {
            font-size: 1.25rem; /* Slightly smaller text */
        }

        #popup-text {
            font-size: 0.95rem;
        }

        /* Success/Error side borders can look cramped on mobile, 
            switching to top border is often cleaner */
        .popup-content.success, 
        .popup-content.error {
            border-left: none;
            border-top: 6px solid;
        }
    }














    /* --- ABOUT PAGE SPECIFIC STYLES --- */
    .internal-hero-section-about, 
    .usp-section, 
    .image-side {
        backface-visibility: hidden;
        transform: translateZ(0); /* Triggers GPU acceleration */
        perspective: 1000px;
    }

    #page-content .internal-hero-section-about {
        background-image: linear-gradient(rgba(42, 42, 42, 0.85), rgba(26, 26, 46, 0.85)), url('images/Photo3.webp');
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        padding: 120px 5%; /* Increased padding for more "prestige" weight */
        text-align: center;
        color: white;
        border-bottom: 5px solid #c58b43; /* ORE Gold bottom accent */
    }

    #page-content .internal-hero-section-about h1 {
        font-size: clamp(2rem, 8vw, 4rem); /* Responsive sizing */
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    }

    /* --- ABOUT CONTENT LAYOUT --- */
    #page-content .page-content-section {
        padding: 80px 5%;
    }

    #page-content .content-container {
        display: flex;
        align-items: center; 
        gap: 60px;
        max-width: 1200px;
        margin: 40px auto 0;
    }

    #page-content .text-side {
        flex: 1.2;
    }

    #page-content .text-side p {
        font-size: 1.15rem;
        line-height: 1.8;
        margin-bottom: 24px;
        color: #333; /* Darker for better professional readability */
    }

    #page-content .text-side b {
        color: #40439c; /* ORE Navy for emphasis */
        font-weight: 700;
    }

    /* --- IMAGE SIDE: THE INDUSTRIAL LOOK --- */
    #page-content .image-side {
        flex: 1;
        height: 500px; /* Fixed height for better slideshow stability */
        position: relative;
        border-radius: 0; /* Sharp corners look more professional/industrial than round */
        overflow: visible;
        /* Changed to a solid ORE Gold hard shadow for a premium architectural look */
        box-shadow: 25px 25px 0px 5px #c58b43; 
        background-color: #f0f0f0;
    }

    /* --- SLIDESHOW MECHANICS --- */
    #page-content .slideshow-container {
        width: 100%;
        height: 100%;
        position: relative;
        background: #eee;
        box-shadow: 25px 25px 0px 0px #c58b43; /* Applied to container, not wrapper */
        overflow: hidden; /* Keeps the images contained */
    }

    #page-content .mySlides {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
        opacity: 0; /* Hidden by default for JS to handle */
        transition: opacity 1s ease-in-out;
    }

    /* Show the first slide by default if JS hasn't loaded */
    #page-content .mySlides:first-child {
        opacity: 1;
    }

    /* --- RESPONSIVE FIXES --- */
    @media (max-width: 992px) {
        #page-content .content-container {
            flex-direction: column;
            gap: 40px;
            align-items: flex;
            text-align: center;
        }

        #page-content .brand-line{
            /* Center the brand line in mobile view */
            text-align: center;
            align-self: center;
        }
        
        #page-content .image-side {
            width: 85%;
            height: 350px;
            box-shadow: 15px 15px 0px -2px #c58b43; /* Scale down shadow for mobile */
            margin: 0 auto;
        }
        
        #page-content .slideshow-container {
            box-shadow: 15px 15px 0px 0px #c58b43;
        }

        #page-content .internal-hero-section-about h1 {
            font-size: 2.2rem;
        }

        #mobile-menu ul li a {
        font-size: 0.85rem; /* Reduced slightly from 1rem to fit small screens */
        white-space: nowrap; /* Prevents "CONTACT US" from splitting into two lines */
        display: block;
        width: 100%;
        }
    }

    /* --- MOBILE FIXES FOR SMALL SCREENS --- */
    @media (max-width: 768px) {
        #page-content .brand-line{
            /* Center the brand line in mobile view */
            text-align: center;
            align-self: center;
            display: none;
        }

        /* Stack About Us content vertically */
        .content-container {
            flex-direction: column;
            gap: 20px;
        }
        .text-side, .image-side {
            flex: 1 1 100%;
        }
        .image-side {
            display: block;
        }
        .slideshow-container {
            height: auto; /* Let images size naturally */
        }
        .mySlides {
            position: relative;
            height: auto;
            object-fit: cover;
        }

        /* Shrink headings */
        h1 {
            font-size: 2rem;
        }
        h2 {
            font-size: 1.5rem;
        }

        /* Center buttons */
        .primary-cta, .secondary-cta {
            display: block;
            width: 80%;
            margin: 15px auto;
            text-align: center;
        }


        /* Footer columns stacked */
        .footer-container {
            flex-direction: column;
            gap: 20px;
            padding: 20px 10px;
        }

        /* Internal hero section padding */
        .internal-hero-section-about {
            padding: 40px 10px;
        }

        /* Reduce slideshow border radius on small screens */
        .slideshow-container {
            border-radius: 5px;
        }

        #mobile-menu ul li a {
        white-space: nowrap; /* Prevents "CONTACT US" from splitting into two lines */
        display: block;
        width: 100%;
        }
    }

    @media (max-width: 480px) {
        #page-content .brand-line{
            /* Center the brand line in mobile view */
            text-align: center;
            align-self: center;
            display: none; /* Hide for very small screens */
        }

        /* Further reduce headings */
        h1 {
            font-size: 1.6rem;
        }
        h2 {
            font-size: 1.3rem;
        }

        /* Reduce padding for sections */
        .page-content-section, .testimonial-section {
            padding: 30px 10px;
        }

        /* Shrink logo */
        .logo img {
            height: 50px;
        }


        #mobile-menu ul li a {
        font-size: 0.85rem; /* Reduced slightly from 1rem to fit small screens */
        white-space: nowrap; /* Prevents "CONTACT US" from splitting into two lines */
        display: block;
        width: 100%;
        }
    }













































    /* --- NEW: MAP STYLING FOR RESPONSIVENESS --- */
    .map-container {
        /* Ensures the map is constrained and centered within the content area */
        max-width: 1000px; 
        margin: 40px auto; /* Center the map block and add spacing */
        height: 450px; /* Set the desired height */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-radius: 8px; 
        overflow: hidden; 
        padding: 0; /* Ensures no internal padding pushes the iframe */
        width: 95%; /* Added for mobile safety */
    }

    .map-container iframe {
        /* The iframe fills the constrained container */
        width: 100%; 
        height: 100%;
        border: none;
    }

    /* --- CURRICULUM LAYOUT --- */
    /* --- CUSTOM CATALOG STYLES --- */
    .catalog-section {
        padding: 100px 5%;
    }

    .feature-row {
        display: flex;
        align-items: center;
        margin-bottom: 150px; /* Large gaps for breathing room */
        position: relative;
    }

    .row-reverse {
        flex-direction: row-reverse;
    }

    .feature-image {
        flex: 1.2;
        height: 500px;
        background-size: cover;
        background-position: center;
        border: 1px solid #eee;
        box-shadow: 20px 20px 0px #40439c; /* Hard Blue Shadow */
        z-index: 1;
    }

    .feature-info {
        flex: 1;
        background: white;
        padding: 60px;
        margin-left: -100px; /* The Overlap */
        z-index: 2;
        box-shadow: 0 30px 60px rgba(0,0,0,0.1);
        position: relative;
    }

    .row-reverse .feature-info {
        margin-left: 0;
        margin-right: -100px; /* Reverse Overlap */
    }

    /* Technical Numbering */
    .tech-number {
        position: absolute;
        top: -40px;
        right: 40px;
        font-size: 8rem;
        font-weight: 900;
        color: rgba(64, 67, 156, 0.05); /* Ghostly background number */
        line-height: 1;
        pointer-events: none;
    }

    .gold-tag {
        color: #c58b43;
        text-transform: uppercase;
        letter-spacing: 2px;
        display: block;
        background-color: #c58b43;
        padding: 6px 15px;
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 2px;
        display: inline-block;
        margin-bottom: 15px;
        border-radius: 2px;
        /*change font colour*/
        color: white;
    }

    .feature-info h2 {
        text-align: left;
        font-size: 2.5rem;
        color: #40439c;
        margin-bottom: 20px;
    }

    /* Trade Chips (Modern alternative to lists) */
    .trade-chip-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 25px 0;
    }

    .trade-chip-container span {
        background: #f4f4f4;
        padding: 8px 15px;
        font-size: 0.85rem;
        font-weight: 600;
        color: #40439c;
        border-radius: 4px;
    }

    .industrial-link {
        display: inline-block;
        color: #40439c;
        text-decoration: none;
        font-weight: 900;
        border-bottom: 3px solid #c58b43;
        padding-bottom: 5px;
        transition: 0.3s;
    }

    .industrial-link:hover {
        color: #c58b43;
        letter-spacing: 1px;
    }

    /* Mobile Adjustments */
    @media (max-width: 992px) {
        .feature-row, .row-reverse {
            flex-direction: column;
        }
        .feature-info {
            margin: -50px 20px 0 20px;
            padding: 30px;
        }
    }

    .mega-hero {
        display: flex;
        height: 90vh; /* Fills most of screen but shows start of next section */
        width: 100%;
        overflow: hidden;
    }

    /* Left Side: The Visual Power */
    .hero-image-block {
        flex: 1.2;
        background: linear-gradient(rgba(64, 67, 156, 0.2), rgba(64, 67, 156, 0.5)), 
                    url('images/Courses.webp');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .hero-outline-text {
        font-size: clamp(6rem, 15vw, 12rem);
        font-weight: 900;
        color: transparent;
        -webkit-text-stroke: 2px rgba(255,255,255,0.6);
        line-height: 0.8;
        letter-spacing: -5px;
        pointer-events: none; /* User can click through the text */
    }

    /* Right Side: The Information */
    .hero-copy-block {
        flex: 1;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 60px;
    }

    .inner-content {
        max-width: 500px;
    }

    .eyebrow {
        color: #c58b43;
        font-weight: 700;
        letter-spacing: 3px;
        font-size: 0.8rem;
        display: block;
        margin-bottom: 20px;
    }

    .main-title {
        font-size: clamp(2.5rem, 5vw, 4rem);
        color: #40439c;
        line-height: 1.1;
        margin-bottom: 25px;
        text-align: left; /* Breaks the generic centered look */
    }

    .gold-accent {
        color: #c58b43;
    }

    .hero-copy-block p {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 40px;
        line-height: 1.6;
    }

    .hero-btn-group {
        display: flex;
        gap: 15px;
    }
    

    /* Mobile Fix */
    /* --- RESPONSIVE FIXES (TABLET) --- */
    @media (max-width: 992px) {
        /* Catalog Rows */
        .feature-row, .row-reverse {
            flex-direction: column;
            margin-bottom: 80px;
        }

        .feature-info, .row-reverse .feature-info {
            margin: -60px 5% 0 5%; /* Negative top margin creates a vertical overlap */
            padding: 40px 30px;
            width: 90%;
        }

        /* Mega Hero */
        .mega-hero {
            flex-direction: column;
            height: auto;
        }

        .hero-image-block {
            height: 50vh;
        }

        .hero-outline-text {
            font-size: 8rem;
        }

        .hero-copy-block {
            padding: 60px 5%;
            justify-content: center;
            text-align: center;
        }

        .main-title {
            text-align: center;
        }

        .hero-btn-group {
            justify-content: center;
        }

        .feature-image{
            display: none;
        }
    }

    /* --- RESPONSIVE FIXES (MOBILE) --- */
    @media (max-width: 768px) {
        .map-container {
            height: 300px;
        }

        .feature-info h2 {
            font-size: 1.8rem;
        }

        .tech-number {
            font-size: 5rem;
            top: -20px;
            right: 20px;
        }

        .trade-chip-container {
            justify-content: center;
        }

        .hero-outline-text {
            font-size: 5rem;
            -webkit-text-stroke: 1px rgba(255,255,255,0.6);
        }

        .feature-image{
            display: none;
        }
    }

    @media (max-width: 480px) {
        .catalog-section {
            padding: 60px 0;
        }

        .feature-image {
            height: 250px;
            display: none;
        }

        .feature-info {
            padding: 30px 20px;
        }

        .hero-btn-group {
            flex-direction: column; /* Stack buttons on very small phones */
            width: 100%;
        }

        .hero-btn-group a {
            width: 100%;
            margin-bottom: auto;
        }
    }




































    /* --- Admissions Page --- */
    /* --- ADMISSIONS PORTAL STYLES --- */

    #admissions-portal {
        background: #f9f9f9;
        min-height: 100vh;
    }

    .split-admission-hero {
        display: flex;
        max-width: 1400px;
        margin: 0 auto;
    }

    .admission-sidebar {
        flex: 1;
        padding: 100px 50px;
        background: #40439c; /* Brand Blue */
        color: white;
    }

    .sticky-box {
        position: sticky;
        top: 150px;
    }

    .admission-sidebar h1 {
        color: white;
        text-align: left;
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        line-height: 1;
        margin: 20px 0;
    }

    .admission-steps {
        flex: 1.5;
        padding: 100px 50px;
        background: #fff;
    }

    .step-card {
        position: relative;
        padding: 40px;
        background: #fff;
        border: 1px solid #eee;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .step-num {
        position: absolute;
        top: -20px;
        left: 20px;
        background: #c58b43; /* Brand Gold */
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.2rem;
    }

    .step-card h3 {
        text-align: left;
        color: #40439c;
        margin-bottom: 20px;
    }

    /* Industrial Form Elements */
    .industrial-input {
        width: 100%;
        padding: 15px;
        border: 2px solid #f0f0f0;
        margin-bottom: 15px;
        font-family: 'Roboto', sans-serif;
        outline: none;
        transition: 0.3s;
    }

    .industrial-input:focus {
        border-color: #c58b43;
    }

    .form-row {
        display: flex;
        gap: 15px;
    }

    .file-upload {
        display: block;
        border: 2px dashed #ccc;
        padding: 40px;
        text-align: center;
        cursor: pointer;
        color: #888;
        transition: 0.3s;
    }

    .file-upload:hover {
        border-color: #40439c;
        color: #40439c;
        background: #f9f9ff;
    }

    .full-width {
        width: 100%;
        padding: 20px;
        font-size: 1.2rem;
        margin-top: 20px;
    }

    .disclaimer {
        font-size: 0.8rem;
        color: #aaa;
        margin-top: 15px;
        text-align: center;
    }

    .upload-drop-container {
        border: 2px dashed #40439c; /* ORE Blue */
        background: #f9f9ff;
        padding: 40px 20px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 15px;
    }

    .upload-drop-container.drag-over {
        background: #eef0ff;
        border-color: #c58b43; /* ORE Gold */
        transform: scale(1.02);
    }

    .drop-zone-content i {
        font-size: 3rem;
        color: #40439c;
        margin-bottom: 10px;
    }

    .browse-link {
        color: #c58b43;
        text-decoration: underline;
        font-weight: 700;
    }

    .file-preview-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f9fa;
        border: 1px solid #ddd;
        padding: 8px 12px;
        margin-bottom: 5px;
        border-radius: 4px;
        flex-direction: column; /* Stack items vertically */
        gap: 10px;

        margin-top: 15px;
        text-align: left;
        font-size: 0.9rem;
        width: 100%;
    }

    .remove-file {
        color: #ff4d4d;
        cursor: pointer;
        padding: 5px;
    }

    .remove-file:hover {
        color: #cc0000;
    }

    .upload-drop-container {
        padding: 20px;
        border: 2px dashed #ccc;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 150px; /* Big enough for thumbs */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .file-preview-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px; /* Larger tap target */
        margin-top: 8px;
        background: #fdfdfd;
        border: 1px solid #ddd;
        word-break: break-all; /* Prevents long filenames from breaking mobile layout */
        width: 100%;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .file-item {
        background: #fff;
        border: 1px solid #ddd;
        padding: 8px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-left: 4px solid #c58b43;
    }

    /* Industrial Spinner Animation */
    .fa-spin {
        animation: fa-spin 2s infinite linear;
    }

    button:disabled {
        background-color: #4a4a4a !important;
        border-color: #333 !important;
        color: #ccc !important;
    }

    /* Optional: Add a progress bar feel to the button */
    #submit-btn {
        position: relative;
        overflow: hidden;
    }


    /* --- CURRICULUM BRIEFING STYLES --- */

    /* --- ADMISSIONS HERO V2 --- */
    .admissions-hero-v2 {
        display: flex;
        height: 90vh;
        overflow: hidden;
        background: #fff;
        align-items: center;
        gap: 0;
        content-visibility: auto;
        contain-intrinsic-size: 1000px;
        background-attachment: scroll;
        /*force GPU acceleration*/
        will-change: transform;
        transform: translateZ(0);
    }

    .hero-image-wrapper {
        flex: 1.5;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .hero-main-img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); /* Unique Industrial Cut */
        will-change: transform; /* Tells the browser to prepare for movement */
    }

    .img-caption {
        position: absolute;
        bottom: 50px;
        left: 50px;
        background: #c58b43;
        color: white;
        padding: 10px 20px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .hero-text-wrapper {
        flex: 1;
        padding: 80px;
        z-index: 10;
    }

    .hero-text-wrapper .outline-title {
        font-size: clamp(3rem, 8vw, 6rem);
        font-weight: 900;
        line-height: 0.8;
        color: #c58b43;
        margin-bottom: 20px;
    }

    .hero-text-wrapper .solid-blue {
        color: #40439c;
    }

    .hero-scroll-indicator {
        margin-top: 50px;
        color: #c58b43;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 15px;
        animation: bounce 2s infinite;
    }

    .hero-main-img, .admissions-hero-v2 {
        transform: translateZ(0); /* Forces GPU Acceleration */
        backface-visibility: hidden;
        perspective: 1000;
    }

    .usp-section, .curriculum-briefing {
        content-visibility: auto; /* Only renders the section when it's about to be scrolled into */
        contain-intrinsic-size: 500px; 
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-10px);}
        60% {transform: translateY(-5px);}
    }

    .curriculum-briefing {
        padding: 80px 50px;
        background: #ffffff;
        border-bottom: 1px solid #eee;
    }

    .briefing-header {
        margin-bottom: 60px;
    }

    .briefing-header .outline-text {
        font-size: 5rem;
        font-weight: 900;
        color: transparent;
        -webkit-text-stroke: 1px #40439c;
        line-height: 0.8;
    }

    .briefing-header .solid-blue {
        font-size: 3rem;
        font-weight: 900;
        color: #40439c;
        line-height: 0.8;
    }

    .briefing-intro {
        margin-top: 20px;
        font-size: 1.2rem;
        color: #666;
        max-width: 600px;
        margin: auto;
    }

    .briefing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
    }

    .brief-item {
        padding: 30px;
        border-left: 4px solid #c58b43; /* Academy Gold */
        background: #fcfcfc;
        transition: 0.3s;
    }

    .brief-item:hover {
        background: #f4f4f4;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }

    .brief-cat {
        font-size: 0.75rem;
        font-weight: 900;
        color: #c58b43;
        letter-spacing: 2px;
        display: block;
        margin-bottom: 15px;
    }

    .brief-item h3 {
        color: #40439c;
        margin-bottom: 15px;
        font-size: 1.4rem;
    }

    .brief-item p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #555;
    }

    .brief-item strong {
        color: #40439c;
    }

    /* Ensure messages are truly hidden until needed */
    #email-error, #id-error, #phone-error, #file-error {
        display: none; 
        margin-top: 5px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    /* State-based display */
    .industrial-input.is-invalid + .error-msg,
    .industrial-input.is-invalid ~ .error-msg {
        display: block !important;
        color: #ff4d4d;
    }

    /* Smooth border transitions */
    .industrial-input {
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .industrial-input.is-valid {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
    }

    .industrial-input.is-invalid {
        border-color: #ff4d4d !important;
        box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.1);
    }

    /* Only show red borders after the user has tried to submit at least once */
    .form-submitted .industrial-input:invalid {
        border-color: #ff4d4d !important;
        background-color: #fff5f5;
    }

    /* Optional: Show a subtle green glow for fields they've already fixed */
    .form-submitted .industrial-input:valid {
        border-color: #28a745 !important;
    }

    .file-info {
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden; /* Crucial for mobile */
        flex: 1;
    }

    .file-name-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Turns long names into "longfile..." */
        color: #333;
    }

    .remove-file-btn {
        background: none;
        border: none;
        color: #ff4d4d;
        cursor: pointer;
        padding: 5px 10px;
        font-size: 16px;
        flex-shrink: 0; /* Prevents the button from getting squashed */
    }

    .remove-file-btn:hover {
        color: #b30000;
    }




    /* --- TABLET (992px) --- */
    @media (max-width: 992px) {
        .split-admission-hero, 
        .admissions-hero-v2 {
            flex-direction: column;
            height: auto;

        }

        .hero-image-wrapper{
            height: 300px;
        }

        .admission-sidebar {
            padding: 60px 5%;
            text-align: center;
        }

        .admission-sidebar h1 {
            text-align: center;
        }

        .sticky-box {
            position: static; /* Remove sticky for stacked mobile layout */
        }

        .admission-steps {
            padding: 60px 5%;
        }

        /* Hero V2 Adjustments */
        .hero-image-wrapper {
            width: 100%;
            height: 50vh;
        }

        .hero-main-img {
            clip-path: none; /* Remove industrial cut on mobile for better image visibility */
        }

        .hero-text-wrapper {
            padding: 40px 5%;
            text-align: center;
        }

        .hero-scroll-indicator {
            justify-content: center;
        }

        /* Briefing Section */
        .briefing-header .outline-text { font-size: 3.5rem; }
        .briefing-header .solid-blue { font-size: 2rem; }

        .drop-zone-content p {
            font-size: 14px;
        }
    }

    /* --- MOBILE (768px) --- */
    @media (max-width: 768px) {
        .form-row {
            flex-direction: column; /* Stack first/last name inputs */
            gap: 0;
        }

        .step-card {
            padding: 40px 20px 20px 20px;
            margin-bottom: 40px;
        }

        .step-num {
            left: 50%;
            transform: translateX(-50%); /* Center number on mobile */
        }

        .briefing-grid {
            grid-template-columns: 1fr; /* Force single column */
        }

        .file-upload {
            padding: 25px 15px;
        }

        .img-caption {
            left: 20px;
            bottom: 20px;
            font-size: 0.8rem;
        }

        .drop-zone-content p {
            font-size: 14px;
        }
        .file-info {
            font-size: 12px;
        }
    }

    /* --- SMALL MOBILE (480px) --- */
    @media (max-width: 480px) {
        .hero-text-wrapper .outline-title {
            font-size: 2.5rem;
        }

        .hero-text-wrapper{
            margin-top: 10px;
        }

        .hero-image-wrapper{
            display: none;
        }

        .briefing-intro {
            font-size: 1rem;
            padding: 0 10px;
            text-align: center;
        }

        .industrial-input {
            padding: 12px;
            font-size: 16px; /* Prevents iOS auto-zoom on focus */
        }

        .brief-item h3 {
            font-size: 1.4rem;
            text-align: left;
        }

        .brief-item {
            padding: 20px;
        }

        .brief-item p{
            text-align: left;
            font-size: 0.9rem;
        }

        .briefing-header .outline-text { font-size: 2.5rem; }

        .admission-sidebar{
            padding: 40px 20px;

        }

        #admission-steps {
            padding: 40px 20px;
        }

        .admission-sidebar h1 {
            font-size: 2rem;
        }

        .admission-sidebar p {
            font-size: 2rem;
            display: none
        }

        /* Add a small gold accent bar under the title for mobile visual flair */
        .admission-sidebar h1::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: #c58b43;
            margin: 15px auto 0;
        }

        .drop-zone-content p {
            font-size: 14px;
        }
        .file-info {
            font-size: 12px;
        }
    }




































    /* --- CUSTOM SCROLLBAR --- */
    /* For Chrome, Edge, and Safari */
    ::-webkit-scrollbar {
        width: 12px; /* Width of the entire scrollbar */
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color of the tracking area */
    }

    ::-webkit-scrollbar-thumb {
        background-color: #40439c; /* ORE Academy Navy Blue */
        border-radius: 10px;       /* Roundness of the scroll thumb */
        border: 3px solid #f1f1f1; /* Creates padding around the thumb */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #c58b43; /* Changes to Gold on hover */
    }

    /* For Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #c58b43 #f1f1f1;
    }

    /* --- CUSTOM SCROLLBAR RESPONSIVE --- */
    @media (max-width: 768px) {
        ::-webkit-scrollbar {
            width: 6px; /* Thinner on mobile */
        }
        ::-webkit-scrollbar-thumb {
            border: 1px solid #f1f1f1; /* Less padding */
        }
    }


/* --- Contact Us --- */
/* --- ISOLATED CONTACT STYLES --- */
    #ore-contact-portal {
        --navy: #40439c;
        --gold: #c58b43;
        --light-bg: #f8f9fa;
        --industrial-gray: #e9ecef;
        background: #fff;
        font-family: 'Roboto', sans-serif;
        overflow: hidden; /* This forces the container to contain its floated children */
        width: 100%;
    }

    /* HERO SECTION */
    #ore-contact-portal .contact-hero {
        padding: 100px 5% 60px;
        background: #fff;
        position: relative;
    }

    #ore-contact-portal .outline-title {
        font-size: clamp(3.5rem, 8vw, 6rem);
        font-weight: 900;
        line-height: 0.85;
        color: var(--gold);
    }

    #ore-contact-portal .solid-blue { color: var(--navy); }

    #ore-contact-portal .gold-tag {
        display: inline-block;
        background: var(--gold);
        color: #fff;
        padding: 5px 12px;
        font-size: 0.75rem;
        font-weight: 900;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    /* MAIN GRID LAYOUT */
    #ore-contact-portal .contact-main-grid {
        display: grid;
        grid-template-columns: 1fr 2fr 1.5fr; /* 3-Column Split */
        border-top: 2px solid #000;
    }

    /* COLUMN 1: SIDEBAR */
    #ore-contact-portal .contact-sidebar {
        background: var(--navy);
        color: #fff;
        padding: 60px 40px;
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    #ore-contact-portal .sidebar-block { margin-bottom: 50px; }
    #ore-contact-portal .sidebar-block h3 {
        font-size: 0.8rem;
        letter-spacing: 3px;
        color: var(--gold);
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 10px;
    }

    #ore-contact-portal .contact-link {
        display: block;
        text-decoration: none;
        color: #fff;
        margin-bottom: 20px;
    }

    #ore-contact-portal .contact-link small { display: block; font-size: 0.65rem; opacity: 0.6; text-transform: uppercase; }
    #ore-contact-portal .contact-link span { font-weight: 700; font-size: 1.1rem; }

    #ore-contact-portal .stat-box {
        background: rgba(255,255,255,0.05);
        padding: 20px;
        border-left: 4px solid var(--gold);
    }

    #ore-contact-portal .stat-box .val { display: block; font-size: 2rem; font-weight: 900; color: var(--gold); }

    /* COLUMN 2: FORM AREA */
    #ore-contact-portal .contact-form-area {
        padding: 60px;
        background: var(--light-bg);
    }

    #ore-contact-portal .terminal-header {
        background: #000;
        color: #fff;
        padding: 8px 15px;
        font-family: monospace;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #ore-contact-portal .terminal-header .dot {
        width: 8px; height: 8px; background: #ff5f56; border-radius: 50%;
    }

    #ore-contact-portal .brutalist-form {
        padding: 40px;
        background: #fff;
        border: 1px solid #ddd;
        border-top: none;
    }

    #ore-contact-portal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

    #ore-contact-portal .field { margin-bottom: 25px; }
    #ore-contact-portal .field label {
        display: block;
        font-family: monospace;
        font-size: 0.7rem;
        font-weight: 900;
        margin-bottom: 8px;
        color: #555;
    }

    #ore-contact-portal input, 
    #ore-contact-portal select, 
    #ore-contact-portal textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        background: #fdfdfd;
        font-family: inherit;
        font-size: 1rem;
        border-radius: 0;
    }

    #ore-contact-portal input:focus { outline: 2px solid var(--gold); border-color: transparent; }

    #ore-contact-portal .submit-btn {
        width: 100%;
        background: var(--navy);
        color: #fff;
        border: none;
        padding: 20px;
        font-weight: 900;
        letter-spacing: 2px;
        cursor: pointer;
        transition: 0.3s;
    }

    #ore-contact-portal .submit-btn:hover { background: var(--gold); transform: translateY(-3px); }

    /* COLUMN 3: MAP HUB */
    #ore-contact-portal .contact-map-area { position: relative; }
    #ore-contact-portal .map-wrapper { height: 100%; position: relative; }
    #ore-contact-portal iframe { width: 100%; height: 100%; min-height: 500px; border: 0; filter: grayscale(1); }

    #ore-contact-portal .map-overlay {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background: #fff;
        padding: 25px;
        border-top: 4px solid var(--navy);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    #ore-contact-portal .map-btn {
        display: inline-block;
        margin-top: 15px;
        color: var(--navy);
        text-decoration: none;
        font-weight: 900;
        font-size: 0.8rem;
        border-bottom: 2px solid var(--gold);
    }

    /* RESPONSIVENESS */
    @media (max-width: 1100px) {
        #ore-contact-portal .contact-main-grid { grid-template-columns: 1fr; }
        #ore-contact-portal .contact-sidebar { display: flex; flex-wrap: wrap; gap: 30px; }
        #ore-contact-portal .sidebar-block { flex: 1; min-width: 250px; }
    }












































































/* INDEX POP UP*/
/* --- THE EXECUTIVE MODAL --- */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 25, 0.95); /* Deeper navy tint */
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        padding: 15px;
        backdrop-filter: blur(5px); /* Modern touch */
    }

    .modal-window {
        display: flex;
        width: 100%;
        max-width: 900px;
        background: white;
        border: 1px solid #c58b43;
        /* Box shadow adjusted for mobile safety */
        box-shadow: 20px 20px 0px rgba(197, 139, 67, 0.2);
        animation: modalSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        max-height: 90vh; /* Prevents modal from being taller than screen */
        overflow-y: auto; /* Allows scrolling inside modal if content is long */
    }

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

/* Sidebar Styling */
    .modal-sidebar {
        background: #40439c;
        color: white;
        padding: 40px;
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-right: 4px solid #c58b43;
    }

    .modal-logo {
        width: 100%;
        filter: brightness(0) invert(1);
    }

/* Content Area */
    .modal-main {
        flex: 1;
        padding: 60px 40px;
        position: relative;
        background: #fff;
    }

    .modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 32px;
        color: #40439c;
        cursor: pointer;
    }

    .section-tag {
        display: block;
        color: #c58b43;
        font-weight: 900;
        letter-spacing: 2px;
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .modal-section { margin-bottom: 30px; }

    .subject-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .subject-grid span {
        font-size: 0.9rem;
        font-weight: 600;
        color: #333;
    }

    .modal-btn {
        display: block;
        width: 100%;
        padding: 18px;
        background: #40439c;
        color: white;
        text-align: center;
        text-decoration: none;
        font-weight: 900;
        margin-top: 20px;
        border: 1px solid transparent;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
    }

    .modal-btn:hover {
        background: white;
        color: #40439c;
        border: 1px solid #40439c;
    }

    @media (max-width: 1280px) {
        .modal-window {
            max-width: 700px;
            box-shadow: 15px 15px 0px rgba(197, 139, 67, 0.2);
        }

        .sidebar-text{
            display: none;
        }

        .modal-overlay.active {
        display: flex !important;
        }
    }

    @media (max-width: 992px) {
        .modal-window {
            max-width: 700px;
            box-shadow: 15px 15px 0px rgba(197, 139, 67, 0.2);
        }

        .sidebar-text{
            display: none;
        }
    }

    @media (max-width: 768px) {
        .modal-window { 
            flex-direction: column; 
            box-shadow: 10px 10px 0px rgba(197, 139, 67, 0.2);
            max-height: 85vh;
        }
        .modal-sidebar { 
            width: 100%; 
            padding: 20px; 
            flex-direction: row; /* Align logo and text horizontally on mobile */
            align-items: center;
            border-right: none;
            border-bottom: 4px solid #c58b43;
        }

        .modal-logo {
            width: 120px; /* Smaller logo in header style */
            margin-bottom: 0;
        }

        .modal-main { 
            padding: 30px 20px; 
        }

        .modal-close {
            top: 10px;
            right: 15px;
            font-size: 28px;
            color: navy; /* White on mobile to stand out against navy sidebar */
            z-index: 11;

        }

        .subject-grid {
            grid-template-columns: 1fr; /* Stack subjects on small phones */
            gap: 8px;
        }

        .sidebar-text {
            text-align: right;
        }

        .sidebar-footer{
            display: none;
        }
    }

    @media (max-width: 480px) {
        .modal-window {
            width: 95%;
            margin: 0 auto;
        }

        .modal-sidebar {
            padding: 15px;
        }

        .modal-main h2 {
            font-size: 1.4rem;
        }

        .modal-btn {
            padding: 15px;
            font-size: 1rem;
        }

        .footer-logo-text {
            /* Center */
            text-align: center;
            margin:10px auto -10px auto;
        }

        .sidebar-text {
            display: none; /* Hide sidebar text on very small screens for simplicity */
        }

        .sidebar-footer{
            display: none;
        }
    }


/* --- Footer Accreditation --- */
    .accreditation-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    }

    .acc-item {
        display: flex;
        align-items: center;
        gap: 15px;
        background: rgba(255, 255, 255, 0.03);
        padding: 10px;
        border-left: 3px solid #f39c12;
    }

    .acc-text {
        font-size: 0.7rem;
        line-height: 1.4;
        color: #bdc3c7;
    }

    .acc-text strong {
        color: #ffffff;
        letter-spacing: 1px;
    }

    .acc-badge {
        height: 35px;
        width: auto;
        filter: brightness(0) invert(1); /* Makes logos white for the dark footer */
        opacity: 0.8;
    }

    /* This connects your JavaScript .active class to your CSS display: none */
    .modal-overlay.active {
        display: flex !important;
    }
































/* 24 JAN 2026 - Updates */
    html {
        scroll-behavior: smooth;
    }

    /* Optional: Offset for Fixed Headers */
    #matric {
        scroll-margin-top: 100px; /* Adjust this value if you have a sticky/fixed navbar */
    }

    #matric:target {
    animation: highlight 2s ease-out;
    }

    @keyframes highlight {
        0% { background-color: rgba(255, 215, 0, 0.3); } /* Slight gold glow */
        100% { background-color: transparent; }
    }

    .stat-divider {
        background: #c58b43; /* Your gold/bronze accent color */
        padding: 30px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        z-index: 5;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .stat-item i {
        font-size: 1.5rem;
    }

    .stat-item strong {
        display: block;
        font-size: 1.2rem;
    }

    @media (max-width: 768px) {
        .stat-divider {
            flex-direction: column; /* Stack the stats on top of each other */
            gap: 20px;
            text-align: center;
        }
        
        .stat-item {
            width: 100%;
            justify-content: center;
        }
    }

    /* Success Page Specifics */
    .success-actions {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .next-steps li {
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        list-style: none; /* Removes the default bullet */
    }

    /* Custom checkmark for the list */
    .next-steps li::before {
        content: "\f058"; 
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        color: #c58b43; /* ORE Gold */
        font-size: 1.2rem;
    }

    

    .stats-ticker {
    background: #40439c; /* ORE Navy */
    color: #ffffff;
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 2px solid #c58b43; /* ORE Yellow accent */
    font-family: 'Roboto', sans-serif;
}

.ticker-content {
    display: inline-block;
    animation: scroll-stats 20s linear infinite;
}

.ticker-content span {
    font-weight: 900;
    font-size: 0.9rem;
    margin-right: 80px; /* Increased spacing for clarity */
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
}

/* Style for the icons/logos */
.ticker-content i {
    color: #c58b43; /* Makes the icons pop */
    margin-right: 12px;
    font-size: 1.1rem;
}

@keyframes scroll-stats {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Smooth stop when user interacts */
.stats-ticker:hover .ticker-content {
    animation-play-state: paused;
}