.cover-wrapper {
  margin-bottom: 30px;
  height: 697px;
}

.services-cover {
  color: #ffffff;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
  z-index: 1; /* Lower z-index so the overlay appears above */
  background-size: cover;
}

.sound-system {
  position: absolute; /* Allows the overlay to be positioned within this element */
  background: url(../assets/images/sound-systems-cover.png) no-repeat center;
}

.lightening {
  position: absolute;
  background: url(../assets/images/lightening-cover.png) no-repeat center;
}

.generator-cover {
  position: absolute;
  background: url(../assets/images/generator-cover.png) no-repeat center;
}

.video-wall {
  position: absolute;
  background: url(../assets/images/video-wall-cover.png) no-repeat center;
}

.mobile-stages {
  position: absolute;
  background: url(../assets/images/mobile-stages-cover.png) no-repeat center;
}

.back-equip {
  position: absolute;
  background: url(../assets/images/back-equib-cover.png) no-repeat center;
}

.touring-cover {
  position: absolute;
  background: url(../assets/images/toring-cover.png) no-repeat center;
}

.contact-us-cover {
  position: absolute;
  background: url(../assets/images/form-cover.png) no-repeat center;
}

.sound-system::before, .lightening::before,  .generator-cover::before, .video-wall::before, .mobile-stages::before, .back-equip::before, .touring-cover::before, .contact-us-cover::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay with 50% opacity */
  z-index: 2; /* Higher than .services-cover content */
  pointer-events: none; /* Allows interactions to pass through */
}

.sound-system,
.lightening,
.generator-cover,
.video-wall,
.mobile-stages,
.back-equip,
.touring-cover,
.contact-us-cover {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 667px;
  background-size: cover;
  padding: 12% 5%; /* Adjust this if needed */
}

.bg-cover-right {
  background-position: right;
}

@media (max-width: 768px) {
  .services-cover {
    font-size: 4vw; /* Increase font size for smaller screens */
  }

  .sound-system,
  .lightening,
  .generator-cover,
  .video-wall,
  .mobile-stages,
  .back-equip,
  .touring-cover,
  .contact-us-cover {
    padding: 25% 5%;
  }
}

@media (max-width: 480px) {
  .services-cover {
    font-size: 5vw; /* Increase font size for very small screens */
  }
  .sound-system,
  .lightening,
  .generator-cover,
  .video-wall,
  .mobile-stages,
  .back-equip,
  .touring-cover,
  .contact-us-cover {
    padding: 40% 5%;
  }
}

.flex-row-acf:first-of-type {
  margin-top: 0;
}

.flex-row-acf {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 102px 20px;
  gap: 40px;
}

.content-main,
.image-container {
  flex: 1;
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.image-container .img-1 {
  height: 450px;
}
.image-container .img-2 {
  height: 450px;
}
.image-container .img-3 {
  height: 450px;
}
.image-container .img-4 {
  height: 450px;
}

/* Paragraph styling */
.content-main p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

/* Specific desktop order classes */
.container.image-first .image-container {
  order: 1;
}
.container.image-first .text-container {
  order: 2;
}

.container.image-last .text-container {
  order: 1; /* Text first on desktop */
}
.container.image-last .image-container {
  order: 2;
}

.welcome-message {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.5;
}

.equipment-heading {
  text-align: center;
}

.melody-production-sound {
  color: #cc2c2c;
}

.melody-production-description {
  font-size: 19px;
  line-height: 1.5;
  margin-top: 10px;
}

.flex-row-acf .button-container {
  margin-top: 29px;
}

.flex-row-acf .responsive-button {
  font-size: 17px;
  width: 185px;
  height: 40px;
  padding: 0;
}

/* Responsive behavior */
@media (max-width: 768px) {
  .flex-row-acf {
    flex-direction: column;
  }
  /* On mobile, always show text first, image last */
  .content-main {
    order: 1;
  }
  .image-container {
    order: 2;
  }
  .image-container .img-1,
  .image-container .img-2,
  .image-container .img-3,
  .image-container .img-4 {
    height: auto;
  }

  .welcome-message {
    font-size: 22px;
  }

  .melody-production-description {
    font-size: 15px;
  }
}

.equipment {
  display: flex;
  align-items: center;
  border: 1px solid black; /* Black border */
  border-radius: 8px;
  padding: 20px;
  max-width: 1200px;
  margin: 35px auto;
  gap: 65px;
}
/* .equipment-image {
} */

.equipment-image img {
  width: 410px;
  height: 226px;
  border-radius: 8px;
}
/* .equipment-content {
} */
.equipment-content h1 {
  font-size: 34px;
  margin-bottom: 0.5em;
}
.equipment-content p {
  font-size: 19px;
}
@media (max-width: 768px) {
  .equipment {
    flex-direction: column; /* Stack image and content vertically */
    text-align: center;
    padding: 40px 20px; /* Increase padding for mobile */
    height: auto; /* Allow height to adjust */
    gap: 15px;
  }
  .equipment-image {
    margin: 0 0 20px 0;
  }
  .equipment-content h1 {
    font-size: 19px;
    margin-bottom: 0.5em;
  }
  .equipment-content p {
    font-size: 15px;
  }
}


.touring-main {
  padding: 72px 155px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.touring-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  flex: 1 1 300px; /* Ensures the image is responsive */
}

.touring-content {
  flex: 1 1 300px; /* Ensures the text container is responsive */
  color: #333; /* Text color for readability */
  text-align: left;
}

.touring-content p {
  margin: 0;
  padding: 10px;
  line-height: 1.6;
  font-size: 16px;
}

/* Tablet view */
@media (max-width: 768px) {
  .touring-main {
    padding: 25px 95px;
    flex-direction: column;
    text-align: center;
  }
  .touring-content p {
    padding: 10px;
    font-size: 15px;
  }
}

/* Mobile view */
@media (max-width: 480px) {
  .touring-main {
    padding: 0 0;
  }

  .touring-content p {
    font-size: 14px;
  }
  .touring-main {
    gap: 10px;
  }
}