/* TABLE OF CONTENTS
1.  GLOBAL STYLES & VARIABLES
    1.1 Root Variables
    1.2 Reset & Base
    1.3 Typography
    1.4 Links
    1.5 Buttons
    1.6 Forms
    1.7 Utility Classes
    1.8 Container & Columns
2.  HEADER & NAVIGATION
3.  MAIN CONTENT & SECTIONS
    3.1 General Section Styling
    3.2 Hero Section
    3.3 Card Component
    3.4 Customer Stories Section (Carousel)
    3.5 Workshops Section
    3.6 Instructors Section
    3.7 Statistics Section
    3.8 Projects Section
    3.9 External Resources Section
    3.10 Testimonials Section (Carousel)
    3.11 Contact Info Section (Index page)
4.  SPECIFIC PAGES
    4.1 About, Terms, Privacy Pages
    4.2 Success Page
    4.3 Contacts Page (General structure, form re-used)
5.  FOOTER
6.  ANIMATIONS & EFFECTS
    6.1 Scroll Animations (Initial States)
    6.2 Parallax Effects
7.  RESPONSIVE DESIGN (Media Queries)
*/

/* 1. GLOBAL STYLES & VARIABLES */
/* 1.1 Root Variables */
:root {
    --color-primary: #0A7B7E; /* Deep Teal */
    --color-primary-dark: #075E60;
    --color-primary-light: #0DAEAF;
    --color-secondary: #0A5F7E; /* Slightly Bluer Teal */
    --color-accent1: #0E9F9F; /* Brighter Teal */
    --color-accent2: #7BC9C9; /* Light Aqua/Cyan */

    --color-text-light: #FFFFFF;
    --color-text-dark: #222222;
    --color-text-medium: #555555;
    --color-text-on-dark: #EAEAEA; /* For text on dark backgrounds */

    --color-background-light: #F8F9FA;
    --color-background-medium: #E9ECEF;
    --color-background-dark: #121820; /* For dark sections or footer */
    --color-background-dark-accent: #114E60; /* Statistics bg */

    --color-success: #4CAF50;
    --color-error: #f44336;
    --color-border: #dee2e6;

    --font-heading: 'Archivo Black', sans-serif;
    --font-body: 'Roboto', sans-serif;

    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;

    --shadow-light: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-strong: 0 8px 16px rgba(0,0,0,0.1);

    --transition-speed: 0.3s;
    --header-height: 80px; /* Adjust as needed */
}

/* 1.2 Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--color-text-medium);
    background-color: var(--color-background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.main-container {
    overflow-x: hidden; /* Prevents horizontal scroll from animations */
}

/* 1.3 Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    margin-bottom: 0.75em;
    line-height: 1.3;
    font-weight: 700; /* Archivo Black is usually bold by default */
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }

p {
    margin-bottom: 1rem;
}

.section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-text-dark); /* Ensure high contrast */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    font-size: 1.1rem;
    color: var(--color-text-medium);
}

.section-paragraph {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 1.5rem;
}

/* 1.4 Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* "Read more" style links */
.read-more-link {
    display: inline-block;
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-speed) ease;
}

.read-more-link:hover, .read-more-link:focus {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-dark);
}

/* 1.5 Buttons */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-speed) ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background-color: var(--color-accent1);
    color: var(--color-text-light);
    border-color: var(--color-accent1);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-primary); /* Darken to primary */
    border-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* 1.6 Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--color-text-dark);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--color-text-medium);
    background-color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb, 10, 123, 126), 0.25); /* Fallback --color-primary-rgb */
}
/* Define --color-primary-rgb for box-shadow */
:root { --color-primary-rgb: 10, 123, 126; }


.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 1.7 Utility Classes */
.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-padding-large {
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-light {
    background-color: var(--color-background-light);
}
.bg-medium {
    background-color: var(--color-background-medium);
}
.bg-dark {
    background-color: var(--color-background-dark);
    color: var(--color-text-on-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark p {
    color: var(--color-text-on-dark);
}
.bg-dark .section-subtitle {
     color: #cccccc;
}

.bg-dark-accent {
    background-color: var(--color-background-dark-accent);
    color: var(--color-text-light);
}
.bg-dark-accent h1, .bg-dark-accent h2, .bg-dark-accent h3, .bg-dark-accent h4, .bg-dark-accent p {
    color: var(--color-text-light);
}

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

.text-light {
    color: var(--color-text-light) !important;
}

/* 1.8 Container & Columns */
.container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.columns {
    display: flex;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}
.columns:not(:last-child) {
    margin-bottom: 1.5rem;
}
.columns.is-multiline {
    flex-wrap: wrap;
}
.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}
.column.is-one-fourth { flex: none; width: 25%; }
.column.is-one-third { flex: none; width: 33.33333%; }
.column.is-half { flex: none; width: 50%; }
.column.is-two-thirds { flex: none; width: 66.66666%; }
.column.is-full { flex: none; width: 100%; }


/* 2. HEADER & NAVIGATION */
.site-header {
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0; /* Reduced padding */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-light);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 40px; /* Consistent with HTML */
    width: 40px;  /* Consistent with HTML */
    margin-right: 0.75rem;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    font-weight: bold;
}

.main-navigation .nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.main-navigation .nav-links li {
    margin-left: 1.8rem;
}

.main-navigation .nav-links a {
    color: var(--color-text-dark);
    font-weight: bold;
    text-decoration: none;
    padding: 0.5rem 0;
    position: relative;
    transition: color var(--transition-speed) ease;
}

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

.main-navigation .nav-links a:hover,
.main-navigation .nav-links a:focus,
.main-navigation .nav-links a.active { /* Add .active class via JS for current page/section */
    color: var(--color-primary);
}

.main-navigation .nav-links a:hover::after,
.main-navigation .nav-links a:focus::after,
.main-navigation .nav-links a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    position: relative;
    transition: background-color var(--transition-speed) ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-text-dark);
    transition: transform var(--transition-speed) ease, top var(--transition-speed) ease;
}

.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* Styles for open menu (toggled by JS) */
.main-navigation.is-open .hamburger-icon {
    background-color: transparent; /* Middle bar disappears */
}
.main-navigation.is-open .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.main-navigation.is-open .hamburger-icon::after {
    top: 0;
    transform: rotate(-45deg);
}


/* 3. MAIN CONTENT & SECTIONS */
main {
    padding-top: var(--header-height); /* Prevent content from being hidden by fixed header */
}

/* 3.1 General Section Styling */
/* Most styling done via utility classes like .section-padding and typography */

/* 3.2 Hero Section */
.hero-section {
    position: relative;
    color: var(--color-text-light);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)); /* Darkening overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 4rem; /* More space at the top */
    padding-bottom: 4rem;
}

.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    margin-bottom: 1rem;
    color: var(--color-text-light); /* Ensured by HTML, reinforced here */
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-light); /* Ensured by HTML, reinforced here */
    line-height: 1.8;
}

.hero-form {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle glassmorphism */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: var(--border-radius-large);
    max-width: 600px;
    margin: 2rem auto 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero-form .form-title {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}
.hero-form .form-group input,
.hero-form .form-group textarea {
    background-color: rgba(255,255,255,0.8);
    color: var(--color-text-dark);
    border: 1px solid rgba(255,255,255,0.3);
}
.hero-form .form-group input::placeholder,
.hero-form .form-group textarea::placeholder {
    color: var(--color-text-medium);
}
.hero-form .btn-primary {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* 3.3 Card Component */
.card {
    background-color: var(--color-text-light);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row same height */
    text-align: center; /* Center inline/inline-block content like images if not full width */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
}

.card-image {
    width: 100%; /* Container takes full width of card */
    height: 200px; /* Fixed height for image container */
    overflow: hidden; /* Ensure image doesn't overflow container */
    display: flex; /* For centering the image if it's smaller */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, crop if necessary */
    display: block; /* Remove extra space below image */
}

.card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to expand and push actions to bottom if card is flex column */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* If there are actions like buttons */
}

.card-content h3 {
    margin-top: 0;
    color: var(--color-primary);
}
.card-content p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}
.card .btn {
    margin-top: auto; /* Push button to bottom if card-content is flex */
}


/* 3.4 Customer Stories Section (Carousel) */
.customer-stories-section .carousel,
.testimonials-section .carousel { /* Basic styling for carousel containers */
    display: flex; /* Will be managed by JS library, but basic flex for items */
    overflow-x: auto; /* Simple scroll for demo if no JS */
    gap: 1.5rem;
    padding-bottom: 1rem; /* Space for scrollbar */
}
.customer-stories-section .carousel-item,
.testimonials-section .carousel-item {
    flex: 0 0 auto; /* Prevent shrinking/growing */
    width: 300px; /* Adjust as needed */
}
/* Card styles apply to .carousel-item.card */


/* 3.5 Workshops Section */
.workshop-card .card-content h3 {
    min-height: 3.9em; /* approx 3 lines for h3 */
}

/* 3.6 Instructors Section */
.instructor-card .card-image {
    height: 250px; /* Square-ish for portraits */
}
.instructor-card .card-image img {
    border-radius: 8px 8px 0 0; /* Match card if image is direct child, but it's wrapped */
}
.instructor-card .card-content h3 {
    margin-bottom: 0.5rem;
}

/* 3.7 Statistics Section */
.statistics-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-light);
    text-align: center;
}
.statistics-overlay { /* Used in HTML */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8));
    z-index: 1;
}
.statistics-section .container {
    position: relative;
    z-index: 2;
}
.statistics-section .section-title,
.statistics-section .section-subtitle,
.statistics-section p {
    color: var(--color-text-light); /* Override default dark text for sections */
}
.stat-widget {
    padding: 2rem 1rem;
    background-color: rgba(255,255,255,0.1);
    border-radius: var(--border-radius-medium);
    margin-bottom: 1rem; /* For mobile stacking */
    transition: background-color var(--transition-speed);
}
.stat-widget:hover {
    background-color: rgba(255,255,255,0.2);
}
.stat-value {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: bold;
    color: var(--color-accent2); /* Bright accent for numbers */
    margin-bottom: 0.5rem;
}
.stat-label {
    font-size: 1rem;
    color: #dddddd; /* Lighter than main text on dark bg */
}

/* 3.8 Projects Section */
.project-card .card-image {
    height: 250px;
}

/* 3.9 External Resources Section */
.resource-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.resource-item {
    background-color: var(--color-text-light);
    padding: 1.5rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light);
    transition: box-shadow var(--transition-speed);
}
.resource-item:hover {
    box-shadow: var(--shadow-medium);
}
.resource-item h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.resource-item h4 a {
    color: var(--color-primary);
}
.resource-item h4 a:hover {
    color: var(--color-primary-dark);
}
.resource-item p {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    margin-bottom: 0;
}

/* 3.10 Testimonials Section */
.testimonial {
    background-color: var(--color-background-medium);
    padding: 2rem;
    border-radius: var(--border-radius-large);
    text-align: center;
    box-shadow: var(--shadow-light);
    position: relative;
}
.testimonial blockquote {
    margin: 0 0 1rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-text-dark); /* Good contrast on light bg */
}
.testimonial blockquote p {
    margin-bottom: 1rem;
}
.testimonial footer {
    font-weight: bold;
    color: var(--color-primary);
}
.testimonial-image-wrapper {
    margin-top: 1rem;
}
.testimonial-image-wrapper img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary-light);
}

/* 3.11 Contact Info Section (Index page) */
.contact-details {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    text-align: left; /* Override general center alignment for section if needed */
}
.contact-column {
    flex: 1;
    min-width: 280px; /* Ensure columns don't get too narrow */
}
.contact-column h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
}
.contact-column p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.contact-column p a {
    color: var(--color-text-medium); /* Match surrounding text, link color will apply */
}
.contact-column p a:hover {
    color: var(--color-primary);
}


/* 4. SPECIFIC PAGES */
/* 4.1 About, Terms, Privacy Pages */
.page-content-wrapper { /* Wrap content of these pages in this div */
    padding-top: calc(var(--header-height) + 40px); /* Header height + extra space */
    padding-bottom: 60px;
}
.page-content-wrapper .container h1 {
    margin-bottom: 2rem;
    text-align: center;
}
.page-content-wrapper .container h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}
.page-content-wrapper .container p,
.page-content-wrapper .container ul,
.page-content-wrapper .container ol {
    margin-bottom: 1rem;
    line-height: 1.8;
}
.page-content-wrapper .container ul,
.page-content-wrapper .container ol {
    padding-left: 20px;
}

/* 4.2 Success Page */
.success-page-container { /* Apply to body or a full-height wrapper on success.html */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-background-light); /* Or a gentle gradient */
}
.success-message-box {
    background-color: var(--color-text-light);
    padding: 3rem 4rem;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-strong);
    max-width: 600px;
}
.success-message-box h1 {
    color: var(--color-success);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.success-message-box p {
    font-size: 1.2rem;
    color: var(--color-text-medium);
    margin-bottom: 2rem;
}

/* 4.3 Contacts Page */
/* Use .contact-form from Hero styling or define specific one if needed */
/* Map iframe styling */
.map-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    margin-top: 2rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light);
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* 5. FOOTER */
.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-on-dark);
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}
.site-footer a {
    color: var(--color-accent2); /* Lighter accent for links on dark bg */
}
.site-footer a:hover {
    color: var(--color-text-light);
}
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-column {
    flex: 1;
    min-width: 200px; /* Minimum width before wrapping */
}
.footer-column h4 {
    font-family: var(--font-heading);
    color: var(--color-text-light);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}
.footer-column p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #bbbbbb; /* Slightly dimmer than main text-on-dark */
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 0.5rem;
}
.footer-column ul li a {
    font-size: 0.95rem;
}
.social-links-text li a {
    /* Text links are fine, additional styling if needed */
    font-weight: bold;
}
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #aaaaaa;
}


/* 6. ANIMATIONS & EFFECTS */
/* 6.1 Scroll Animations (Initial States for JS to animate in) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 6.2 Parallax Effects */
/* Simple CSS parallax for backgrounds. JS is better for more complex effects. */
.parallax-bg {
    background-attachment: fixed; /* Note: can have performance issues on mobile */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Ensure hero section has this if true parallax is desired via CSS only */
.hero-section.parallax-bg {}
.statistics-section.parallax-bg {}


/* 7. RESPONSIVE DESIGN (Media Queries) */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.2rem; }

    .columns {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    .column {
        padding: 0.5rem;
    }
    .column.is-one-third, .column.is-half, .column.is-two-thirds, .column.is-one-fourth {
        width: 100%; /* Stack columns by default */
    }
    /* If specific columns need to remain side-by-side on tablet, add new classes or override here */
    .columns.tablet-half > .column { width: 50%; } /* Example */

    .customer-stories-section .carousel-item,
    .testimonials-section .carousel-item {
        width: 280px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }
    main {
        padding-top: var(--header-height);
    }
    .page-content-wrapper {
        padding-top: calc(var(--header-height) + 20px);
    }

    .header-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .main-navigation .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--color-text-light);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: var(--shadow-medium);
        border-top: 1px solid var(--color-border);
    }
    .main-navigation.is-open .nav-links {
        display: flex;
    }
    .main-navigation .nav-links li {
        margin-left: 0;
        text-align: center;
    }
    .main-navigation .nav-links a {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid var(--color-border);
    }
    .main-navigation .nav-links li:last-child a {
        border-bottom: none;
    }
    .main-navigation .nav-links a::after { display: none; } /* No underline effect on mobile menu */

    .menu-toggle {
        display: block;
    }

    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .hero-form { padding: 1.5rem; }

    .section-padding { padding-top: 40px; padding-bottom: 40px; }
    .section-padding-large { padding-top: 60px; padding-bottom: 60px; }

    .footer-columns { flex-direction: column; }
    .footer-column { min-width: 100%; text-align: center; }
    .footer-column ul { display: inline-block; text-align: left; }

    .statistical-widgets .column { width: 50%; } /* Two stats per row on mobile */
    .statistical-widgets .column:last-child:nth-child(odd) { width: 100%; } /* Center last one if odd */

    .contact-details { flex-direction: column; text-align: center;}
    .contact-column { text-align: center; }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    .hero-title { font-size: 2rem; }

    .statistical-widgets .column { width: 100%; } /* One stat per row on small mobile */

    .success-message-box {
        padding: 2rem 1.5rem;
    }
    .success-message-box h1 { font-size: 2rem; }
    .success-message-box p { font-size: 1rem; }
}

/* Fix for Bulma-like column negative margins creating horizontal scroll */
.columns {
    /* If the main container already has overflow-x: hidden, this might not be needed */
    /* but if a specific columns instance is causing it: */
    /* margin-left: 0; margin-right: 0; */ /* Simpler but removes gutter */
}