@keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

body {font-family: "Poppins", sans-serif; line-height: 30px;}
strong, b {font-weight: 600;}
h2{font-size: 44px;}
.hero-section {
    color: #E6C8FF;
    padding: 40px 0 0;
    background-size: cover ;
    position: relative;
    overflow: hidden;
}
section.hero-section:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: url(../images/banner-bg.jpg) repeat center center #580e97;
    top: 0;
    left: 0;
    animation: zoom-in-zoom-out 50s ease-out infinite;
    z-index: -1;
    overflow: hidden;
}
.buttonDisabled {cursor: not-allowed;}
.hero-section img {max-width: 100%;}
.hero-section h1 {font-size: 5em;}
.hero-section p {font-size: 16px;}
.hero-section:after {width: 100%; content:""; height: 176px; position: absolute; bottom: -10px; background: url(/assets/images/banner-curve.svg) no-repeat center bottom;}

.story-card img {border-radius: 10px; width: 100%;}
.wave-bg {background: url('wave.png') no-repeat center;background-size: cover;}
.creator img { border-radius: 50%; width: 120px; height: 120px; object-fit: cover;}
.yellow-section { background: #FFD43B; color: #13052E; text-align: center;}

.homeMarquee {width: 100%; overflow: hidden;}
.homeMarquee.customMarquee {display: flex; width: 100%; overflow: hidden; white-space: nowrap;}
.homeMarquee ul {list-style: none; display: flex;}
.homeMarquee.customMarquee li {margin-right: 15px; width: 200px;}
.homeMarquee.customMarquee li img {width: 250px;}

.wave-bg {background: url(../images/wave-bg.svg) repeat-x center center; background-size: 100%;}

.accordion-button:not(.collapsed) {background: #F0F0F0;}
.appviewImg img {max-width: 1000px;}

footer { background: #F2F2F2; border-top: 5px solid #FFC300; color: #404040;}
footer ul {display: block; margin: 0; padding: 0; list-style: none;}
footer ul li {line-height: 40px;}
footer a { color: #404040; text-decoration: none;}


/*Responsive*/
@media (max-width: 768px) {
    .logoSection {text-align: center; margin-bottom: 30px;}
    .hero-section {padding-top: 30px;}
    .hero-section h1 {
        font-size: 3em;
    }
    h2 {font-size: 30px;;}
    .container {padding-left: 30px; padding-right: 30px;}
    .appviewImg img {max-width: 100%;}
}