.innerBox .cont .hero .animation .cookieBox .cookieBoxInner img {
  opacity: 0;
  transition: opacity 0.25s linear forwards;
  display: none;
}
.innerBox .cont {
    padding: 0 !important;
}
.innerBox .cont .hero .animation .cookieBox .cookieBoxInner img.active {
  opacity: 1;
  display: block;
}

.innerBox .cont .hero .animation .cookieBox .cookieBoxInner .rotate-fast {
  animation: fast-rotate 0.5s linear forwards;
}

.crown img.crown-img, .cookieBoxInner img.cookie-text {
  width: 100%;
}

.innerBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerBox .cont {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding: 19px;
}

.innerBox .cont .hero {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  /* background-image: url("https://www.creativecommunications.rrd.com/testing/king-krumb/v3/bgHero.jpg"); */
  background-size: cover;
  background-position: center center;
  border-radius: 18px;
  overflow: hidden;
 /* background-color: rgba(129, 187, 251, 1);*/
}

.innerBox .cont .hero .animation {
  width: 100%;
  height: 365px;
  overflow: hidden;
  position: relative;
  margin-left: 0;
}

.innerBox .cont .hero .animation .crown {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* height: 383px; */
  display: flex;
  align-items: end;
  justify-content: center;
}

.innerBox .cont .hero .animation .cookieBox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}

.innerBox .cont .hero .animation .cookieBox .cookieBoxInner {
  width: 100%;
  /* height: 383px; */
  overflow: hidden;
  position: relative;
}

.innerBox .cont .hero .animation .cookieBox .cookieBoxInner img.cookie-img {
  position: absolute;
  height: auto;
  width: 100%;
  left: 0;
  top: -70%;
  transform: translate(-50%, -20%);
  transition: opacity 0.5s ease;
}

@media only screen and (max-width: 480px) {
  .innerBox .cont .hero .animation {
    width: 200%;
    margin-left: -50%;
    height: 220px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .innerBox .cont .hero .animation {
    width: 160%;
    margin-left: -30%;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .innerBox .cont {
    padding: 32px;
  }

  .innerBox .cont .hero {
    border-radius: 32px;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1199px) {
  .innerBox .cont {
    padding: 32px;
  }

  .innerBox .cont .hero {
    border-radius: 40px;
  }
}

@media only screen and (min-width: 1200px) {

  .innerBox .cont {
    /* max-width: 1440px; */
    padding: 32px;
  }

  .innerBox .cont .hero {
    border-radius: 44px;
  }

}

@media only screen and (min-width: 1600px) {
  .innerBox .cont .hero .animation {
    min-height: 40vh;
    max-width: 100%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 2000px) {
    .banner-title{
        padding-top:3%;
    }
	.innerBox .cont .hero .animation {
		min-height: 45vh;
		max-width: 100%;
		margin: 0 auto;
	}  
	.innerBox {
		width: 120%;
		margin-left: -10%; 
	}
}
@media only screen and (min-width: 2200px) {
    .innerBox {
		width: 100%;
		margin-left: 0; 
	}
}

@media only screen and (min-width:2600px) {
    .innerBox .cont .hero .animation {
        min-height: 55vh;
    }
}

/* Animation keyframes */
@keyframes fast-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}