/* ___ BANNER ___ */
.banner .container {max-width: 100%; padding: 0;}
.banner .wrapper {position: relative;}
.banner .images {display: flex; justify-content: center; overflow-x: hidden;}
.banner .images picture {min-width: 100%;}
.banner .images picture img {height: 780px; object-fit: cover;}
.banner .main {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: end; max-width: 800px; height: 80%; margin-inline: auto;}
.banner .main > :first-child {font-size: var(--fs-2xl, 54px); font-weight: 800; line-height: 1.3; text-align: center; color: #fff; margin-bottom: 20px;}
.banner .main .btns {display: flex; align-items: center; gap: 15px;}
.banner .main .btns .btn__primary {width: 200px;}
.banner .main .btns .btn__primary.gradient:hover {background-color: #fff; border-color: #fff;}
.banner .slick-arrow {position: absolute; top: 48%; width: 50px; height: 50px; z-index: 50;}
.banner .slick-arrow img {width: 30px; height: 30px; filter: invert(1);}
.banner .prev-btn {left: 2%;}
.banner .next-btn {right: 2%;}

/* ___ INTRO ___ */
.intro {padding-block: 50px;}
.intro .message {max-width: 600px; text-align: center; margin-inline: auto;}
.intro .message > :first-child {font-size: var(--fs-lg, 32px); line-height: 1.2; margin-bottom: 12px;}
.intro .message > :first-child * {color: var(--c-primary);}
.intro .message p {font-size: calc(var(--fs-base, 16px) + 2px);}

/* ___ TESTIMONIALS ___ */
.testimonials {padding-block: 70px 80px; background-color: var(--c-primary);}
.testimonials .title {text-align: center; margin-bottom: 30px;}
.testimonials .title > :first-child {font-size: var(--fs-xl, 42px); font-weight: 800; color: #fff;}
.testimonials .title > :first-child::selection {background-color: #fff; color: var(--c-primary);}
.testimonials .wrapper {position: relative; max-width: 800px; margin-inline: auto;}
.testimonials .review {background-color: #fff; padding: 34px 40px; border-radius: 24px;}
.testimonials .review .user {display: flex; align-items: center; gap: 15px;}
.testimonials .review .user div {display: flex; flex-direction: column; align-items: flex-start;}
.testimonials .review .user div > :first-child {display: block; font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 3px;}
.testimonials .review .user div > :nth-child(2) {font-size: var(--fs-xs, 14px); color: var(--_c-text);}
.testimonials .review .user img:first-child {border-radius: 50%;}
.testimonials .review .user img:last-child {margin-left: auto;}
.testimonials .review p {height: 177px; font-size: calc(var(--fs-base, 16px) + 2px); color: var(--_c-text); line-height: 1.4; margin-top: 28px;}
.testimonials .slick-dots {width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; position: absolute; bottom: -50px;}
.testimonials .slick-track {display: flex; gap: 20px;}
.testimonials .slick-dots li {height: 10px; width: 10px; background: #fff; border-radius: 100%; cursor: pointer;}
.testimonials .slick-dots li:hover {transform: scale(1.3);}
.testimonials .slick-dots button {display: none;}
.testimonials .slick-dots .slick-active {height: 18px; width: 18px;}
.testimonials .slick-arrow {position: absolute; top: 47%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 50%; z-index: 50;}
.testimonials .slick-arrow img {filter: var(--filter-primary);}
.testimonials .prev-btn {left: -10%;}
.testimonials .next-btn {right: -12%;}

/* ___ SERVICES ___ */
.services {padding-block: 60px 80px;}
.services .service {display: flex; align-items: center; gap: 42px;}
.services .service:not(:last-of-type) {margin-bottom: 100px;}
.services .slider {position: relative; width: calc(50% - 20px);}
.services img {height: 573px; object-fit: cover; border-radius: 12px;}
.services .service:nth-of-type(even) .slider {order: 1;}
.services .content > :first-child {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1.3; margin-bottom: 6px;}
.services .content p {font-size: calc(var(--fs-base, 16px) + 2px); line-height: 1.4;}
.services .content > :nth-last-child(2) {display: block; font-family: var(--ff-primary); font-size: var(--fs-sm, 20px); margin-block: 30px 15px;}
.services .content .btn__primary {width: 200px;}
.services .slick-dots {width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; position: absolute; bottom: 30px;}
.services .slick-track {display: flex; gap: 20px;}
.services .slick-dots li {height: 10px; width: 10px; background: #fff; border-radius: 100%; cursor: pointer;}
.services .slick-dots li:hover {transform: scale(1.3);}
.services .slick-dots button {display: none;}
.services .slick-dots .slick-active {height: 18px; width: 18px;}

/* ___ EVENTS ___ */
.events {padding-block: 20px 80px;}
.events .head {width: 82%; text-align: center; margin: 0 auto 40px;}
.events .head > :first-child {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1.3; margin-bottom: 8px;}
.events .head > :first-child * {color: var(--c-primary);}
.events .head p {font-size: calc(var(--fs-base, 16px) + 2px); line-height: 1.5;}
.events .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.events .card {position: relative;}
.events .card img {height: 486px; object-fit: cover; border-radius: 20px;}
.events .card div {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; background: linear-gradient(to bottom, rgba(255, 255, 255, 0%), var(--c-primary) 85%); padding: 20px 15px; border-radius: 0 0 20px 20px;}
.events .card div *::selection {background-color: #fff; color: var(--c-primary);}
.events .card:hover div {background: linear-gradient(to bottom, rgba(255, 255, 255, 0%), var(--c-primary) 60%);}
.events .card div > :first-child {font-size: var(--fs-lg, 32px); font-weight: 800; color: #fff; margin-bottom: 10px;}
.events .card div > :nth-child(2) {font-family: var(--ff-primary); font-size: var(--fs-sm, 20px); font-weight: 600; color: #fff;}

/* ___ CTA ___ */
.cta {padding-block: 90px; background: no-repeat center/cover url('https://www.partyenergizers.com/theme/website/images/cta-bg.webp'); transition: var(--transition);}
.cta .content {text-align: center;}
.cta .content > :first-child {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: 12px;}
.cta .content p {max-width: 1000px; font-size: calc(var(--fs-base, 16px) + 2px); line-height: 1.4; color: #fff; margin: 0 auto 20px;}
.cta .content .btn__primary.light {width: 160px; font-size: calc(var(--fs-base, 16px) + 2px); border-radius: 12px; margin-inline: auto;}
.cta *::selection {background-color: #fff; color: var(--c-primary);}

@media only screen and (max-width: 1200px) {
    /* Testimonials */
    .testimonials .prev-btn {left: -8%;}
    .testimonials .next-btn {right: -10%;}
    /* Services */
    .services .service {gap: 30px;}
    .services .service:not(:last-of-type) {margin-bottom: 80px;}
    /* Events */
    .events .card img {height: 360px;} 
}

@media only screen and (max-width: 991px) {
    /* Banner */
    .banner .main {max-width: 80%;}
    .banner .images picture img {max-height: 540px;}
    /* Intro */
    .intro {padding-block: 40px;}
    /* Testimonials */
    .testimonials {padding-block: 50px 70px;}
    .testimonials .slick-dots {bottom: -42px;}
    .testimonials .slick-arrow {top: auto; bottom: -16%; width: 40px; height: 40px;}
    .testimonials .prev-btn {left: 4%;}
    .testimonials .next-btn {right: 2%;}
    /* Services */
    .services {padding-block: 50px 60px;}
    .services img {height: auto;}
    .services .service {display: block;}
    .services .service:nth-of-type(even) .slider {order: unset;}
    .services .service:not(:last-of-type) {margin-bottom: 60px;}
    .service .slider {width: 100%; max-width: 550px; margin: 0 auto 30px;}
    /* Events */
    .events {padding-bottom: 60px;}
    .events .head {width: 100%;}
    .events .wrapper {grid-template-columns: repeat(2, 1fr); place-items: center;}
    .events .card img {height: 300px;}
    .events .card:nth-of-type(3) {grid-area: 2 / 1 / 3 / 3; width: fit-content;}
    .events .card:nth-of-type(3) img {height: auto;}
    /* Award */
    .award {padding-block: 80px;}
    .award .content p {width: 100%;}
    /* Cta */
    .cta {padding-block: 70px;}
}

@media only screen and (max-width: 767px) {
    /* Banner */
    .banner .main {height: 100%; max-width: 90%; justify-content: center;}
    .banner .main > :first-child {line-height: 1;}
    .banner .main .btns .btn__primary {width: 170px;}
    .banner .prev-btn {left: 0;}
    .banner .next-btn {right: 0;}
    /* Services */
    .services .service:not(:last-of-type) {margin-bottom: 50px;}
    /* Award */
    .award {padding-block: 60px;}
}

@media only screen and (max-width: 575px) {
    /* Banner */
    .banner .images picture img {max-height: 400px;}
    .banner .main {height: auto;}
    .banner .main > :first-child {margin-bottom: 12px;}
    .banner .main .btns {gap: 10px;}
    .banner .main .btns {flex-direction: column;}
    .banner .main .btns .btn__primary {width: 150px; font-size: var(--fs-base, 16px);}
    .banner .slick-arrow {display: none !important;}
    /* Intro */
    .intro {padding-block: 30px;}
    .intro .message > :first-child {margin-bottom: 6px;}
    /* Testimonials */
    .testimonials {padding-block: 30px 50px;}
    .testimonials .title {margin-bottom: 20px;}
    .testimonials .review {padding: 24px;}
    .testimonials .review .user {flex-direction: column; gap: 10px;}
    .testimonials .review .user img:first-child {max-width: 55px; flex: 1;}
    .testimonials .review .user div {align-items: center;}
    .testimonials .review .user div > :nth-child(2) {line-height: 1;}
    .testimonials .review .user img:last-child {max-width: 130px; margin: 0;}
    .testimonials .review p {height: 169px; text-align: center; margin-top: 18px;}
    .testimonials .slick-dots {bottom: -34px;}
    .testimonials .slick-arrow {bottom: -11%; width: 30px; height: 30px;}
    /* Services */
    .services {padding-block: 40px;}
    .services .service:not(:last-of-type) {margin-bottom: 40px;}
    .service .slider {margin-bottom: 15px;}
    .services .content > :nth-last-child(2) {margin-block: 12px;}
    .services .content .btn__primary {width: 170px;}
    /* Events */
    .events {padding-block: 15px 40px;}
    .events .head {margin-bottom: 20px;}
    .events .wrapper {grid-template-columns: 1fr;}
    .events .card img {height: auto;}
    .events .card:nth-of-type(3) {grid-area: initial;}
    /* Award */
    .award {padding-block: 40px;}
    .award .image {max-width: 100px;}
    /* Cta */
    .cta {padding-block: 40px;}
    .cta .content .btn__primary {width: 140px;}
}

@media only screen and (max-width: 475px) {
    /* Banner */
    .banner .images picture img {max-height: 350px;}
    /* Testimonials */
    .testimonials .review {padding: 18px;}
    .testimonials .review p {height: 162px; margin-top: 12px;}
    /* Services */
    .services .service:not(:last-of-type) {margin-bottom: 30px;}
}

@media only screen and (max-width: 360px) {
    /* Banner */
    .banner .images picture img {max-height: 300px;}
}