/* Media Queries for Different Device Sizes */

/* Smartphones - 576px and below */
@media (max-width: 576px) and (max-height: 1024px) {
  /* Smartphone styles go here */
  body {
    font-size: 14px;
    padding: 10px;
  }

  .w3-flex {
    display: flex;
    }
  
  .profileText {
    padding-left: 1rem !important;
  }

  .navbar-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

  .navbar-list li {
    margin-right: 20px;
}
  
/* Slideshow container sizing */
.w3-content.w3-section {
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto; /* This will center the slideshow */
}

/* Slideshow images sizing */
.mySlides {
    width: 100%;
    height: 100%; /* Changed from auto to 100% */
    object-fit: cover; /* This will fill the container while maintaining aspect ratio */
    display: none; /* Hide by default for slideshow */
}

.w3-center {
    width: 576px; /* Match your slideshow max-width */
    height: 500px;
    margin: 0 auto;
    text-align: center;
}

.accordianContainer {
  display: flex;
}

.imageContainer img {
  height: 400px;
  width: 400px;
}

}


/* Desktop - 992px and below former max-height 768 */
@media (max-width: 1400px) {
  /* Desktop styles go here */
  body {
    font-size: 18px;
    padding: 20px;
  }

  .container {
    max-width: 960px;
    margin: 0 auto;
  }

  /* Slideshow images sizing */
.mySlides {
    width: 100%;
    height: 100%; /* Changed from auto to 100% */
    object-fit: cover; /* This will fill the container while maintaining aspect ratio */
    display: none; /* Hide by default for slideshow */
}

}

.mySlides {
    width: 100%;
    height: 100%; /* Changed from auto to 100% */
    object-fit: cover; /* This will fill the container while maintaining aspect ratio */
    display: none; /* Hide by default for slideshow */
}

.imageContainer {

  text-align: center;
}

.navbar-list {
  display: flex;
  gap: 5px;
  list-style: none;
  color: black;

}

w3-button w3-block w3-left-align button {
  background-color: black;
  color: white;
}