/* 
Explanation of CSS

	1.	.side-nav:
	•	Purpose: Styles the side navigation pane that opens from the right.
	•	How to Use: Add this class to a <div> for creatingx a side pane.
	•	Input/Output: Controls the width to show or hide the pane.
	2.	.side-nav a:
	•	Purpose: Styles the links inside the navigation pane.
	•	How to Use: Add to <a> elements within the .side-nav div.
	•	Input/Output: Links change color on hover for visual feedback.
	3.	.side-nav .closebtn:
	•	Purpose: Styles the close button inside the side navigation pane.
	•	How to Use: Add this class to a span or button element.
	•	Input/Output: Button to close the side navigation pane.
	4.	Media Queries:
	•	Purpose: Adjust styles for smaller screens (e.g., reduced font size).
	•	How to Use: Automatically applies on devices with a max height of 450px.
	•	Input/Output: Responsive adjustments for better UX on small screens.
 */
/* Basic styles for the carousel */
.carousel {
  position: relative;
  width: 100%;
  /* margin-top: 2rem; */
  height: 80vh;
  /* max-width: 100rem; Adjust the max width as needed */
  margin: 0 auto 0rem; /* Center the carousel and tighten space below */
  overflow: hidden;
}

.carousel--home {
  height: clamp(50vh, 55vw, 65vh);
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.carousel--resource {
  height: clamp(55vh, 65vw, 75vh);
  margin-bottom: 1.5rem;
}

/* Style for the content container */

/* home page */
.carousel-content.home {
  position: relative;
  width: 100%;
  height: 90%;
 
}


/* resource page*/
.carousel-content {
  position: relative;
  width: 100%;
  height: 70%;
}

.carousel--resource .carousel-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel--resource .text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* Style for each image */
.carousel-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
}

/* The active image class to handle fade-in */
.carousel-content img.active {
  opacity: 1;
  visibility: visible;
}

/* Style for the text overlay (h1 and paragraph) */
.carousel-content .text-overlay {
  position: absolute;
 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
  width: 80%; /* Adjust width for text content */
}

/* Headline (h1) */
.carousel-content .text-overlay h1 {
  margin: 0 0 1.2rem 0;
  line-height: 1.15;
  /* Mobile-first fluid typography */
  font-size: clamp(2.2rem, 5vw + 0.4rem, 5rem);
  font-weight: 700;
  letter-spacing: 0.3px;
}
/*  set the description  styles */
.description{
    margin: 0 auto;
  max-width: 80ch;
  line-height: 1.5;
  color: azure;
  font-weight: 400;
  /* Fluid paragraph size */
  font-size: clamp(1.4rem, 2vw + 0.6rem, 2.2rem);
}

/* Active class for text overlay to fade in */
.carousel-content .text-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* hide button then show it when active is added in js. this will fade the button in and out when it changes text */
#carousel-link{
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
 #carousel-link.active {
 opacity: 1;      
}
/* Style for the button container */
.carousel-button {
  position: absolute;
 
  top: 50vh;
  width: 100%;
  text-align: center;
}

/* Style for the button itself */
.carousel-button a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #F5C939;
  color: white;
  font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  position: relative; /* Ensure button stays within container */
}

/* Hover effect for the button */
.carousel-button a:hover {
  background-color: #dcae16;
}

/* Responsive adjustments */
@media (max-width: 1080px) {
  .carousel {
 
  /* margin-top: 2rem; */
  height: 50vh;
  margin: 0 auto 10rem;

  }
.carousel-button a {
  
  padding: .5rem 1rem;

  /* font-size: 2rem; */

}
  .carousel-button {
  
  top: 30vh;

}
  .carousel-content .text-overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .carousel-button a {
    padding: 8px 16px; /* Smaller padding for smaller screens */
  }
}
@media (max-width: 600px) {
  .carousel {
 
  /* margin-top: 2rem; */
  height: 50vh;
  margin: 0 auto 0rem;

  }

  .carousel-button {
  
  top: 25vh;

}
  .carousel-content .text-overlay {
    /* top: 30%; */
    left: 50%;
    /* transform: translate(-50%, -50%); */
    width: 90%;
  }

  .carousel-button a {
    padding: 8px 16px; /* Smaller padding for smaller screens */
  }
}