/* General Body and Font Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #FDFBF5; /* Light Beige from logo */
    color: #4A4A4A; /* Dark grey for text */
    margin: 0;
    padding: 0;
    /* FIX: Setting a standard padding-top to ensure content is visible below the fixed header */
    padding-top: 82px; 
}

/* Header Styles */
.header-bg {
    background-color: #E0F2FE; /* Light Sky Blue - Tailwind sky-100 */
    /* NOTE: HTML must apply "fixed top-0 w-full z-50" */
}

/* Hero Section Background */
.hero-bg {
    background-color: #F8F3E9; /* Slightly darker beige for contrast */
}

/* Hero Banner Specific Styles */
.hero-banner {
    min-height: 300px;
}

/* Color Definitions */
.primary-color {
    color: #B8860B; /* Gold from logo */
}

.primary-bg {
    background-color: #B8860B; /* Gold from logo */
}

.primary-border {
    border-color: #B8860B; /* Gold from logo */
}

.secondary-color {
    color: #5D4037; /* Darker brown for accents if needed */
}

/* Button Styles */
.btn-primary {
    background-color: #B8860B;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #A0700A; /* Darker gold on hover */
}

/* Section Title Styles */
.section-title {
    font-size: 2.25rem; /* 36px */
    font-weight: 600;
    margin-bottom: 1.5rem; /* 24px */
    text-align: center;
    color: #B8860B; /* Gold */
}

/* Card Styles (Services, Benefits, Testimonials) */
.service-card, .benefit-card, .testimonial-card {
    background-color: #FFFFFF;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 1.5rem; /* 24px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row equal height */
}

.service-card:hover, .benefit-card:hover, .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Ensure content within cards can grow, and button stays at bottom */
.service-card > *:not(:last-child),
.benefit-card > *:not(:last-child),
.testimonial-card > *:not(:last-child) {
    margin-bottom: 1rem; /* Adjust spacing as needed */
}

.service-card > .btn-primary,
.benefit-card > .btn-primary,
.testimonial-card > .btn-primary {
    margin-top: auto; /* Push button to the bottom */
}


/* Icon Placeholder Styles */
.icon-placeholder {
    width: 48px;
    height: 48px;
    background-color: #E0E0E0; /* Light grey for icon placeholder */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; /* 16px */
    color: #B8860B; /* Icon color */
    font-size: 1.5rem; /* 24px */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* --- Language Visibility Rules --- */
html[lang="en"] [data-lang="de"] {
    display: none !important;
}

html[lang="de"] [data-lang="en"] {
    display: none !important;
}

/* Language Switcher Styles */
.lang-switcher button {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem; /* 6px */
    font-weight: 500;
}

.lang-switcher .active-lang {
    background-color: #B8860B; /* Gold */
    color: white;
}

.lang-switcher .inactive-lang {
    color: #B8860B; /* Gold */
    background-color: transparent;
}

.lang-switcher .inactive-lang:hover {
    background-color: #F8F3E9; /* Light beige hover */
}

/* Logo Styles */
.site-logo {
    height: 70px; /* Default height for desktop */
    width: auto;   /* Maintain aspect ratio */
}

/* Custom Message Box for Form Submission */
#custom-message-box {
    display: none; /* Initially hidden */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #B8860B; /* Gold */
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    text-align: center;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.875rem; /* 30px */
    }

    .site-logo {
        height: 60px; /* Slightly smaller logo on mobile */
    }

    .hero-banner {
        min-height: 250px; /* Adjust min-height for mobile if needed */
    }

    /* FIX: Mobile specific padding for the body */
    body {
        padding-top: 74px;
    }
}

@media (min-width: 769px) {
    /* FIX: Desktop specific padding for the body */
    body {
        padding-top: 94px;
    }
}