/* 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 */
}

/* ________________________________Style the carousel_______________________ */
.project-carousel{
    margin: auto; /* Center the slideshow container */
    max-width: 3840px; /* Aligns with the header content width */
    position: relative;
    height: calc(100vh - 50px); /* Adjust height as needed */
    width: 100%;
}

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

.carousel {
    position: relative;
    display: flex;
    height: calc(100vh - 50px - 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(255, 255, 255);
  }
  
  .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 */
    max-width: 100%; /* This will make sure the image does not exceed the container's width */
    max-height: calc(100vh - 50px - 50px); /* This will make sure the image does not exceed the container's height */
    cursor: pointer; /* Indicates that you can click on the image */
    transition: left 0.5s ease-in-out
  }

  #first-image{
    left: 50%; /* Set the left edge of the image to the center of the container */
  }
  
  
  .carousel-dots {
    text-align: center;
    position: absolute; /* Position it over the carousel */
    bottom: 10px;
    width: 100%;
  }
  
  .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;
    }
  
  .dot.active {
    background-color: #000;
  }

  .carousel-text {
    position: absolute;
    top: 0;
    left: 150%; /* Set the left edge of the image to the center of the container */
    width: 40%; /* Adjust the width to match your design */
    height: 100%;
    padding: 20px; /* Add padding for the text */
    padding-top: 3px;
    padding-right: 30px;
    box-sizing: border-box;
    background: #fff; /* Or any background color you prefer */
    overflow-y: auto; /* Allow scrolling if the text is too long */
    transition: left 0.5s ease-in-out; /* Slide-in effect */
  }
  

  /* ________________________________Style the carousel description text_______________________ */

  .project_description_0 {
    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: 0.9em;
  }

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

  .project_description_2 {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Use 300 for the light font weight */
    padding: 5px;
    padding-bottom: 0;
    font-size: 0.9em;
  }

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


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

    .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;
    }
}


/* _____________________________________________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 */
    }

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

    @media (max-width: 768px) {

        .header-title-mobile{
            display: block;
            position: relative; /* Fixed position */
            padding-top: 0px; /* Adjust this value to the height of your header */
            font-size: 1.2em;
            z-index: 1;
            background-color: rgb(255, 255, 255);
            width: 100%;
            padding: 20px;
            border-bottom: 1px solid rgb(0, 0, 0); /* Optional: adds a separator between links */
            
        }

        .project-carousel {
            position: relative;
            padding-top: 0px; /* Adjust this value to the height of your header */
            height: 100%; 
            width: 100%;
            background-color: rgb(255, 255, 255);
        }
    
        .carousel {
            position: relative;
            padding-top: 50px; /* Adjust this value to the height of your header */
            display: block; /* Stack images vertically */
            overflow-x: hidden; /* Disable horizontal scrolling */
            overflow-y: auto; /* Enable vertical scrolling */
            width: 100%;
            height: 100%;
            background-color: rgb(255, 255, 255);
        }
    
        .carousel-image, .carousel-text {
            position: relative;
            left: 0;
            transform: translateX(0%); /* Shift the image back by half its width */
            padding-top: 20px;
            display: block; /* Stack elements */
            max-height: max-content;
            width: 100%; /* Full width of the viewport */
            height: auto;
            cursor: pointer; /* Indicates that you can click on the image */
            /* Remove transform property, not needed for stacking */
        }

        #first-image{
            left: 0; /* Set the left edge of the image to the center of the container */
          }
    
        .carousel-text {
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            overflow-y: auto; /* Allow scrolling if the text is too long */
        }
    
        .dot {
            display: none; /* Hide dots in mobile view */
        }
    }

    /* ________________________________Style the carousel description text_______________________ */

    .project_description {
        font-size: 0.9em;  
    }
    
      .project_description_2 {
        font-size: 0.9em;
      }
    
      .project_description_3 {
        font-size: 0.9em;
      }

    /* ________________________________Another linebreak_______________________ */
    @media (max-width: 379px) {
        .header-title-mobile{
            font-size: 1.2em;
        }

        .carousel {
            padding-top: 65px; /* Adjust this value to the height of your header */
        }


    }
    

}