.hero-section-container{position:absolute;width:100%;max-height:810px;top:0;padding:0;margin:0;.hero-section { margin: auto; color: #fbfcf7; background-image: url(/img/Hero_BG_Uncropped.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; margin: auto; padding-top: 160px; border-bottom-right-radius: 32px; border-bottom-left-radius: 32px; .hero-text-slider { color: #beff00; height: 100px; overflow: hidden; } .hero-creators-img { img { width: 100%; max-width: 690px; } } .slide-to-top { animation: slideToTop 1s ease-in forwards; } .slide-from-bottom { animation: slideFromBottom 1s ease-out forwards; } .hero-cta { .btn-early-access { font-family: var(--font-primary); font-weight: bold; background-color: #beff00; color: #000; border: none; border-radius: 36px; width: 216px; height: 61px; text-align: center; vertical-align: middle; line-height: 45px; margin-bottom: 4rem; padding: 8px; text-decoration: none; text-align: center; display: inline-block; &:hover { opacity: 0.5; } } } }}@keyframes slideToTop{0%{margin-top:0}100%{margin-top:-100px}}@keyframes slideFromBottom{0%{margin-top:100px}100%{margin-top:0}}.problem-solution-section{position:relative;width:100%;max-width:1200px;margin-top:800px;margin-left:auto;margin-right:auto;.problem-section { position: sticky; top: 20%; z-index: 1; color: #000; padding-left: 40px; padding-right: 40px; padding-bottom: 30px; padding-left: 40px; padding-right: 40px; padding-bottom: 30px; border: solid 1px #4d4d4d; border-radius: 32px; padding: var(--space-sm); .problem-accent { background-image: url(/img/Green_Bolt.png); background-size: 170px 57px; background-repeat: no-repeat; background-position: top 4px right 0px; padding-right: 16px; } } .solution-section { position: relative; margin: -30vh auto 0; z-index: 2; color: #fff; background: none; display: inline-block; width: 100%; max-width: 1200px; background-image: url(/img/Solution_Card_BG_Uncropped.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; border-radius: 32px; padding: var(--space-sm); .solution-accent { padding-bottom: var(--space-sm); span { color: #beff00; } } .solution-details { .solution-details-logo { padding-top: var(--space-xs); img { width: 100%; max-width: 53px; } } } }}.why-section{margin-top:10rem!important;.why-title { display: inline-block; text-align: center; margin-bottom: 2rem !important; background-image: url(/img/Why_bolt.png); background-size: 134px 13px; background-repeat: no-repeat; background-position: top 50px left -10px; padding-left: 10px; } .why-card { border: solid 1px #4d4d4d; border-radius: 32px; margin-top: 2rem; padding: var(--space-xs); .why-card-info { margin-top: var(--space); .why-card-text { margin-right: 50px; } img { width: 100%; max-width: 64px; } } }}.how-section{margin-top:10rem!important;.how-title { display: inline-block; text-align: center; margin-bottom: 2rem !important; background-image: url(/img/Why_bolt.png); background-size: 134px 13px; background-repeat: no-repeat; background-position: top 50px left -10px; padding-left: 6px; } .how-cards-list { overflow: scroll !important; white-space: nowrap; flex: 1; -ms-overflow-style: none; scrollbar-width: none; .how-card { display: inline-block; border-radius: 32px; margin-top: 2rem; padding: 2rem; min-width: 386px; min-height: 680px; color: #fff; .how-card-title { font-family: "Inter", sans-serif; font-weight: bold; font-size: 36px; text-align: center; } .how-card-spacer { height: 80%; } } .how-cards-list::-webkit-scrollbar { display: none; } .how-card-ama { background-image: url(/img/AMAs.png); background-size: cover; background-repeat: no-repeat; } .how-card-performance { background-image: url(/img/Performances.png); background-size: cover; background-repeat: no-repeat; } .how-card-meetgreet { background-image: url(/img/Meet_Greet.png); background-size: cover; background-repeat: no-repeat; } .how-card-club { background-image: url(/img/Clubs.png); background-size: cover; background-repeat: no-repeat; } .how-card-masterclass { background-image: url(/img/Masterclasses.png); background-size: cover; background-repeat: no-repeat; } .how-card-premiere { background-image: url(/img/Premieres.png); background-size: cover; background-repeat: no-repeat; } }}.testimonials-section{margin-top:10rem!important;.testimonials-title { text-align: center; margin-bottom: 2rem; display: inline-block; background-image: url(/img/Why_bolt.png); background-size: 134px 13px; background-repeat: no-repeat; background-position: top 50px left 10px; padding-left: 6px; } .testimonials-carousel { max-width: 1024px; margin-left: auto; margin-right: auto; .testimonials-text { font-family: var(--font-primary); font-weight: bold; font-size: 30px; line-height: 110%; margin-bottom: 2rem; color: #333; } .testimonials-caption { margin-bottom: 0rem; } }}@media only screen and (max-width:700px){.hero-section-container{.hero-section { padding-top: 120px; .hero-text-slider { height: 80px; } }}.problem-solution-section{margin-top:580px;.problem-section { .problem-accent { background-image: url(/img/Green_Bolt.png); background-size: 80px 27px; background-repeat: no-repeat; background-position: top 4px right 6px; padding-right: 16px; h2 { font-size: 24px; span { text-wrap: wrap !important; } } } .problem-details { h4 { font-size: 14px; } } } .solution-section { position: sticky; top: 21%; .solution-details { .solution-details-logo { img { width: 100%; max-width: 42px; } } } }}.why-section{margin-top:6rem!important;.why-title { background-size: 84px 10px; background-repeat: no-repeat; background-position: top 28px left -2px; padding-left: 10px; } .why-card { width: 100%; max-width: 360px; border-radius: 22px; margin-top: 1rem; padding: var(--space-sm); .why-card-info { margin-top: var(--space); .why-card-text { margin-right: var(--space-sm); } img { max-width: 42px; max-height: 42px; } } }}.how-section{margin-top:6rem!important;.how-title { background-size: 84px 10px; background-repeat: no-repeat; background-position: top 28px left 12px; padding-left: 0px; } .how-cards-list { .how-card { min-width: 180px; min-height: 319px; p { font-size: 10px; } } }}.testimonials-section{margin-top:6rem!important;.testimonials-title { background-size: 84px 10px; background-repeat: no-repeat; background-position: top 28px left 28px; padding-left: 0px; } .testimonials-carousel { .testimonials-text { font-size: 14px; margin-bottom: 1rem; } }}}