/* Banner Styles */
.anistonaudioconfrence-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.anistonaudioconfrence-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  /* Black overlay with 60% opacity */
  z-index: 1;
}

.anistonaudioconfrence-banner-image {
  position: relative;
  width: 100%;
  height: 0;
  /* Height will be defined by the aspect ratio */
  padding-top: 30%;
  /* 16:9 aspect ratio (adjust if needed) */
}

.anistonaudioconfrence-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image fills the container without distortion */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  /* Make sure the image is visible */
  transition: opacity 1s ease-in-out;
}

.anistonaudioconfrence-banner-content {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 50%;
  transform: translateY(-50%);
  font-weight:100;
  color: white;
  text-align: left;
  z-index: 10;
  padding: 0 15px;
  max-width: 50%;
}

/* Mobile Devices */
@media (max-width: 719px) {
  .anistonaudioconfrence-banner-content h1 {
    font-size: 4vw;
    /* Adjusted font size for mobile */
  }

  .anistonaudioconfrence-banner-content p {
    font-size: 2vw;
    /* Adjusted font size for mobile */
    line-height: 1;
  }

  .anistonaudioconfrence-banner-image {
    position: relative;
    width: 100%;
    height: 0;
    /* Height will be defined by the aspect ratio */
    padding-top: 50%;
    /* 16:9 aspect ratio (adjust if needed) */
  }
}

/* Tablets */
@media (min-width: 720px) and (max-width: 1024px) {
  .anistonaudioconfrence-banner-content h1 {
    font-size: 3vw;
    /* Adjust font size for tablet devices (changed for better visibility) */
  }

  .anistonaudioconfrence-banner-content p {
    font-size: 1.5vw;
    /* Adjust font size for tablet (slightly larger text) */
    line-height: 1.2;
  }
}

/* Laptops and Desktops */
@media (min-width: 1025px) {
  .anistonaudioconfrence-banner-content h1 {
    font-size: 3vw;
    /* Adjust font size for larger screens */
    margin-bottom: 10px;
  }

  .anistonaudioconfrence-banner-content p {
    font-size: 1vw;
    /* Adjust font size for larger screens */
    line-height: 1.2;
  }
}