/* css/main.css */
body, html {
    margin: 0;
    height: 100%;
    font-family: 'Inter', sans-serif;
}

/* Reset the margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

/* ________________________________Style the header_______________________ */
header {
    margin: auto; /* Center the slideshow container */
    max-width: 3840px; /* Aligns with the header content width */
    position: relative; /* Context for the dropdown menu */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #ffffff;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
    z-index: 2;
}

.header-content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2; /* Higher than the z-index of other content but lower than the dropdown */
}

.header-title, .header-arrow, .header-projects,.header-nav-desktop, .header-nav a, .header-project-title {
    text-decoration: none;
    color: #000000;
    font-size: 1.5em;
    padding: 0 5px; /* Add padding to each link and text */
}

.header-arrow {
    margin: 0 5px; /* Reduced space around the arrow */
}

.header-projects.active {
    cursor: default; /* Keeps the text clickable but indicates it's the active page */
    pointer-events: none; /* Disables the link functionality */
    margin-right: auto; /* This will push the remaining content to the right */
}

header-projects.active1 {
    cursor: default; /* Keeps the text clickable but indicates it's the active page */
    pointer-events: none; /* Disables the link functionality */
}

.header-project-title {
    cursor: default; /* Keeps the text clickable but indicates it's the active page */
    pointer-events: none; /* Disables the link functionality */
    
}

.header-left-container{
    margin-right: auto; /* This will push the remaining content to the right */
}

.header-nav {
    display: flex;
}

.header-nav ul {
    list-style-type: none;
    display: flex;
    margin-left: auto; /* Aligns the nav to the right */
    padding: 0; /* Removes default padding */
}

.header-nav li {
    padding: 0; /* Removes default padding */
}

.header-nav a {
    padding: 0 10px; /* Consistent padding for all links */
}

/* Desktop-specific styles for the navigation */
.header-nav-desktop {
    display: block; /* Show by default on desktop */
}

.header-nav ul {
    display: none; /* Hidden by default */
    /* Additional styles for the dropdown menu */
}


/* Hamburger Menu Icon */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    cursor: pointer;
    font-size: 2em; /* Size of the hamburger icon */
    /* Other styling as needed */
}

.header-title-mobile{
    display: none;
}

/* ________________________________Style the carousel_______________________ */
.info_page{
    margin: auto; /* Center the slideshow container */
    max-width: 3840px; /* Aligns with the header content width */
    position: relative;
    display: flex; /* This will lay out the child elements in a row */
    align-items: stretch; /* This will make sure they stretch to the same height */
    height: calc(100vh - 50px); /* Adjust height as needed */
    width: 100%;
}



.info_carousel {
    position: relative;
    display: flex;
    height: calc(100vh - 50px); /* Adjust the height to take into account your header */
    width: 60%;
    overflow: hidden; /* In case images are larger than the container */
    background-color: rgb(255, 255, 255);
  }

  .info_text {
    position: relative;
    display: flex;
    height: calc(100vh - 50px); /* Adjust the height to take into account your header */
    width: 40%;
    overflow: hidden; /* In case images are larger than the container */
    background-color: rgb(255, 255, 255);
  } 

  .info_carousel_images_container {
    position: relative;
    display: flex;
    height: calc(100vh - 50px ); /* Adjust the height to take into account your header */
    width: 100%;
    overflow: hidden; /* In case images are larger than the container */
    background-color: rgb(238, 234, 236);
  }
  
  .info_carousel-image {
    position: absolute;
    top: 0;
    left: 150%; /* Set the left edge of the image to the center of the container */
    transform: translateX(-50%); /* Shift the image back by half its width */
    width: 100%; /* Make the image fill the entire width of the container */
    height: 100%; /* Make the image fill the entire height of the container */
    object-fit: contain; /* Cover the container, clipping the image if necessary */
    cursor: pointer; /* Indicates that you can click on the image */
    transition: left 0.5s ease-in-out
  }

  #info_first-image{
    left: 50%; /* Set the left edge of the image to the center of the container */
  }
  
  
  .carousel_info_dots {
    text-align: center;
    position: absolute; /* Position it over the carousel */
    bottom: 20px;
    width: 100%;
  }
  
  .info_dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: rgb(255, 255, 255);
    border: 1px solid black;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.6s ease;
    }
  
  .info_dot.active {
    background-color: #000;
  }
  

  /* ________________________________Style the carousel description text_______________________ */

  .info_text {
    display: block; /* Ensures that each paragraph is a block-level element */
    padding: 20px; /* Add padding for the text */
    padding-right: 30px;
    padding-top: 5px;
    background: #fff; /* Or any background color you prefer */
    font-size: 0.9em;
    max-height: calc(100vh - 50px ); /* Adjust the height to take into account your header */
    overflow-y: auto; /* Enables vertical scrolling if content exceeds max-height */
}

.info_kontakt {
    display: block; /* Ensures that each paragraph is a block-level element */
    padding:0px; /* Add padding for the text */
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1em;
}

  .project_description_gross {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Use 300 for the light font weight */
    padding: 5px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    font-size: 1.1em;
  }

  .project_description_text {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Use 300 for the light font weight */
    padding: 5px;
    line-height: 1.3;
    padding-right: 20px;
  }

  .project_description_kontakt {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Use 300 for the light font weight */
    padding: 0;
    line-height: 1.3;
    padding-right: 20px;
  }

  .project_description_verlag {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Use 300 for the light font weight */
    padding: 5px;
    border-top: 1px solid black;
    font-size: 1em;
  }

  .project_description_verlag2 {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Use 300 for the light font weight */
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 1em;
  }
  
  


/* _____________________________________________header line break__________________________________________ */
/* Media query for screens with a maximum width of 1440px */
@media (max-width: 1440px) {

    .project-carousel{ 
        height: calc(100vh - 80px); /* Adjust height as needed */
    }
    .carousel {
        height: calc(100vh - 50px - 80px); /* Adjust the height to take into account your header */
      }

    .header-content {
        flex-wrap: wrap; /* Allow the header elements to wrap onto the next line */
    }

    .header-left-container {
      flex-direction: column;
      align-items: flex-start; /* Align items to the left */
      width: 80%;
    }
  
    .header-project-title {
      order: 2; /* Move the project title below the other header elements */
      padding-top: 10px; /* Add space above the project title */
      width: 100%; /* Take full width of the header */
      white-space: nowrap; /* Prevent the title from wrapping */
    }

    #arrow2{
        display: none;
    }

    .header-nav-desktop{
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* ________________________________Style the carousel, but not as carousel_______________________ */

@media (max-width: 768px) {

    
    .info_page {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        position: relative;
        padding-top: 50px; /* Adjust this value to the height of your header */
        padding-bottom: 40px; /* Adjust this value to the height of your header */
        overflow-x: hidden; /* Disable horizontal scrolling */
        overflow-y: auto; /* Enable vertical scrolling */
        width: 100%;
        height: auto;
        background-color: rgb(255, 255, 255);
    }

    .info_carousel {
        position: relative;
        display: block; /* Stack elements */
        order: 2; /* Place the .info_carousel container below other elements */
        padding-top: 0px; /* Adjust this value to the height of your header */
        width: 100%;
        height: auto; /* Adjust height automatically based on the image aspect ratio */
        background-color: rgb(255, 255, 255);
    }

    .info_carousel_images_container {
        position: relative;
        padding-top: 0px; /* Adjust this value to the height of your header */
        padding-bottom: 0px; /* Adjust this value to the height of your header */
        display: block; /* Stack images vertically */
        overflow-x: hidden; /* Disable horizontal scrolling */
        width: 100%;
        height: auto; /* Adjust height automatically based on the image aspect ratio */
        background-color: rgb(255, 255, 255);
    }

    .info_carousel-image {
        position: relative;
        left: 0;
        transform: translateX(0%); /* Shift the image back by half its width */
        padding-top: 20px;
        display: block; /* Stack elements */
        width: 100%; /* Full width of the viewport */
        height: auto; /* Adjust height automatically based on the image aspect ratio */
        cursor: pointer; /* Indicates that you can click on the image */
        object-fit: contain; /* Ensure the whole image is visible */
    }

    #info_first-image{
        left: 0; /* Set the left edge of the image to the center of the container */
      }

      .info_dot {
        display: none; /* Hide dots in mobile view */
    }

/* ________________________________Style the carousel description text_______________________ */

      .info_text {
        position: relative;
        display: block; /* Stack elements */
        order: 1; /* Place .info_text above other elements in mobile view */
        width: 100%; /* Full width of the viewport */
        height: auto; /* Height adjusts to fit the content */
        padding:0px 0px;
        overflow-y: hidden; /* Allow scrolling if the text is too long */
        max-height: 2000px; /* Adjust the value to your needs */
        background-color: rgb(255, 255, 255); /* Mobile specific background color */
        left: 0;
        transform: translateX(0%);
    }

    .project_description_gross {
        padding: 5px 20px; /* Top/Bottom 5px, Left/Right 20px */
      }
    
      .project_description_text {
        padding: 5px 20px; /* Top/Bottom 5px, Left/Right 20px */
      }
    
      .project_description_kontakt {
        padding: 5px 20px; /* Top/Bottom 5px, Left/Right 20px */
      }
    
      .project_description_verlag {
        padding: 5px 20px; /* Top/Bottom 5px, Left/Right 20px */
      }
    
      .project_description_verlag2 {
        padding: 5px 20px; /* Top/Bottom 5px, Left/Right 20px */
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        z-index: 2;
      }

}


/* _____________________________________________header mobile styles__________________________________________ */


@media (max-width: 768px) {

    .header-arrow,
    .header-projects,
    .header-nav-desktop,
    .header-project-title { /* Hide the desktop-specific elements */
        display: none;
    }

    header {
        border-bottom: 1px solid black; /* Bottom border */
        position: fixed; /* Fixed position */
        width: 100%;
        font-size: 0.8em;
        padding: 10px 10px;
    }

    .header-title{
        padding: 0 0px; /* Add padding to each link and text */
    }

    .hamburger-menu {
        display: block; /* Show the hamburger menu */
        margin-left: auto; /* Align the menu icon to the right */
        position: relative; /* Context for absolute positioning */
        z-index: 10; /* Ensure it's above other content */
    }
    

     /* This rule makes the navigation menu visible when the 'show' class is toggled on */
     .header-nav.show, .header-nav.show ul {
        display: block;
    }

    .header-nav {
        position: absolute; /* Position the nav */
        top: calc(100% + 10px); /* Adjust top position by adding header's top padding */
        left: -20px; /* Adjust this value to match the header's horizontal padding */
        right: -20px; /* Adjust this value to match the header's horizontal padding */
        width: calc(100vw + 40px); /* Adjust this to include the negative values on left and right */
        background: #fff; /* Background color for the dropdown */
        /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional: adds some shadow for styling */
        z-index: 1; /* Below the header's z-index */
        display: none; /* Hide by default */
    }

    .header-nav a {
        border-top: 1px solid black; /* Top border for each item */
        border-bottom: 1px solid black; /* Bottom border */
    }

    .header-nav ul {
        list-style-type: none; /* Remove bullet points */
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
        
    }

    .header-nav li a {
        display: block; /* Make each link fill the entire list item */
        padding: 12px 30px; /* Padding for touch targets */
        text-decoration: none; /* No underline */
        color: #000; /* Text color */
        border-bottom: 1px solid #ddd; /* Optional: adds a separator between links */
    }

    .header-nav li:last-child a {
        border-bottom: none; /* No border for the last item */
    }


    /* ________________________________Another linebreak_______________________ */
    @media (max-width: 379px) {
        .info_text{
            padding:0px 0px;
            padding-top: 16px; /* Adjust this value to the height of your header */
        }


    }
    

}