/* General Styles */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

/* Header Styles 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
header {
    display: flex; /*Enables flexible alignment of items inside the header.*/
    justify-content: space-between; /*Aligns logo and menu to opposite edges.  */
    align-items: center; /*Ensures logo and menu are vertically aligned.  */
    padding: 15px 20px; /* Prevents content from touching the edges. */
    background-color: #FFFFFF; /*Sets white background.*/
    position: fixed; /* Fixes the header in place during scrolling. */
    top: 0; /* Ensures the header is at the very top */
    width: 100%; /* Makes the header span the full width of the screen. */
    z-index: 100; /*  Sets the stacking order of the header.*/
    box-sizing: border-box; /*Includes padding and border in the element’s width and height.  */
    margin: 0; /* Removes any default margin */
       }

/*.logo {
    margin-right: auto; /* Pushes the menu to the middle by taking up available space } */

/*nav {
    position: absolute; /* Positions the menu absolutely within the header
    left: 50%; /* Moves the menu to the horizontal center 
    transform: translateX(-50%); /* Adjusts the menu to be truly centered 
}*/

.logo img {
    height: 35px;
}
.logo-link {
            display: inline-block;
        }

        .logo {
            height: 50px;
            width: auto;
        }

        .logo-link:hover {
            opacity: 0.8;
        }

.icon {
        width: 24px;  /* Adjust the width as needed */
        height: 24px; /* Adjust the height as needed */
        display: inline-block; /* Ensures the icon behaves like an inline element */
    }

/* Navigation Styles */
nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 15px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 300;
    font-size: 1rem;
}

/* Hero Section Styles 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.hero {
    height: 50vh;
    background-image: url('images/hero-background_1.jpg');
    background-size: cover; /*Ensures the background image covers the entire area of the .hero element, maintaining its aspect ratio. The image will be scaled up or down to fill the space, and any excess will be cropped.*/
    background-position: center; /*Centers the background image both horizontally and vertically within the .hero element. This ensures the focal point of the image is always visible.*/
    background-repeat: no-repeat; /* Prevents the image from repeating */
    display: flex; /*Turns the .hero element into a flex container. This allows you to use flexbox properties to align and distribute the content inside it.*/
    align-items: center; /*Aligns all flex items (child elements) vertically in the center of the .hero container. This works because display: flex is enabled.*/
    justify-content: center; /*Aligns all flex items horizontally in the center of the .hero container. This works in tandem with align-items: center to center content both vertically and horizontally.*/
    text-align: center; /*Centers the text content (like headings or paragraphs) inside the .hero element. This is useful for centering text that isn’t a flex item.*/
    color: white;
    margin-top: 10px; /* Adjusted for fixed header pixel margin at the top of the .hero element. This is typically used to prevent the hero content from being hidden behind a fixed header or navigation bar.*/
    padding: 0 20px; /*Adds 20 pixels of padding to the left and right sides of the .hero element. The 0 means no padding is added to the top or bottom. This ensures content doesn’t touch the edges of the screen on smaller devices.*/
    box-sizing: border-box; /*Changes the box model so that padding and border are included in the element’s total width and height. Without this, padding would increase the overall size of the element beyond the specified height and width*/
}

.hero-content {
    max-width: 800px; /*Limits the width of the hero content to 800px for better readability.*/
}

.hero-content p { /*This rule styles all <p> (paragraph) elements inside the .hero-content container*/
    font-size: 2rem; /*Sets the paragraph font size to 1.2 times the base size.*/
    margin-bottom: 1px; /*Adds 10px space below the paragraph.*/
    font-weight: 300; /*Makes the paragraph text light (thinner).*/
}

.hero-content h1 { /*This rule styles all <h1> (heading level 1) elements inside the .hero-content container*/
    font-size: 3rem; /*Sets the heading font size to 2.5 times the base size.*/
    font-weight: 600; /*Makes the heading semi-bold.*/
    margin-top: 1; /*Removes any default top margin from the heading.*/
}

/* Tagline Section Styles */
.tagline {
    text-align: center;
    padding: 10px 10px;
/* background-color: #f8f8f8; */
}

.tagline h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #194d23; /*dark green*/
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 10px;
    }

    nav ul {
        margin-top: 10px;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    nav ul li {
        margin: 5px 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 2rem;
    }
}

/* Style for text paragraphs
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.text-paragraph {
    /* Center the entire paragraph block horizontally */
    margin-left: auto;
    margin-right: auto; /*These properties center the .text-paragraph block horizontally on the page. This works because the element has a defined max-width.*/
    text-align: left; /* Left-align the bio text */
    font-size: 1rem; /* Base font size for readability */
    line-height: 1.6; /* Comfortable line spacing */
    color: #333; /* Dark gray for better contrast */
    margin-bottom: 1.5rem; /* Space between paragraphs */
    padding: 0 15px; /* Padding for mobile readability */
    max-width: 800px; /* Maximum width for desktop readability */

     /* Center the entire paragraph block horizontally */
    margin-left: auto;
    margin-right: auto; /These properties center the .text-paragraph block horizontally on the page. This works because the element has a defined max-width.*/
}

/* Style for h2 headings */
.text-paragraph h2 {
    text-align: center; /* Center the h2 headings */
    font-size: 1.5rem; /* Slightly larger font size for headings */
    margin-bottom: 1rem; /* Space below the heading */
    color: #222; /* Slightly darker color for emphasis */
    font-weight: 600; /* Medium-bold for better visibility */
}

.text-paragraph {
    /* Center the entire paragraph block horizontally */
    margin-left: auto;
    margin-right: auto; /These properties center the .text-paragraph block horizontally on the page. This works because the element has a defined max-width.*/
    text-align: left; /* Left-align the bio text */
    font-size: 1rem; /* Base font size for readability */
    line-height: 1.6; /* Comfortable line spacing */
    color: #333; /* Dark gray for better contrast */
    margin-bottom: 1.5rem; /* Space between paragraphs */
    padding: 0 15px; /* Padding for mobile readability */
    max-width: 800px; /* Maximum width for desktop readability */

     /* Center the entire paragraph block horizontally */
    margin-left: auto;
    margin-right: auto; /These properties center the .text-paragraph block horizontally on the page. This works because the element has a defined max-width.*/
}

/* Style for h2 headings */
.text-paragraph h2 {
    text-align: center; /* Center the h2 headings */
    font-size: 1.5rem; /* Slightly larger font size for headings */
    margin-bottom: 1rem; /* Space below the heading */
    color: #222; /* Slightly darker color for emphasis */
    font-weight: 600; /* Medium-bold for better visibility */
}

.text-paragraph h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #222;
    font-weight: 600;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .text-paragraph {
        font-size: 1rem; /* Keep base size, but padding handles mobile */
        padding: 0 10px; /* Slightly less padding for smaller screens */
    }

    .text-paragraph h2 {
        font-size: 1.2rem; /* Slightly smaller heading on mobile */
    }
    .text-paragraph h3 {
        font-size: 1rem; /* Slightly smaller heading on mobile */
    }
}


/* Services Section Styles
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.services-section {
    text-align: center;  /* Center-align all text */
    max-width: 1200px; /* Limit the maximum width */
    margin: 0 auto; /* Center the container horizontally */
    padding: 40px 20px; /* Add padding for spacing */
    background-color: #FFF; /*pure white*/
}
/* Services Section Heading */
.services-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
}
/* Services Container */
.services-container {
    display: flex;
    margin: 0 auto; /* Center the container */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-direction: row; /* default: horizontal alignment on desktop */
    align-items: center; /* Center items horizontally */
    gap: 30px; /*space between items*/
    overflow-x: auto; /* Enables horizontal scrolling if needed */
    padding-bottom: 20px;
    max-width: 100%;
    /*max-height: 500px;  Optional: Limits height to enable scrolling */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
}
/* Style for each service item */
.service-item {
    flex: 0 0 auto;  /* Prevents items from shrinking */
    width: 150px;     /* Fixed width for each item */
    height: 150px;    /* Fixed height for each item */
    display: flex;
    justify-content: center;
    align-items: center; /* Center items horizontally */
    cursor: pointer; /* Changes cursor to indicate clickable */
    transition: filter 0.3s ease; /* Smooth transition for hover effect */
}
/* Hover effect for service items */
.service-item:hover {
    filter: brightness(0.8); /* Darkens the item on hover */
}

/* Circle shape for service icons */
.service-icon {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Makes the container a circle */
    overflow: hidden; /* Ensures the image stays within the circle */
}
/* Image styling */
.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image fits within the circle */
}
/* object-fit Values
fill - Stretches the image to fill the container, ignoring aspect ratio (may distort the image).
contain - Scales the image to fit within the container, maintaining aspect ratio (no cropping).
cover - Scales the image to cover the container, maintaining aspect ratio (may crop the image).
none - The image retains its original size and aspect ratio (may overflow or underfill the container).
scale-down - Behaves like none or contain, whichever results in a smaller image.
*/


/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .services-container {
        flex-direction: column; /* Ensures vertical stacking on mobile */
        align-items: center; /* Center items horizontally */
        max-height: 400px; /* Adjust height for mobile scrolling */
        overflow-y: auto; /* Enable vertical scrolling if needed */
    }
    .service-item {
        margin-bottom: 15px; /* Add space between stacked items */
    }
}

/* Keep your existing responsive image styles */
.responsive-image-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.responsive-image {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .responsive-image {
        width: 100%;
    }
}

/* LinkedIn Articles Section Styles
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.linkedin-articles {
    max-width: 800px; /** Limits the width of the articles section for readability */
    margin: 0 auto; /* Center the section */
    padding: 40px 20px; /** Adds space around the section */
    font-family: 'Poppins', sans-serif; /** Uses the Poppins font */
}

.linkedin-articles h2 {
    font-size: 1.2rem; /** Sets the font size for the section heading */
    margin-bottom: 30px; /** Adds space below the heading */
    text-align: center; /** Centers the heading */
    color: #333; /** Sets the text color */
}
.linkedin-articles h3 {
    font-size: 1.2rem; /** Sets the font size for the section heading */
    margin-bottom: 30px; /** Adds space below the heading */
    text-align: center; /** Centers the heading */
    color: #333; /** Sets the text color to dark grey */
}
    
/* Article card layout */
.article-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    gap: 20px; /* Space between image and content */
}

/* Article image styling */
.article-image {
    width: 150px;
    height: 150px;
    object-fit: contain;/* Ensures the image fits within the box */
    /*width: 100%;
    height: 100%;*/
    /*border-radius: 4px; /* Optional: rounded corners */
    flex-shrink: 0; /* Prevents image from shrinking */
}

/* Hover effect for article image */
.article-image:hover {
    filter: brightness(0.8); /* Darkens the image on hover */
    
/* Article content styling */
.article-content {
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
}
.linkedin-articles article {
    margin-bottom: 30px; /** Adds space between articles */
    padding-bottom: 20px; /** Adds space below each article */
    border-bottom: 1px solid #eee; /** Adds a light border below each article */
}

/* Article title link styling */
.article-title-link {
    color: #194d23; /* Dark green */
    text-align: left;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.article-title-link:hover {
    text-decoration: underline;
}

/* Article summary styling */
.article-summary {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .article-card {
        flex-direction: column; /* Stack image and content vertically */
    }

    .article-image {
        width: 50%; /* Full width on mobile */
        height: auto;
    }

    .article-title-link {
        font-size: 1.1rem; /* Slightly smaller on mobile */
    }
}

/* Impressum Page Styles 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.impressum-container {
    max-width: 800px;
    margin: 100px auto 40px;
    padding: 20px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.impressum-container h1 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
}

.impressum-container h2 {
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #333;
}

.impressum-container p {
    margin-bottom: 10px;
}

.impressum-container a {
    color: #0077b5;
    text-decoration: none;
}

.impressum-container a:hover {
    text-decoration: underline;
}

/* Privacy Policy Page Styles
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.privacy-container {
    max-width: 800px;
    margin: 100px auto 40px;
    padding: 20px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.privacy-container h1 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}

.privacy-container h2 {
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #333;
}

.privacy-container p {
    margin-bottom: 15px;
}

.privacy-container a {
    color: #0077b5;
    text-decoration: none;
}

.privacy-container a:hover {
    text-decoration: underline;
}


/* Consent Button Styles */
.consent-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    text-align: center;
}

.consent-container button {
    background-color: #0077b5;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.consent-container button:hover {
    background-color: #005580;
}

.consent-container button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Container for the contact section */
.contact-section {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* Style for the text paragraph and headings */
.text-paragraph {
    text-align: center;
}

.text-paragraph h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

/* Style for the contact list 
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contact-list {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    gap: 10px; /* Space between items */
}

/* Style for each contact item */
.contact-item {
    display: flex;
    align-items: center; /* Center icon and text vertically */
    gap: 10px; /* Space between icon and text */
    justify-content: center; /* Center the entire item horizontally */
    width: 100%; /* Ensure the item takes full width for centering */
}

/* Style for the contact icons */
.contact-icon {
    width: 24px;
    height: 24px;
}

/* Style for the contact link */
.contact-link {
    color: #0077b5; /* LinkedIn blue */
    text-decoration: none; /* Remove underline */
}

.contact-link:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Style for the email text */
.contact-item span {
    color: #333;
}
/* Button style (moved from HTML) */
.libutton {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 7px;
    text-align: center;
    outline: none;
    text-decoration: none !important;
    color: #ffffff !important;
    width: 200px;
    height: 32px;
    border-radius: 16px;
    background-color: #0A66C2;
    font-family: "SF Pro Text", Helvetica, sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin: 0 auto; /* Center the button horizontally */
    border: none; /* Remove any default border */
}

/* Center the button container */
.button-container {
    display: flex;
    justify-content: center; /* Center the button horizontally */
    margin-top: 10px;
    margin: 20px auto; /* Add margin to separate it from other elements */
    width: 100%; /* Ensure the container takes full width */
}

    /* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .text-paragraph {
        font-size: 1rem;
        padding: 0 10px;
    }

    .text-paragraph h2 {
        font-size: 1.2rem;
    }
}
    
/* Footer Styles
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Footer Styles */

.footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links {
    margin-top: 10px;
}

.footer-links a {
    color: #333;
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer p {
    margin: 0;
    color: #666;
    font-size: 14px;
}