/* HERO CONTAINER STYLES START */
@keyframes fadeIn {
   from {
       opacity: 0;
       transform: translateY(-20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

#hero-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1140px;
   margin: auto;
   flex-wrap: wrap;
}

#left-cont {
   flex: 1;
   max-width: 500px;
   margin: 20px;
   animation: fadeIn 1s ease-in-out;
}

#left-cont h1 {
   margin-bottom: 16px;
   font-size: 32px;
   font-weight: 400;
}

#left-cont p {
   font-size: 24px;
   margin-bottom: 32px;
   font-weight: 300;
}

#left-cont button {
   background-color: #40a3ff;
   /* background-image: linear-gradient(144deg,#40a3ff,#00DDEB 50%,#42f3d0); */
   color: #FFF;
   text-align: center;
   border-radius: 8px;
   padding: 8px 24px;
   font-size: 20px;
   letter-spacing: 1px;
   transition: all .2s;
   font-weight: 400;
   border: none;
   transition: 0.2s ease-in-out;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

#left-cont button:hover {
   cursor: pointer;
   color: #ededed;
   box-shadow: none;
  background-color: #1a7ccb;
}

#right-cont {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 20px;
   
}

#hero-img {
   position: absolute;
   right: 1px;
   top: 120px;
   width: 700px;
   height: auto;
   border-top-left-radius: 5em;
   border-bottom-left-radius: 5em;
   border-bottom-right-radius: 0.3em ;
   margin-left: 67px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


@media screen and (max-width: 1285px) {
   #hero-img {
       max-width: 500px;
   }
}

@media screen and (max-width: 909px) {
   #hero-container {
       flex-direction: column;
       text-align: center;
   }

   #left-cont {
       margin: 20px 0;
       padding: 20px;
       text-align: center;
   }

   #right-cont {
      position:absolute;
      top: 350px
   }

   #hero-img {
       max-width: 95%;
       border-radius: 10px;
       position: relative;
       margin-left: 0px;
       margin-top: 0px;
       padding-top: 0px;
   }
}
/* HERO CONTAINER STYLES END */