/* Disable horizontal scrolling */
html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}


body {
    background-color: hwb(60 93% 4%);
    font-family: 'Lato';
    margin: 0; /* Add this line */
    padding: 0; /* Add this line */
}



/* Slimmer header with blurred background */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px; /* Reduced height for a slimmer header */
    background-color: rgba(255, 255, 255, 0.65); /* Semi-transparent background */
    backdrop-filter: blur(12.5px); /* Blurred background */
    z-index: 10; /* Ensure the header stays on top */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px; /* Reduced padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    border-bottom: 1px solid rgba(255, 255, 255, 1);
}



/* Increase size for h2 and h3 elements */
h2 {
    font-size: 2em;              /* Larger font for h2 */
    text-align: center;          /* Center h2 headings */
}

h3 {
    font-size: 1.5em;            /* Larger font for h3 */
}

/* Additional spacing between headings and content */
h2, h3 {
    margin-bottom: 20px;
}



/* General hover effect for buttons and links */
.hover-effect {
    transition: background-color 0.3s ease;  /* Smooth hover transition */
}

.hover-effect:hover {
    background-color: #333;  /* Darken color on hover (same as current .cta-button) */
}

/* Container for logo and navigation links */
.header-container {
    width: 100%;
    max-width: 1200px; /* Ensures maximum width for larger screens */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Reduced logo size */
.logo {
    height: 40px; /* Adjust the logo size to fit a slimmer header */
    vertical-align: middle; /* Aligns the logo vertically */
}

/* Navigation links styling */
.nav-links ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    gap: 0.2vw; /* Responsive gap using viewport width for spacing */
}

/* Styling for individual navigation links */
.nav-links ul li a {
    text-decoration: none;
    color: black;
    font-size: 0.5em; /* Slightly smaller font size */
    font-weight: 600; /* Stronger font-weight for visibility */
    padding: 10px 10px; /* Reduced padding for slimmer design */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for navigation links */
.nav-links ul li a:hover {
    color: #333; /* Slightly darker color on hover */
}

/* Responsive adjustments for tablets and smaller devices */
@media (max-width: 1024px) {
    .nav-links ul {
        gap: 1.5vw; /* Slightly reduced gap for smaller screens */
    }

    .logo {
        height: 35px; /* Smaller logo for medium-sized devices */
    }
}

/* Responsive adjustments for mobile tablets (small screens) */
@media (max-width: 768px) {
    .nav-links ul {
        gap: 10px; /* Pixel-based gap for mobile devices */
    }

    .logo {
        height: 30px; /* Further reduced logo size for small devices */
    }
}

/* Responsive adjustments for small mobile devices */
@media (max-width: 480px) {
    .nav-links ul {
        gap: 5px; /* Very tight spacing for compact screens */
    }

    .logo {
        height: 25px; /* Small logo size for very small screens */
    }

    .nav-links ul li a {
        font-size: 0.4em; /* Slightly smaller font size for very small screens */
    }
}

#kontakt .cta-button {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 1.3em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
    transition: background-color 0.3s ease;  /* Smooth hover transition */
}

#kontakt .cta-button:hover {
    background-color: #333; /* Apply hover color */
}


nav li {
    display: inline-block;
    padding: 0 5px;            /* Add some padding between links */
    color: black;
    font-size: 1em;             /* Adjust font size */
}
 

.logo {
    height: 2em;              /* Set the height for the logo if needed */
    vertical-align: middle;    /* Align the logo vertically */
}


/* Hero banner should cover the entire screen and stay fixed */
.hero-banner {
    position: fixed; /* Fixes the banner to the viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* Full screen height */
    background-image: url("heroPicture3.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: white;
    z-index: 1; /* Keep it below the header but above initial content */
}

.hero-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Dark overlay for text visibility */
    z-index: -1; /* Ensure the overlay is behind the content */
}

.hero-banner h1 {
    font-size: 2.5em; /* Main heading size */
    margin: 10px 0;
}
/* CTA button inside the hero banner */
.cta-button {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 1.3em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
}

.cta-button a {
    color: white; /* Ensure the link inside stays white */
    text-decoration: none; /* Remove underline from link */
    display: block;
    width: 100%;
    height: 100%;
}

.cta-button:hover {
    background-color: #333; /* Darken on hover */
}


.content-container {
    position: relative;
    z-index: 2;
    margin-top: 99.9vh;
    width: 100vw;
    background: linear-gradient(to bottom, hwb(60 93% 4%), #ffffff);
    border-top: 1px solid rgba(0, 0, 0, 0.2);;
}

/* Add an inner container to manage padding and centering */
.content-inner {
    max-width: 1200px; /* Limit width for the content, centered */
    margin: 0 auto; /* Center content */
    padding: 0 40px; /* Add padding for spacing on the sides */
}


/* Example styling for sections below the hero banner */
#services, #team, #portfolio, #kontakt {
    padding-top: 50px;         /* Add vertical space to the sections */
    padding-bottom: 50px;
}


/* Style the services section as a visual chain */
/* Remove the hover effect from .service */
.service {
    padding: 20px;
    border-left: 4px solid black;  /* Visual chain effect */
    margin-bottom: 20px;
    position: relative;
    transition: background-color 0.3s ease;
}


.service h3 {
    margin: 0;
    padding: 0;
}

.service p {
    margin-top: 10px;
    font-size: 1.1em;
    line-height: 1.5;
}


/* Reduce margin below the h2 heading */
#team h2 {
    margin-bottom: 10px;         /* Decrease space between heading and team section */
}

/* Team Section for Desktop */
#team {
    display: flex;
    justify-content: space-around;  /* Space the team members evenly */
    align-items: flex-start;
    flex-wrap: wrap;                /* Ensure the layout wraps on smaller screens */
    gap: 30px;                      /* Add spacing between team members */
}

/* Style for individual team-member divs */
.team-member {
    display: flex;
    flex-direction: column;         /* Stack elements vertically inside each team-member */
    align-items: center;            /* Center the elements horizontally */
    text-align: center;
    width: 45%;                     /* Each team member takes up 45% of the container width */
    padding: 20px;
    border: 2px solid black;        /* Optional border to make team blocks more visible */
    border-radius: 10px;            /* Slight rounding of corners */
    transition: transform 0.3s ease;/* Add a hover effect to make the blocks interactive */
}

.team-member:hover {
    transform: scale(1.05);         /* Slightly enlarge the block on hover */
}

/* Style the team-member <h3> heading */
.team-member h3 {
    margin-bottom: 15px;
    font-size: 1.8em;               /* Larger font for the name */
}

/* Make team-member images circular and larger */
.team-member img {
    width: 180px;                   /* Increased width for larger image */
    height: 180px;                  /* Ensure the image remains a square */
    object-fit: cover;              /* Ensure the image covers the space without stretching */
    border-radius: 50%;             /* Make the image circular */
    margin-bottom: 15px;
}



.team-member img.team-member-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%; /* Makes the image circular */
    margin-bottom: 15px;
}



.team-member p:first-of-type {
    margin-bottom: -0.3em; /* Reduziert den Abstand zwischen Business/Tech und dem Text darunter */
}

.team-member p {
    margin-top: 5px; /* Reduce margin between paragraphs */
    font-size: 1.1em;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

/* Center the last paragraph in the team section and increase font size */
#team > p {
    text-align: center;             /* Center the last paragraph */
    font-size: 1.2em;               /* Increase the font size if necessary */
    margin-top: 20px;               /* Add some spacing above the paragraph */
    line-height: 1.6;               /* Add better readability with line height */
}


/* Portfolio Section */

/* Center and style h3 headings */
#portfolio h3 {
    text-align: center;               /* Center the heading */
    font-size: 1.8em;                 /* Slightly larger heading */
    color: #5c5c5c;                   /* Muted, readable gray */
    margin-bottom: 15px;              /* Space below the heading */
}

/* Center the paragraphs in the portfolio section */
#portfolio p {
    text-align: center;               /* Center the paragraph */
    font-size: 1.2em;                 /* Same size as the last paragraph in the team section */
    line-height: 1.6;                 /* Add better readability with line height */
    margin-bottom: 20px;              /* Space below each paragraph */
}

/* Add a video frame below the paragraphs */
.video-frame {
    width: 100%;                      /* Full width frame */
    max-width: 800px;                 /* Limit max width for large screens */
    height: 450px;                    /* Height for video (16:9 ratio) */
    background-color: #f0f0f0;        /* Light background color for the frame */
    border: 2px solid #ccc;           /* Light border to frame the video */
    margin: 0 auto 40px auto;         /* Center the frame and add space below */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-frame::before {
    content: "Video Placeholder";     /* Placeholder text for the video */
    color: #aaa;
    font-size: 1.5em;
    text-align: center;
}

footer {
    text-align: center;
}


#kontakt .cta-button {
    display: inline-block;            /* Ensure the button takes inline-block space */
    background-color: black;          /* Button background color */
    color: white;                     /* Text color */
    padding: 15px 30px;               /* Button padding */
    border-radius: 10px;              /* Rounded corners */
    font-size: 1.3em;                 /* Font size */
    text-transform: uppercase;        /* Capitalized text */
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
    transition: background-color 0.3s ease; /* Smooth hover transition */
    margin-left: auto;                /* Center horizontally */
    margin-right: auto;               /* Center horizontally */
}

/* Ensure the button link is styled correctly */
#kontakt .cta-button a {
    color: white;                     /* Ensure the link inside stays white */
    text-decoration: none;            /* Remove underline from link */
    display: block;                   /* Make the entire button area clickable */
    width: 100%;                      /* Full width clickable area */
    height: 100%;                     /* Full height clickable area */
}

/* Ensure that the button is within a centered container */
#kontakt {
    display: flex;
    justify-content: center;          /* Horizontally center the content in the contact section */
    align-items: center;              /* Vertically center the content */
    flex-direction: column;           /* Stack elements vertically */
    padding: 50px 0;                  /* Add padding to the contact section */
}

.cta-button:hover {
    background-color: #333;           /* Darken button color on hover */
}

/* Center the iPhone video container and scale it down */
/* Center the iPhone video container and scale it down */
.iphone-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto;                      /* Center the container */
    width: 225px;                           /* Scale down to a width similar to an iPhone */
    background-color: rgba(0, 0, 0, 0.25);  /* Semi-transparent black border (iPhone-like frame) */
    border-radius: 30px;                    /* Rounded corners to mimic iPhone design */
    padding: 10px;                          /* Padding to simulate the iPhone border */
    height: auto;                           /* Maintain natural height based on aspect ratio */
}

/* Style the video to fit inside the fake iPhone frame */
.iphone-video {
    width: 100%;                            /* Video takes full width inside the container */
    height: auto;                           /* Maintain the video's natural aspect ratio */
    object-fit: cover;                      /* Ensure the video covers the entire area */
    border-radius: 20px;                    /* Slightly rounded corners for the video itself */
}

/* Store badges styling */
.store-badges {
    display: flex;
    justify-content: center;        /* Center the badges horizontally */
    align-items: center;            /* Vertically align them to the center */
    gap: 20px;                      /* Add space between the badges */
    margin-top: 20px;               /* Space between the video and badges */
}

/* Badge styling */
.store-badge {
    width: 150px;                   /* Set a fixed width for the badges */
    height: auto;                   /* Maintain the aspect ratio of the badges */
    cursor: pointer;                /* Change the cursor to pointer when hovering */
}

.store-badge:hover {
    opacity: 0.8;                   /* Slight hover effect for the badges */
}


/* Existing styles from index.css */

/* Responsive styles */
@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 1.8em; /* Scale down heading for mobile */
    }

    .hero-banner p {
        font-size: 1.2em; /* Scale down subheading for mobile */
    }

    .cta-button {
        font-size: 1em; /* Scale down button size */
        padding: 10px 20px;
    }

    /* Make the services section stack vertically on smaller screens */
    #services .service {
        margin-bottom: 30px;
    }

    /* Team section */
    #team .team-member {
        width: 100%; /* Make team members stack vertically */
        margin-bottom: 20px;
    }

    /* Adjust the video container for mobile */
    .iphone-video-container {
        width: 100%; /* Full width on mobile */
        max-width: 300px; /* Limit the width for smaller screens */
    }

    .store-badges {
        flex-direction: column; /* Stack badges vertically on mobile */
        gap: 10px; /* Reduce gap between badges */
    }

    .store-badge {
        width: 120px; /* Scale down badge size */
    }
}


/* Hide the regular navigation on small devices */
.nav-links {
    display: none; /* Hide navigation links on small devices */
}



/* Use the existing hero-banner h1 styling */
#typed-text {
    font-size: inherit;  /* Inherits the size from the h1 */
    font-weight: inherit;  /* Inherits the weight from the h1 */
    color: inherit;  /* Inherits the color from the h1 */
}


#cursor {
    font-size: inherit;  /* Inherit the font size from the h1 */
    font-weight: inherit;  /* Inherit the font weight */
    color: inherit;  /* Inherit color */
    display: inline-block;
    animation: blink 1s infinite;  /* Make the pipe blink */
}


/* Blinking effect for the cursor */
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Blinking effect for the cursor */
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Hide the burger menu on larger screens */
.burger-menu {
    display: none;
}

/* On devices with a minimum width of 768px, show the regular navigation */
@media (min-width: 768px) {
/* Ensure the nav-links are correctly positioned in the header */
.nav-links {
    position: relative; /* Remove any absolute positioning if present */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ensure that the header is correctly positioned and doesn’t interfere with the hero banner */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10; /* Ensure the header stays on top */
}

    .nav-links ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none; /* Remove default list styling */
        margin: 0;
        padding: 0;
    }

    .nav-links ul li {
        margin-right: 20px; /* Space between the links */
    }

    .nav-links ul li a {
        text-decoration: none;
        color: black; /* Set the text color */
        padding: 10px 20px; /* Spacing around the links */
        transition: color 0.3s ease; /* Smooth transition for hover */
    }

    .nav-links ul li a:hover {
        color: #333; /* Change text color on hover */
    }
}

/* On smaller devices (below 768px), show the burger menu */
@media (max-width: 767px) {
    .nav-links {
        display: none; /* Hide regular navigation links */
    }

    .burger-menu {
        display: flex; /* Show the burger menu */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 25px;
        cursor: pointer;
        margin-right: 40px;  /* Align with the content-container's padding */
    }

    .burger-menu div {
        width: 100%;
        height: 4px;
        background-color: black;
        margin: 4px 0;
        transition: all 0.3s ease;
    }

}



/* Adjust navigation links to fit on 768px screens */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-links ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .nav-links ul li {
        flex: 1; /* Make each link take an equal amount of space */
        text-align: center;
        margin: 0; /* Remove margin between the links */
    }

    .nav-links ul li a {
        padding: 5px 5px; /* Reduce padding to prevent overflow */
        font-size: 0.9em; /* Slightly reduce font size to make it fit */
    }
}

/* On larger screens (above 1024px), return to normal spacing */
@media (min-width: 1025px) {
    .nav-links ul li {
        margin-right: 10px; /* Space between links on larger screens */
    }

    .nav-links ul li a {
        padding: 10px 15px; /* Restore regular padding */
        font-size: 0.8em;
    }
}

.team-member .linkedin-icon {
    width: 2em;
    height: 2em;
}