body {
  font-family: "Roboto", sans-serif;
  background: #f8f9fa;
  padding-top: 0px;
}

/* Hero Section Start */
.banner-section {
  width: 100%;
  overflow: hidden;
}

.banner-img {
  /* max-height: 800px;  */
  object-fit: cover;
  animation: fadeIn 2s ease-in-out;
}

.hero-section {
background: linear-gradient(45deg, #5c4fec, #7665f1, #0d0505);
  /* url("path_to_your_image.jpg") no-repeat center center; */
  background-size: cover;
  color: white;
  padding: 100px 0;
  text-align: center;
  animation: fadeIn 3s ease-in-out;
}

.hero-section h1 {
  font-size: 55px;
  font-weight: bold;
  text-transform: uppercase;
  animation: zoomIn 2s ease;
}

.hero-section p {
  font-size: 22px;
  margin-top: 20px;
  animation: slideIn 2s ease;
}

 


.btn-cta {
  margin-top: 30px;
  background: linear-gradient(45deg, #fdf404, #f0e004);
  color: rgb(11, 11, 11);
  padding: 14px 35px;
  border: 1px solid black;
  border-radius: 50px;
  font-size: 28px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0px 5px 15px rgba(247, 247, 247, 0.5);
}

.btn-cta:hover {
  background: linear-gradient(45deg, #9d57e8, #fdfbfa);
  transform: scale(1.05);
}

/* Hero Section End */




/* Animations */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}





/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}