h1,h2,h3,h4,h5,h6{
  -webkit-text-stroke: 10px white;
  paint-order: stroke fill;
}

.home-fwh .fwh-content-row .fwh-heading,
.home-fwh .fwh-content-row .fwh-text,
.home-fwh .fwh-content-row .fwh-buttons{
  opacity: 0;
  top: 15%;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-duration: 850ms;
  animation-timing-function: ease-out;
}

.home-fwh .fwh-image-row{
  z-index: 2;
}

.home-fwh .fwh-content-row .fwh-heading{
  animation-name: fade-up-effect;
}

.home-fwh .fwh-content-row{
  animation-name: z-index-effect;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-duration: 850ms;
}

.home-fwh .fwh-content-row .fwh-text,
.home-fwh .fwh-content-row .fwh-buttons{
  animation-name: fade-down-effect;
}

.home-fwh .img-grid .elementor-widget-image{
  transition: all .4s ease-in-out;
}

.home-fwh .img-grid .elementor-widget-image:before{
  content: "";
  width: 0;
  height: 0;
  opacity: 0;
  border: 3px solid white;
  position: absolute;
  left: 30px;
  top: 25px;
  transform: rotate(5deg);
  z-index: -1;
  animation: border-effect 1.5s ease-out;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}


.home-fwh .img-grid .elementor-widget-image{
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.home-fwh .img-grid.upper .elementor-widget-image:first-child {
  animation-name: move1;
}
.home-fwh .img-grid.upper .elementor-widget-image:nth-child(2) {
  animation-name: move2;
}
.home-fwh .img-grid.upper .elementor-widget-image:last-child {
  animation-name: move3;
}
.home-fwh .img-grid.lower .elementor-widget-image:first-child {
  animation-name: move4;
}
.home-fwh .img-grid.lower .elementor-widget-image:nth-child(2) {
  animation-name: move5;
}
.home-fwh .img-grid.lower .elementor-widget-image:last-child {
  animation-name: move6;
}

@keyframes fade-up-effect {
  0%{
    opacity: 0;
    top: 15%;
  }
  100%{
    opacity: 1;
    top: 0;
  }
}

@keyframes z-index-effect {
  0%{
    z-index: 0;
  }
  100%{
    z-index: 3;
  }
}


@keyframes fade-down-effect {
  0%{
    opacity: 0;
    top: -15%;
  }
  100%{
    opacity: 1;
    top: 0;
  }
}

@keyframes border-effect {
  0%{
    width: 0;
    height: 0;
    opacity: 1;
  }
  100%{
    width: 100%;
    height: 95%;
    opacity: 1;
  }
}

@keyframes move1 {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(-20deg) translate(-60%, -65%);
    max-width: 90%;
  }
}

@keyframes move1-mobile {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(-20deg) translate(-30%, -100%);
    max-width: 90%;
  }
}

@keyframes move2 {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(5deg) translate(0%, -80%); 
    max-width: 90%;
  }
}

@keyframes move2-mobile {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(5deg) translate(0%, -100%);
    max-width: 90%;
  }
}

@keyframes move3 {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(20deg) translate(85%, -76%);
    max-width: 90%;
  }
}

@keyframes move3-mobile {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(-30deg) translate(0%, 100%);
    max-width: 90%;
  }
}

@keyframes move4 {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(20deg) translate(-60%, 60%);
    max-width: 90%;
  }
}

@keyframes move4-mobile {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(20deg) translate(-50%, 80%);
    max-width: 90%;
  }
}

@keyframes move5 {
  0% { 
    transform: rotate(0) translate(0, 0); 
    max-width: 100%;
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(-5deg) translate(0%, 80%); 
    max-width: 90%;
  }
}

@keyframes move6 {
  0% { 
    transform: rotate(0) translate(0, 0);
    max-width: 100%; 
  }
  20% {
    opacity: .5;
  }
  80% {
    opacity: 1;
  }
  100% { 
    transform: rotate(-20deg) translate(85%, 76%); 
    max-width: 90%;
  }
}

@media only screen and (max-width: 767px){
  .home-fwh .img-grid.upper .elementor-widget-image:first-child {
    animation-name: move1-mobile;
  }
  .home-fwh .img-grid.upper .elementor-widget-image:nth-child(2) {
    animation-name: move2-mobile;
  }
  .home-fwh .img-grid.upper .elementor-widget-image:nth-child(3) {
    animation-name: move4-mobile;
  }
  .home-fwh .img-grid.upper .elementor-widget-image:last-child {
    animation-name: move3-mobile;
  }
}