.hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/program-6944163_1920.webp') center/cover;
    color: white;
    padding: 120px 0;
    text-align: center;
}
.cta-section {
    background-color: #f8f9fa;
    padding: 60px 0;
}
.services-section, .testimonials-section, .portfolio-section {
    padding: 60px 0;
}
.footer {
    background-color: #343a40;
    color: white;
    padding: 20px 0;
    text-align: center;
}
/* Basic CSS for the slide-out panel */
.feedback-tab {
    background-color: #3498db; /* Example blue color */
    color: white;
    padding: 15px 20px;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 1000; /* Ensure it's on top of other content */
}

.feedback-panel-container {
    position: fixed;
    top: 0;
    right: -650px; /* Initially hidden off-screen (adjust width as needed) */
    width: 600px; /* Match the max-width of your form */
    height: auto;
    max-height: 100%;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    z-index: 999; /* Just below the tab if needed */
    overflow-y: auto; /* In case the content is longer than the viewport */
    padding: 20px;
    box-sizing: border-box; /* Include padding in the width */
}


/* Mobile-specific adjustments (optional, but recommended) */
@media (max-width: 768px) {
/* Adjust the feedback tab to be smaller on mobile */
.feedback-tab {
padding: 12px; /* or adjust this to reduce size */
width: 50px; /* Adjust the width */
height: 50px; /* Adjust the height to make it square */
border-radius: 50%; /* To make it circular */
bottom: 15px;
right: 15px;
z-index: 1000;

}

/* Feedback panel should initially be off-screen */
.feedback-panel-container {
width: 100%;
height: 100vh;
top: 100%;
right: 0;
padding: 20px;
position: fixed;
background-color: white;
transition: top 0.3s ease-in-out;
}
}


.feedback-panel-container.open {
    right: 0;
}

/* Style adjustments for the content inside the panel */
.feedback-panel-container .container {
    padding: 0; /* Remove default container padding */
}
.success-message {
    margin-top: 20px;
    padding: 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    text-align: center;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.transition-opacity {
    transition-property: opacity;
}

.duration-2000 {
    transition-duration: 2s; /* Changed to 2 seconds for this test */
}

.ease-in-out {
    transition-timing-function: ease-in-out;
}

/* To address H1UserAgentFontSizeInSection Lighthouse warning */
section h1 {
    /* Apply the font size you want for H1s within sections */
    /* This will likely be the same as or similar to .display-4 from Bootstrap */
    /* Using calc for responsiveness is good. */
    font-size: calc(1.475rem + 2.7vw); /* Matches Bootstrap's .display-4 */
    margin-block-start: 0.67em; /* Re-apply standard H1 margins to be explicit */
    margin-block-end: 0.67em;
}