/* Table of Contents
------------------------------------
1.  VARIABLES
2.  GLOBAL STYLES
3.  UTILITY CLASSES
4.  NEOMORPHISM & BIOMORPHIC ELEMENTS
5.  HEADER & NAVIGATION
6.  HERO SECTION
7.  BUTTONS (GLOBAL)
8.  CARDS (GLOBAL)
9.  SPECIFIC SECTIONS
    9.1  Services Section
    9.2  Accolades Section
    9.3  Success Stories (Timeline)
    9.4  Pricing Section
    9.5  Awards Section
    9.6  Sustainability Section
    9.7  Careers Section
    9.8  External Resources Section
    9.9  Contact Section & Form
10. FOOTER
11. ANIMATIONS & HELPERS
12. RESPONSIVE DESIGN
13. SPECIFIC PAGE STYLES (Success, Privacy, Terms)
14. COOKIE CONSENT POPUP
------------------------------------ */

/* 1. VARIABLES */
:root {
    --font-primary: 'Source Sans Pro', sans-serif;
    --font-headings: 'Playfair Display', serif;

    /* Analogous Color Scheme (Blues & Teals with a touch of soft accent) */
    --color-primary: #2A7AAA; /* Main Blue */
    --color-primary-dark: #1E5B80;
    --color-secondary: #3AA5C1; /* Lighter Cyan-Blue */
    --color-accent: #60C8D9; /* Soft Cyan/Teal */
    --color-highlight: #F39C12; /* A warm highlight for CTAs or special elements */

    --color-text-light: #FFFFFF;
    --color-text-dark: #34495E; /* Dark Grayish Blue */
    --color-text-medium: #5D6D7E;
    --color-text-headings: #2C3E50; /* Very Dark Grayish Blue */
    --color-text-link: var(--color-primary);
    --color-text-link-hover: var(--color-primary-dark);

    /* Neomorphism Base & Shadows */
    --color-background-light: #ECF0F3; /* Light, slightly cool off-white */
    --color-background-section-alt: #F4F6F7; /* Slightly different for alternating sections */
    --color-shadow-light-strong: rgba(255, 255, 255, 0.9);
    --color-shadow-dark-strong: rgba(186, 199, 213, 0.7);
    --color-shadow-light-soft: rgba(255, 255, 255, 0.5);
    --color-shadow-dark-soft: rgba(209, 217, 230, 0.5);

    --color-border: #D1D9E6;
    --color-success: #2ECC71;
    --color-error: #E74C3C;

    --border-radius-soft: 15px;
    --border-radius-medium: 25px;
    --border-radius-large: 40px;

    --transition-speed: 0.3s;
    --header-height: 80px;
}

/* 2. GLOBAL STYLES */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.main-page-wrapper {
    overflow: hidden; /* Contains parallax or overflowing elements */
}

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-text-headings);
    line-height: 1.3;
    margin-bottom: 0.75em;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for headings */
}

h1 { font-size: 2.8rem; margin-bottom: 0.5em; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }

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

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

ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem; /* Default padding for lists */
}

/* 3. UTILITY CLASSES */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.content-container { /* Might be same as container or slightly different if needed */
    width: 90%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    position: relative; /* For overlays in sections */
    z-index: 2;
}

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

.section-padding-light {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--color-background-section-alt); /* Alternate background */
}

.section-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2.5rem; /* Responsive sizing below */
    color: var(--color-text-headings);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

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

.grid-container {
    display: grid;
    gap: 30px;
}

/* For sections with background images and text on top */
.section-overlay-light, .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)); /* Darker overlay for readability */
    z-index: 1;
}
.hero-overlay { /* Hero might need a slightly different overlay */
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}

/* 4. NEOMORPHISM & BIOMORPHIC ELEMENTS */
.neomorphic-card, .neomorphic-form-container {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-medium);
    padding: 25px;
    box-shadow: 8px 8px 16px var(--color-shadow-dark-soft),
                -8px -8px 16px var(--color-shadow-light-soft);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.neomorphic-card:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 24px var(--color-shadow-dark-soft),
                -12px -12px 24px var(--color-shadow-light-soft);
}

/* Inset Neomorphism for form fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"], /* Added just in case */
input[type="url"],
input[type="search"],
textarea,
select {
    background-color: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    padding: 12px 15px;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-dark);
    width: 100%;
    box-shadow: inset 4px 4px 8px var(--color-shadow-dark-soft),
                inset -4px -4px 8px var(--color-shadow-light-soft);
    transition: box-shadow var(--transition-speed) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: inset 6px 6px 12px var(--color-shadow-dark-soft),
                inset -6px -6px 12px var(--color-shadow-light-soft),
                0 0 0 2px var(--color-accent); /* Focus ring */
    border-color: var(--color-accent);
}
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2334495E' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 40px; /* Space for arrow */
}


.biomorphic-shape-hero {
    position: absolute;
    bottom: -50px; /* Adjust as needed */
    left: 10%;
    width: 200px;
    height: 150px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
    opacity: 0.3;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; /* Example biomorphic shape */
    transform: rotate(-15deg);
    z-index: 0; /* Behind hero content */
    filter: blur(5px);
}

.biomorphic-divider svg path {
    fill: var(--color-background-section-alt); /* Match section background */
}

/* 5. HEADER & NAVIGATION */
.site-header {
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color var(--transition-speed) ease;
}

.site-header.scrolled { /* Add via JS on scroll */
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1300px; /* Wider for header */
}

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

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

.main-navigation .nav-links li {
    margin-left: 25px;
}

.main-navigation .nav-links a {
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 600;
    padding: 10px 5px;
    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-accent);
    transition: width var(--transition-speed) ease;
}

.main-navigation .nav-links a:hover,
.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.active::after {
    width: 100%;
}

.header-contact-info .phone-number {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 8px 15px;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-soft);
    transition: all var(--transition-speed) ease;
}

.header-contact-info .phone-number:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above nav links on mobile */
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-headings);
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 3px;
}

/* Hamburger animation when active */
.menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* 6. HERO SECTION */
.hero-section {
    position: relative;
    color: var(--color-text-light);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh; /* Natural height based on content or a min-height */
    padding-top: var(--header-height); /* Account for fixed header */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* For biomorphic shape parallax */
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
    max-width: 800px; /* Constrain content width */
}

.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    color: var(--color-text-light); /* Enforced white text */
    margin-bottom: 0.75rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-light); /* Enforced white text */
    margin-bottom: 2rem;
    line-height: 1.7;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

/* 7. BUTTONS (GLOBAL) */
.btn, button, input[type='submit'], input[type='button'] { /* Global button styles */
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    padding: 12px 28px;
    font-size: 1rem;
    border-radius: var(--border-radius-soft);
    transition: all var(--transition-speed) ease-in-out;
    text-decoration: none; /* Ensure no underline from global 'a' styles */
    line-height: 1.5; /* Consistent line height */
}

.btn:hover, button:hover, input[type='submit']:hover, input[type='button']:hover {
    text-decoration: none; /* No underline on hover for buttons */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(42, 122, 170, 0.4);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(30, 91, 128, 0.5);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 7px rgba(0,0,0,0.2),
                inset -3px -3px 7px rgba(255,255,255,0.1),
                0 2px 5px rgba(30, 91, 128, 0.3);
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}
.btn-secondary:active {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    border-color: var(--color-primary-dark);
}

.read-more-link { /* For "Читать далее" or similar */
    color: var(--color-accent);
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
}
.read-more-link:hover {
    text-decoration: underline;
    color: var(--color-secondary);
}


/* 8. CARDS (GLOBAL) */
.card { /* General card styling, can be base for .neomorphic-card */
    background-color: var(--color-text-light); /* Default white background for non-neomorphic cards */
    border-radius: var(--border-radius-soft);
    overflow: hidden; /* Ensures content respects border-radius */
    display: flex;
    flex-direction: column;
    /* align-items: center; -- This centers children like .card-image and .card-content if they don't take full width. */
    /* text-align: center; -- This centers inline content within the card. */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.card.neomorphic-card { /* Neomorphic cards will override some .card styles */
    background-color: var(--color-background-light); /* Neomorphic base */
    /* Neomorphic shadows are already defined in .neomorphic-card */
}

.card-image { /* Container for the image */
    width: 100%; /* Take full width of the card */
    height: 220px; /* Fixed height for consistency */
    overflow: hidden; /* Clip image if it's larger */
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, crop if necessary */
    object-position: center; /* Center the image content */
    transition: transform var(--transition-speed) ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.card-content {
    padding: 20px;
    flex-grow: 1; /* Allows content to fill space if card heights are equalized by grid/flex */
    text-align: center; /* Center text content in cards by default */
}
.card-content p {
    font-size: 0.95rem;
    color: var(--color-text-medium);
}
.card-title {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-headings);
}


/* 9. SPECIFIC SECTIONS */

/* 9.1 Services Section */
.services-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.services-grid .card .btn-secondary {
    margin-top: auto; /* Pushes button to bottom if card content varies */
}

/* 9.2 Accolades Section */
.accolades-section {
    position: relative; /* For overlay */
    background-size: cover;
    background-position: center;
}
.accolades-section .section-title,
.accolades-section .section-intro,
.accolades-section .accolade-title,
.accolades-section .accolade-item p {
    color: var(--color-text-dark); /* Ensure text is dark on light bg/overlay */
}
.accolades-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.accolade-item {
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent if bg image is strong */
    border-radius: var(--border-radius-soft);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.animated-icon-placeholder {
    width: 60px;
    height: 60px;
    background-color: var(--color-accent);
    border-radius: 50%;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 1.5rem; /* For potential icon font */
    /* Placeholder for actual animated icon */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.accolade-title {
    font-size: 1.3rem;
    color: var(--color-text-headings);
}


/* 9.3 Success Stories (Timeline) */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 0;
}
.timeline::after { /* The central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-accent);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--color-accent);
}
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}
/* Odd items on the left */
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 70px; /* Space for icon */
}
/* Even items on the right */
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 70px; /* Space for icon */
}
/* The circle on the timeline */
.timeline-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    right: -20px; /* Position icon over the line */
    background-color: var(--color-background-light);
    border: 4px solid var(--color-accent);
    top: 25px; /* Adjust to align with content */
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--color-background-light), 0 0 10px rgba(42,122,170,0.5);
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -20px;
}
.timeline-content {
    position: relative;
    /* Neomorphic card styling is applied by .neomorphic-card class */
}
.timeline-content .card-image { height: 200px; }
.timeline-content .card-title { font-size: 1.3rem; text-align: left;}
.timeline-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    text-align: left;
}
.timeline-content p {
    text-align: left;
    font-size: 0.95rem;
}

/* 9.4 Pricing Section */
.pricing-section {
    position: relative;
    background-size: cover;
    background-position: center;
}
.pricing-section .section-title,
.pricing-section .section-intro,
.pricing-section .price-plan-name,
.pricing-section .price-tag,
.pricing-section .features-list li,
.pricing-section .pricing-footnote {
    color: var(--color-text-dark); /* Ensure text is dark on light bg/overlay */
}
.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch; /* Make cards same height if in a row */
}
.price-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.price-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Makes content fill card */
}
.price-plan-name {
    font-size: 1.7rem;
    color: var(--color-primary);
}
.price-tag {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-headings);
    margin: 10px 0 20px 0;
}
.features-list {
    list-style: none;
    padding: 0;
    margin-bottom: auto; /* Pushes button to bottom */
    text-align: left;
}
.features-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}
.features-list li::before {
    content: '✓';
    color: var(--color-success);
    margin-right: 10px;
    font-weight: bold;
}
.features-list li:last-child {
    border-bottom: none;
}
.price-card .btn-primary {
    margin-top: 20px;
    width: 100%;
}
.price-card.popular {
    transform: scale(1.05); /* Make popular plan stand out */
    border: 3px solid var(--color-accent);
    box-shadow: 0 10px 30px rgba(96, 200, 217, 0.3), /* Accent shadow */
                8px 8px 16px var(--color-shadow-dark-soft),
                -8px -8px 16px var(--color-shadow-light-soft);
    position: relative;
}
.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-highlight);
    color: var(--color-text-dark);
    padding: 5px 15px;
    border-radius: var(--border-radius-soft);
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.pricing-footnote {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 2rem;
    color: var(--color-text-medium);
}


/* 9.5 Awards Section */
.awards-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.awards-grid .card .card-image { height: 200px; }


/* 9.6 Sustainability Section */
.sustainability-section {
    position: relative;
    background-size: cover;
    background-position: center;
}
.sustainability-section .section-title,
.sustainability-section .section-intro,
.sustainability-section .sustainability-content p {
    color: var(--color-text-dark); /* Dark text for light background */
}
.sustainability-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify; /* Justify text for a more formal look */
}
.biomorphic-divider {
    margin: 30px 0;
}

/* 9.7 Careers Section */
.careers-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.careers-content p {
    margin-bottom: 1.5rem;
}
.careers-note {
    font-size: 0.9rem;
    margin-top: 1.5rem;
    color: var(--color-text-medium);
}

/* 9.8 External Resources Section */
.external-resources-section {
    position: relative;
    background-size: cover;
    background-position: center;
}
.external-resources-section .section-title,
.external-resources-section .section-intro,
.external-resources-section .resource-title a,
.external-resources-section .resource-description {
    color: var(--color-text-dark); /* Dark text for readability */
}

.external-links-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}
.external-links-list .card {
    display: flex; /* For alignment if content varies */
    flex-direction: column;
}
.external-links-list .card-content {
    text-align: left; /* Resources better left-aligned */
    flex-grow: 1;
}
.resource-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.resource-title a {
    color: var(--color-primary);
    font-weight: 600;
}
.resource-title a:hover {
    color: var(--color-primary-dark);
}
.resource-description {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    line-height: 1.5;
}


/* 9.9 Contact Section & Form */
.contact-form-container {
    padding: 30px; /* Overrides default .neomorphic-card padding if needed */
    max-width: 700px;
    margin: 0 auto 40px auto;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-headings);
}
.contact-details {
    text-align: center;
    margin-top: 40px;
}
.contact-details h3 {
    margin-bottom: 1rem;
    color: var(--color-text-headings); /* Ensure heading color */
}
.contact-details p {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.contact-details p strong {
    color: var(--color-text-dark);
}
.map-placeholder {
    margin-top: 30px;
    border-radius: var(--border-radius-soft);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: #eee; /* Placeholder bg */
    min-height: 300px; /* Placeholder height */
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 10. FOOTER */
.site-footer {
    background-color: var(--color-text-headings); /* Dark background */
    color: var(--color-text-light);
    padding: 50px 0 20px 0;
    font-size: 0.95rem;
}
.site-footer a {
    color: var(--color-accent);
}
.site-footer a:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}
.footer-column h4 {
    font-family: var(--font-headings);
    color: var(--color-text-light);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-shadow: none;
}
.footer-column p {
    color: #bdc3c7; /* Lighter gray for footer text */
    line-height: 1.7;
    margin-bottom: 0.5rem;
}
.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column ul li {
    margin-bottom: 0.7rem;
}
.social-media-links li { /* For text links */
    display: inline-block;
    margin-right: 15px;
}
.social-media-links li:last-child {
    margin-right: 0;
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #bdc3c7;
}

/* 11. ANIMATIONS & HELPERS (for GSAP/ScrollTrigger) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible { /* Class added by JS */
    opacity: 1;
    transform: translateY(0);
}
.sr-only { /* Screen-reader only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 12. RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .timeline::after { left: 30px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; }
    .timeline-icon { left: 10px; } /* Adjust to new line position */
    .timeline-item:nth-child(even) .timeline-icon { left: 10px; }
    .timeline-item:nth-child(odd) .timeline-icon { left: 10px; }
}

@media (max-width: 991px) {
    h1 { font-size: 2.5rem; }
    .hero-title { font-size: 2.8rem; }
    h2, .section-title { font-size: 2rem; }
    .header-contact-info { display: none; } /* Hide on medium screens if space is tight */
}

@media (max-width: 768px) {
    .main-navigation .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--header-height); /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--color-background-light);
        padding: 20px 0;
        transform: translateY(-120%); /* Start off-screen */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 999; /* Below header, above content */
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }
    .main-navigation .nav-links.active {
        transform: translateY(0);
    }
    .main-navigation .nav-links li {
        margin: 0;
        width: 100%;
    }
    .main-navigation .nav-links a {
        display: block;
        padding: 15px 20px;
        text-align: center;
        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-toggle {
        display: block;
    }

    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .section-title { font-size: 1.8rem; }
    .section-intro { font-size: 1rem; }

    .grid-container,
    .services-grid,
    .accolades-grid,
    .pricing-grid,
    .awards-grid,
    .external-links-list,
    .footer-container {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .price-card.popular { transform: scale(1); } /* Reset popular scale on mobile */

    .timeline::after { left: 15px; margin-left: -1.5px; width: 3px;} /* Thinner line for mobile */
    .timeline-item { padding-left: 50px; padding-right: 15px;}
    .timeline-icon { width: 30px; height: 30px; border-width: 3px; left: 0px; top: 20px;}
    .timeline-item:nth-child(even) .timeline-icon,
    .timeline-item:nth-child(odd) .timeline-icon {
        left: 0px; /* Align to the very left edge for simplicity */
    }


    .footer-column { text-align: center; }
    .footer-column ul { padding-left: 0; }
    .social-media-links li { display: block; margin: 10px 0; }
}

/* 13. SPECIFIC PAGE STYLES */
/* For success.html */
body.success-page {
    display: flex;
    flex-direction: column; /* Allow header/footer if present */
    min-height: 100vh;
}
.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.success-page .success-container {
    max-width: 600px;
}
.success-page .success-container h1 {
    color: var(--color-success);
    font-size: 3rem;
    margin-bottom: 1rem;
}
.success-page .success-container p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* For privacy.html and terms.html */
body.privacy-page main,
body.terms-page main {
    padding-top: calc(var(--header-height) + 40px); /* Header height + extra space */
    padding-bottom: 40px;
}
body.privacy-page .content-container,
body.terms-page .content-container {
    background-color: var(--color-text-light);
    padding: 30px;
    border-radius: var(--border-radius-soft);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
body.privacy-page .content-container h1,
body.terms-page .content-container h1 {
    margin-bottom: 1.5rem;
    text-align: center;
}
body.privacy-page .content-container h2,
body.terms-page .content-container h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
}

/* 14. COOKIE CONSENT POPUP */
#cookieConsentPopup {
    /* HTML inline styles take precedence but can be refined here if needed */
    font-family: var(--font-primary);
}
#cookieConsentPopup p {
    color: var(--color-text-light); /* Override default p color if needed */
    margin-bottom: 15px !important; /* Ensure this applies */
}
#cookieConsentPopup a {
    color: var(--color-accent) !important; /* Standout link color */
}
#acceptCookieButton {
    background-color: var(--color-primary) !important;
    color: var(--color-text-light) !important;
    transition: background-color var(--transition-speed) ease !important;
}
#acceptCookieButton:hover {
    background-color: var(--color-primary-dark) !important;
}