/* Basic Reset & Defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px; /* ADJUST TO MATCH HEADER HEIGHT */ /* NEW */
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light grey text */
    font-size: 16px; /* Base font size */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Theme Colors --- */
:root {
    --background-primary: #121212;
    --background-secondary: #1e1e1e; /* Slightly lighter dark */
    --text-primary: #f5f5f5; /* Near white */
    --text-secondary: #a0a0a0; /* Grey for less emphasis */
    --accent-color: #00aaff; /* Vibrant blue accent */
    --accent-hover: #33bbff; /* Lighter blue for hover */
    --border-color: #333333; /* Subtle border */
    --card-shadow: 0 4px 15px rgba(0, 170, 255, 0.08); /* Subtle glow effect */
    --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


/* --- Header & Navigation (UPDATED) --- */
header {
    /* Change sticky to fixed */
    position: fixed; /* UPDATED */
    top: 0;
    left: 0; /* Ensure it spans full width */
    width: 100%; /* Ensure it spans full width */
    z-index: 1000;

    /* Keep the visual styles */
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.3s ease;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    height: 75px; /* Slightly taller */
}

header .logo img {
    height: 45px; /* Adjust as needed for light logo */
    width: auto;
    display: block;
}

header ul {
    list-style: none;
    display: flex;
}

header ul li {
    margin-left: 30px; /* More spacing */
}

header ul li a {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 200;
    transition: color 0.3s ease;
    padding-bottom: 5px; /* Space for potential underline effect */
    border-bottom: 2px solid transparent; /* Prepare for hover effect */
}

header ul li a:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* --- Language Switcher Styles --- */
li.language-switcher {
    /* Use flex to display flags side-by-side */
    display: flex;
    align-items: center;
    gap: 8px; /* Space between the flags */
    /* Remove left margin inherited from normal list items if needed */
    margin-left: 15px; /* Or adjust as necessary */
}

/* Common style for each language link */
.lang-link {
    display: inline-block; /* Or inline-flex */
    padding: 2px; /* Minimal padding around flag */
    border-bottom: none;
    opacity: 1; /* Default to full opacity */
    transition: opacity 0.3s ease;
    vertical-align: middle;
    line-height: 1; /* Ensure container doesn't add extra height */
}

/* Style for the inactive language link */
.lang-link.inactive-lang {
    opacity: 0.3; /* Dim the inactive flag */
    filter: grayscale(1);
}

/* Hover effect: Make inactive slightly more visible, keep active full */
.lang-link.inactive-lang:hover {
    opacity: 0.9; /* Slightly less dimmed on hover */
    filter: grayscale(0);
}


.language-flag {
    height: 16px; /* Adjust height as needed */
    width: auto;
    display: block;
    /* Optional border removed, add back if desired */
}

/* Hero Section */
.hero {
    position: relative; /* Needed for absolute positioning of video/divider */
    overflow: hidden; /* Prevent content/divider spill */
    color: var(--text-primary); /* Ensure text stays light */
    text-align: center;
    /* Adjust padding if needed, especially top to account for header */
    padding: 150px 20px 120px 20px; /* Increased bottom padding for divider space */
    /* Use min-height: 100vh to fill viewport height */
    min-height: 100vh;
    display: flex; /* Keep flex for centering content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Remove background color/gradient if video is primary background */
    /* background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%); */
}

.background-video {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    width: 100%;
    height: 100%;
    min-width: 100%; /* Ensure coverage */
    min-height: 100%; /* Ensure coverage */
    object-fit: cover; /* Cover the area, potentially cropping */
    transform: translate(-50%, -50%); /* Fine-tune centering */
    z-index: -1; /* Place behind content */
    opacity: 0.6; /* Optional: Reduce video opacity slightly */
}

.hero-content { /* Style the container holding text/button */
    position: relative; /* Ensure it's above the video */
    z-index: 1;
    max-width: 750px; /* Adjust max-width as needed */
    /* Optional: Add subtle background to content area for readability */
    /* background-color: rgba(0, 0, 0, 0.3); */
    /* padding: 30px; */
    /* border-radius: 10px; */
}

.hero h1 {
    font-size: 3.5em;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Add shadow for readability */
}

.hero p {
    font-size: 1.25em;
    max-width: 650px;
    margin-bottom: 35px;
    color: var(--text-primary); /* Ensure paragraph text is light */
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add shadow for readability */
}


/* --- Shape Divider Styles (NEW) --- */
.shape-divider {
    position: absolute;
    bottom: -1px; /* Overlap slightly to avoid gaps */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0; /* Prevent extra space */
    transform: rotate(180deg); /* Flip the SVG if needed */
}

.shape-divider svg {
    position: relative;
    display: block;
    /* Adjust width/height to control the shape's size */
    width: calc(100% + 1.3px); /* Slightly wider to prevent edge gaps */
    height: 80px; /* Adjust height of the curve/shape */
}

.shape-divider .shape-fill {
    /* Fill with the background color of the NEXT section */
    fill: var(--background-primary); /* #services uses primary bg */
}

/* Buttons */
.cta-button, .cta-button-outline {
    display: inline-block;
    padding: 14px 30px; /* Larger buttons */
    border-radius: 30px; /* Pill shape */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid var(--accent-color);
    font-size: 1em;
    text-transform: uppercase; /* Optional: Uppercase text */
    letter-spacing: 0.5px;
}

.cta-button {
    background-color: var(--accent-color);
    color: #fff; /* White text on accent */
}

.cta-button:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 10px rgba(0, 170, 255, 0.3); /* Glow on hover */
}

.cta-button-outline {
    background-color: transparent;
    color: var(--accent-color);
}

.cta-button-outline:hover {
    background-color: var(--accent-color);
    color: #fff;
    transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 170, 255, 0.3);
}


/* General Section Styling */
.section {
    padding: 80px 0; /* More vertical space */
    text-align: center;
}

.section-alt {
    background-color: var(--background-secondary); /* Alternate background */
}

.section h2 {
    font-size: 2.8em; /* Larger section titles */
    color: var(--text-primary);
    margin-bottom: 50px;
    font-weight: 700;
    position: relative;
    display: inline-block; /* Allows for underline positioning */
    padding-bottom: 10px;
}

/* Underline effect for section titles */
.section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* Width of the underline */
    height: 4px; /* Thickness of the underline */
    background-color: var(--accent-color);
    border-radius: 2px;
}

/* Services Section */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    text-align: left;
}

.service-item {
    background: var(--background-secondary);
    padding: 35px;
    border-radius: 12px; /* More rounded corners */
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 170, 255, 0.15); /* Enhanced glow */
}

.service-item .icon {
    font-size: 3em; /* Larger icons */
    margin-bottom: 20px;
    color: var(--accent-color); /* Use accent color for icons */
    display: inline-block; /* Allows better spacing */
}

.service-item h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.service-item p {
    color: var(--text-secondary);
}

/* Packages Section */
.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.package-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 35px;
    text-align: left;
    background-color: var(--background-primary); /* Use primary bg for cards here */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
     box-shadow: var(--card-shadow);
}

.package-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 25px rgba(0, 170, 255, 0.15);
}

.package-card.popular {
    border-color: var(--accent-color);
    border-width: 2px;
     box-shadow: 0 8px 30px rgba(0, 170, 255, 0.2); /* More prominent shadow */
}

.package-card .badge {
    position: absolute;
    top: 0;
    right: -45px;
    background-color: var(--accent-color);
    color: white;
    padding: 6px 50px;
    font-size: 0.8em;
    font-weight: bold;
    transform: rotate(45deg);
    transform-origin: top right;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.package-card h3 {
    font-size: 1.6em;
    color: var(--text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.package-card .price {
    font-size: 2.5em; /* Larger price */
    font-weight: 700;
    color: var(--accent-color); /* Accent color for price */
    margin-bottom: 25px;
    text-align: center;
}

.package-card .price span {
    font-size: 0.5em; /* Smaller '/ month' text */
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.package-card ul {
    list-style: none;
    margin-bottom: 35px;
    padding-left: 0;
}

.package-card ul li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    color: var(--text-secondary); /* Secondary text for features */
}

/* Custom checkmark bullets */
.package-card ul li::before {
    content: '✓';
    color: var(--accent-color);
    font-weight: bold;
    position: absolute;
    left: 5px;
    top: 1px;
    font-size: 1.2em;
}

.package-card .cta-button,
.package-card .cta-button-outline {
    display: block;
    text-align: center;
    margin-top: 25px;
}

.disclaimer {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-top: 30px;
}

/* --- Package Selector Styles --- */
.package-selector {
    /* text-align: center; */ /* Centering is now done via margin */
    margin-bottom: 40px;
    border: 1px solid var(--border-color);
    background-color: var(--background-primary);
    /* display: inline-block; */ /* REMOVE or change to block */
    display: block; /* Make it a block element */
    max-width: fit-content; /* Allow margin auto to work by constraining width */
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
    padding: 5px;
    border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Keep .selector-btn styles as they were */
.selector-btn {
    padding: 10px 25px;
    margin: 0 3px;
    font-size: 1em;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block; /* Ensure buttons stay inline inside the selector block */
}

.selector-btn:hover {
    color: var(--text-primary);
}

.selector-btn.active {
    background-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 170, 255, 0.2);
}

/* --- Package Grid Visibility --- */
.package-grid {
    display: none; /* Hide all grids by default */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px; /* Same margin as before */
}

.package-grid.active {
    display: grid; /* Show only the active grid */
    /* Add animation? Optional */
    animation: fadeIn 0.5s ease-in-out;
}

/* Optional Fade-in Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* --- Ensure Service Grid accommodates 6 items nicely --- */
/* Adjust minmax if needed based on new content, 260px might still be fine */
.service-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    text-align: left;
}

/* Responsive adjustment for package selector if needed */
@media (max-width: 480px) {
    .package-selector {
        display: block; /* Stack buttons vertically if too wide */
        text-align: center;
        border-radius: 8px; /* Less radius if stacked */
        padding: 10px;
    }
    .selector-btn {
         display: block; /* Stack buttons */
         width: calc(100% - 10px); /* Full width minus padding */
         margin: 5px auto; /* Center and add vertical space */
    }
}

/* Testimonials Section */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-item {
    background: var(--background-secondary);
    padding: 30px;  
    border-radius: 12px;
    border-left: 5px solid var(--accent-color);
    box-shadow: var(--card-shadow);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 170, 255, 0.12);
}

.testimonial-item blockquote {
    font-style: italic;
    color: var(--text-primary); /* Primary text for quote */
    margin-bottom: 20px;
    border-left: none;
    padding-left: 0;
    font-size: 0.8em; /* Slightly larger quote text */
    position: relative;
    padding-left: 35px; /* Space for quote icon */
}

.testimonial-item .author {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}
.testimonial-item .author::before {
    content: '— '; /* Em dash before author */
}

/* --- Testimonials Section Enhancements --- */

#testimonials {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    color: var(--text-primary);
    /* Define gap variable */
    --testimonial-gap: 20px; /* Adjust gap size as needed */
}

/* Container adjustments */
.testimonial-container {
    position: relative;
    z-index: 1;
    max-width: 1100px; /* Widen container to better fit 3 items */
    margin: 0 auto;
    padding: 0 50px; /* Adjust padding, considering chevrons */
}

#testimonials h2 {
    color: var(--text-primary);
    margin-bottom: 50px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* NEW Video Background Styles */
.video-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent video overflow */
    z-index: -1; /* Place behind content */
}

.testimonial-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto; /* Ensure aspect ratio is maintained */
    height: auto; /* Ensure aspect ratio is maintained */
    z-index: 1; /* Base z-index within container */
    object-fit: cover; /* Cover the area */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 60% Black overlay */
    z-index: 2; /* Sit on top of the video */
}
/* --- End NEW Video Background Styles --- */



/* Carousel Styles - UPDATED */
.testimonial-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.testimonial-track {
    display: flex;
    gap: var(--testimonial-gap); /* Use gap for spacing */
    transition: transform 0.5s ease-in-out;
    /* Track width is implicitly calculated by flex items */
     padding-left: calc(var(--testimonial-gap) / 2); /* Add slight padding to center items visually */
     padding-right: calc(var(--testimonial-gap) / 2);
     margin-left: calc(var(--testimonial-gap) / -2); /* Use negative margin to counter padding for width calc */
}

/* Individual Testimonial Item Styling */
.testimonial-item {
    /* Calculate width (keep from previous step) */
    flex: 0 0 calc((100% / 3) - (var(--testimonial-gap) * 2 / 3));
    min-width: calc((100% / 3) - (var(--testimonial-gap) * 2 / 3));

    background: rgba(30, 30, 30, 0.8);
    padding: 25px 30px; /* Adjusted padding */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    /* Ensure content inside stacks normally */
    display: flex; /* Use flex for vertical stretching/alignment */
    flex-direction: column;
}

.testimonial-pfp {
    width: 45px; /* Smaller size */
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--accent-color);
}

.testimonial-content {
    /* flex: 1; */ /* Removed, let it size naturally */
    text-align: left;
    display: flex; /* Added flex */
    flex-direction: column; /* Stack quote and author info */
    flex-grow: 1; /* Allow content to grow to fill item height */
}

.testimonial-content blockquote {
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 3px; /* Increased margin to separate from author */
    border-left: none;
    padding-left: 0;
    font-size: 1em;
    flex-grow: 1; /* Allow quote to take up available space */
}

/* NEW Styles for author-info container */
.author-info {
    display: flex;
    align-items: center; /* Vertically align PFP and text */
    gap: 12px; /* Space between PFP and author text */
    margin-top: auto; /* Push to the bottom if blockquote doesn't fill height */
    padding-top: 10px; /* Add padding above if margin-top isn't enough */
}


/* UPDATED Author Styles */
.testimonial-content .author {
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    font-size: 0.8em;
    line-height: 1.3; /* Adjust line height if name/title wrap */
}
.testimonial-content .author::before {
    content: ''; /* Ensure em dash is removed */
}

/* Chevron Navigation Styles */
.chevron {
    position: absolute;
    top: 65%; /* Adjust vertical position if needed */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 45px; /* Slightly larger */
    height: 45px;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease; /* Add opacity transition */
}

.chevron:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.chevron:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.2);
}


.chevron:hover:not(:disabled) {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.prev-testimonial {
    left: 0px; /* Adjust position */
}

.next-testimonial {
    right: 0px; /* Adjust position */
}

/* Responsive adjustments for chevrons if needed */
@media (max-width: 992px) {
    .testimonial-container { max-width: 800px; padding: 0 45px;}
     /* Show 2 items */
     .testimonial-item {
        flex: 0 0 calc((100% / 2) - (var(--testimonial-gap) / 2));
        min-width: calc((100% / 2) - (var(--testimonial-gap) / 2));
    }
     .prev-testimonial { left: -5px; }
     .next-testimonial { right: -5px; }
}

/* Mobile */
@media (max-width: 600px) {
    /* Keep 1 item per view */
    .testimonial-item {
       flex: 0 0 100%;
       min-width: 100%;
       /* Remove column direction if added previously */
       /* flex-direction: column; */
       /* align-items: center; */
       /* text-align: center; */
       gap: 15px;
       padding: 20px; /* Adjust padding */
   }
   .testimonial-content {
       text-align: left; /* Keep text left aligned */
       align-items: flex-start; /* Align content left */
   }
    .testimonial-content blockquote {
        margin-bottom: 15px;
    }
   /* Ensure author info stays row */
   .author-info {
       /* display: flex; */ /* Already flex */
       /* align-items: center; */ /* Already center */
       justify-content: flex-start; /* Align PFP/name to the left */
       margin-top: 0; /* Reset margin/padding */
       padding-top: 0;
   }
   .testimonial-pfp {
       width: 40px; /* Slightly smaller on mobile */
       height: 40px;
   }
    .testimonial-content .author {
        text-align: left;
    }
   /* Keep mobile chevron styles */
   /* ... */
}

/* Contact Form Section */
.contact-form {
    max-width: 650px;
    margin: 0 auto;
    background: var(--background-secondary); /* Use secondary bg */
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    text-align: left;
    border: 1px solid var(--border-color);
}

#contact p { /* Style the intro paragraph in contact section */
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 15px; /* More padding */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Slightly less rounded than cards */
    font-family: inherit;
    font-size: 1em;
    background-color: var(--background-primary); /* Darker input background */
    color: var(--text-primary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.3); /* Focus ring */
}

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

.contact-form button[type="submit"] {
    width: 100%;
    padding: 15px; /* Match input padding */
    /* Inherit styles from .cta-button */
}

/* Footer */
footer {
    background-color: var(--background-secondary); /* Match header background */
    color: var(--text-secondary);
    text-align: center;
    padding: 30px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9em;
}

/* --- Mobile Navigation Styles --- */

.mobile-nav-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    color: var(--text-primary); /* Use light text color */
    font-size: 2rem; /* Adjust size of hamburger icon */
    cursor: pointer;
    padding: 5px;
    line-height: 1; /* Prevent extra spacing */
    z-index: 1001; /* Ensure it's above other header content if needed */
}

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

/* --- Responsive Adjustments including Mobile Nav --- */

@media (max-width: 768px) { /* Adjust breakpoint if needed */

    header nav {
        /* Ensure nav remains a horizontal flex container */
        flex-direction: row; /* Explicitly row, or remove any 'column' setting */
        justify-content: space-between; /* Pushes logo left, toggle right */
        align-items: center; /* Vertically aligns logo and toggle */
        /* Keep the original height, don't let it collapse */
        height: 75px; /* Or your actual header height */
        /* Remove height: auto if it was added previously */
    }

    header nav .logo {
        margin-bottom: 0; /* Remove margin if it was added for stacking */
    }

    header nav .nav-links {
        /* Style the mobile dropdown menu */
        display: none;
        position: absolute;
        top: 75px; /* Position below the header (match header height) */
        left: 0;
        width: 100%;
        background-color: rgba(30, 30, 30, 0.95);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        border-top: 1px solid var(--border-color);
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s; /* Adjusted timing */
        visibility: hidden;
        z-index: 999; /* Ensure it's below header but above content */
    }

    header nav .nav-links.nav-active {
        display: flex;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s; /* Adjusted timing */
    }

    header nav .nav-links {
        /* Style the mobile dropdown menu */
        display: none; /* Hide links by default on mobile */
        position: absolute;
        top: 45px; /* Position below the header (match header height) */
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Darker semi-transparent background */
        backdrop-filter: blur(5px); /* Optional blur for dropdown */
        -webkit-backdrop-filter: blur(5px);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        border-top: 1px solid var(--border-color); /* Separator line */
        /* Animation preparation (optional) */
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease, display 0s linear 0.3s; /* Delay display none */
        visibility: hidden;
    }


    header nav .nav-links li {
        margin: 0px 0; /* Vertical spacing for mobile links */
        margin-left: 0; /* Reset desktop margin */
        width: 100%; /* Make list items full width */
        text-align: center;
    }

    header nav .nav-links li a {
        padding: 10px 20px; /* Larger tap target */
        display: block; /* Make link fill list item */
        border-bottom: none; /* Remove desktop hover effect */
        width: 100%;
        font-weight: 500;
    }
     header nav .nav-links li a:hover {
        color: var(--text-primary); /* Keep text color on hover */
        background-color: rgba(0, 170, 255, 0.1); /* Subtle accent hover */
        border-bottom: none;
    }


    .mobile-nav-toggle {
        display: block; /* Show the hamburger button */
    }

    header nav .nav-links li.language-switcher {
        margin-top: 20px;
        padding-bottom: 10px;
        justify-content: end; /* Center the flags within the list item */
        gap: 15px; /* Increase gap slightly for mobile */
    }

    header nav .nav-links li.language-switcher .lang-link {
        padding: 5px; /* Slightly larger padding for touch */
    }

    .language-flag {
         height: 18px; /* Slightly larger flag */
    }

    /* Optional: Change icon when active */
    .mobile-nav-toggle[aria-expanded="true"] {
       /* You could change the content to an 'X' icon */
       /* content: '✕'; */ /* Note: content property doesn't work on buttons directly like this */
       /* Or change color/style */
       color: var(--accent-color);
    }

    /* Adjust other styles as needed for mobile */
    body { font-size: 15px; }

}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .hero h1 { font-size: 3em; }
    .section h2 { font-size: 2.5em; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }

    header nav {
        flex-direction: row;
        height: auto;
        padding: 15px 20px;
    }

    header .logo {
        margin-bottom: 15px;
    }

    header ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    header ul li {
        margin: 10px 0;
        margin-left: 0;
    }
     header ul li a {
        border-bottom: none; /* Remove hover underline on mobile nav stack */
     }

    .hero { padding: 80px 20px; min-height: auto; }
    .hero h1 { font-size: 2.5em; }
    .hero p { font-size: 1.1em; }

    .section { padding: 60px 0; }
    .section h2 { font-size: 2.2em; margin-bottom: 40px; }

    .service-grid,
    .package-grid,
    .testimonial-grid {
        grid-template-columns: 1fr; /* Stack items */
    }

    .contact-form { padding: 30px; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .hero h1 { font-size: 2em; }
    .hero p { font-size: 1em; }
    .section h2 { font-size: 1.9em; }

    .cta-button, .cta-button-outline { padding: 12px 25px; }

    .package-card .badge {
         right: -55px;
         padding: 5px 55px;
         font-size: 0.7em;
    }
    .testimonial-item blockquote { padding-left: 25px; }
     .testimonial-item blockquote::before { font-size: 2.5em; left: -10px; }
}

/* --- Footer Enhancements --- */
footer {
    background-color: #000000; /* UPDATED - Changed to black */
    color: var(--text-secondary);
    padding-top: 60px;
    padding-bottom: 20px;
    margin-top: 80px;
    border-top: 1px solid var(--border-color); /* Border might be less visible now, adjust if needed */
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Space between left and right */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 5%; /* Use percentage gap for better flexibility */
    margin-bottom: 50px; /* Increased space before copyright */
}

.footer-left {
    flex-basis: 45%; /* Adjust basis for left column */
    min-width: 280px; /* Minimum width before wrapping */
    text-align: left; /* Ensure left alignment */
}

.footer-right {
    flex-basis: 45%; /* Adjust basis for right column */
    min-width: 280px; /* Minimum width */
    text-align: left; /* Align sitemap section left */
}

.footer-logo-large { /* Style for the bigger logo */
    height: 60px; /* Significantly larger logo */
    width: auto;
    margin-bottom: 25px; /* More space below logo */
    display: block; /* Ensure it's on its own line */
}

.mission-statement {
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: left; /* Explicitly left */
    margin-bottom: 20px; /* Space before made-with */
}

.made-with {
    text-align: left; /* Explicitly left */
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-top: 15px; /* Space above */
}

.heart-icon {
    color: var(--accent-color); /* Use accent color */
    font-size: 1.1em; /* Make heart slightly bigger */
    display: inline-block; /* Helps with alignment */
    vertical-align: middle; /* Align vertically with text */
    margin: 0 2px; /* Tiny space around heart */
}

.footer-right h4 {
    color: var(--text-primary);
    font-size: 1.1em;
    margin-bottom: 25px; /* Increased space below title */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left; /* Ensure heading is left aligned */
}

.sitemap-columns { /* Container for the two ULs */
    display: flex;
    gap: 40px; /* Space between the two lists */
    align-items: flex-start;
}

.sitemap-links { /* Styling for EACH UL */
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1; /* Allow each list to take up space */
}

.sitemap-links li {
    margin-bottom: 12px; /* Slightly more space between links */
}

.sitemap-links li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sitemap-links li a:hover {
    color: var(--accent-color);
}

.imprint-link {
     margin-top: 30px; /* Space above imprint link */
     text-align: left;
}

 .imprint-link a {
     color: var(--text-secondary);
     text-decoration: none;
     transition: color 0.3s ease;
     font-size: 0.9em;
 }

  .imprint-link a:hover {
     color: var(--accent-color);
 }


.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 0.85em;
}

/* Responsive Adjustments for Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Stack columns */
        align-items: flex-start; /* Align content to the left */
        gap: 40px; /* Space between stacked columns */
    }

    .footer-left, .footer-right {
        flex-basis: 100%; /* Take full width when stacked */
        min-width: auto; /* Reset min-width */
        text-align: left; /* Ensure left alignment continues */
    }

    /* Optional: Adjust spacing or layout of sitemap columns on mobile */
    /* .sitemap-columns {
        gap: 20px; /* Reduce gap between columns slightly */
    /* } */
}

@media (max-width: 480px) {
     .sitemap-columns {
        flex-direction: column; /* Stack the two sitemap lists vertically */
        gap: 0; /* No horizontal gap needed */
    }
     .sitemap-links:last-child {
        margin-top: 10px; /* Add a little space between the stacked lists */
    }
}

/* --- Imprint Page Specific Styles (Add to style.css) --- */
.imprint-section {
    padding: 80px 0; /* Match other sections */
    background-color: var(--background-primary); /* Or secondary if preferred */
}

.imprint-container h1,
.imprint-container h2,
.imprint-container h3 {
    color: var(--text-primary);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    text-align: left; /* Ensure left alignment */
}
 .imprint-container h1 {
    margin-top: 0; /* No top margin for main heading */
    text-align: center; /* Center main heading */
     margin-bottom: 1em;
     padding-bottom: 10px;
     /* Optional: reuse section heading underline */
     /* position: relative; display: inline-block; */
}
 /* Optional: Remove underline effect from h1 if reusing section style */
 /* .imprint-container h1::after { display: none; } */


.imprint-container p {
    color: var(--text-secondary);
    margin-bottom: 1em;
    text-align: left;
    line-height: 1.7;
}

 .imprint-container p strong {
    color: var(--text-primary); /* Make emphasized text brighter */
    font-weight: 600;
 }

.imprint-container a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
.imprint-container a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}