/* Custom Variables and Global Styles (EPA Logo Theme) */
:root {
    --epa-primary-green: #008000; /* Deep Green from logo - main theme color */
    --epa-dark-green: #006400;    /* Darker Green for background elements */
    --epa-red: #FF0000;          /* Red from outer ring - for accents */
    --epa-yellow: #FFD700;        /* Gold/Yellow from scroll/tassel */
    --epa-blue: #007bff;          /* Blue from logo's globe - for secondary accents */
    --epa-text: #343a40;          /* Dark grey for main body text */
    --epa-white: #ffffff;         /* White for backgrounds and text on dark */
}

body {
    font-family: Arial, sans-serif;
    color: var(--epa-text);
}

/* 1. TOP BAR (Dark Green background with White text) */
.top-bar {
    background-color: var(--epa-dark-green);
}
.top-bar a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s;
}
.top-bar a:hover {
    color: var(--epa-white);
}

/* 2. HEADER / Logo & Search (White background, Green accents) */
.navbar-brand .text-primary {
    color: var(--epa-primary-green) !important; /* Green for logo text */
}

/* Search button and Apply Now button styling */
.navbar .btn-primary,
.navbar .btn-primary:focus,
.navbar .btn-primary:active {
    background-color: var(--epa-primary-green);
    border-color: var(--epa-primary-green);
}
.navbar .btn-outline-primary {
    color: var(--epa-primary-green);
    border-color: var(--epa-primary-green);
}
.navbar .btn-outline-primary:hover {
    background-color: var(--epa-primary-green);
    color: var(--epa-white);
}
/* Student Hub button (using Yellow from logo) */
.navbar .btn-secondary {
    background-color: var(--epa-yellow);
    border-color: var(--epa-yellow);
    color: var(--epa-dark-green); /* Dark text on yellow for contrast */
}
.navbar .btn-secondary:hover {
    background-color: #e0ac05; /* Slightly darker yellow on hover */
    border-color: #e0ac05;
}

/* 3. MAIN NAVIGATION BAR (Primary Green background, White text) */
.main-nav {
    background-color: var(--epa-primary-green);
    border-bottom: 3px solid var(--epa-red); /* NEW: Red accent line */
}
.main-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 20px 40px; /* EDITED: Increased horizontal padding from 18px to 30px to space out links */
    transition: background-color 0.3s;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    background-color: var(--epa-dark-green); /* Darker Green on hover/active */
    color: var(--epa-white) !important;
}
/* Online Pay button (using Yellow from logo) */
.checkout-btn {
    background-color: var(--epa-yellow) !important;
    border-color: var(--epa-yellow) !important;
    color: var(--epa-dark-green) !important; /* Dark text for contrast on yellow */
    padding: 15px 25px;
}

/* 4. HERO SECTION (Buttons use logo colors) */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/groupphoto.jpg') no-repeat center center;
    background-size: cover;
    min-height: 450px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.hero-section h1 {
    font-size: 3rem;
    /* You may need to add text-shadow for better contrast on the image */
}
/* Explore Programs button (Yellow from logo) */
.hero-section .btn-primary {
    background-color: var(--epa-yellow) !important;
    border-color: var(--epa-yellow) !important;
    color: var(--epa-dark-green) !important; /* Dark text on yellow */
}
/* Learn More button (NEW: Uses Blue from logo) */
.hero-section .btn-outline-light {
    border-color: var(--epa-blue) !important; /* Changed to Blue */
    color: var(--epa-blue) !important;        /* Changed to Blue */
}
.hero-section .btn-outline-light:hover {
    background-color: var(--epa-blue) !important; /* Blue background on hover */
    color: var(--epa-white) !important;
}

.page-hero {
    /* ... Your existing properties ... */
    
    /* BACKGROUND IMAGE PROPERTIES */
    background-image: url('images/about_us.jpg'); /* REPLACE with the actual image path */
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    
    /* OPTIONAL: Improve text readability on a dark image */
    color: white; /* Change text color to white */
    
}

.page-hero-contact {
    /* Background Image Properties */
    background-image: url('images/contact.jpg'); /* IMPORTANT: Replace with the actual image path */
    background-size: cover;          
    background-position: center center; 
    background-repeat: no-repeat;    

    
    /* Optional: Ensure text stands out on a dark background */
    color: white; /* Sets general text color to white */
    min-height: 200px; /* Adjust this value as needed */
}
.page-hero-contact h1 {
    color: #FFD700; /* Or use a hex code like #FFD700 for Gold */
}
.page-hero-contact .lead {
    color: white !important; /* Overrides the 'text-dark' utility class */
}

.page-hero-programs {
    /* 1. Define the image source */
    background-image: url('images/program.jpeg'); /* IMPORTANT: Replace this with the actual path to your image */

    /* 2. Sizing and Positioning */
    background-size: cover;          /* Ensures the image covers the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat;    /* Prevents the image from tiling */
    
    /* 3. Ensure the section has a visible height */
    min-height: 200px; /* Adjust this value as needed */
    
    /* 4. Adjust text color for contrast (if the image is dark) */
    color: white; /* Makes the text (h1, p) white */
    
}

.page-hero-resources {
    /* 1. Define the image source */
    background-image: url('images/map.jpeg'); /* REPLACE with the actual path to your image */

    /* 2. Sizing and Positioning */
    background-size: cover;          /* Scales the image to cover the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat;    /* Prevents the image from tiling */
    
    /* 3. Ensure the section has a visible height */
    min-height: 200px; /* Adjust height as needed */
    padding: 5rem 0; /* Ensures vertical spacing around content */
    
    /* 4. Adjust text color for contrast if the image is dark */
    color: white; /* Makes the heading and paragraph text white */
}

.page-hero-news {
    /* 1. Define the image source */
    background-image: url('images/news.jpeg'); /* REPLACE with the actual path to your image */

    /* 2. Sizing and Positioning */
    background-size: cover;          /* Scales the image to cover the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat;    /* Prevents the image from tiling */
    
    /* 3. Ensure the section has a visible height */
    min-height: 200px; /* Adjust height as needed */
    padding: 5rem 0; /* Ensures vertical spacing around content */
    
    /* 4. Adjust text color for contrast if the image is dark */
    color: white; /* Makes the heading and paragraph text white */
}

.page-hero-services {
    /* 1. Define the image source */
    background-image: url('images/service.jpeg'); /* REPLACE with the actual path to your image */

    /* 2. Sizing and Positioning */
    background-size: cover;          /* Scales the image to cover the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat;    /* Prevents the image from tiling */
    
    /* 3. Ensure the section has a visible height */
    min-height: 200px; /* Adjust height as needed */
    padding: 5rem 0; /* Ensures vertical spacing around content */
    
    /* 4. Adjust text color for contrast if the image is dark */
    color: white; /* Makes the heading and paragraph text white */
}

.page-hero-details {
    /* 1. Define the image source */
    background-image: url('images/programs.jpeg'); /* REPLACE with the actual path to your image */

    /* 2. Sizing and Positioning */
    background-size: cover;          /* Scales the image to cover the entire section */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat;    /* Prevents the image from tiling */
    
    /* 3. Ensure the section has a visible height */
    min-height: 200px; /* Adjust height as needed */
    padding: 5rem 0; /* Ensures vertical spacing around content */
    
    /* 4. Adjust text color for contrast if the image is dark */
    color: white; /* Makes the heading and paragraph text white */
}


.map-placeholder {
    /* Set the specific image URL */
    background-image: url('images/map.jpeg'); 
    
    /* Control how the image appears */
    background-size: cover;          /* Ensures the image covers the entire container */
    background-position: center;      /* Centers the image */
    background-repeat: no-repeat;    /* Prevents the image from tiling */

    /* Ensure the box has a height so the image can be seen */
    height: 200px; /* Adjust height as needed */
    
    /* Optional: Overlay a slight dark color so the text remains readable */
    position: relative; /* Needed for absolute positioning of overlay */
    z-index: 1; /* Puts the div above the optional overlay */
}


/* 5. WELCOME & PROGRAM CARDS */
.welcome-section h2, .welcome-section h3 {
    color: var(--epa-dark-green); /* Darker Green for headings */
}
/* Read Our Full Mission Link (NEW: Uses Red for emphasis) */
.welcome-section .btn-outline-primary {
    color: var(--epa-red);
    border-color: var(--epa-red);
}
.welcome-section .btn-outline-primary:hover {
    background-color: var(--epa-red);
    color: var(--epa-white);
}

.card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}
/* Links and headings within cards use Primary Green */
.card a, .card h5 {
    color: var(--epa-primary-green) !important;
}


/* Icon colors within cards (using logo colors for variety) */
.card i.fa-graduation-cap { color: var(--epa-primary-green) !important; } /* Initiative icon (Green) */
.card i.fa-wrench { color: var(--epa-yellow) !important; }             /* Vocational training icon (Yellow) */
.card i.fa-hands-helping { color: var(--epa-blue) !important; }         /* Scholarship icon (Blue from globe) */


/* 6. NEWS & EVENTS BANNER (Green Gradient) */
.news-banner {
    background: linear-gradient(45deg, var(--epa-primary-green), var(--epa-dark-green));
}
.news-banner .btn-light { /* Apply Now button on banner */
    background-color: var(--epa-white) !important;
    border-color: var(--epa-white) !important;
    color: var(--epa-primary-green) !important;
}
.news-banner .btn-light:hover {
    background-color: #f8f9fa !important;
}
.news-banner .btn-outline-light { /* Contact Admissions button on banner */
    border-color: var(--epa-white) !important;
    color: var(--epa-white) !important;
}
.news-banner .btn-outline-light:hover {
    background-color: var(--epa-white) !important;
    color: var(--epa-primary-green) !important;
}


/* 7. FOOTER (Dark Green background, White/Yellow/Blue accents) */
.footer {
    background-color: var(--epa-dark-green);
}
.footer a {
    color: rgba(255, 255, 255, 0.7);
}
.footer a:hover {
    color: var(--epa-white);
}
.footer .text-primary {
    color: var(--epa-yellow) !important; /* Yellow Accent for EPA text in footer */
}
.footer .social-icons a {
    color: var(--epa-blue); /* NEW: Blue social icons */
}