.youtube-wrapper {
  position: relative;
  width: 100%;
    max-width: 800px;
    margin: 20px auto;
    height: 400px;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.youtube-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.youtube-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48' width='100%25'%3E%3Cpath class='ytp-large-play-button-bg' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


/* to cahnge apply if apporve */
.midcontarea h1 {
  margin: 20px 0;
}

  #carousel {
    max-width: 600px;
    margin: auto;
    position: relative;
    overflow: hidden;
  }

  .carousel-inner {
    position: relative;
    width: 100%;
    height: 250px; /* Adjust height */
  }

  .carousel-item {
    display: none;
    width: 100%;
    height: 100%;
  }

  .carousel-item.active {
    display: block;
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Optional navigation buttons */
  .carousel-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    pointer-events: none;
  }

  .carousel-nav button {
    pointer-events: all;
    position: absolute;
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-nav .prev {
    left: 10px;
  }

  .carousel-nav .next {
    right: 10px;
  }