 .main-content {
  min-height: 100vh;
  margin-inline: 8rem;
  position: relative;
 }

 .banner {
  background-color: #1e2d50e9;
  color: rgba(255, 255, 255, 0.946);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  position: absolute;
  top: -500px; /* Set the initial position off the screen */
  left: 0;
  width: 100%;
  padding: 20px;
  transition: top 1.2s linear;
 }

 .banner--show {
  top: -50px;
 }

 .banner__close-icon {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
 filter: invert();
 cursor: pointer;
  }
 

 .banner__name {
  font-size: 18px;
  color:rgb(245, 245, 245);
font-weight: 600;
}

 .banner__date {
    font-size: 18px;
    color: var(--primary-background);
  }

 .blood-section {
  min-height: 30rem;
 }

 .blood-section .image-container {
  min-height: 15rem;
  max-height: min-content;
  margin-top: 10px;
 }

 .image-container > img {
  min-height: 40rem;
  min-width: 20rem;
  border-radius: 20px;
  border: 5px solid var(--primary-background);
 }

 .blood-section .section-content {
  padding: 20px;
 }

 .blood-section .section-content > p {
  text-align: justify;
 }


 .schedule-section .image-container {
  min-height: 15rem;
  max-height: min-content;
  margin-top: 10px;
 }

 .schedule-section .image-container > img {
 max-height: 40rem;
 width: 100%;
 }

 .schedule-section .section-content {
  padding: 20px;
 }

 .schedule-section .section-content > p {
  text-align: justify;
 }
 
  
 .btn-primary {
  background-color: var(--primary-text);
  border-color: var(--primary-text);
  color: var(--secondary-background);
  
}

.btn-primary:hover {
  background-color: black;
  border-color: black;
}

.btn-primary:active {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.9) !important;
  box-shadow: none;
}

.btn-primary:focus-visible {
  background-color: rgba(0, 0, 0, 0.9);
  border-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.349);

}



@media (max-width: 1376px) {
  .main-content {
     margin-inline: 4rem;
  }
}

@media (max-width: 950px) {
  .main-content {
     margin-inline: 1rem;
  }
}