.video-banner {
  padding-top:5vw;
  position: relative;
  width: 100%;
  height: 30vw;
  overflow: hidden;
  background-color: #555;
}

@media screen and (max-width: 1200px) {
  .video-banner {
    height: 60vw; /* Adjust the height value as desired for small screens */
  }
}

.video-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Partially transparent gray background */
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
    
  }

.banner-text h2 {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 10px;
  opacity: 0;
  color: #fff;
  animation: banner-animation1 12s infinite;
}

.banner-text p {
  font-size: 1.8em;
  opacity: 0;
  animation: banner-animation2 12s infinite;
}

@keyframes banner-animation1 {
  0%  {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100%{opacity: 0;}
}

@keyframes banner-animation2 {
  0%  {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 1;}
  90% {opacity: 1;}
  100%{opacity: 0;}
}