:root {
    /* Fonts */
    --font-primary: 'Lato', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    /* Base Colors (Pastel Scheme) */
    --color-background: #FAF7F0; /* Light Cream */
    --color-text-primary: #333333; /* Dark Gray for readability */
    --color-text-secondary: #555555; /* Medium Gray */
    --color-headings: #222222; /* Darker Gray for headings */
    --color-white: #FFFFFF;
    --color-black-alpha-50: rgba(0, 0, 0, 0.5);
    --color-black-alpha-70: rgba(0, 0, 0, 0.7);

    /* Pastel Accent Palette */
    --pastel-green: #A7D7C5;
    --pastel-green-darker: #8dbfad;
    --pastel-pink: #F7CACA;
    --pastel-pink-darker: #e0b6b6;
    --pastel-blue: #A2D2FF;
    --pastel-blue-darker: #8abde6;
    --pastel-yellow: #FFEE93;
    --pastel-yellow-darker: #e6d684;
    --pastel-peach: #FFDAB9;
    --pastel-peach-darker: #e6c2a5;

    /* Semantic Colors */
    --color-primary-accent: var(--pastel-green);
    --color-primary-accent-darker: var(--pastel-green-darker);
    --color-secondary-accent: var(--pastel-pink);
    --color-secondary-accent-darker: var(--pastel-pink-darker);
    --color-link: var(--pastel-green);
    --color-link-hover: var(--pastel-green-darker);
    --color-info: var(--pastel-blue);
    --color-success: var(--pastel-green);
    --color-warning: var(--pastel-yellow);
    --color-danger: var(--pastel-pink);

    /* UI Element Colors */
    --color-button-primary-bg: var(--color-primary-accent);
    --color-button-primary-text: var(--color-text-primary);
    --color-button-primary-hover-bg: var(--color-primary-accent-darker);
    --color-button-primary-hover-text: var(--color-headings);

    --color-border: #e0d8c7; /* Subtle border for light backgrounds */
    --color-shadow: rgba(0, 0, 0, 0.08);
    --color-shadow-hover: rgba(0, 0, 0, 0.12);
    --color-shadow-strong: rgba(0, 0, 0, 0.15);

    /* Footer Colors */
    --color-footer-bg: #2b2b2b; /* Darker footer */
    --color-footer-text: #E0E0E0;
    --color-footer-link: #C0C0C0;
    --color-footer-link-hover: var(--pastel-green);
    --color-footer-title: var(--color-white);

    /* Sizes & Spacing */
    --header-height-approx: 4rem; /* Bulma's navbar.is-fixed-top takes space */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --section-padding-vertical: 3rem;
    --section-padding-horizontal: 1.5rem;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;
}

/* Global Styles */
body {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    line-height: 1.7; /* Increased for better readability */
    font-size: 16px; /* Base font size */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Applying to Bulma classes as well */
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-headings);
    line-height: 1.3;
}
.title { /* Overriding Bulma's default color if necessary */
    color: var(--color-headings) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.subtitle {
    color: var(--color-text-secondary) !important;
    font-weight: 400; /* Lighter weight for subtitles */
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.section { /* Bulma class override for consistent padding */
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
}

.content p { /* For Bulma's .content class */
    color: var(--color-text-primary);
    margin-bottom: 1.25em;
}
.content ul, .content ol {
    margin-left: 1.5em;
    margin-bottom: 1.25em;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: bold;
    border-radius: var(--border-radius-medium);
    padding: 0.75em 1.5em;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem; /* Consistent button font size */
}

.button.is-primary, button.is-primary, input[type="submit"].is-primary {
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-button-primary-bg);
}
.button.is-primary:hover, button.is-primary:hover, input[type="submit"].is-primary:hover {
    background-color: var(--color-button-primary-hover-bg);
    color: var(--color-button-primary-hover-text);
    border-color: var(--color-button-primary-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--color-shadow);
}

.button.is-link.is-outlined { /* Specific Bulma class styling */
    border-color: var(--color-primary-accent);
    color: var(--color-primary-accent);
    background-color: transparent;
}
.button.is-link.is-outlined:hover {
    background-color: var(--color-primary-accent);
    color: var(--color-button-primary-text);
    border-color: var(--color-primary-accent);
}

/* "Read More" Link Style */
.read-more-link {
    display: inline-block;
    font-weight: bold;
    color: var(--color-primary-accent);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent; /* For hover effect */
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.read-more-link:hover {
    color: var(--color-primary-accent-darker);
    text-decoration: none;
    border-bottom-color: var(--color-primary-accent-darker);
}
.read-more-link .icon { /* If using icons with read more */
    margin-left: 0.25em;
    vertical-align: middle;
}


/* Section Title with Asymmetric Underline */
.section-title {
    margin-bottom: 2.5rem !important;
    position: relative;
    padding-bottom: 15px; /* Space for underline */
    text-align: center;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Start at center */
    transform: translateX(-65%); /* Asymmetric shift (adjust for balance) */
    width: 100px; /* Wider underline */
    height: 4px; /* Thicker underline */
    background-color: var(--color-primary-accent);
    border-radius: var(--border-radius-small);
}


/* Header & Navbar */
.header.is-fixed-top { /* Bulma class for fixed header */
    background-color: rgba(250, 247, 240, 0.85); /* Light Cream with more transparency */
    backdrop-filter: blur(8px); /* Glassmorphism hint */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    z-index: 1000;
}
.navbar-item, .navbar-link { /* Bulma classes */
    color: var(--color-text-primary);
    font-family: var(--font-secondary);
    font-weight: 500; /* Medium weight for nav items */
    font-size: 0.95rem;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: var(--pastel-pink) !important;
    color: var(--color-text-primary) !important;
}
.navbar-burger span { /* Bulma class */
    background-color: var(--color-text-primary);
    height: 2px; /* Thinner burger lines */
}
@media screen and (max-width: 1023px) {
    .navbar-menu { /* Bulma class */
        background-color: rgba(250, 247, 240, 0.98); /* More opaque for mobile readability */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
    }
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For particle container and parallax */
    color: var(--color-white); /* Ensures text readability on image */
    display: flex; /* For vertical centering of hero-body */
    align-items: center; /* For vertical centering of hero-body */
}
#hero::before { /* Darkening overlay */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)); /* Subtle gradient */
    z-index: 1;
}
#hero .hero-body { /* Bulma class */
    position: relative;
    z-index: 2; /* Above overlay */
    padding-top: var(--header-height-approx); /* Account for fixed header */
}
#hero .title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive font size */
    color: var(--color-white) !important;
    text-shadow: 2px 2px 8px var(--color-black-alpha-70);
    margin-bottom: 1rem;
}
#hero .subtitle {
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    color: var(--color-white) !important;
    text-shadow: 1px 1px 6px var(--color-black-alpha-50);
    margin-bottom: 2rem;
    font-weight: 300;
}
/* Particle Animation Placeholder */
#particle-container, #hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind overlay and content */
    /* JS will populate this for actual particles */
}

/* Card Styles (Generic for Portfolio, etc.) */
.card { /* Bulma class */
    background-color: var(--color-white);
    border-radius: var(--border-radius-large); /* Softer corners */
    box-shadow: 0 6px 18px var(--color-shadow);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    height: 100%; /* For consistent height in columns */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures child elements respect border-radius */
}
.card:hover {
    transform: translateY(-8px) scale(1.02); /* More pronounced hover */
    box-shadow: 0 12px 24px var(--color-shadow-hover);
}
.card .card-image { /* Bulma class */
    position: relative;
    overflow: hidden;
    /* Fixed height for image container to use object-fit */
    height: 200px; /* Adjust as needed, or use aspect ratio padding-bottom trick */
}
.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    object-position: center center; /* Center the image content */
    border-top-left-radius: var(--border-radius-large); /* Match card */
    border-top-right-radius: var(--border-radius-large); /* Match card */
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.1); /* Subtle zoom on image hover */
}
.card .card-content { /* Bulma class */
    padding: 1.75rem; /* More padding */
    flex-grow: 1; /* Allows content to expand */
    text-align: left; /* Default text align for card content */
    display: flex;
    flex-direction: column;
}
.card .card-content .title { /* Inside .content */
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-headings) !important;
}
.card .card-content .content { /* Bulma class for p, ul etc. */
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex-grow: 1; /* Pushes footer/actions to bottom */
}
/* For centering content inside cards if needed universally */
.card.is-content-centered .card-content {
    text-align: center;
    align-items: center; /* If card-content is flex */
}


/* Media Section (Gallery) */
#media .image-container { /* Custom class from HTML for gallery images */
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    box-shadow: 0 4px 12px var(--color-shadow);
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
    cursor: pointer;
    height: 250px; /* Example fixed height for gallery items */
}
#media .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}
#media .image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--color-shadow-hover);
}
#media .image-container:hover img {
    transform: scale(1.08);
}
/* Modal Styling for Gallery */
.modal-content img { /* Inside Bulma's modal */
    max-height: 85vh; /* Responsive height */
    border-radius: var(--border-radius-medium);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.modal-background { /* Bulma class */
    background-color: rgba(20, 20, 20, 0.9); /* Darker, more immersive overlay */
}
#modalCaption { /* Custom ID */
    margin-top: 15px;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-white);
    text-shadow: 1px 1px 3px var(--color-black-alpha-70);
}

/* Webinars/Useful Tips Section */
#webinars .box { /* Bulma class */
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 5px 15px var(--color-shadow);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    padding: 1.75rem;
}
#webinars .box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px var(--color-shadow-hover);
}
#webinars .progress { /* Bulma class */
    margin-top: 0.75rem;
    height: 0.85rem !important; /* Slightly thicker progress bar */
    border-radius: var(--border-radius-small);
}
/* Pastel Progress Bar Colors */
#webinars .progress.is-primary::-webkit-progress-value { background-color: var(--pastel-green); }
#webinars .progress.is-primary::-moz-progress-bar { background-color: var(--pastel-green); }
#webinars .progress.is-info::-webkit-progress-value { background-color: var(--pastel-blue); }
#webinars .progress.is-info::-moz-progress-bar { background-color: var(--pastel-blue); }
#webinars .progress.is-success::-webkit-progress-value { background-color: var(--pastel-green); } /* Using main accent */
#webinars .progress.is-success::-moz-progress-bar { background-color: var(--pastel-green); }
#webinars .progress.is-warning::-webkit-progress-value { background-color: var(--pastel-yellow); }
#webinars .progress.is-warning::-moz-progress-bar { background-color: var(--pastel-yellow); }
#webinars .progress.is-danger::-webkit-progress-value { background-color: var(--pastel-pink); }
#webinars .progress.is-danger::-moz-progress-bar { background-color: var(--pastel-pink); }


/* External Links Section */
#external-resources .box.external-links-box {
    background-color: transparent; /* Blend with section background or make it distinct */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large);
    padding: 2rem;
}
.external-links-list li {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
    position: relative; /* For icon positioning */
}
.external-links-list li:hover {
    background-color: rgba(255,255,255,0.5); /* Subtle hover on light bg */
}
.external-links-list li:last-child {
    border-bottom: none;
}
.external-links-list li a { /* The link title */
    color: var(--color-primary-accent);
    font-weight: 600;
    font-size: 1.1rem;
}
.external-links-list li a:hover {
    color: var(--color-primary-accent-darker);
}
.external-links-list li p { /* Description */
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: 0.35rem;
}
.animated-link-icon svg { /* For the small arrow icon */
    width: 0.9em;
    height: 0.9em;
    stroke: var(--color-primary-accent);
    transition: transform var(--transition-fast), stroke var(--transition-fast);
    margin-left: 8px;
    vertical-align: baseline; /* Align better with text */
}
.external-links-list li:hover .animated-link-icon svg {
    transform: translateX(4px) translateY(-2px); /* Diagonal movement */
    stroke: var(--color-primary-accent-darker);
}


/* FAQ Section */
#faq .faq-item {
    padding: 1.25rem 0;
}
#faq .faq-question {
    color: var(--color-headings) !important;
    font-size: 1.15rem;
    font-weight: 600; /* Slightly bolder */
    margin-bottom: 0.5rem;
    /* cursor: pointer; */ /* If JS adds toggle functionality */
}
#faq .faq-answer {
    color: var(--color-text-secondary);
    padding-left: 1.5rem; /* More indent */
    border-left: 3px solid var(--color-primary-accent); /* Accent line */
    font-size: 0.95rem;
}
#faq hr {
    background-color: var(--color-border);
    height: 1px;
    margin: 1.5rem 0;
}

/* Contact Section Form */
.field label.label { /* Bulma class */
    color: var(--color-headings);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5em; /* Space between label and input */
}
.input, .textarea, .select select { /* Bulma classes */
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-size: 1rem;
    padding: 0.75em 1em; /* Consistent padding */
    background-color: var(--color-white); /* Ensure inputs are white on pastel bg */
}
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .textarea.is-focused, .select select.is-focused { /* Bulma classes */
    border-color: var(--color-primary-accent);
    box-shadow: 0 0 0 0.125em rgba(167, 215, 197, 0.35); /* Pastel Green focus shadow */
    outline: none;
}
.control.has-icons-left .icon { /* Bulma class */
    color: var(--color-primary-accent);
    height: 2.5em; /* Match input height */
    width: 2.5em;
}
.checkbox label { /* Bulma class */
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.checkbox input[type="checkbox"] {
    margin-right: 0.5em;
}
.checkbox a {
    color: var(--color-primary-accent);
    font-weight: 500;
}
.checkbox a:hover {
    color: var(--color-primary-accent-darker);
}

/* Footer */
.footer { /* Bulma class */
    background-color: var(--color-footer-bg) !important;
    color: var(--color-footer-text) !important;
    padding: var(--section-padding-vertical) var(--section-padding-horizontal) calc(var(--section-padding-vertical) / 1.5); /* Less padding bottom */
    border-top: 4px solid var(--color-primary-accent); /* Accent line */
}
.footer .title.is-5 { /* Bulma class */
    color: var(--color-footer-title) !important;
    font-family: var(--font-secondary);
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}
.footer ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer ul li a {
    color: var(--color-footer-link) !important;
    font-size: 0.9rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer ul li a:hover {
    color: var(--color-footer-link-hover) !important;
    text-decoration: none;
    padding-left: 5px; /* Subtle hover indent */
}
.footer hr { /* Bulma class */
    background-color: #4a4a4a !important; /* Darker hr in footer */
    height: 1px;
    margin: 1.5rem 0;
}
.footer .content p { /* For copyright, etc. */
    color: var(--color-footer-text) !important;
    font-size: 0.85rem;
}
.footer .content p a {
    color: var(--color-footer-link) !important;
}
.footer .content p a:hover {
    color: var(--color-footer-link-hover) !important;
}

/* Footer Social Links (Text-based) */
.footer .social-links-list { /* Assuming you wrap them in a ul with this class */
    display: flex;
    justify-content: center; /* Or left, as per design */
    gap: 1rem; /* Space between links */
    margin-top: 1rem;
}
.footer .social-links-list li a {
    font-weight: 500;
    /* Add more specific styling if needed, e.g., icons via pseudo-elements */
}


/* Specific Page Styles */
/* Success Page */
body.page-success { /* Add this class to body on success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-success main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-success .section { /* Ensure section takes full height if main is flex container */
    width: 100%;
}

/* Privacy & Terms Pages */
body.page-legal .page-content, /* Add .page-legal to body on privacy/terms */
body.page-about .page-content {   /* Add .page-about to body on about.html */
    padding-top: calc(var(--header-height-approx) + 2rem); /* Space for fixed header + extra */
    min-height: calc(100vh - var(--header-height-approx) - 100px); /* Approx footer height */
}
body.page-legal .page-title-section,
body.page-about .page-title-section,
body.page-contacts .page-title-section {
    padding-top: calc(var(--header-height-approx) + var(--section-padding-vertical));
}
body.page-contacts #contact-page-form.section {
     padding-top: var(--section-padding-vertical); /* Normal padding, title section handles header offset */
}


/* Background Image Handling with Overlay */
.has-bg-image-overlay {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--color-white); /* Default text color for such sections */
}
.has-bg-image-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    z-index: 1;
}
.has-bg-image-overlay > .container { /* Ensure container content is above overlay */
    position: relative;
    z-index: 2;
}
/* Apply this class to sections like Hero, page-title-section if they use background images */
.hero, .page-title-section {
    /* Styles already defined, ensure they align with this pattern if using background images */
}

/* Utility Classes */
.has-text-shadow-light {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.has-text-shadow-strong {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .section {
        padding: calc(var(--section-padding-vertical) * 0.75) var(--section-padding-horizontal);
    }
    .section-title {
        margin-bottom: 2rem !important;
        font-size: 1.8rem; /* Adjust title size */
    }
    .section-title::after {
        width: 70px;
        height: 3px;
    }
    .card .card-image {
        height: 180px; /* Adjust card image height for mobile */
    }
    .footer .columns {
        text-align: center; /* Center footer columns on mobile */
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
    body.page-legal .page-content,
    body.page-about .page-content {
        padding-top: calc(var(--header-height-approx) + 1rem);
    }
}