/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1.  CSS Variables
2.  Global Resets & Base Styles
3.  Typography
4.  Layout (Container, Grid/Column System)
5.  Buttons & Forms (Global Styles)
6.  Navigation / Header
7.  Hero Section
8.  Common Section Styles
9.  Features Section
10. Webinars Section
11. Testimonials Section
12. Press Section
13. External Resources Section
14. Contact Section
15. Footer
16. Modals
17. Utility & Animation Classes
18. Responsive Styles
19. Specific Page Styles (Success, Privacy, Terms)
20. Cookie Consent Popup
-------------------------------------------------------------------*/

/* 1. CSS Variables
-------------------------------------------------------------------*/
:root {
    --primary-color: #0A4D68; /* Deep Teal Blue */
    --secondary-color: #088395; /* Lighter Teal */
    --accent-color-1: #F9A825; /* Mustard Yellow/Orange */
    --accent-color-2: #E65100; /* Deep Orange for CTAs */
    
    --text-color: #333333;
    --text-color-light: #FFFFFF;
    --text-color-muted: #6c757d;
    --headings-color: #222222;

    --background-color-light: #F8F9FA;
    --background-color-dark: #2c3e50; /* For footer or alternate sections */
    --background-color-section-alt: #EFF1F3; /* Slightly off-white for alt sections */

    --border-color: #DEE2E6;
    --card-background: #FFFFFF;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);

    --font-family-headings: 'Raleway', sans-serif;
    --font-family-body: 'Open Sans', sans-serif;

    --container-width: 1200px;
    --spacing-unit: 1rem; /* 16px */

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

    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/* 2. Global Resets & Base Styles
-------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* 16px base */
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover {
    color: var(--accent-color-2);
}

ul {
    list-style: none;
}

.site-container {
    overflow: hidden; /* For parallax and animations */
}

/* 3. Typography
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--headings-color);
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* 12px */
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); } /* Responsive font size */
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); }

p {
    margin-bottom: var(--spacing-unit); /* 16px */
    font-size: clamp(0.9rem, 1.5vw, 1rem); /* Responsive font size */
}

.section-title {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 24px */
    color: var(--headings-color); /* Ensured dark color */
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 40px */
    color: var(--text-color-muted);
    font-size: clamp(1rem, 2vw, 1.1rem);
}


/* 4. Layout (Container, Grid/Column System)
-------------------------------------------------------------------*/
.container {
    width: 90%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* Basic Bulma-like column system for provided HTML */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.columns:not(:last-child) {
    margin-bottom: calc(1.5rem - 0.75rem);
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}

.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-half { flex: none; width: 50%; }
.column.is-two-thirds { flex: none; width: 66.6666%; }
.column.is-full { flex: none; width: 100%; }

@media screen and (max-width: 768px) {
    .column.is-one-third,
    .column.is-half,
    .column.is-two-thirds {
        width: 100%;
    }
}

/* Card host for equal height columns content */
.card-host {
    display: flex; /* Makes cards in a row same height */
    align-items: stretch; /* Stretch cards to fill height */
}

/* 5. Buttons & Forms (Global Styles)
-------------------------------------------------------------------*/
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-family-headings);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 2px solid transparent;
    padding: calc(var(--spacing-unit)*0.75) calc(var(--spacing-unit)*1.5); /* 12px 24px */
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.5;
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-speed) var(--transition-timing);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 10px var(--shadow-color-strong);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px var(--shadow-color);
}


.button-primary {
    background-color: var(--accent-color-2);
    color: var(--text-color-light);
    border-color: var(--accent-color-2);
}
.button-primary:hover {
    background-color: hsl(19, 100%, 40%); /* Darker shade of accent-color-2 */
    border-color: hsl(19, 100%, 40%);
    color: var(--text-color-light);
}

.button-secondary {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border-color: var(--secondary-color);
}
.button-secondary:hover {
    background-color: hsl(188, 89%, 25%); /* Darker shade of secondary-color */
    border-color: hsl(188, 89%, 25%);
    color: var(--text-color-light);
}

.button-link {
    background-color: transparent;
    color: var(--primary-color);
    border: none;
    padding-left: 0;
    padding-right: 0;
    text-transform: none;
    font-weight: 600;
    box-shadow: none;
}
.button-link:hover {
    color: var(--accent-color-2);
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}
.button-link .arrow-icon {
    display: inline-block;
    margin-left: 0.3em;
    transition: transform var(--transition-speed) var(--transition-timing);
}
.button-link:hover .arrow-icon {
    transform: translateX(5px);
}


/* Forms */
.form-field {
    margin-bottom: calc(var(--spacing-unit) * 1.25); /* 20px */
}

.form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* 8px */
    color: var(--headings-color);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.75); /* 12px */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    font-family: var(--font-family-body);
    font-size: 1rem;
    transition: border-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
}

.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="tel"]:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(10, 77, 104, 0.2); /* Primary color with opacity */
}

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

.form-submit-button {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 1.5); /* 14px 24px */
}
@media (min-width: 768px) {
    .form-submit-button {
        width: auto;
    }
}


/* 6. Navigation / Header
-------------------------------------------------------------------*/
.site-header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-unit) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: background-color var(--transition-speed) var(--transition-timing), padding var(--transition-speed) var(--transition-timing);
}

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

.logo img {
    height: 50px; /* Adjust as needed */
    width: auto;
}

.main-navigation .nav-menu {
    display: flex;
    align-items: center;
}

.main-navigation .nav-menu li {
    margin-left: calc(var(--spacing-unit) * 1.5); /* 24px */
}

.main-navigation .nav-menu a {
    font-family: var(--font-family-headings);
    font-weight: 600;
    color: var(--primary-color);
    padding: 0.5rem 0;
    position: relative;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

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

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

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

.hamburger-icon {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--primary-color);
    position: relative;
    transition: background-color 0s var(--transition-speed); /* Instant change to transparent */
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transition: transform var(--transition-speed) var(--transition-timing), top var(--transition-speed) var(--transition-timing);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

.nav-open .hamburger-icon { background-color: transparent; } /* Middle line disappears */
.nav-open .hamburger-icon::before { transform: rotate(45deg); top: 0; }
.nav-open .hamburger-icon::after { transform: rotate(-45deg); top: 0; }

/* 7. Hero Section
-------------------------------------------------------------------*/
.hero-section {
    position: relative;
    padding: calc(var(--spacing-unit) * 8) 0 calc(var(--spacing-unit) * 6); /* 128px top, 96px bottom */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--text-color-light); /* Base color for text inside hero */
    display: flex;
    align-items: center;
    min-height: 80vh; /* Ensure it's substantial but not excessively tall */
    text-align: center;
}

.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;
    max-width: 800px;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 3.8rem); /* Responsive font size */
    font-weight: 800;
    margin-bottom: var(--spacing-unit); /* 16px */
    color: var(--text-color-light); /* Explicitly white as requested */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Ensure readability */
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    margin-bottom: calc(var(--spacing-unit) * 2); /* 32px */
    color: var(--text-color-light); /* Explicitly white as requested */
    opacity: 0.9;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Ensure readability */
}

.hero-cta-buttons .button {
    margin: 0.5rem;
}
.hero-cta-buttons .button-primary {
    background-color: var(--accent-color-1);
    border-color: var(--accent-color-1);
}
.hero-cta-buttons .button-primary:hover {
    background-color: hsl(39, 96%, 40%); /* Darker shade of accent-1 */
    border-color: hsl(39, 96%, 40%);
}
.hero-cta-buttons .button-secondary {
    background-color: transparent;
    border-color: var(--text-color-light);
    color: var(--text-color-light);
}
.hero-cta-buttons .button-secondary:hover {
    background-color: var(--text-color-light);
    color: var(--primary-color);
}


/* 8. Common Section Styles
-------------------------------------------------------------------*/
.common-section {
    padding: calc(var(--spacing-unit) * 4) 0; /* 64px top/bottom */
}
.common-section.alt-background {
    background-color: var(--background-color-section-alt);
}


/* 9. Features Section (Cards)
-------------------------------------------------------------------*/
.features-grid .card {
    height: 100%; /* Make cards in a row stretch to the same height */
}

.card {
    background-color: var(--card-background);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Ensure content flows vertically */
    height: 100%; /* For card-host to work */
    text-align: center; /* Center inline/inline-block content like titles if not full-width */
}

.card:hover {
    transform: translateY(-10px) perspective(1000px) rotateX(2deg);
    box-shadow: 0 10px 25px var(--shadow-color-strong);
}

.card-image {
    height: 250px; /* Fixed height for card images */
    overflow: hidden;
    display: flex; /* For centering image */
    justify-content: center; /* For centering image */
    align-items: center; /* For centering image */
    background-color: #eee; /* Placeholder bg for images */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, might crop */
    transition: transform var(--transition-speed) var(--transition-timing);
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: calc(var(--spacing-unit) * 1.5); /* 24px */
    flex-grow: 1; /* Allows content to push footer elements down */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if card content is short */
}

.card-title {
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* 12px */
    color: var(--primary-color);
}
.card-content p {
    margin-bottom: var(--spacing-unit);
    font-size: 0.95rem;
    flex-grow: 1; /* Pushes button down */
}
.card-content .button {
    margin-top: auto; /* Pushes button to the bottom of card-content */
    align-self: center; /* Center button if it's not full width */
}


/* 10. Webinars Section
-------------------------------------------------------------------*/
.webinars-grid .card-title {
    min-height: 3.5em; /* Ensure titles have enough space, adjust as needed */
}
.webinar-date {
    font-style: italic;
    color: var(--text-color-muted);
    margin-bottom: calc(var(--spacing-unit)*0.5);
    font-size: 0.9rem;
}


/* 11. Testimonials Section
-------------------------------------------------------------------*/
.testimonial-card {
    text-align: left; /* Testimonials often look better left-aligned */
    display: flex;
    flex-direction: column; /* Default mobile */
    align-items: center;
}

.testimonial-image-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-unit);
    flex-shrink: 0; /* Prevent shrinking */
    border: 3px solid var(--accent-color-1);
}
.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-quote {
    font-style: italic;
    margin-bottom: var(--spacing-unit);
    font-size: 1.05rem;
    position: relative;
    padding-left: calc(var(--spacing-unit)*1.5); /* space for quote icon */
}
.testimonial-quote::before {
    content: "\201C"; /* Left double quotation mark */
    font-family: serif;
    font-size: 3rem;
    color: var(--accent-color-1);
    position: absolute;
    left: -5px;
    top: -10px;
    opacity: 0.8;
}

.testimonial-author {
    font-weight: 700;
    color: var(--primary-color);
    text-align: right; /* Author aligned to right */
}

@media (min-width: 768px) {
    .testimonial-card {
        flex-direction: row; /* Image beside text on larger screens */
        text-align: left;
    }
    .testimonial-image-container {
        margin-right: calc(var(--spacing-unit)*1.5);
        margin-bottom: 0;
    }
    .testimonial-author {
         text-align: left;
    }
}


/* 12. Press Section
-------------------------------------------------------------------*/
.press-item {
    background-color: var(--card-background);
    padding: calc(var(--spacing-unit) * 1.5); /* 24px */
    border-radius: var(--border-radius-small);
    box-shadow: 0 3px 10px var(--shadow-color);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    height: 100%; /* For columns */
    display: flex;
    flex-direction: column;
    text-align: left;
}
.press-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px var(--shadow-color-strong);
}
.press-title {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-unit);
}
.press-description {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    flex-grow: 1;
    margin-bottom: var(--spacing-unit);
}
.press-item .button-link {
    margin-top: auto;
    align-self: flex-start;
}


/* 13. External Resources Section
-------------------------------------------------------------------*/
.resource-card {
    height: 100%; /* For consistent card height in grid */
    text-align: left;
}
.resource-title a {
    color: var(--primary-color);
    font-weight: 700;
}
.resource-title a:hover {
    color: var(--accent-color-2);
}
.resource-description {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    flex-grow: 1;
    margin-bottom: var(--spacing-unit);
}
.resource-card .button-link {
    margin-top: auto;
    align-self: flex-start;
}


/* 14. Contact Section
-------------------------------------------------------------------*/
.contact-form-container {
    background-color: var(--card-background);
    padding: calc(var(--spacing-unit) * 2); /* 32px */
    border-radius: var(--border-radius-medium);
    box-shadow: 0 5px 20px var(--shadow-color);
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 40px */
}
.contact-details {
    text-align: center;
}
.contact-details-title {
    margin-bottom: var(--spacing-unit);
}
.contact-details p {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-icon {
    margin-right: calc(var(--spacing-unit) * 0.5); /* 8px */
    width: 24px;
    height: 24px;
    color: var(--secondary-color); /* Should be applied to SVG or font icon if used */
    /* For img, ensure image itself has the color */
}
.contact-details a {
    color: var(--secondary-color);
    font-weight: 600;
}
.contact-details a:hover {
    color: var(--accent-color-2);
}


/* 15. Footer
-------------------------------------------------------------------*/
.site-footer {
    background-color: var(--background-color-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: calc(var(--spacing-unit) * 3) 0 0; /* 48px top, no bottom yet */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.footer-column {
    flex: 1;
    min-width: 250px; /* Ensure columns don't get too squeezed */
    margin-bottom: calc(var(--spacing-unit)*1.5);
}

.footer-heading {
    font-family: var(--font-family-headings);
    color: var(--text-color-light);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-unit);
    border-bottom: 2px solid var(--accent-color-1);
    padding-bottom: calc(var(--spacing-unit)*0.5);
    display: inline-block;
}

.footer-about p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-unit);
}
.footer-about img {
    margin-top: var(--spacing-unit);
    max-height: 42px;
}

.footer-links ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* 8px */
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer-links ul li a:hover {
    color: var(--accent-color-1);
    padding-left: 5px;
}

.social-media-links li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.social-media-links li a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    display: inline-block; /* For hover effects */
    transition: color var(--transition-speed), transform var(--transition-speed);
}
.social-media-links li a:hover {
    color: var(--accent-color-1);
    transform: translateX(5px);
}

.footer-bottom {
    text-align: center;
    padding: calc(var(--spacing-unit) * 1.5) 0; /* 24px */
    margin-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
}


/* 16. Modals
-------------------------------------------------------------------*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Hidden by default, JS will show */
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--spacing-unit);
}

.modal.is-active {
    display: flex;
}

.modal-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.75); /* Dark semi-transparent background */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px; /* Adjust as needed */
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content-box {
    background-color: var(--card-background);
    border-radius: var(--border-radius-medium);
    padding: calc(var(--spacing-unit) * 2); /* 32px */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: modal-fade-in 0.4s ease-out;
    position: relative; /* For close button positioning */
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-color-muted);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}
.modal-close-button:hover {
    color: var(--text-color);
}

.modal-title-text {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-unit);
    padding-right: 30px; /* Space for close button */
}

.modal-body-content p {
    margin-bottom: var(--spacing-unit);
}
.modal-body-content .modal-form {
    margin-top: calc(var(--spacing-unit) * 1.5);
}

@keyframes modal-fade-in {
    from {
        /*opacity: 0;*/
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 17. Utility & Animation Classes
-------------------------------------------------------------------*/
[data-animate-on-scroll] {
    /*opacity: 0;*/
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate-on-scroll].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax for background images - can be enhanced with JS */
.hero-section[style*="background-image"], 
section[style*="background-image"] {
    background-attachment: fixed; /* Basic parallax */
}
/* Disable fixed attachment on mobile as it can be janky */
@media (max-width: 768px) {
    .hero-section[style*="background-image"],
    section[style*="background-image"] {
        background-attachment: scroll;
    }
}


/* 18. Responsive Styles
-------------------------------------------------------------------*/
@media (max-width: 992px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-column {
        min-width: 100%;
    }
    .footer-heading {
        display: block;
    }
}

@media (max-width: 768px) {
    html { font-size: 93.75%; } /* 15px base for smaller screens */

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Below header */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 5px 10px var(--shadow-color);
        padding: var(--spacing-unit) 0;
    }
    .main-navigation.nav-open .nav-menu {
        display: flex;
    }
    .main-navigation .nav-menu li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-menu a {
        display: block;
        padding: calc(var(--spacing-unit)*0.75) var(--spacing-unit); /* 12px 16px */
    }
    .nav-toggle {
        display: block;
    }

    .hero-section {
        padding: calc(var(--spacing-unit) * 6) 0 calc(var(--spacing-unit) * 4);
        min-height: 60vh;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }

    .common-section {
        padding: calc(var(--spacing-unit) * 3) 0; /* 48px */
    }
    .section-intro {
        margin-bottom: calc(var(--spacing-unit) * 1.5);
    }

    .features-grid .column,
    .webinars-grid .column,
    .testimonials-slider .column,
    .press-items .column,
    .resources-grid .column {
        width: 100% !important; /* Override Bulma-like classes */
        flex: none !important;
    }
    
    .contact-form-container {
        padding: calc(var(--spacing-unit) * 1.5);
    }
}


/* 19. Specific Page Styles (Success, Privacy, Terms)
-------------------------------------------------------------------*/
/* Success Page */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height, 70px) - var(--footer-height, 100px)); /* Adjust header/footer heights if known */
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
}
.success-page-container .success-icon {
    font-size: 4rem;
    color: var(--accent-color-1);
    margin-bottom: var(--spacing-unit);
}
.success-page-container h1 {
    color: var(--primary-color);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.success-page-container p {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

/* Minimal style for success.html body if it's a separate page */
body.success-page-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.success-page-body main {
    flex-grow: 1;
    display: flex; /* To center its direct child, the .success-page-container */
    align-items: center;
    justify-content: center;
}


/* Privacy & Terms Pages */
.privacy-page-content,
.terms-page-content {
    padding-top: calc(var(--header-height, 80px) + var(--spacing-unit) * 2); /* Header height + extra space */
    padding-bottom: calc(var(--spacing-unit) * 3);
    min-height: calc(100vh - var(--header-height, 80px) - var(--footer-height, 100px)); /* Placeholder value */
}
.privacy-page-content .container,
.terms-page-content .container {
    max-width: 800px; /* For better readability of text-heavy pages */
}
.privacy-page-content h1,
.terms-page-content h1 {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    text-align: center;
}
.privacy-page-content h2,
.terms-page-content h2 {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    color: var(--primary-color);
}
.privacy-page-content ul,
.terms-page-content ul {
    list-style: disc;
    margin-left: calc(var(--spacing-unit) * 1.5);
    margin-bottom: var(--spacing-unit);
}
.privacy-page-content ul li,
.terms-page-content ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}


/* 20. Cookie Consent Popup (Complementing HTML styles)
-------------------------------------------------------------------*/
/* Styles for #cookieConsentPopup are mostly inline in HTML for simplicity as requested.
   This can be a place for overrides or more complex styles if needed.
   For example, ensuring the link within the cookie popup is styled according to the theme. */
#cookieConsentPopup a {
    color: var(--accent-color-1); /* Match accent color */
    text-decoration: underline;
}
#cookieConsentPopup a:hover {
    color: var(--text-color-light);
}
#cookieConsentPopup button {
    background-color: var(--accent-color-2);
}
#cookieConsentPopup button:hover {
    background-color: hsl(19, 100%, 40%);
}
@media (max-width: 768px) {
    .nav-menu, .nav-toggle{
        display: none!important;
    }

}