.btn-info{
  background-color: #000000;
  color: #ffffff;
}
.btn-warning {
    color: #212529;
    background: #B36505;
background: linear-gradient(360deg,rgba(179, 101, 5, 1) 0%, rgba(209, 147, 71, 1) 18%, rgba(209, 144, 65, 1) 32%, rgba(232, 171, 97, 1) 50%, rgba(232, 171, 97, 1) 82%, rgba(179, 101, 5, 1) 100%);
    /* border-color: #eec60a; */
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.add_area{
  margin-top: -100px;
  position: relative;
  z-index: 999;
}
@media (max-width: 768px) {
  .add_area{
    margin-top: -25px;
    position: relative;
    z-index: 999;
  }
}
/* Add some content at the bottom of the video/page */
.content {
  /* background-image: url('https://placehold.co/1920x200'); */
  position: absolute;
  bottom: 0;
  min-height:10%;
  background:url('../images/shape.svg');
  background-size:cover;
  background-position: center;
  color: #f1f1f1;
  width: 100%;
  height: auto;
  padding: 20px;
  background-blend-mode: overlay;
}
@media (max-width: 768px) {
  .content {
    display: none;
  }
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
.feature-block-1{
  min-height: 220px;
}

/* ######################## Volleyball page top image and video css #################### */
.media-section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}
.home_area {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}

.home_video {
  position: relative;
  flex: 1 1 100%;
}
.media-item {
  position: relative;
  flex: 1 1 50%;
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button overlay */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 70px;
  color: red;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 768px) {
  .media-item {
    flex: 1 1 100%;
  }
}
.price{
  font-size: 32px;
  font-weight: 400;
  color: #ff0000;
}

/* ######################### Dance page ############################# */

    /* Section Wrapper */
    .diagonal-section {
      position: relative;
      width: 100%;
      height: 78vh;
      background: #000 url("../images/slider/dance.webp") center center no-repeat;
      background-size: cover;
      overflow: hidden;
      display: flex;
      /* align-items: center;
      justify-content: center; */
      color: white;
    }



    /* Optional text (sits above everything) */
    .section-content {
      position: relative;
      z-index: 3;
      top:75%;
      left: 10%;
      text-align: center;
    }

/* Red overlay using clip-path */
.diagonal-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: #000000; /* Deep red */
  clip-path: polygon(0 10%, 100% 100%, 100% 100%, 0% 100%);
  z-index: 1;
}

/* ######################## Cheerleading page ######################## */
.diagonal-section2 {
  position: relative;
  width: 100%;
  height: 78vh;
  background: #000 url("../images/slider/cheerleading.webp") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  display: flex;
  /* align-items: center;
  justify-content: center; */
  color: white;
}

.diagonal-overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: #000000; /* Deep red */
  clip-path: polygon(0 10%, 100% 100%, 100% 100%, 0% 100%);
  z-index: 1;
}

/* ######################## Live ############################ */

.live_area {
  position: relative;
  flex: 1 1 50%;
}

.live_area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  border: 5px solid transparent; /* Required for border-image to be visible */
  border-image: linear-gradient(to right, red, blue) 1; /* Apply the gradient and slice it */
}