/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*overflow: hidden;*/
	background-color:#333333;
	color:#fff;
	
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:    "wdth" 100;
}

.slider {
    width: 80%;
    height: 80%;
    max-width: 400px; /* Ensure the content never exceeds this width */
    display: flex;
    overflow: hidden;
    position: relative;
	background-color:#000;
}

.slides-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-around; */ /* Let's adjust this for more control */
	padding-top:0;
	justify-content:flex-start;
    position: relative; /* Needed for absolute positioning of .last-slide-actions */
}

img {
    width: 100%;
    height: auto;
	display:block;
	margin:0;
}

p {
    font-size: 1.5em;
    text-align: left;
	margin-left:20px;
	margin-right:20px;
	color:#fff;
}
h1{ color:#fff; text-align:left; width:95%; margin-left:20px;}
ul{ font-size: 1.3em; margin-top:0; margin-right:10px;}

.arrows {
    display: flex;
    justify-content: center; /* Center the arrows horizontally */
    position: absolute;
    bottom: 10px;
	width: 100%; 
	z-index: 1000;
}


button {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #333;
}

button img {
    width:60px;
}

button:focus {
    outline: none;
}

.progress-container {
    width: 100%; /* Ensure the container spans the full width */
}

.progress {
    width: 0;
    height: 5px;
    background-color: #d5d5d5;
    transition: width 0.1s ease;
    margin: 0; /* Ensure no margin */
    display: block; /* Ensure it behaves correctly within its container */
}

/* --- MODIFIED AND NEW STYLES START HERE --- */

.rounded-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 50px;
    background-color: #fff; /* Button color */
    color: #000; /* Text color */
    border: none;
    border-radius: 25px; /* Half of the button height */
    cursor: pointer;
    text-align: center;
    padding: 0;
    margin: 0 auto; /* Center button if link-wrapper is not full width or not flex centering */
	font-size: 24px;
    /* REMOVE absolute positioning from here, it will be handled by .last-slide-actions
    position: absolute;
    bottom: 90px; 
    */
}

 .link-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Remove underline from the link */
    width: 100%; /* Make wrapper take full width to center the 90% button inside it */
}

/* New container for all actions on the last slide */
.last-slide-actions {
    position: absolute;
    bottom: 70px; /* Adjust this value to position the group above arrows. Original button was 90px from bottom */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between the label and buttons */
    padding: 0 20px; /* Optional: if you want side padding for the container itself */
    box-sizing: border-box;
}

/* Style for the new label */
.project-label {
    font-size: 1.1em; /* Smaller than button text or main paragraph */
    color: #cccccc; /* Lighter color to be less prominent */
    text-align: center;
    margin: 0 0 5px 0; /* Reset default p margins, add small bottom margin */
    width: 100%;
}

/* --- MODIFIED AND NEW STYLES END HERE --- */


@media (max-width: 768px) {
    .slider {
        width: 100%;
        height: 100%;
        max-width: none; /* Ensure the slider uses full width on mobile */
    }

    p {
        font-size: 1.5em; /* Adjust text size for smaller screens */
    }

    .project-label {
        font-size: 1em; /* Adjust for smaller screens */
    }

    .rounded-button {
        font-size: 20px; /* Adjust button font size for smaller screens */
        height: 45px;
        border-radius: 22.5px;
    }

    .last-slide-actions {
        bottom: 60px; /* Adjust spacing for mobile if needed */
        gap: 10px;
    }
}



/* Styles for screens 800px tall or less */
@media (max-height: 800px) {

    /* Target general text elements within any slide for height adjustment */
    .slide h1 { /* Reduce all H1s on short screens */
        font-size: 1.8em; /* Adjust as needed */
        margin-bottom: 8px; /* Adjust spacing */
        /* If you only want to target the last slide H1, use .last-slide-content h1 */
    }

    .slide p { /* Reduce all paragraphs on short screens */
        font-size: 1.2em; /* Adjust as needed. Original was 1.5em */
        line-height: 1.4; /* Adjust for readability */
        margin-bottom: 10px; /* Adjust spacing */
    }

    .slide ul { /* Reduce all unordered lists on short screens */
        font-size: 1.0em;  /* Adjust as needed. Original was 1.3em */
        line-height: 1.4;
        margin-top: 5px;
    }
    /* If you have ordered lists (ol) you'd add .slide ol {} as well */


    /* Specific adjustments for the last slide's layout if still needed */
    .last-slide-content .last-slide-actions {
        bottom: 80px; /* May need further adjustment based on overall text shrinkage */
        gap: 8px;
    }

    .last-slide-content .rounded-button {
        font-size: 18px; /* Potentially make buttons a bit smaller too */
        height: 40px;
        border-radius: 20px;
    }
    .last-slide-content .project-label {
        font-size: 0.9em; /* Adjust label size */
        margin-bottom: 5px;
    }
}

/* Your existing @media (max-width: 768px) query should remain as is */
@media (max-width: 768px) {
    .slider {
        width: 100%;
        height: 100%;
        max-width: none; /* Ensure the slider uses full width on mobile */
    }

    p { /* This is a general p, might need to be more specific if it causes issues */
        font-size: 1.5em; /* Adjust text size for smaller screens */
    }

    /* If you have specific adjustments for these elements in max-width,
       they will combine with max-height. If both media queries apply,
       the rules from the one defined later in the CSS file will take precedence
       for the same properties, or if one selector is more specific. */

    .project-label { /* This was in your original max-width, ensure it's what you want */
        font-size: 1em;
    }

    .rounded-button { /* This was in your original max-width */
        font-size: 20px;
        height: 45px;
        border-radius: 22.5px;
    }

    .last-slide-actions { /* This was in your original max-width */
        bottom: 60px;
        gap: 10px;
    }
}