@charset "UTF-8";

/*
Theme Name: MGAE by KENNY
Theme URI:
Author: KENNY
Author URI: https://kenny.pl/
Description:
Version: 1.0
Tags: kenny
*/

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

@font-face {
    font-family: 'Sausage';
    src:  url('./assets/fonts/sausage.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}


:root {
    --color-white: #fff;
    --color-black: #000;
    --color-yellow: #ede817;
    --color-blue: #64c8df;
    --color-red: #eb1a4e;

    --color-lightblue: #9be1f1;
}

*,
::before,
::after {
	box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

section {
    padding-top: clamp(2rem, -1.5556rem + 7.4074vw, 4rem);
    padding-bottom: clamp(2rem, -1.5556rem + 7.4074vw, 4rem);
    position: relative;

    &:first-of-type {
        padding-top: 3rem;
    }
}

.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

h1 {
    font-family: 'Sausage', sans-serif;
    font-weight: normal;
}

h2 {
    font-family: 'Sausage', sans-serif;
    font-weight: normal;
    font-size: 42px;
}

.btn {
    font-family: 'Sausage', sans-serif;
    font-size: 22px;
    text-decoration: none;
    text-transform: lowercase;
    color: var(--color-red);
    background-color: var(--color-yellow);
    padding: 8px 28px;
    border-radius: 50px;
    box-shadow: 4px 4px 0 0 var(--color-white);
    display: inline-block;
    transition: all .25s ease;

    &:hover {
        box-shadow: none;
        translate: 4px 4px;
    }

    &:active {
        scale: .95;
    }
}

.header {
    background-color: var(--color-yellow);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.wave-header {
    height: 44px;
    background-color: var(--color-yellow);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 55'%3E%3Cpath d='M0 0 L102 0 L102 55 C77 55,77 5,51 5 C25 5,25 55,0 55 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 55'%3E%3Cpath d='M0 0 L102 0 L102 55 C77 55,77 5,51 5 C25 5,25 55,0 55 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 102px 55px;
    mask-repeat: repeat-x;
    mask-position: bottom;
    -webkit-mask-size: 81px 44px;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: bottom;
    transform: translateY(-.5px);
    position: relative;
    z-index: 2;
    margin-bottom: -42px;
}

.wave-footer {
    height: 44px;
    background-color: var(--color-yellow);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 55'%3E%3Cpath d='M0 5 C25 5,25 50,51 50 C77 50,77 5,102 5 L102 55 L0 55 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 55'%3E%3Cpath d='M0 5 C25 5,25 50,51 50 C77 50,77 5,102 5 L102 55 L0 55 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 102px 55px;
    mask-repeat: repeat-x;
    mask-position: top;
    -webkit-mask-size: 81px 44px;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: top;
    transform: translateY(.5px);
}

.curved-text {
    font-family: 'Sausage', sans-serif;
    margin-bottom: 3rem;
    font-size: clamp(2rem, -0.2222rem + 4.6296vw, 3.25rem);
    display: block;

    &.bigger {
        font-size: clamp(2.625rem, -1.8194rem + 9.2593vw, 5.125rem);
        margin-top: -2rem;
    }
}

.content-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.relative {
    position: relative;
}

.bg-blue {
    background-color: var(--color-blue);
}

.bd-red {
    background-color: var(--color-red);
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.mb-0 {
    margin-bottom: 0;
}

/* HERO */
.hero {
    background-color: var(--color-blue);
    background-image: url('./assets/img/bg-hero.svg');
    background-size: cover;
}

.photos {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    perspective: 1200px;
    perspective-origin: center;
}

.hero-photo {
    flex: 1;
    min-width: 0;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    user-select: none;
    pointer-events: none;
}

.hero-photo:nth-child(1) {
    transform: rotateY(42deg) scale(1.1);
    z-index: 1;
}
.hero-photo:nth-child(2) {
    transform: rotateY(25deg) translateX(10px);
    z-index: 2;
}
.hero-photo:nth-child(3) {
    transform: rotateY(0deg) scale(.95);
    z-index: 3;
}
.hero-photo:nth-child(4) {
    transform: rotateY(-25deg) translateX(-10px);
    z-index: 2;
}
.hero-photo:nth-child(5) {
    transform: rotateY(-42deg) scale(1.1);
    z-index: 1;
}

.yellow-label {
    background-color: var(--color-yellow);
    color: var(--color-red);
    font-family: 'Sausage', sans-serif;
    font-size: 24px;
    padding: 6px 16px;
    border-radius: 20px 20px 0 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
}

/* CURRENT EVENT */
.current-event {
    background-color: var(--color-red);
}

.event-row {
    display: grid;
    align-items: center;
    grid-template-columns: .9fr 1.1fr;
    gap: 2.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.event-to-right {
    text-align: end;
}

.event-name {
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 24px;
}

.event-date {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.event-description {
    color: var(--color-white);
    font-size: 16px;
    margin-bottom: 2.5rem;
}

.event-image {
    max-width: 100%;
}

/* PREVIOUS EVENT */
.previous-event {
    background-color: var(--color-blue);
}

/* BRANDS */
.brand-logo {
    max-width: 180px;
    max-height: 90px;
    height: auto;
}

.footer-links {
    background-color: var(--color-yellow);
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    a {
        text-decoration: none;
        color: var(--color-black);
    }
}

.copyright {
    font-size: 12px;
    text-align: center;
    padding: 1rem 0;

    a {
        text-decoration: none;
        color: var(--color-black);
    }
}

/* ADDITIONAL */

.lines {
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    transform: rotate(336deg);
}

.semicircle {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
}

.hearts {
    position: absolute;
    top: -4.5rem;
    left: 5.5rem;
}

.impact {
    position: absolute;
    top: 2vw;
    left: 8vw;
}

/* SWIPER */

.swiper {
    flex: 1;
    min-width: 0;
}

.logos-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.logos-button-prev {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ2MTVfMzQ4OSkiPgo8cGF0aCBkPSJNMzUuOTg0OCAyOC40MDY5QzM1Ljc1NiAyOC40OTM2IDM1LjYzODMgMjguNzUwMiAzNS43MjMzIDI4Ljk4MzZDMzUuNzY5MSAyOS4xMDY5IDM1Ljg2MzkgMjkuMjAzNiAzNS45ODQ4IDI5LjI0NjlDNDEuNTkyNyAzMS40ODkxIDQ2LjcyODYgMzQuNjcxMyA1MS4zOTI3IDM4Ljc5MzVDNTYuMDA4OSA0Mi44NzAyIDUxLjkyODkgNTAuMDE2OSA0Ni43NDcxIDQ3LjA0NjlDMzguNjQ2IDQyLjQwMjQgMzMuMzY3MyAzOS40NzggMzAuOTExIDM4LjI3MzZDMjUuNDg2MiAzNS42MDI0IDE3LjMwNzcgMzIuNjMxMyA2LjM3NTQxIDI5LjM2MDJDMi42NTE3NSAyOC4yNTM2IC0wLjkyMTUxNCAyNi41NTY5IDAuNDUxNTYyIDIyLjE0MzZDMC45NjU5MjEgMjAuNDc5MSAyLjI1ODM2IDE5LjI0MTMgNC4zMjg4NyAxOC40MzAyQzE4LjQ4NjggMTIuOTA4IDMyLjg3OCA2LjkwNDY3IDQ3LjUwMjMgMC40MjAyMjJDNDkuNDUwOCAtMC40NDY0NDUgNTEuNzE5NiAwLjQ2MzU1OSA1Mi41NjY0IDIuNDUwMjNDNTIuNjQwNSAyLjYyMzU2IDUyLjcwMjYgMi44MDEzMyA1Mi43NTI3IDIuOTgzNTZMNTIuODM0NCAzLjQwMzU2QzUzLjQyOTQgNi4xNTY4OSA1Mi4wNjI5IDguOTYwMjIgNDkuNTQ4OSAxMC4xNDY5TDMyLjg5MjEgMTcuOTgwMkMzMi43MjIxIDE4LjA1MzYgMzIuNjQ2OSAxOC4yNTAyIDMyLjcxODkgMTguNDIzNkMzMi43NzQ0IDE4LjU1MzYgMzIuOTAxOSAxOC42MzM2IDMzLjA0MjUgMTguNjIzNkM0My4zMzczIDE4LjIwMzYgNTMuOTMyOSAxOC4zMDM2IDY0LjE2MjMgMjAuMjIzNkM2Ni4zNDI5IDIwLjYzMDIgNjcuODc2MiAyMi42NDY5IDY3LjcxOTMgMjQuOTAzNUw2Ny43MDYyIDI1LjEwMDJDNjcuNTQ5MyAyNy4yNzY5IDY1LjY5NTYgMjguOTEwMiA2My41NjczIDI4Ljc1MDJDNjMuNTQ1NSAyOC43NDggNjMuNTIzNyAyOC43NDU4IDYzLjUwMTkgMjguNzQzNkM1NC44NDI4IDI3Ljk1MDIgNDYuNDA3MSAyNy43MjEzIDM4LjE5NDggMjguMDU2OUMzNy4yMDUzIDI4LjA5NDcgMzYuNDY4NyAyOC4yMTEzIDM1Ljk4NDggMjguNDA2OVoiIGZpbGw9IiNFQjFBNEUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF80NjE1XzM0ODkiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNjgiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjA5ODE1ZS0wNiA0OCkgcm90YXRlKC05MCkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    background-size: contain;
    width: 37px;
    height: 26px;
    position: static;
    translate: none;
    top: auto;
    left: auto;
    right: auto;
    cursor: pointer;
    flex-shrink: 0;
}

.logos-button-next {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ2MTVfMzQ5MikiPgo8cGF0aCBkPSJNMzIuMDE1MiAyOC40MDY5QzMyLjI0NCAyOC40OTM2IDMyLjM2MTcgMjguNzUwMiAzMi4yNzY3IDI4Ljk4MzZDMzIuMjMwOSAyOS4xMDY5IDMyLjEzNjEgMjkuMjAzNiAzMi4wMTUyIDI5LjI0NjlDMjYuNDA3NCAzMS40ODkxIDIxLjI3MTQgMzQuNjcxMyAxNi42MDczIDM4Ljc5MzZDMTEuOTkxMSA0Mi44NzAyIDE2LjA3MTEgNTAuMDE2OSAyMS4yNTI5IDQ3LjA0NjlDMjkuMzU0IDQyLjQwMjQgMzQuNjMyNyAzOS40NzggMzcuMDg5IDM4LjI3MzZDNDIuNTEzOCAzNS42MDI0IDUwLjY5MjMgMzIuNjMxMyA2MS42MjQ2IDI5LjM2MDJDNjUuMzQ4MiAyOC4yNTM2IDY4LjkyMTUgMjYuNTU2OSA2Ny41NDg0IDIyLjE0MzZDNjcuMDM0MSAyMC40NzkxIDY1Ljc0MTYgMTkuMjQxMyA2My42NzExIDE4LjQzMDJDNDkuNTEzMiAxMi45MDggMzUuMTIyIDYuOTA0NjcgMjAuNDk3NyAwLjQyMDIyNkMxOC41NDkyIC0wLjQ0NjQ0IDE2LjI4MDQgMC40NjM1NjMgMTUuNDMzNiAyLjQ1MDIzQzE1LjM1OTUgMi42MjM1NiAxNS4yOTc0IDIuODAxMzQgMTUuMjQ3MyAyLjk4MzU2TDE1LjE2NTYgMy40MDM1NkMxNC41NzA2IDYuMTU2OSAxNS45MzcxIDguOTYwMjMgMTguNDUxMSAxMC4xNDY5TDM1LjEwNzkgMTcuOTgwMkMzNS4yNzc5IDE4LjA1MzYgMzUuMzUzMSAxOC4yNTAyIDM1LjI4MTEgMTguNDIzNkMzNS4yMjU2IDE4LjU1MzYgMzUuMDk4MSAxOC42MzM2IDM0Ljk1NzUgMTguNjIzNkMyNC42NjI3IDE4LjIwMzYgMTQuMDY3MSAxOC4zMDM2IDMuODM3NjcgMjAuMjIzNkMxLjY1NzEgMjAuNjMwMiAwLjEyMzgyNiAyMi42NDY5IDAuMjgwNzQ5IDI0LjkwMzZMMC4yOTM4MjQgMjUuMTAwMkMwLjQ1MDc0NyAyNy4yNzY5IDIuMzA0NCAyOC45MTAyIDQuNDMyNjcgMjguNzUwMkM0LjQ1NDQ3IDI4Ljc0OCA0LjQ3NjI2IDI4Ljc0NTggNC40OTgwNiAyOC43NDM2QzEzLjE1NzIgMjcuOTUwMiAyMS41OTI5IDI3LjcyMTMgMjkuODA1MiAyOC4wNTY5QzMwLjc5NDcgMjguMDk0NyAzMS41MzEzIDI4LjIxMTMgMzIuMDE1MiAyOC40MDY5WiIgZmlsbD0iI0VCMUE0RSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ2MTVfMzQ5MiI+CjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI2OCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0ibWF0cml4KC00LjM3MTE0ZS0wOCAtMSAtMSA0LjM3MTE0ZS0wOCA2OCA0OCkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");    background-repeat: no-repeat;
    background-size: contain;
    width: 37px;
    height: 26px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    cursor: pointer;
    flex-shrink: 0;
}

/* MENU */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu {
    list-style: none;
    padding-left: 0;
    display: flex;
    gap: 2.5rem;
}

.menu-item {
    transition: all .25s ease;

    a {
        text-decoration: none;
        color: var(--color-white);
        text-transform: uppercase;
        font-size: 18px;
        font-family: 'Sausage', sans-serif;
        padding: 8px 20px;
        border-radius: 20px;
    }

    &:active {
        scale: .95;
    }

    &:first-child a {
        background-color: var(--color-red);
    }

    &:nth-child(2) a {
        background-color: var(--color-white);
        color: var(--color-blue)
    }

    &:nth-child(3) a {
        background-color: var(--color-blue);
    }
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    background: var(--color-red);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    transition: background .2s;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 3px;
    background: var(--color-white);
    border-radius: 3px;
    transition: transform .3s, opacity .3s;
    transform-origin: center;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--color-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .3s ease, transform .3s ease;
}
.mobile-nav.is-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.mobile-nav__list li a {
    font-family: Sausage, sans-serif;
    font-size: clamp(28px, 7vw, 42px);
    color: var(--color-white);
    text-decoration: none;
    background: var(--color-red);
    padding: 12px 40px;
    border-radius: 50px;
    display: block;
    transition: background .2s, transform .15s;
}
.mobile-nav__list li a:hover {
    background: var(--color-red);
    transform: scale(1.04);
}

/* POPUP */
#cm-success-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(255 255 255 / 70%);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#cm-success-popup.cm-popup--visible {
    display: flex;
}

.cm-popup__box {
    background-color: var(--color-blue);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyOSIgaGVpZ2h0PSI3MTAiIHZpZXdCb3g9IjAgMCAxODI5IDcxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ2OTBfMjIzKSI+CjxwYXRoIGQ9Ik0yODQyLjI4IDIzOS4zOFY3MDkuNDJIMC40Njk3MjdWNDcuMjRDMTYuOTY5NyAzNy40MiAzNi4yOTk3IDMxLjc4IDU2Ljk2OTcgMzEuNzhDMTEyLjQ3IDMxLjc4IDE1OC4yOSA3Mi40NzAxIDE2NS4zOSAxMjUuMThDMTgzLjEyIDExOC41OCAyMDIuNzkgMTE2LjQ2IDIyMi43MSAxMTkuODdDMjQyLjM3IDkxLjI3IDI3NS42NyA3Mi40NyAzMTMuNCA3Mi40N0MzNTMuNTkgNzIuNDcgMzg4LjY5IDkzLjc4OTkgNDA3LjcyIDEyNS41N0M0MzUuMDEgMTAzLjg0IDQ2OS43NCA5MC44IDUwNy41OCA5MC44QzU4My4yMyA5MC44IDY0Ni40OCAxNDIuODUgNjYyLjQ4IDIxMi41QzY3MS40NiAyMTAuMTYgNjgwLjg4IDIwOC45MSA2OTAuNTkgMjA4LjkxQzcxMi42MSAyMDguOTEgNzMzLjExIDIxNS4zMSA3NTAuMjggMjI2LjM0Qzc3MS4zMiAyMzkuODMgNzg3LjM0IDI2MC4yNCA3OTUuMDEgMjg0LjMxQzgxMS4wNyAyNzUuMjEgODI5LjY4IDI2OS45OCA4NDkuNTMgMjY5Ljk4Qzg2OS41NSAyNjkuOTggODg4LjI4IDI3NS4yOSA5MDQuNDEgMjg0LjUxQzkwNS44MyAyNzYuMzYgOTA4LjAzIDI2OC40OCA5MTAuOTcgMjYwLjk0QzkyOS4zNSAyMTMuNjkgOTc1Ljg1IDE4MC4xMyAxMDMwLjM1IDE4MC4xM0MxMDYxLjIxIDE4MC4xMyAxMDg5LjUyIDE5MC44OSAxMTExLjYxIDIwOC44MUMxMTQwLjU1IDE3OC45MiAxMTgxLjM2IDE2MC4yNSAxMjI2LjYzIDE2MC4yNUMxMjYxLjc4IDE2MC4yNSAxMjk0LjI0IDE3MS41IDEzMjAuNTYgMTkwLjUxQzEzNDIuODEgMTcxLjY3IDEzNzEuNzUgMTYwLjI1IDE0MDMuNDIgMTYwLjI1QzE0NDguMTUgMTYwLjI1IDE0ODcuNDggMTgzIDE1MTAuMTMgMjE3LjM4QzE1MjcuODIgMjA1LjMxIDE1NDkuMjggMTk4LjIxIDE1NzIuNDUgMTk4LjIxQzE1ODYuMDcgMTk4LjIxIDE1OTkuMTEgMjAwLjY5IDE2MTEuMTYgMjA1LjE4QzE2MzEuMDEgMTc3Ljk4IDE2NjMuNDEgMTYwLjI1IDE3MDAuMDYgMTYwLjI1QzE3MDkuMzEgMTYwLjI1IDE3MTguMjkgMTYxLjQgMTcyNi44NSAxNjMuNTNDMTczOS4xMiAxMTkuNzIgMTc3Ni4wNCA4NC41NSAxODI0LjU2IDc2LjMzQzE4NDYuOTIgNzIuNTMgMTg2OC45IDc0Ljk1IDE4ODguNjkgODIuMjlDMTkyNS4xOSAzMi44NSAxOTg0LjM4IDAuNzA5OTYxIDIwNTEuMjQgMC43MDk5NjFDMjEwNi4yIDAuNzA5OTYxIDIxNTYuMDIgMjIuNDYgMjE5Mi4yNyA1Ny42N0MyMjA1Ljc1IDUyLjQ3IDIyMjAuNCA0OS41OCAyMjM1Ljc1IDQ5LjU4QzIyODcuMTEgNDkuNTggMjMzMC44OCA4MS41NSAyMzQ3LjYxIDEyNi4zOEMyMzU4LjUzIDEyMi42NyAyMzcwLjI2IDEyMC42NCAyMzgyLjQ1IDEyMC42NEMyMzkzLjM2IDEyMC42NCAyNDAzLjg3IDEyMi4yNiAyNDEzLjc4IDEyNS4yNEMyNDIxLjk5IDExMy45NCAyNDMyLjEyIDEwNC4xIDI0NDMuNzIgOTYuMTdDMjQ2MS42IDgzLjkzIDI0ODIuOTMgNzYuMjIwMSAyNTA2LjAyIDc0LjgxMDFDMjUwOC42IDc0LjY0MzQgMjUxMS4yIDc0LjU2MDEgMjUxMy44MyA3NC41NjAxQzI1MTguMDYgNzQuNTYwMSAyNTIyLjIyIDc0Ljc2NjcgMjUyNi4zMyA3NS4xODAxQzI1NTUuNjIgNzguMDkwMSAyNTgxLjkgOTEuMTMwMSAyNjAxLjQ2IDExMC42OEMyNjEzLjYzIDEyMi44MiAyNjIzLjIxIDEzNy41IDI2MjkuMzEgMTUzLjgzQzI2MzMuMzIgMTUxLjc2IDI2MzcuNDggMTQ5Ljk0IDI2NDEuNzUgMTQ4LjM4QzI2NDcuOCAxNDYuMTcgMjY1NC4xMSAxNDQuNDkgMjY2MC42MyAxNDMuNEMyNjY2LjU1IDE0Mi4zNyAyNjcyLjY3IDE0MS44NCAyNjc4Ljg4IDE0MS44NEMyNzE2LjMyIDE0MS44NCAyNzQ5LjI2IDE2MC43NiAyNzY4LjM2IDE4OS40MkMyNzc2LjAxIDIwMC45IDI3ODEuNDUgMjEzLjk0IDI3ODQuMDcgMjI3Ljk2QzI3ODcuMDMgMjI3LjcwNyAyNzkwLjAxIDIyNy41NzcgMjc5My4wMSAyMjcuNTdDMjgxMC43OCAyMjcuNTcgMjgyNy41MyAyMzEuODMgMjg0Mi4yOCAyMzkuMzhaIiBmaWxsPSIjODFENUU5Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDY5MF8yMjMiPgo8cmVjdCB3aWR0aD0iMTgyOSIgaGVpZ2h0PSI3MTAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    color: var(--color-white);
    border-radius: 6px;
    padding: 2.5rem;
    max-width: 480px;
    width: 90%;
    text-align: center;
    position: relative;
}

#cm-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
    line-height: 1;
}

#cm-popup-close:hover { opacity: 1; }

/* MEDIA QUERIES */

@media (max-width: 992px) {
    .nav-toggle { display: flex; }
    .nav .menu-main-menu-container { display: none; }

    .hero {
        padding-bottom: 5rem;
    }

    .yellow-label {
        text-align: center;
        width: 100%;
    }

    .brand-logo {
        max-width: 100px;
        max-height: 50px;
    }

    .hero-photo:nth-child(1) {
        display: none;
    }
    .hero-photo:nth-child(5) {
        display: none;
    }

    .event-row {
        grid-template-columns: 1fr;
    }

    .hearts, .impact {
        display: none;
    }

    .mb-0 {
        margin-bottom: 1.5rem;
    }

    .event-to-right {
        text-align: center;
    }

    .event-row .relative {
        margin: 0 auto;
    }
}