body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #2A2A2A;
}

.container {
    display: flex;
    height: 100vh;
}

.left-side, .right-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.left-side {
    background-color: #000000; /* Pitch black */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align children to start at the top */
    align-items: center; /* Keep items centered horizontally */
    text-align: center;
    padding-top: 20px; /* Add padding at the top if needed */
}

.right-side {
    background-color: #2A2A2A; /* Updated to be darker */
    flex-direction: column;
    padding: 20px; /* Adds padding around the chat layout */
    box-sizing: border-box;
}



/* Adjusted chatbox styles for fixed size */
.chatbox {
    background-color: #FFFFFF; /* White background */
    border-radius: 50px; /* Rounded corners */
    box-shadow: inset 0 0 20px #000000; /* Inset shadow */
    width: 90%;
    max-width: 500px; /* Mimics a smartphone width */
    min-width: 300px; /* Mimics a smartphone width */
    height: 55vh; /* Reduced height for a smaller fixed size */
    margin: 50px auto; /* Centers the chatbox */
    display: flex;
    flex-direction: column;
    padding: 20px; /* Padding inside the chatbox */
    box-sizing: border-box;
    position: relative; /* Needed for absolute positioning of the input box */
    margin-bottom: 100px;
}

/* Updated input box styles */
.input-box {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Apple-like fonts, with fallbacks */
    font-weight: 200; /* Lighter font weight for a sleek look */
    background-color: #FFFFFF; /* White background */
    box-shadow: 0px 0px 5px #555555, inset 0px 0px 8px #999999;
    border-radius: 20px; /* Rounded corners */
    padding: 10px 20px;
    outline: none; /* Removes the default focus outline */
    border: none;
    width: calc(100% - 120px); /* Adjusts width to fit inside the chatbox padding */
    position: absolute; /* Positions the input box at the bottom */
    bottom: 40px; /* Distance from the bottom of the chatbox */
    left: 40px; /* Aligns with the chatbox padding */
    height: 50px;
}

.navbar {
    width: 100%;
    padding: 10px 40px; /* Adjust based on your preference */
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.nav-logo {
    height: 40px; /* Adjust based on your preference */
    margin-right: 20px; /* Space between logo and nav items */
}

.nav-items a {
    color: #fff; /* Light color for visibility */
    text-decoration: none; /* No underline */
    margin-right: 15px; /* Space between items */
    font-size: 16px; /* Adjust based on your preference */
}

.nav-items a:hover {
    text-decoration: underline; /* Underline on hover for interactivity */
}

.logo-container {
    flex-grow: 1; /* Allows the container to take up all available space */
    display: flex; /* Enables flexbox for vertical centering */
    justify-content: center; /* Centers the logo horizontally */
    align-items: center; /* Centers the logo vertically */
    padding-bottom: 120px;
}


.tagline {
    color: #e4e9ed; /* White text color for contrast against the dark background */
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Apple-like fonts, with fallbacks */
    font-size: 50px; /* Adjust based on your design needs */
    font-weight: 700; /* Lighter font weight for a sleek look */
    margin-top: 50px; /* Space between the logo and the text */
    text-align: center; /* Ensures the text is centered */
}

.text {
    color: #e4e9ed; /* White text color for contrast against the dark background */
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Apple-like fonts, with fallbacks */
    font-size: 25px; /* Adjust based on your design needs */
    font-weight: 200; /* Lighter font weight for a sleek look */
    margin-top: 0px; /* Space between the logo and the text */
    text-align: center; /* Ensures the text is centered */
}



.send-icon {
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
    color: #555; /* Icon color, adjust as needed */
    font-size: 24px; /* Adjust based on your design needs */
    position: absolute; /* Position within the chatbox */
    right: 50px; /* Distance from the right, adjust to align with the input box */
    bottom: 58px; /* Align with the bottom of the input box */
    cursor: pointer; /* Change cursor on hover */
}


/* Add styles for :hover state for visual feedback */
.send-icon:hover {
    color: #000; /* Darker color on hover */
}

/* Chat messages styling */
.message {
    max-width: 80%; /* Limits message width */
    margin: 10px; /* Spacing between messages */
    padding: 10px; /* Padding inside messages */
    border-radius: 20px; /* Rounded corners for chat bubbles */
    color: #FFFFFF; /* Text color */
    font-size: 16px; /* Adjust based on your design needs */
    box-sizing: border-box;
    display: inline-block; /* Allows the bubble to shrink/grow with its content */
    box-shadow: 0px 2px 5px #555555;
}

/* User messages */
.user {
    background-color: #007bff; /* Blue background for user messages */
    color: white; /* White text for user messages */
    margin-left: auto; /* Aligns user messages to the right */
    text-align: right; /* Text aligns to the right inside the bubble */
    border-bottom-right-radius: 0; /* Makes the bottom-right corner not rounded */
}

/* Bot messages */
.bot {
    background-color: #333333; /* Dark background for bot messages */
    color: white; /* White text for bot messages */
    margin-right: auto; /* Aligns bot messages to the left */
    text-align: left; /* Text aligns to the left inside the bubble */
    border-bottom-left-radius: 0; /* Makes the bottom-left corner not rounded */
}

/* Ensures the chat area starts from the top and messages stack from top to bottom */
/* Adjusts the .responses container to stack messages from top to bottom */
.responses {
    display: flex;
    flex-direction: column; /* Stacks messages in the natural order */
    overflow-y: auto; /* Allows scrolling */
    padding: 10px; /* Adds some padding around messages */
    margin-bottom: 100px;
}


/* Style for the typing indicator to match the chat's theme */
.typing-indicator {
    height: 40px; /* Adjust based on your design needs */
    display: flex;
    align-items: center; /* Vertically centers the dots */
    justify-content: center; /* Horizontally centers the dots */
    margin-left: auto; /* For user typing indicator, align right */
    margin-right: auto; /* For bot typing indicator, align left */
}

.typing-indicator .dot {
    width: 8px; /* Size of dots */
    height: 8px; /* Size of dots */
    background-color: #999; /* Color of dots */
    border-radius: 50%; /* Makes dots circular */
    margin: 0 5px; /* Spacing between dots */
    animation: typing 1.5s infinite; /* Adds typing animation */
}

@keyframes typing {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

.responses::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent; /* Light background for the scrollbar track */
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* Inset shadow */
}

/* Styles the scrollbar handle */
.responses::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #b3b3b3; /* Darker color for the scrollbar handle */
    box-shadow: inset 0 0 6px rgba(255,255,255,0.5); /* Inset shadow for the handle */
}

/* Hide scrollbar track */
::-webkit-scrollbar-track {
    background: transparent; /* Make the track invisible */
}

/* Style the thumb */
::-webkit-scrollbar-thumb {
    background: #888; /* Thumb color */
    border-radius: 10px; /* Rounded edges */
}

/* Set the scrollbar width */
::-webkit-scrollbar {
    width: 8px; /* Thin scrollbar */
}


/* Styles the scrollbar width */
.responses::-webkit-scrollbar {
    width: 12px; /* Adjust the width of the scrollbar */
}

.contact-form-container {
    background-color: #555; /* Dark background */
    color: black; /* White text */
    padding: 40px; /* Padding around the container */
    text-align: center; /* Center the text */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    margin: auto; /* Center the container itself */
    width: 100%; /* Take full width to center content */
    box-sizing: border-box; /* Include padding in the element's total width */
}

#contact-form {
    padding: 50px;
    background-color: #FFFFFF; /* White background */
    border-radius: 50px; /* Rounded corners */
    box-shadow: inset 0 0 20px #000000; /* Inset shadow */
    width: 100%; /* Form takes full width of its parent */
    max-width: 900px; /* Maximum width of the form */
    display: flex;
    flex-direction: column; /* Stack form elements vertically */
    align-items: center; /* Center form elements horizontally */
    margin: 150px 0px;
}

.big {
    font-size: 50px;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 90%; /* Responsive width */
    max-width: 900px; /* Maximum width */
    margin: 10px 0; /* Margin for spacing */
    padding: 10px; /* Padding inside the inputs */
    border: none; /* Remove border */
    border-radius: 20px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    box-shadow: inset 0px 0px 8px #555555;
    font-size: 20px;
}

#contact-form textarea {
    height: 500px;
    margin-bottom: 0px;
}

#contact-form button {
    background-color: #007bff; /* Blue background */
    color: #FFFFFF; /* White text */
    padding: 10px 20px; /* Padding inside the button */
    border: none; /* Remove border */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 20px; /* Margin on top */
}

#contact-form button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

@media only screen and (max-width: 768px) {
    body, html {
        font-size: 14px; /* Verkleinern der Basis-Schriftgröße */
        width: 100%;
        overflow-x: hidden; /* Verhindert horizontales Scrollen */
    }

    .container {
        flex-direction: column; /* Stapelt die .left-side und .right-side vertikal */
    }

    .left-side, .right-side {
        flex: none;
        width: 100%; /* Nimmt die volle Breite ein */
        align-items: center; /* Zentriert die Inhalte */
        padding: 10px; /* Verringert den Seitenabstand */
    }

    .navbar .nav-items a {
        font-size: 14px; /* Verkleinert die Schriftgröße der Navigationslinks */
    }

    .chatbox {
        width: 100%; /* Nutzt die volle Breite */
        height: auto; /* Passt die Höhe dynamisch an */
        margin-bottom: 20px; /* Reduziert den Abstand nach unten */
    }


    .tagline, .text {
        font-size: 24px; /* Verkleinert die Schriftgröße für Schlagzeilen */
    }

    #contact-form textarea {
        height: 200px; /* Reduziert die Höhe des Textbereichs */
    }

    /* Passt das Layout des Kontaktformulars an */
    #contact-form {
        padding: 20px;
        margin: 50px 0px;
    }

    .logo-container .logo {
        max-width: 80%; /* Begrenzt die Breite des Logos */
        height: auto; /* Passt die Höhe automatisch an die Breite an */
        margin: 0 auto; /* Zentriert das Logo im Container */
    }

    /* Erhöhung der Chatbox-Höhe */
    .chatbox {
        height: 65vh; /* Erhöht die Höhe der Chatbox */
        margin-bottom: 50px;
    }

    /* Verhindern der Überlappung durch Anpassung des Abstands und der Größen */
    .contact-form-container {
        margin-top: 20px; /* Fügt einen oberen Abstand zum Kontaktformular hinzu */
        padding-top: 20px;
    }

    .container, .left-side, .right-side {
        max-width: 100%; /* Begrenzt die maximale Breite */
        box-sizing: border-box; /* Bezieht Padding in die Breite mit ein */
    }

    /* Zusätzliche Anpassungen zur Verbesserung der Benutzerfreundlichkeit */
    .right-side, .left-side {
        padding: 15px; /* Erhöht den Seitenabstand für Inhalte */
    }

    .chatbox, .navbar, .nav-items a {
        max-width: 100%; /* Stellt sicher, dass diese Elemente nicht breiter als der Bildschirm sind */
        box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite eingeschlossen sind */
    }

    .mobile {
        min-height: 1500px;
    }

    .big {
        margin: 0px;
    }
}