.hero {
  display: inline-block;
  position: relative;
  width: 400px;
  min-width: 300px;
  height: 400px;
  border-radius: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
  margin: 30px;
}

.image {
  height: 100%;
}

.text {
  background: rgb(41,0,0);
  background: linear-gradient(90deg, rgba(41,0,0,1) 0%, rgba(203,0,0,1) 50%, rgba(130,0,0,1) 100%);
  border-radius: 30px;
  position: absolute;
  top: 55%;
  left: -5px;
  height: 65%;
  width: 108%;
  transform: skew(19deg, -9deg);
}

.second .text {
  background-image: linear-gradient(-20deg , #bb7413, #e7d25c)
}

.logo {
  height: 80px;
  width: 80px;
  border-radius: 20px;
  /* background-color: rgba(255, 255, 255, 0.5); */
  position: absolute;
  bottom: 30%;
  left: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
}

.logo img {
  height: 100%;
}

.main-text {
  position: absolute;
  color: #fff;
  font-weight: 900;
  left: 130px;
  bottom: 20%;
}

.main-text h3 {
  color: #fff;
} 
.hero-btn {
  position: absolute;
  color: #fff;
  right: 30px;
  bottom: 10%;
  padding: 10px 20px;
 
}

@keyframes button-anim {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}

.hero-btn:hover{
  animation: none;
}

.hero-btn a {
  color: #fff;
}

.date {
  position: absolute;
  color: #fff;
  left: 30px;
  bottom: 10%;
}

.btn i:before {
  width: 14px;
  height: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top:5px;
  right:5px;
}
/* Default styles for Slick Carousel */
.slick-carousel .slick-slide {
  width: calc(100% / 2); /* Default: show 2 slides */
}

/* For screens smaller than 992px */
@media (max-width: 992px) {
  .slick-carousel .slick-slide {
      width: 100%; /* Show 1 slide */
  }
}

/* Optional: Additional styling for smaller devices */
@media (max-width: 576px) {
  .slick-carousel .slick-slide {
      width: 100%; /* Ensure 1 slide is shown on very small screens */
  }
  
}

@media (min-width: 375px) {
  .slick-carousel .slick-slide {
      width: 100%; /* Ensure 1 slide is shown on very small screens */
  }
  
}

/* Optional: To ensure proper padding or spacing on small screens */
.slick-carousel .slick-slide > div {
  margin: 0 auto; /* Center the content */
}