body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
 
    
}
.footer{

  padding: 20px ;
  font-weight: bolder;
}
.video-section {
    position: relative;
    height: 120vh;
    width: 100%;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    object-fit: cover;
}

.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

@keyframes slide-in {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .opacity-0 {
    opacity: 0;
  }

  .animate-slide-in {
    animation: slide-in 3s ease-out forwards;
  }


  /* Define the animation for sliding */
@keyframes slid {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

/* Apply animation to the testimonials container */
.animate-slid {
animation: slid 15s ease-out infinite;
}
.overflow-hidden {
overflow: hidden;
}

.slide-in {
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in.visible {
opacity: 1;
transform: translateX(0);
}


.advert {
display: none;
position: fixed;
top: 20%;
right: 0;
width: 300px;
padding: 20px;
background-color: #f8f9fa;
border: 1px solid #ddd;
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

.advert-close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}

.advert-close:hover {
color: red;
}