/*!
Theme Name: hpgacademy
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hpgacademy
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

hpgacademy is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f8f9fa;
    line-height: 1.6;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* HEADER - Modern Style */
.header {
    background: #000; /* Keep the same background color */
    background-image: linear-gradient(to right, rgba(0,0,0,0.95), rgba(0,0,0,0.85), rgba(0,0,0,0.95)); /* Subtle gradient */
    padding: 15px 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* Add some horizontal padding */
}

/* Logo styling */
.logo {
    display: block;
    transition: transform 0.3s ease;
    position: relative;
}

.logo:hover {
    transform: scale(1.05);
}

.logo img {
    max-height: 60px;
    width: auto;

}

/* Navigation styling */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.main-nav ul li {
    font-size: 16px;
    position: relative;
}

.main-nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s;
    padding: 8px 0;
    position: relative;
    letter-spacing: 0.5px; /* Improved letter spacing */
}

.main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.main-nav ul li a:hover {
    color: var(--secondary-color);
}

.main-nav ul li a:hover::after {
    width: 100%;
}

/* CTA Button styling */
.cta-button {
    background: var(--secondary-color);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3); /* Glow effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    letter-spacing: 0.5px;
    display: inline-block;
}

.cta-button:hover {
    background: #ff7b00; /* Slightly darker on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.4); /* Enhanced glow on hover */
}

/* Mobile menu toggle styling */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
}

.mobile-menu-toggle .bar {
    display: block;
    width: 25px;
    height: 2px; /* Thinner bars */
    background-color: var(--secondary-color); /* Brand color for bars */
    margin: 6px 0;
    transition: all 0.3s;
    border-radius: 2px; /* Rounded bars */
}

/* HERO SECTION */
.hero {
    background: url('https://hpgacademy.gr/wp-content/uploads/2025/03/pet-grooming-plusimo-skilou.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 220px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Add an overlay to improve text readability on mobile */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}
.hero h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}
.hero p {
    font-size: 20px;
    max-width: 600px;
    margin-bottom: 30px;
}
.hero .cta-button {
    background: var(--secondary-color);
    color: #fff;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.3s;
}
.hero .cta-button:hover {
    background: #dd3333;
}

/* SECTIONS */
section {
    padding: 80px 20px;
    text-align: center;
}
section:nth-child(even) {
    background: #fff;
}

section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}
section p {
    max-width: 800px;
    margin: 0 auto 30px auto;
    font-size: 18px;
    color: #555;
}

.program {
    background: url(http://hpgacademy.gr/wp-content/uploads/2025/03/pet-grooming-xtenisma-dog.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.program::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.program .container {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
}
.program h2 {
    color:white;
    
    }

/* Container styling is now handled by the .program::before overlay */

.program  .container li
{
    background: rgba(0, 0, 0, 0.64);
    color:white;
    border-bottom:4px solid var(--secondary-color)

}

.program-goals {
    background: url(http://hpgacademy.gr/wp-content/uploads/2025/03/pet-grooming-xtenisma-skilou.jpg);
    background-size: cover;
    background-position: center;
    padding: 100px 20px;
    position: relative;
}

.program-goals::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.program-goals .container {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
}
.program-goals h2 {
    color:white;
    
    }

/* Container styling is now handled by the .program-goals::before overlay */

.program-goals  .container li
{
    background: rgba(0, 0, 0, 0.64);
    color:white;
    border-bottom:4px solid var(--secondary-color)

}
.target-audience {
    background:black!important;
    color:white;
}
.target-audience li {
    background:white!important;
    color:black;
    border-bottom:10px solid var(--secondary-color)
}

/* LIST SECTIONS */
.program ul, .program-goals ul, .target-audience ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.program ul li, .program-goals ul li, .target-audience ul li {
    background: #fff;
    padding: 20px;
    width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.program ul li:hover, .program-goals ul li:hover, .target-audience ul li:hover {
    transform: translateY(-5px);
}

/* CALL TO ACTION */
.cta {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(to right, var(--secondary-color), #ff9900);
    color: #fff;
}
.cta .cta-button {
    background: #fff;
    color: var(--secondary-color);
    padding: 14px 28px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.3s, color 0.3s;
}
.cta .cta-button:hover {
    background: #ff9900;
    color: #fff;
}

/* FOOTER */
.footer {
    background: #222;
    color: #fff;
    padding: 40px 0;
    text-align: center;
}
.footer .footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.footer h3 {
    margin-bottom: 15px;
}
.footer ul {
    list-style: none;
    padding: 0;
}
.footer ul li {
    margin-bottom: 8px;
}
.footer ul li a {
    text-decoration: none;
    color: #bbb;
    transition: color 0.3s;
}
.footer ul li a:hover {
    color: var(--secondary-color);
}
.footer-bottom {
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {

    .footer-about, footer-links, .footer-contact {
        max-width: 100%!important;
    }
    
    
    .hero h1 {
        font-size: 36px;
    }
    .hero p {
        font-size: 16px;
    }
    .program ul li, .program-goals ul li, .target-audience ul li {
        width: 90%;
    }
    .footer .footer-container {
        flex-direction: column;
        align-items: center;
    }
}
/* Courses Page Styling */

/* HERO SECTION */
.hero h1 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 15px;
}
.hero p {
    font-size: 20px;
    max-width: 600px;
    margin: 0 auto;
	color:white;
}

/* COURSES LIST */
.courses-list {
    padding: 60px 20px;
    text-align: center;
    background: #f9f9f9;
}
.courses-list h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}
.course-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.course-item {
    background: #fff;
    padding: 20px;
    width: 320px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}
.course-item:hover {
    transform: translateY(-5px);
}
.course-item h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.course-item p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}
.cta-button {
    background: var(--secondary-color);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.3s;
}
.cta-button:hover {
    background: #dd3333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-items {
        flex-direction: column;
        align-items: center;
    }
    .course-item {
        width: 90%;
    }
}

/* Courses Page Styling */

/* HERO SECTION */

.hero h1 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 15px;
}
.hero p {
    font-size: 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* COURSES LIST */
.courses-list {
    padding: 60px 20px;
    text-align: center;
    background: #f5f5f5;
}
.courses-list h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}
.course-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.course-item {
    background: #fff;
    padding: 20px;
    width: 320px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    text-align: left;
}
.course-item:hover {
    transform: translateY(-5px);
}
.course-item h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.course-item p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}
.cta-button {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.3s;
}
.cta-button:hover {
    background: #dd3333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-items {
        flex-direction: column;
        align-items: center;
    }
    .course-item {
        width: 90%;
    }
}

/* CONTACT INFO */
.contact-info {
    padding: 60px 20px;
    text-align: center;
    background: #f5f5f5;
}
.contact-info h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}
.contact-info p {
    font-size: 18px;
    color: #333;
    margin: 10px 0;
}

/* CONTACT FORM */
.contact-form {
    padding: 60px 20px;
    text-align: center;
    background: #fff;
}
.contact-form h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}
.contact-form form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-form label {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.contact-form button {
    background: #0073e6;
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.3s;
    border: none;
    cursor: pointer;
}
.contact-form button:hover {
    background: #005bb5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-form form {
        width: 90%;
    }
}

/* CSS Custom Properties */
:root {
    --primary-color: var(--secondary-color);
    --secondary-color:#ff9900;
    --text-color: #333;
    --background-color: #000000;
    --header-background: color(srgb 0.1339 0.1137 0.137);
    --footer-background: color(srgb 0.1339 0.1137 0.137);
    --transition-speed: 0.3s;
    --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    --border-radius: 6px;
}

/* Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

/* Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: #fff;
    padding: 8px;
    z-index: 100;
    transition: top var(--transition-speed);
}

.skip-link:focus {
    top: 0;
}

/* HEADER */
.header {
    background: var(--header-background);
    padding: 15px 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--box-shadow);
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.main-nav ul li {
    font-size: 16px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    transition: color var(--transition-speed);
}

.main-nav ul li a:hover,
.main-nav ul li a:focus {
    color: var(--secondary-color);
}

.cta-button {
    background: var(--secondary-color);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background var(--transition-speed), transform var(--transition-speed);
}

.cta-button:hover,
.cta-button:focus {
    background: #2980b9;
    transform: translateY(-2px);
}



.hero h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out;
}

.hero p {
    font-size: 20px;
    max-width: 600px;
    margin: 0 auto 30px;
    animation: fadeInUp 1s ease-out 0.3s;
}

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

/* SECTIONS */
section {
    padding: 80px 20px;
    text-align: center;

}



section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}

section p {
    max-width: 800px;
    margin: 0 auto 30px auto;
    font-size: 18px;
    color: var(--text-color);
}

/* LIST SECTIONS */
.program ul, .program-goals ul, .target-audience ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.program ul li, .program-goals ul li, .target-audience ul li {
    background: #fff;
    padding: 20px;
    width: 300px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-speed);
}

.program ul li:hover, .program-goals ul li:hover, .target-audience ul li:hover {
    transform: translateY(-5px);
}

/* CALL TO ACTION */
.cta {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(to right, var(--primary-color), #ff9900);
    color: #fff;
}

.cta .cta-button {
    background: #fff;
    color: var(--primary-color);
    padding: 14px 28px;
    text-decoration: none;
    font-weight: bold;
    border-radius: var(--border-radius);
    transition: background var(--transition-speed), color var(--transition-speed);
}

.cta .cta-button:hover,
.cta .cta-button:focus {
    background: #ff9900;
    color: #fff;
}

/* FOOTER */
.footer {
    background: var(--footer-background);
    color: #fff;
    padding: 40px 0;
    text-align: center;
}

.footer .footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer h3 {
    margin-bottom: 15px;
}

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

.footer ul li {
    margin-bottom: 8px;
}

.footer ul li a {
    text-decoration: none;
    color: #bbb;
    transition: color var(--transition-speed);
}

.footer ul li a:hover,
.footer ul li a:focus {
    color: var(--primary-color);
}

.footer-bottom {
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.8;
}

/* CONTACT FORM */
.contact-form {
    padding: 60px 20px;
    text-align: center;
    background: #fff;
}

.contact-form h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-form form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form label {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.contact-form button {
    background: var(--primary-color);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: var(--border-radius);
    transition: background var(--transition-speed);
    border: none;
    cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus {
    background: #dd3333;
}

/* Accessibility Improvements */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 0px 0;
    }

    /* Improved header for mobile */
    .header {
        padding: 8px 0; /* Reduced padding for smaller header */
    }
    
    .main-header {
        padding: 5px 0; /* Reduced padding in the container */
    }
    
    .logo img {
        max-height: 60px; /* Control the logo size */
        width: auto;
    }

    /* Improved hero section for mobile */
    .hero {
        padding: 100px 20px; /* Reduced padding */
        background-position: center 20%; /* Adjust background position */
    }

    .hero h1 {
        font-size: 28px; /* Smaller font size */
        margin-bottom: 15px;
    }

    .hero p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .hero .cta-button {
        padding: 10px 20px; /* Smaller button */
        font-size: 16px;
        display: inline-block; /* Ensure it's visible */
        margin: 0 auto; /* Center the button */
    }

    /* Improved section spacing for mobile */
    section {
        padding: 40px 15px; /* Reduced padding */
    }

    section h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    section p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* Improved list items for mobile */
    .program ul, .program-goals ul, .target-audience ul {
        gap: 15px; /* Reduced gap */
    }

    .program ul li, .program-goals ul li, .target-audience ul li {
        width: 100%;
        padding: 15px; /* Reduced padding */
        margin-bottom: 10px;
    }

    /* Improved CTA section for mobile */
    .cta {
        padding: 40px 15px;
    }

    .cta h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .cta .cta-button {
        display: inline-block; /* Ensure it's visible */
        padding: 10px 20px; /* Smaller button */
        font-size: 16px;
        margin: 10px auto; /* Add some margin */
    }

    .footer .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer .footer-container > div {
        margin-bottom: 30px;
    }

    .col {
        flex: 0 0 100%;
        margin-bottom: 20px;
    }

    .program-goals {
        background-position: center;
        padding: 0px!important;
    }
}

/* Modern Responsive Menu Styles */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
}

.mobile-menu-toggle .bar {
    display: block;
    width: 25px;
    height: 2px; /* Thinner bars */
    background-color: var(--secondary-color); /* Brand color for bars */
    margin: 6px 0;
    transition: all 0.3s;
    border-radius: 2px; /* Rounded bars */
}

.mobile-menu-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.97), rgba(0,0,0,0.9)); /* Gradient background */
    z-index: 999;
    overflow-y: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    backdrop-filter: blur(5px); /* Blur effect for modern look */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mobile-menu-container.active {
    opacity: 1;
}

.mobile-menu {
    list-style: none;
    padding: 0;
    text-align: center;
    width: 100%;
    max-width: 300px;
}

.mobile-menu li {
    margin-bottom: 20px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.mobile-menu-container.active .mobile-menu li {
    transform: translateY(0);
    opacity: 1;
}

/* Staggered animation for menu items */
.mobile-menu-container.active .mobile-menu li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-container.active .mobile-menu li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-container.active .mobile-menu li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-container.active .mobile-menu li:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-container.active .mobile-menu li:nth-child(5) { transition-delay: 0.5s; }

.mobile-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
    transition: all 0.3s;
    display: block;
    padding: 10px 0;
    letter-spacing: 1px;
    position: relative;
}

.mobile-menu a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.mobile-menu a:hover,
.mobile-menu a:focus {
    color: var(--secondary-color);
}

.mobile-menu a:hover::after,
.mobile-menu a:focus::after {
    width: 50%;
}

.mobile-cta {
    display: block;
    margin: 40px auto 0;
    text-align: center;
    max-width: 220px;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
    transition-delay: 0.6s;
}

.mobile-menu-container.active .mobile-cta {
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: auto; /* Push to the right */
        margin-right: 10px; /* Add some space from the edge */
    }

    .mobile-menu-container.active {
        display: flex; /* Use flex for better centering when active */
    }

    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Only hide the header CTA button, not all CTA buttons */
    .header .cta-button {
        display: none;
    }

    .mobile-cta {
        display: block;
        background: var(--secondary-color);
        color: #fff;
        padding: 12px 24px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
        transition: background var(--transition-speed), transform var(--transition-speed);
        text-align: center;
    }

    .mobile-cta:hover,
    .mobile-cta:focus {
        background: #dd3333;
        transform: translateY(-2px);
    }
}

/* Enhanced Desktop Menu Styles */
@media (min-width: 769px) {
    .main-nav ul {
        display: flex;
        gap: 20px;
    }

    .main-nav ul li a {
        position: relative;
    }

    .main-nav ul li a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary-color);
        transition: width var(--transition-speed);
    }

    .main-nav ul li a:hover::after,
    .main-nav ul li a:focus::after {
        width: 100%;
    }
}

/* Improved Responsive Design */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 0px 0;
    }

    .hero {
        padding: 80px 20px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 18px;
    }

    section {
        padding: 60px 20px;
    }

    section h2 {
        font-size: 28px;
    }

    section p {
        font-size: 16px;
    }

    .program ul li, .program-goals ul li, .target-audience ul li {
        width: 100%;
    }

    .footer .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer .footer-container > div {
        margin-bottom: 30px;
    }
}

/* Accessibility Improvements */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}


.footer-about, footer-links, .footer-contact {
    max-width: 25%;
}



.footer-contact * {
    font-size: 19px;

}