/* HERO */
 .hero {
   position: relative;
   min-height: 80vh;
   display: flex;
   align-items: center;
   background: linear-gradient(135deg, #f7f9ff, #eef2ff);
   overflow: hidden;
   padding: 40px 20px;
 }

 .hero-content {
   max-width: 600px;
   z-index: 2;
   margin-left: 10%;
 }

 .hero-content h1 {
   font-size: 48px;
   font-weight: 700;
   line-height: 1.2;
 }

 .hero-content p {
   font-size: 18px;
   margin: 15px 0;
 }

 .float-img {
   position: absolute;
 }

 .img-1 {
   top: 28%;
left: -1%;
   width:144px;
 }

 .img-3 {
   bottom: 8%;
   left: 15%;
   width: 70px;
   animation: float 6s ease-in-out infinite;
 }

 .img-4 {
   bottom: 10%;
   right: 45%;
   width: 70px;
   animation: float 6s ease-in-out infinite;
 }

 .img-5 {
   right: 5%;
   top: 50%;
   transform: translateY(-50%);
   max-width: 600px;
 }

 .img-5 img {
   width: 100%;
   height: auto;
   max-height: 600px;
 }

 

 @keyframes float {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-15px);
   }
 }


 /* TABLET */
 @media (max-width: 992px) {
   .hero {
     min-height: 50vh;
     flex-direction: column;
     justify-content: center;
     text-align: center;
   }

   .hero-content {
     margin-left: 8%;
     max-width: 50%;
   }

   .hero-content h1 {
     font-size: 36px;
   }

   .img-5 {
     display: none;
   }

   .img-1 {
     top: 20%;
     
     width: 131px;
   }
 }

 @media (max-width: 768px) {
   .hero {
     min-height: auto;
     padding: 60px 20px;
   }

   .hero-content {
     margin: 0;
     max-width: 100%;
   }

   .hero-content h1 {
     font-size: 25px;
   }

   .search-bar {
     margin-left: auto;
     margin-right: auto;
   }

   /* hide big image on mobile */
   .img-5 {
     display: none;
   }

   .img-1 {
     width: 50px;
     top: 28%;
   }

   .img-3,
   .img-4 {
     bottom: 5%;
   }
 }

 /* SMALL MOBILE */
 @media (max-width: 576px) {
   .hero-content h1 {
     font-size: 24px;
   }

   .search-bar {
     max-width: 100%;
   }
 }