/* Table of Contents
1.  CSS Variables
2.  Reset & Base Styles
3.  Typography
4.  Layout (Container)
5.  Global UI Components (Buttons, Cards, Forms, Switches, Progress)
6.  Header & Navigation
7.  Hero Section
8.  Methodology Section
9.  Success Stories Section
10. Accolades Section
11. News Section
12. External Resources Section
13. Contact Section
14. Footer
15. Specific Page Styles (Success, Privacy, Terms)
16. Animations & Transitions
17. Responsive Design (Media Queries)
*/

/* 1. CSS Variables */
:root {
    --color-primary: #0A7E8C; /* Deep Teal */
    --color-primary-dark: #075E68;
    --color-primary-light: #16a085; /* Lighter shade of primary for accents */
    --color-secondary: #FF6F61; /* Coral/Orange Accent */
    --color-secondary-dark: #D9534F;
    --color-accent: #F9A825; /* Warm Yellow/Gold */
    --color-accent-dark: #c7861f;

    --color-background-light: #f4f6f8; /* Very light grey/off-white */
    --color-background-medium: #e9ecef;
    --color-background-dark: #2c3e50;
    --color-background-glass: rgba(255, 255, 255, 0.35);
    --color-background-glass-darker: rgba(255, 255, 255, 0.15); /* For borders or subtle layers */
    --color-background-dark-overlay: rgba(0, 0, 0, 0.55);
    --color-background-section-alt: #ffffff;

    --color-text-light: #FFFFFF;
    --color-text-dark: #343a40; /* Main body text */
    --color-text-medium: #555e68;
    --color-text-heading: #121212; /* Darker for headings */
    --color-text-link: var(--color-primary);
    --color-text-link-hover: var(--color-primary-dark);

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Source Sans Pro', sans-serif;

    --border-radius-main: 16px; /* Biomorphic touch - slightly larger radius */
    --border-radius-small: 8px;
    --border-radius-round: 50%;

    --box-shadow-soft: 0 8px 24px rgba(18, 28, 53, 0.1);
    --box-shadow-strong: 0 10px 30px rgba(18, 28, 53, 0.2);
    --box-shadow-inset: inset 0 2px 4px rgba(0,0,0,0.06);

    --blur-effect: blur(12px);
    --header-height: 80px;
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;

    --container-width: 1140px;
    --padding-section: 60px 0;
}

/* 2. Reset & Base Styles */
*,
*::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.65;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative; /* For AOS animations and fixed elements */
}

.site-wrapper {
    overflow: hidden; /* Helps with some animation glitches */
}

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

a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out;
}

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

ul {
    list-style: none;
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    line-height: 1.3;
    margin-bottom: 0.75em;
    font-weight: 700;
}

h1 { font-size: 2.8rem; } /* Approx 44.8px */
h2 { font-size: 2.2rem; } /* Approx 35.2px */
h3 { font-size: 1.8rem; } /* Approx 28.8px */
h4 { font-size: 1.4rem; } /* Approx 22.4px */

.section-title {
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after { /* Hand-drawn feel underline */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background-color: var(--color-secondary);
    border-radius: 2px;
    /* Animation: could subtly "draw" on scroll with JS */
}

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

p {
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

strong {
    font-weight: 600;
}

/* 4. Layout (Container) */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

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

.section-padding { padding: var(--padding-section); }
.section-padding-alt {
    padding: var(--padding-section);
    background-color: var(--color-background-section-alt);
}


/* 5. Global UI Components */

/* Buttons */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 0.75rem 1.75rem; /* Slightly larger padding */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius-main); /* Biomorphic touch */
    transition: all var(--transition-speed-normal) cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    text-decoration: none;
    letter-spacing: 0.5px;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    text-decoration: none;
    transform: translateY(-3px) scale(1.03); /* Subtle lift and grow */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

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

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

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

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}


/* Cards - Base style for glassmorphism and structure */
.card {
    background: var(--color-background-glass);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    border: 1px solid var(--color-background-glass-darker);
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-soft);
    padding: 25px;
    margin-bottom: 30px;
    transition: transform var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a grid */
    overflow: hidden; /* For biomorphic/rounded image corners */
}

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

.card-image { /* Container for image */
    width: 100%;
    height: 200px; /* Fixed height as requested */
    margin-bottom: 20px;
    border-radius: var(--border-radius-small); /* Rounded corners for image container */
    overflow: hidden; /* Crucial for object-fit and border-radius on image */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the container, might crop */
    transition: transform var(--transition-speed-slow) ease;
}

.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on card hover */
}

.card-content {
    text-align: center; /* Center text content in cards */
    flex-grow: 1; /* Allows content to take remaining space if card has fixed height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button/link to bottom if present */
}
.card-content > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from last element */
}

.card-title {
    font-size: 1.25rem;
    color: var(--color-text-heading);
    margin-bottom: 0.5em;
}

.card p {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    margin-bottom: 1em;
}

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

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    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,
.form-group select {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: rgba(255, 255, 255, 0.7); /* Subtle glass input */
    border: 1px solid #ced4da;
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-inset);
    transition: border-color var(--transition-speed-fast) ease-in-out, box-shadow var(--transition-speed-fast) ease-in-out;
}
.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,
.form-group select:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25); /* Focus ring */
}

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

/* Switches (Toggle) */
.form-switch {
    display: flex;
    align-items: center;
}
.form-switch input[type="checkbox"] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}
.form-switch .switch-label {
    cursor: pointer;
    text-indent: -9999px;
    width: 50px;
    height: 26px;
    background: #bdc3c7; /* Grey */
    display: block;
    border-radius: 100px;
    position: relative;
    margin-right: 10px; /* Space between switch and text label */
    flex-shrink: 0;
}
.form-switch .switch-label::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: var(--border-radius-round);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
}
.form-switch input:checked + .switch-label {
    background: var(--color-primary);
}
.form-switch input:checked + .switch-label::after {
    left: calc(100% - 3px);
    transform: translateX(-100%);
}
.form-switch label[for] { /* The text part of the label */
    margin-bottom: 0;
    font-weight: normal;
    text-indent: 0;
}


/* Progress Indicators */
.progress-indicator-container {
    width: 100%;
    background-color: var(--color-background-medium);
    border-radius: var(--border-radius-small);
    margin: 10px 0;
    overflow: hidden; /* Ensures progress bar stays within rounded corners */
}
.progress-bar {
    height: 12px;
    background-color: var(--color-secondary);
    border-radius: var(--border-radius-small);
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.75rem;
    line-height: 12px;
    transition: width var(--transition-speed-slow) ease-in-out;
}

/* 6. Header & Navigation */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    background: var(--color-background-glass);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    box-shadow: var(--box-shadow-soft);
    transition: background-color var(--transition-speed-normal), padding var(--transition-speed-normal);
}
.site-header.scrolled { /* Add via JS on scroll */
    background: rgba(255, 255, 255, 0.6); /* More opaque on scroll */
    padding: 10px 0;
}

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

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.logo:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.main-nav ul {
    display: flex;
    gap: 25px;
}
.main-nav a {
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    transition: color var(--transition-speed-fast);
}
.main-nav a::after { /* Underline effect */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width var(--transition-speed-normal) ease-out;
}
.main-nav a:hover,
.main-nav a.active { /* Add 'active' class via JS for current page/section */
    color: var(--color-primary);
    text-decoration: none;
}
.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.burger-menu {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}
.burger-menu span {
    width: 30px;
    height: 3px;
    background: var(--color-text-dark);
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}


/* 7. Hero Section */
.hero-section {
    position: relative;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height)); /* Example height, adjust as needed */
    padding: 100px 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background-dark-overlay); /* Ensures text readability */
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    color: var(--color-text-light); /* Enforced by prompt */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    margin-bottom: 0.5em;
}
.hero-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-light); /* Enforced by prompt */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 1.5em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.hero-section .btn-primary {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* 8. Methodology Section */
.steps-container {
    display: grid;
    gap: 30px;
}
.step-item {
    display: flex;
    align-items: flex-start; /* Align icon and content top */
    background: var(--color-background-section-alt); /* Lighter background for steps for contrast */
    padding: 25px;
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-strong);
}
.step-icon-container {
    margin-right: 20px;
    flex-shrink: 0;
}
.step-icon {
    width: 60px; /* Smaller icon */
    height: 60px;
    border-radius: var(--border-radius-round); /* Circular icons */
    object-fit: cover;
    background: var(--color-secondary); /* Placeholder if icon is transparent */
    padding: 5px; /* If icon needs padding */
}
.step-content .step-title {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.5em;
}
.step-content p {
    font-size: 1rem;
    color: var(--color-text-medium);
}
@media (min-width: 768px) {
    .steps-container {
        grid-template-columns: 1fr; /* Default to 1 column for smaller screens if needed */
    }
     .step-item:nth-child(odd) {
        flex-direction: row;
    }
    .step-item:nth-child(even) {
        flex-direction: row-reverse; /* Alternate layout */
    }
    .step-item:nth-child(even) .step-icon-container {
        margin-right: 0;
        margin-left: 20px;
    }
    .step-item:nth-child(even) .step-content {
        text-align: right; /* Adjust text alignment */
    }
    .step-item:nth-child(even) .progress-indicator-container {
        margin-left: auto; /* Align progress bar to right */
    }
}
@media (min-width: 992px) {
    /* For wider screens, perhaps 2 columns if desired, or keep 1 for detailed steps */
}

/* 9. Success Stories Section */
.stories-slider .card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.success-card {
    background-color: var(--color-background-section-alt); /* Different background from main section if section-alt */
}
.success-card .client-name {
    font-style: italic;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 15px;
}
.slider-controls {
    margin-top: 30px;
    text-align: center;
}
.slider-controls .slider-prev,
.slider-controls .slider-next {
    margin: 0 10px;
    /* Basic button styling from global applies */
}

/* 10. Accolades Section */
.accolades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}
.accolade-item {
    padding: 20px;
    background: var(--color-background-glass);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    border-radius: var(--border-radius-main);
    border: 1px solid var(--color-background-glass-darker);
    box-shadow: var(--box-shadow-soft);
}
.accolade-item img {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px auto;
    border-radius: var(--border-radius-round); /* if badges are circular */
}
.accolade-title {
    font-size: 1.2rem;
    color: var(--color-primary-dark);
}

/* 11. News Section */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.news-card .card-content {
    text-align: left; /* News cards usually have left-aligned text */
}
.news-date {
    font-size: 0.85rem;
    color: var(--color-text-medium);
    margin-bottom: 10px;
    display: block;
}
.news-card .btn-secondary.btn-sm { /* "Читать далее" */
    margin-top: auto; /* Pushes to bottom of card content */
    align-self: flex-start; /* Aligns to left if card content is flex */
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    padding: 0.4rem 0.8rem;
}
.news-card .btn-secondary.btn-sm:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}


/* 12. External Resources Section */
.resources-list .resource-item {
    background: var(--color-background-section-alt);
    padding: 20px;
    border-radius: var(--border-radius-small);
    margin-bottom: 20px;
    box-shadow: var(--box-shadow-soft);
}
.resources-list .resource-item h4 a {
    color: var(--color-primary);
    font-family: var(--font-heading);
}
.resources-list .resource-item h4 a:hover {
    color: var(--color-primary-dark);
}
.resources-list .resource-item p {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    margin-bottom: 0;
}

/* 13. Contact Section */
.contact-form-container {
    background: var(--color-background-glass);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    padding: 30px;
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-strong);
    max-width: 700px;
    margin: 0 auto 40px auto;
}
.contact-details {
    margin-top: 40px;
}
.contact-details p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.map-placeholder img {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-soft);
    margin-top: 20px;
}

/* 14. Footer */
.site-footer {
    background-color: var(--color-background-dark);
    color: rgba(255,255,255,0.7);
    padding: 50px 0 30px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}
.footer-col .footer-title {
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    position: relative;
}
.footer-col .footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
}
.footer-col p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}
.footer-nav li {
    margin-bottom: 0.8rem;
}
.footer-nav a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--transition-speed-fast), padding-left var(--transition-speed-fast);
}
.footer-nav a:hover {
    color: var(--color-text-light);
    padding-left: 5px; /* Subtle indent on hover */
    text-decoration: none;
}
.footer-social-nav li a {
    /* Text-based links styling */
    text-transform: capitalize;
}
.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}

/* 15. Specific Page Styles */
/* Success Page */
body.success-page { /* Add class to body of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.success-content {
    background: var(--color-background-section-alt);
    padding: 40px;
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-strong);
}
.success-content h1 {
    color: var(--color-primary);
}
.success-content p {
    font-size: 1.2rem;
    color: var(--color-text-medium);
}
.success-content .btn {
    margin-top: 20px;
}

/* Privacy & Terms Pages */
.privacy-page-content,
.terms-page-content { /* Add these classes to the main content wrapper of privacy.html and terms.html */
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 60px;
    min-height: 70vh;
}
.privacy-page-content h1, .terms-page-content h1,
.privacy-page-content h2, .terms-page-content h2 {
    text-align: left;
}
.privacy-page-content .section-title::after,
.terms-page-content .section-title::after {
    left: 0;
    transform: translateX(0);
}


/* 16. Animations & Transitions (General - AOS is used for scroll) */
/* Example of a "hand-drawn" like hover for certain elements if desired */
.interactive-element-hand-drawn-hover:hover {
    animation: slightWobble 0.5s ease-in-out;
}

@keyframes slightWobble {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(0.5deg) translateX(1px); }
    75% { transform: rotate(-0.5deg) translateX(-1px); }
}

/* 17. Responsive Design (Media Queries) */
@media (max-width: 991px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.1rem; }

    .main-nav {
        position: absolute;
        top: 0; /* Align with header bottom */
        left: -100%; /* Initially off-screen */
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: #fff; /* Solid background for mobile nav */
        box-shadow: var(--box-shadow-strong);
        transition: left var(--transition-speed-normal) ease-in-out;
        padding-top: calc(var(--header-height) + 20px);
        overflow-y: auto;
        z-index: 5; /* Below burger icon */
    }
    .main-nav.active {
        left: 0; /* Slide in */
    }
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .main-nav li {
        width: 100%;
    }
    .main-nav a {
        display: block;
        padding: 15px 20px;
        text-align: left;
        border-bottom: 1px solid var(--color-background-medium);
        width: 100%;
    }
    .main-nav a::after { display: none; } /* Remove underline effect for mobile */
    .main-nav a:hover {
        background-color: var(--color-background-light);
    }

    .burger-menu {
        display: flex;
        z-index: 1001; /* Above mobile nav */
    }
    .burger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .burger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .step-item, .step-item:nth-child(even) {
        flex-direction: column; /* Stack icon and content */
        align-items: center;
        text-align: center;
    }
    .step-item .step-icon-container,
    .step-item:nth-child(even) .step-icon-container {
        margin: 0 0 15px 0; /* Center icon above content */
    }
    .step-item:nth-child(even) .step-content {
        text-align: center;
    }
    .step-item:nth-child(even) .progress-indicator-container {
        margin-left: auto;
        margin-right: auto;
    }

}

@media (max-width: 767px) {
    :root {
        --padding-section: 40px 0;
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1rem; }

    .section-title { font-size: 1.8rem; }
    .section-intro { font-size: 1rem; }

    .footer-grid {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-col .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-nav a:hover {
        padding-left: 0; /* Remove indent on mobile hover */
    }
}

@media (max-width: 575px) {
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    .hero-section .btn-primary {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
    }
}

/* Cookie Consent Popup Minimal Styles */
#cookieConsentPopup {
    font-family: var(--font-body); /* Ensure it uses site font */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookieConsentPopup p {
    color: #fff; /* Ensuring text is white on dark bg */
    font-size: 15px; /* Slightly smaller for mobile if needed */
}
#acceptCookieButton {
    background-color: var(--color-primary); /* Use theme color */
    font-size: 15px;
}
#acceptCookieButton:hover {
    background-color: var(--color-primary-dark);
}