:root {
    --purple: #cb1f09; /* featured event -- orig was purple - #901790 */
    --blocked: #414141; /* account suspended - dark grey */
    --blue: #0b92af;
    --fira: 'Fira Sans', sans-serif;
    --firaCondensed: 'Fira Sans Condensed', sans-serif;
    --nunito: 'Nunito', sans-serif;
    --rubik: 'Rubik', sans-serif;
    --bebas: "Bebas Neue", sans-serif;
    --purple: #cb1f09; /* featured event -- orig was purple - #901790 */
    
    --CoupleRedPrime: #e63e29;
    
    --CoupleDarkGray300: #303642;
    
    --CoupleGray100: #fafafa;
    --CoupleGray200: #f2f3f5;
    --CoupleGray300: #ebecf0;
    --CoupleGray400: #e1e3e8;
    --CoupleGray500: #d7dae0;
    --CoupleGray600: #c9cdd4;
    
    --CoupleBlue400: #26c1e3;
    --CoupleBlue500: #1189ad;
    --CoupleBlue600: #5a5ad6; /* #00587A; */
    --CoupleBlue700: #004161;
    --CoupleBlue800: #242A36;

    --CoupleYellow: #F9C701;

    --CouplePurple: #702AD0; /* August 2025 */
    --CoupleText: #444444; /* August 2025 */
    
    --TextLowEmphasis: #9e9e9e;
    --TextMediumEmphasis: #676565;
    --TextHighEmphasis: #212121;
    
    --error: #e34826;

    /* new colors */
    --color-primary: #383838;
}

/* helpers */
.container {
    width: 100%;
    max-width: 1396px;
    margin-left: auto;
    margin-right: auto;
}

.container-sm {
    max-width: 1115px;
}

.container-xl {
    max-width: 1492px;
}

.container-fluid {
    max-width: 100%;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

/* show table */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .d-md-block {
        display: block !important;
    }
}

/* Show mobile up */
@media only screen and (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
}

/* Show tablet up */
@media only screen and (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 1200px) {
    .d-xl-block {
        display: block !important;
    }
}

/* helpers end */


/*
font-family: var(--fira);
font-family: var(--nunito);
font-family: var(--rubik);
*/

input {
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
}

html.h100 {
    height: 100%;
}

body.grad-body-1 {
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    position: relative;
    overflow: hidden;
}

/* August 2025 */
body.grad-body-1.v2 {
    background:  url("/img/grad-body-5s.svg") top 1900px left no-repeat, linear-gradient(92.43deg, #26C1E3 8.65%, #702BD0 89.45%);
    background-size: 375px auto, auto auto;
}

@media only screen and (min-width: 700px) {
    body.grad-body-1.v2 {
        background:  url("/img/grad-body-5.svg") top 1100px left no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-size: 1200px auto, auto auto;
    }
}

/* November 2025 */
body.grad-body-1.v3 {
    background:  url("/img/grad-body-6s.svg") top 0 left no-repeat, linear-gradient(92.43deg, #26C1E3 8.65%, #702BD0 89.45%);
    background-size: auto 100%, auto auto;
}

@media only screen and (min-width: 700px) {
    body.grad-body-1.v3 {
        background:  url("/img/grad-body-6.svg") top 0 left no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-size: auto 100%, auto auto;
    }
}

body.grad-body-2 {
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

body.grad-body-3 {
    background:  url("/img/bg_pattern.svg") top right no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    height: 100%;
}

body.grad-body-4 {
    background: url("/img/event-inner/events-bg-mobile.png") bottom right no-repeat, linear-gradient(124.43deg, #26C1E3 8.65%, #702BD0 89.45%);
    background-size: 100% auto;
    position: relative;
}



@media screen and (max-width: 767px) {
    html {
        display: flex;
        flex-direction: column;
    }

    body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
}

@media screen and (min-width: 768px) {
    body.grad-body-1 {
        background: url("/img/profile-bg-tablet.svg") center top no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        /* background-attachment: fixed; */
        background-size: cover;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* fix profile height */
    }

    body.grad-body-1 footer.v3 {
        margin-top: auto;
    }

    body.grad-body-4 {
        background: url("/img/event-inner/events-bg-desktop.svg"), 
            linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-size: auto, 100% 100%;
        background-position: left bottom, center center;
        background-repeat: no-repeat, no-repeat;
    }
}

@media screen and (min-width: 992px) {
    body.grad-body-1 {
        background: url("/img/profile-bg.svg") center top no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-size: 100% auto;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body.grad-body-1 footer.v3 {
        margin-top: auto;
    }
}

@media screen and (min-width: 1200px) {
    body.grad-body-1 {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body.grad-body-1 footer.v3 {
        margin-top: auto;
    }
}

/* Profile page specific styles to ensure proper footer positioning */
body.grad-body-1 .profile-container {
    flex: 1;
    /* Keep the existing grid layout but ensure it works with flexbox parent */
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 16px;
    padding: 54px 0 54px 0;
    font-size: 16px;
    font-weight: 500;
    margin: 0 15px;
}

body.grad-body-1 .profile-container > * {
    flex-shrink: 0;
}

body.grad-body-1 .profile-container .profile-left,
body.grad-body-1 .profile-container .profile-right {
    flex-shrink: 0;
}

/* Ensure grid layout works on larger screens */
@media only screen and (min-width: 610px) {
    body.grad-body-1 .profile-container {
        width: 580px;
        grid-template-columns: 580px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) {
    body.grad-body-1 .profile-container {
        padding: 164px 0 105px 0;
        gap: 14px 10px;
    }
}

@media only screen and (min-width: 1200px) {
    body.grad-body-1 .profile-container {
        width: 1170px;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 250px 250px 250px;
    }
}

html, body {
    overflow-x: hidden;
    color: #444;
    font-family: var(--nunito);
}

body.noScroll {
    overflow: hidden;
    position: fixed;
}

body .rubik {
    font-family: var(--rubik);
}

body .fw500 {
    font-weight: 500;
}

body a.zero {
    font-size: 0;
}

body .CoupleBlue400 {
    color: var(--CoupleBlue400);
}

body .CoupleRedPrime {
    color: var(--CoupleRedPrime);
}

.mb40 {
    margin-bottom: 40px;
}

body a.mb26, 
body a.mb26:hover,
#menuToggle a.mb26, 
#menuToggle a.mb26:hover {
    margin: 0 0 26px 0;
}

.centerV-al {
    vertical-align: middle;
}

.center-al {
    text-align: center;
}


span.block500 {
    display: block;
}

@media only screen and (min-width: 500px) {
    span.block500 {
        display: unset;
    }
}


body .d-contents {
    display: contents;
}

.addPointer {
    cursor: pointer !important;
}

.cursorUnset {
    cursor: unset !important;
}

.linkshareTip {
    position: relative;
}

/*LINKS*/
body a.white-link {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
}

body a.white-link:hover {
    color: #fff;
    text-decoration: none;
}

body a.blue-link {
    color: #0c87a1;
    text-decoration: underline;
}

body a.blue-link:hover {
    color: #0c87a1;
    text-decoration: none;
}

body a.CoupleBlue500-link {
    color: var(--CoupleBlue500);
    text-decoration: underline;
}

body a.CoupleBlue600-link:hover {
    color: var(--CoupleBlue600);
    text-decoration: none;
}

body a.CoupleBlue600-link {
    color: var( --CoupleBlue600);
    text-decoration: underline;
}

body a.CoupleBlue500-link:hover {
    color: var(--CoupleBlue500);
    text-decoration: none;
}

.text-white {
    color: #fff !important;
}

body a.dark-link {
    color: #383838;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

}

body a.dark-link:hover {
    color: #383838;
    text-decoration: none;
}

body .font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

body .font-16-20 {
    font-size: 20px;
}

@media only screen and (max-width: 767px) {
    body .font-16-20 {
        font-size: 16px;
    }
}

.v2-logo {
    display: flex;
}

.v2-logo svg {
    width: 105px;
}

.v2-logo img {
    width: 25.349vw;
}

@media only screen and (min-width: 576px) {
    .v2-logo img {
        width: 109px;
    }
}

@media only screen and (min-width: 768px) {
    .v2-logo svg {
        width: 109px; 
    }

    .v2-logo img {
        width: 109px;
    }
}

.blue-500 {
    color: var( --CoupleBlue500);
}

.dGrid {
    display: grid;
}

.dGrid.gap5 {
    gap: 5px;
}


/*Links*/

a:link, a:visited {
    color: #27c1e3;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

a.cb500:link, a.cb500:visited {
    color: var(--CoupleBlue500);
    text-decoration: underline;
}

a.cb500:hover {
    text-decoration: none;
}

.mt16 {
    margin-top: 16px;
}


body a.blue2:link,
body a.blue2:visited  {
    color: #487DDB;
}

.navbar {
    background-color: #fff;
}

nav {
    display: flex;
    justify-content: space-between;
    font-family: 'Rubik', sans-serif;
    height: 17.442vw; /*75px */
    padding: 0 4.651vw; /* 20px */
    z-index: 99; /* 102; */ /*10;*/
    color: #383838;
    position: relative;
    background-color: #fff;
}

nav.shadow {
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1)
}

@media only screen and (min-width: 576px) {
    nav {
        height: 75px;
    }
}

@media only screen and (min-width: 768px) {
    nav {
        height: 75px;
    }
}

@media only screen and (min-width: 992px) {
    .navbar {
        border-radius: 20px;
        box-shadow: 0px 14px 40px 0px rgba(46, 28, 102, 0.2);
        max-width: 1366px;
        width: calc(100% - 30px);
        padding-left: 45px;
        padding-right: 45px;
        position: fixed;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99; /* 999 */
    }

    .navbar.v2 {
        top: 12px;
    }

    nav {
        height: 66px;
        padding-left: 0;
        padding-right: 0;
    }
}



/*Top Navigation*/

.navAlert {
    margin-bottom: 18px;
    z-index: 10;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 15px;
    padding-bottom: 3px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 18 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0a4 4 0 0 1 4 4v4a4 4 0 0 1-4 4H9.623L4 15v-3a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h10z' fill='%23EB482D' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-size: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

ul.v2-nav {
    display: none;
    gap: 1px;
    font-size: 20px;
}

@media only screen and (min-width: 600px) {
    ul.v2-nav {
        display: flex;
    }
}

/*@media only screen and (min-width: 1920px) {
    ul.v2-nav {
        font-size: 1.082vw;
    }
}*/

ul.v2-nav li {
    position: relative;
    transform-style: preserve-3d;
}

ul.v2-nav li > a {
    color: #3a3636;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    transition: all 0.2s ease-in;
    transition-delay: 0.2s;
}

.v2-nav-active {
    color:  #27c1e3 !important;
}

/*@media only screen and (min-width: 1920px) {
    ul.v2-nav li > a {
        padding: 0 0.8vw;
    }
}*/

ul.v2-nav li > a:hover,
ul.v2-nav li > a.active {
    background-color: #26c1e3;
    color: #fff !important;
}

.v2-drop {
    position: absolute;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-top: -475%; /* -340%; */
    transition: all 0.5s cubic-bezier(.68,-0.55,.27,1.55);
    transform: translateZ(-10px);
}

/*@media only screen and (min-width: 1920px) {
    .v2-drop {
        font-size: 0.810vw;
    }
}*/

.v2-drop.show {
    margin-top: 1px;
}

.v2-drop a,
.v2-sign-in {
    height: 48px;
    display: flex;
    align-items: center;
    color: #3a3636;
    text-decoration: none;
    padding: 0 0 0 16px;
    border: 1px solid #26c1e3;
    /*transition: all 0.2s ease-in;*/
    margin-top: -1px;
    cursor: pointer;
    position: relative;
}

/*@media only screen and (min-width: 1920px) {
    .v2-drop a,
    .v2-sign-in {
        height: 3vw;
        padding: 0 0 0 18%;
    }
}*/

.v2-drop a:hover,
.v2-sign-in:hover {
    background-color: #26c1e3;
    color: #fff;
}

.v2-si-box {
    position: absolute;
    top: 0;
    right: -1px;
    width: 330px;
    background-color: #fff;
    display: none;
    transition: unset;
}


/*@media only screen and (min-width: 1920px) {
    .v2-si-box {
        width: 320%;
    }
}*/

.v2-si-box.show {
    display: block;
}

.v2-si-box.fixed {
    width: 330px;
}

.v2-si-box .title {
    background-color: #26c1e3;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 24px;
    padding: 10px 0;
}

/*@media only screen and (min-width: 1920px) {
    .v2-si-box .title {
        font-size: 1.389vw;
        padding: 0.3vw 0;
    }
}*/

.v2-si-box.fixed .title {
    font-size: 24px;
    padding: 10px 0;
}

/* Sept 2024 nav */
/* .v2-si-box .content {
    border-left: 8px solid #26c1e3;
    border-bottom: 8px solid #26c1e3;
    padding: 20px 30px 35px 40px;
    gap: 12px;
    display: grid;
    text-align: center;
    background-color: #fff;
}

.v2-si-box .content.f16 {
    font-size: 16px;
} */

/*@media only screen and (min-width: 1920px) {
    .v2-si-box .content {
        border-left: 0.5vw solid #26c1e3;
        border-bottom: 0.5vw solid #26c1e3;
        padding: 1.4vw 1.8vw 2vw 1.8vw;
        gap: 0.7vw;
    }
}*/

.v2-si-box.fixed .content {
    border-left: 8px solid #26c1e3;
    border-bottom: 8px solid #26c1e3;
    padding: 20px 30px 35px 30px;
    gap: 12px;
}

.v2-si-box a {
    all: unset;
}

.v2-si-box a:hover {
    all: unset;
}

.v2-sign-in:hover .v2-si-box  {
    color: #3a3636;
    background-color: unset;
    transition: unset;
}

.v2-si-box .sub-title {
    font-size: 22px;
    margin-bottom: 15px;
    /*font-weight: 500;*/
}

/*@media only screen and (min-width: 1920px) {
    .v2-si-box .sub-title {
        font-size: 1.157vw;
        margin-bottom: 0.7vw;
    }
}*/

.v2-si-box.fixed .sub-title {
    font-size: 20px;
    margin-bottom: 15px;
}

.field-type-1 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    height: 44px;
    border: solid 1px #1189ad;
    gap: 2px;
    border-radius: 4px;
    padding: 0 8px 0 8px;
}

/*@media only screen and (min-width: 1920px) {
    .field-type-1 {
        height: 2.8vw;
        border: solid 0.087vw #969595;
        gap: 3%;
        border-radius: 0.3vw;
        padding: 2% 2% 0 4%;
    }
}*/

.fixed .field-type-1 {
    height: 48px;
    border: 1.5px solid #969595;
    gap: 2px;
    border-radius: 4px;
    padding: 6px 8px 0 8px;
}

.field-type-1 span {
    position: absolute;
    top: -8px;
    left: 14px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    height: 16px;
    background-color: #fff;
    font-size: 12px;
    color: #1fa5c2;
}

/*@media only screen and (min-width: 1920px) {
    .field-type-1 span {
        font-size: 0.694vw;
    }
}*/

.fixed .field-type-1 span {
    font-size: 12px;
}

.field-type-1 input {
    -webkit-appearance: none;
    background-clip: padding-box;
    border-radius: 0;
    background: none;
    border: 0;
    color: #383838;
    font-size: 16px;
    line-height: 20px;
}

.field-type-1 input[type="password"] {
    padding: 5px 0 0 0;
}

/*@media only screen and (min-width: 1920px) {
    .field-type-1 input {
        font-size: 0.926vw;
        line-height: 1.389vw;
    }
}*/

#menuToggle .fixed .field-type-1 input {
    all: unset;
    font-size: 16px;
    line-height: 20px;
}

.field-type-1 input::placeholder {
    color: #a2a2a2;
}

#menuToggle a.blue-link {
    all: unset;
    cursor: pointer;
    color: #0c87a1;
    text-decoration: underline;
}

#menuToggle a.blue-link:hover {
    all: unset;
    cursor: pointer;
    text-decoration: none;
    color: #0c87a1;
}

button.red-btn {
    border: 0;
    cursor: pointer;
    width: 100%;
    background-color: #eb482d;
    color: #fff;
    font-weight: bold;
    transition: all 0.2s ease-in;
    height: 32px;
    font-size: 16px;
    border-radius: 4px;
}

/*@media only screen and (min-width: 1920px) {
    button.red-btn {
        height: 1.8vw;
        font-size: 0.926vw;
        border-radius: 0.3vw;
    }
}*/

button.red-btn:hover {
   opacity: 0.8;
}

.fixed button.red-btn {
    height: 32px;
    font-size: 16px;
    border-radius: 4px;
}

hr.thin {
    height: 1px;
    background-color: #969595;
    margin: 0.7vw 0;
}

button.google-sign-in {
    border: 0;
    cursor: pointer;
    background-color: #4285f4;
    color: #fff;
    transition: all 0.2s ease-in;
    position: relative;
    width: 100%;
    height: 44px;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #4285f4;
}

button.google-sign-in::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-top-left-radius: 0.3vw;
    border-bottom-left-radius: 0.3vw;
    background: #fff url('/img/google-logo.png') center center no-repeat;
    background-size: 20px auto;
}

/*@media only screen and (min-width: 1920px) {
    button.google-sign-in {
        height: 2.5vw;
        font-size: 0.868vw;
        border-radius: 0.3vw;
        border: 0.058vw solid #4285f4;
    }
    button.google-sign-in::after {
        background-size: 1.157vw auto;
    }
}*/

button.google-sign-in:hover {
    opacity: 0.8;
}

.fixed button.google-sign-in { 
    height: 44px;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #4285f4;
}


/*Top navigation for small screens*/

#menuToggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    margin-left: 20px;
}

@media only screen and (min-width: 768px) {
    #menuToggle {
        display: none;
    }
}




#menuToggle input {
    display: block;
    width: 34px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}


#menuToggle i {
    display: block;
    width: 27px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: #000;
    border-radius: 15px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle i:first-child {
    transform-origin: 0% 0%;
}

#menuToggle i:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ i {
    opacity: 1;
    transform: rotate(45deg) translate(2px, 3px);
    background: #3a3636;
}

#menuToggle input:checked ~ i:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ i:nth-last-child(2) {
    transform: rotate(-45deg) translate(-2px, 2px);
}

#menu {
    position: fixed;
    width: 100vw;
    height: calc(100Vh - 17.442vw); /* 75px */
    /* height: calc(100Vh - 75px); */
    right: 0;
    top: 17.442vw; /* 75px */
    /* top: 75px; */
    background: #fff;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    box-shadow: inset 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
    z-index: 10;
    overflow: auto;
    padding-bottom: 150px;
}

#menu::before {
    content: '';
    height: 76px;
    width: 100%;
    position: absolute;
    top: -76px;
}

#menu li {
    font-size: 18px;
    position: relative;
}

#menu li::after {
    content: '';
    width: calc(100% - 43px);
    height: 1px;
    background-color: #D4D4D4;
    position: absolute;
    left: 17px;
    bottom: 0;
}

/* Sept 2024 nav */
#menu li:has(.v3-ns-signIn-content.mobile.show) {
    padding-bottom: 30px;
}


#menu li a {
    position: relative;
    text-decoration: none;
    color: #3a3636;
    width: 100%;
    min-height: 84px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

#menuToggle input:checked ~ ul {
    transform: none;
  }

#menu li a:hover,
#menu li a.hasSubmenu.active {
    color: #3a3636;
    text-decoration: underline;
    -webkit-text-stroke-width: 0.5px;
    -webkit-tap-highlight-color: transparent;
}

#menu li a.hasSubmenu::after {
    content: '';
    width: 20px;
    height: 11px;
    background: url(/img/nav-arrow.svg) 0 0 no-repeat;
    background-size: 20px 11px;
    position: absolute;
    right: 30px;
    transform: rotate(0);
    transition: all 0.3s;
}

#menu li a.hasSubmenu.active::after {
    transform: rotate(180deg);
}

.mt-submenu {
    display: grid;
    padding: 0 50px;
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;   
    overflow: hidden;
}

.mt-submenu.show {
    max-height: 999px;
    visibility: visible;
    opacity: 1;
    transition: all 1.2s;
    margin-top: -20px;
}

#menu li .mt-submenu a {
    all: unset;
    height: 55px;
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#menu li .mt-submenu a:hover {
    -webkit-tap-highlight-color: transparent;
}

#menu li .mt-submenu a::after {
    all: unset;
}

#menu .notification {
    position: absolute;
    right: 50px;
    width: 40px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #e2402d; /* #3C97DE; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

@media only screen and (min-width: 576px) {
    #menu {
        height: calc(100Vh - 75px);
        top: 75px;
    }
}

@media only screen and (min-width: 1000px) {
    .full-height {
        height: 100vh;
    }
}


/* ul.mt-submenu {
    visibility:hidden;
    opacity: 0.0;
    max-height: 0;
    transition: all 1s;
}

input.submenu:checked ~ ul {
    visibility: visible;
    opacity: 1;
    transition: all 300ms;
    max-height: 999px;
} */

/*Header*/

.homePageBannerSmlScrn {
    display: none;
}

.homePageBanner {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    background-color: var(--CoupleRedPrime);
    font-size: 24px; /* font-size: 32px;*/
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fira);
    font-weight: 600;
}

.homePageBanner a {
    display: block;
    height: 100%;
    color: #fff;
    /*font-size: 24px;*/
    text-decoration: none;
}

.halloweenBnnr {
    background-color: #FCC938 !important;
    color: var(--CoupleBlue600) !important;
}

.halloweenBnnr a {
    background-color: #FCC938 !important;
    color: var(--CoupleBlue600) !important;
}

/* same as cta buttons */
.grdntBnrBkgrd {
    background-image: linear-gradient(104deg, #fff275 1%, #f9a300 102%) !important;
    color: #6a39d2 !important;
}

.grdntBnrBkgrd a {
    background-image: linear-gradient(104deg, #fff275 1%, #f9a300 102%) !important;
    color: #6a39d2 !important;
}

/* red banners */
.redBanner {
    background: #E63E29;
    height: 66px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

}

.redBanner a {
    background: #E63E29;
    color: #fff;
    font-size: 20px;
    text-transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* user account blocked */
.acctSpsdBkg {
    background-color: var(--blocked) !important;
}

/* referred user banner */
.referBannerBkg {
    background-color: var(--CoupleBlue500) !important;
}

/* DTYD banner */
.dtydBannerBkg {
    background-color: #f9a300 !important;
}

/* in-person after party banner */
.ipapBannerBkg {
    background-color: #000 !important;
}

@media only screen and (max-width: 1500px) {
    #hmPgBnLine1::after{
        content: "\a";
        white-space: pre;
    }
}

@media only screen and (min-width: 1100px) {
    #spsdPgBnLine1::after{
        content: "\a";
        white-space: pre;
    }
}

@media only screen and (max-width: 1500px) {
    #pgBnrAccSpsd {
        font-size: 24px;
    }
}

@media only screen and (max-width: 850px) {
    .homePageBanner {
        font-size: 24px;
    }

    #eventsListH1Line1::after{
        content: "\a";
        white-space: pre;
    }

    #siteBanrLine1::after{
        content: "\a";
        white-space: pre;
    }
}

@media only screen and (max-width: 767px) {
    
    .homePageBannerSmlScrn {
        box-sizing: border-box;
        width: 100%;
        padding: 12px;
        background-color: var(--purple); /*purple*/
        font-size: 16px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        font-family: var(--fira);
        font-weight: 600;
        display: block;
    }

    .homePageBannerSmlScrn a {
        display: block;
        height: 100%;
        color: #fff;
        text-decoration: none;
    }

    .homePageBanner {
        display: none;
    }

    .eventPgBanner {
        font-size: 20px;
    }

    .eventDetailBanner {
        font-size: 32px;
    }
}

.main-header {
    width: 100%;
    /*height: 960px;*/
    height: 800px;
    position: relative;
    font-family: var(--rubik);
}

@media only screen and (min-width: 1000px) {
    .main-header {
        /*height: 980px;*/
        height: calc( 100vh - 64px);
    }
}

img.imgs {
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-44%);
    bottom: -30%;
}

@media only screen and (min-width: 700px) {
    img.imgs {
        width: 627px;
    }
}

@media only screen and (min-width: 1728px) {
    img.imgs {
        width: 36.285vw; /* 627px */
    }
}


.main-header.bg1 {
    background: url(/img/million_header.jpg) top left -200px no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 700px) {
    .main-header.bg1 {
        background: url('/img/million_header.jpg') top left no-repeat;
        background-size: cover;
    }
}


.main-header.bg2 {
    background: url(/img/sumbit-pitch-header.jpg) top right no-repeat;
    background-size: cover;
}

.main-header.bg3 {
    background: url(/img/contest-details.jpg) center right -170px no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 900px) {
    .main-header.bg3 {
        background: url(/img/contest-details.jpg) top -1.736vw center no-repeat; /*-30px*/
        background-size: cover;
    }
}

.main-header.bg4 {
    background: url(/img/selfie_header_rotate.jpg) bottom center no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 900px) {
    .main-header.bg4 {
        background: url('/img/selfie_header.jpg') top right no-repeat;
        background-size: cover;
    }
}

/*@media only screen and (min-width: 1920px) {
    .main-header {
        aspect-ratio: 20 / 11;
        height: auto;
    }
} */

@media only screen and (max-width: 900px) {
    .mh-grad {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 600px;
        background: linear-gradient(360deg, #090D1B -11.41%, rgba(56, 56, 56, 0) 98.49%);
    }
}

@media only screen and (max-width: 900px) {
    .mh-grad2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        background: linear-gradient(180deg, #EADDD2 4.95%, rgba(202, 179, 167, 0) 100.8%);
    }
}

.header-bg-S {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
    /*border-top-left-radius: 20px;
    border-top-right-radius: 20px;*/
    display: block;
}

@media only screen and (min-width: 600px) {
    .header-bg-S {
        display: none;
    }
}

.header-bg-L {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
    /*border-top-left-radius: 20px;
    border-top-right-radius: 20px;*/
    display: none;
}

@media only screen and (min-width: 600px) {
    .header-bg-L {
        display: block;
    }
}


.header-bg-v2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
}


ul.header-text {
    font-weight: 600;
    font-size: 44px;
    text-transform: uppercase;
    line-height: 0.9;
    color: #fff;
    display: flex;
    flex-direction: column;
    position: absolute;
    /*top: 80px;*/
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.2s ease-in;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    width: 330px;
}

@media only screen and (min-width: 600px) {
    ul.header-text {
        width: auto;
        top: 195px;
        left: 105px;
        transform: none;
        text-shadow: none;
    }
}
@media only screen and (min-width: 1000px) {
    ul.header-text {
        font-size: 88px;
        left: 6.076vw;
    }
}

@media screen and (max-height: 955px) and (orientation: landscape) {
    ul.header-text {
        top: 17.419vh;
    }
    ul.header-text {
        font-size: 9.215vh;
    }
}

/*@media only screen and (min-width: 1920px) {
    ul.header-text {
        top: 4.340vw;
        left: 6.076vw;
        font-size: 5.093vw;
    }
}*/

.header-text li {
    display: inline-block;
}

.header-text li:first-child span{
    font-size: 55px;
    background-image: linear-gradient(90deg, #2acaed, #8f1891);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    transition: all 0.2s ease-in;
    font-weight: 700;
}


.header-text li:nth-child(4) span {
    font-size: 55px;
    background-image: linear-gradient(to right, #901790, #d71c1e 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    transition: all 0.2s ease-in;
    font-weight: 700;
}

@media only screen and (min-width: 1000px) {
    .header-text li:first-child span,
    .header-text li:nth-child(4) span {
        font-size: 110px;
    }
}

@media only screen and (max-height: 955px) and (orientation: landscape) {
    .header-text li:first-child span,
    .header-text li:nth-child(4) span {
        font-size: 11.518vh;
    }
}

/*@media only screen and (min-width: 1920px) {
    .header-text li:first-child span,
    .header-text li:nth-child(4) span {
        font-size: 6.366vw;
    }
}*/

.header-text li:nth-child(3) {
    margin: 20px 0 0 90px;
}

.header-text li:nth-child(4) {
    padding: 0 0 0 60px;
}

@media only screen and (min-width: 1000px) {
    .header-text li:nth-child(3) {
        margin: 40px 0 0 210px;
    }

    .header-text li:nth-child(4) {
        padding: 0 0 0 165px;
    }
}

.header-text li.next-event {
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    text-transform: none;
    /*margin-top: 500px;*/
    /*margin-top: 470px;*/
    margin-top: 320px;
    text-shadow: none;
}

@media only screen and (min-width: 600px) {
    .header-text li.next-event {
        margin-top: 90px;
    }
}

@media only screen and (min-width: 1000px) {
    .header-text li.next-event {
        font-size: 46px;
    }
}

@media only screen and (min-width: 1920px) {
    .header-text li.next-event {
        /*font-size: 3.241vw;*/
        margin-top: 10.944vw;
    }
}

@media only screen and (max-height: 955px) and (orientation: landscape) {
    .header-text li.next-event {
        margin-top: 9.424vh;
        font-size: 4.817vh;
    }
}


ul.header-text2 {
    position: relative;
    z-index: 1;
    display: flex;
    color: #fff;
    flex-direction: column;
    align-items: end;
    height: 100%;
    color: #fff;
    padding: 40px 30px 40px 0;
    font-weight: 500;
    font-size: 18px; 
    line-height: 21px;
    text-align: right;
    justify-content: space-between;
}

ul.header-text2.v2 {
    justify-content: start;
    text-align: center;
    align-items: center;
    color: unset;
    padding: 40px 20px 40px 20px;
}

ul.header-text2.v3 {
    justify-content: start;
    text-align: center;
    align-items: center;
    color: unset;
    padding: 40px 20px 40px 20px;
}

ul.header-text2.v4 {
    justify-content: start;
    text-align: center;
    align-items: center;
    color: unset;
    padding: 40px 20px 40px 20px;
    font-size: 20px;
}

.lh56 {
    line-height: 24px;
}

@media only screen and (min-width: 800px) {
    .lh56 {
        line-height: 46px; 
    }
}

@media only screen and (min-width: 1728px) {
    .lh56 {
        line-height: 3.241vw; /* 56px */
    }
}



.fw700 {
    font-weight: 700;
}

.header-text2 .mt15 {
    margin-top: 15px;
}

@media only screen and (min-width: 900px) {
    ul.header-text2 {
        padding: 4.630vw 2.894vw 4.630vw 0; /*80px 50px 80px 0;*/
        font-size: 1.852vw; /*32px*/
        line-height: 2.604vw; /*45px*/
    }
    ul.header-text2.v2 {
        padding: 4.630vw 1.736vw 2.315vw 1.736vw; /*80px 30px 40px 30px*/
        text-align: left;
        align-items: start;
    }
    ul.header-text2.v3 {
        padding: 4.630vw 1.736vw 2.315vw 1.736vw;
        /*80px 30px 40px 30px*/
        justify-content: start;
        text-align: center;
        align-items: center;
    }
    ul.header-text2.v4 {
        padding: 4.630vw 1.736vw 2.315vw 2.315vw; /*80px 30px 40px 40px*/
        text-align: left;
        align-items: start;
        font-size: 2.546vw; /* 44px */
    }
}

.grads {
    display: grid;
    font-weight: 700;
    font-size: 34px;
    line-height: 43px;
    text-transform: uppercase;
}

.grads.alone {
    font-family: var(--rubik);
    text-align: center;
    padding: 45px 0;
}

.settings-1 {
    margin-top: 26px; 
    line-height: 21px;
}

.settings-2 {
    margin-top: 16px; 
    line-height: 26px;
}

@media only screen and (min-width: 900px) {
    .grads {
        font-size: 4.630vw; /*80px*/
    line-height: 5.498vw; /*95px*/
    }
    
    .grads.v2 {
        line-height: 6.366vw; /*110px*/
    }
    .settings-1 {
        margin-top: 1.505vw; /*26px*/
        line-height: 2.604vw; /*45px*/
    }
    .settings-2 {
        margin-top: 0.926vw; /*16px*/
        line-height: 2.604vw; /*45px*/
        text-shadow: 0 0 15px rgba(225,220,214,1);
    }
    .grads.alone {
        padding: 5.787vw 0 4.630vw 0; /*100px 0 80px 0*/
    }
}

.grads.v3 {
    line-height: 34px;
    font-size: 28px;
}

@media only screen and (min-width: 800px) {
    .grads.v3 {
        line-height: 70px;
        font-size: 60px;
    }
}

@media only screen and (min-width: 1728px) {
    .grads.v3 {
        line-height: 5.440vw; /* 94px */
        font-size: 4.630vw; /* 80px */
    }
}


ul.header-text2 .multi {
    justify-items: end;
    display: grid;
}

ul.header-text2 .multi.mb100 {
    margin-bottom: 100px;
}

@media only screen and (min-width: 900px) {
    ul.header-text2 .multi.mb100 {
        margin-bottom: 0;
    }
}

ul.header-text2 .multi2 {
    margin-top: 10px;
    font-size: 18px;
}

@media only screen and (min-width: 900px) {
    ul.header-text2 .multi2 {
        margin-top: auto;
        font-size: 1.852vw; /* 32px */
        margin-bottom: 5.787vw; /* 100px */
    }
}


.gradient-1 {
    background-image: linear-gradient(91.28deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-2 {
    background-image: linear-gradient(92.17deg, #7221CD -21.45%, #B51B37 108.47%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
}





a.v2-btn-s1 {
    display: flex;
    text-decoration: none;
    font-size: 20px;
    padding: 12px 0 10px 0;
    width: 300px;
    border-bottom: 2px solid #fff;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    position: relative;
    transition: all 0.2s ease-in;
    overflow: hidden;
    text-align: left;
}

a.v2-btn-s1.toRight {
    margin-left: auto;
}

a.v2-btn-s1.v3 {
    border-bottom: 2px solid var(--CoupleBlue400);
    color: #383838;
    text-transform: none;
    font-weight: 500;
    font-size: 20px;
    font-family: var(--rubik);
    width: 240px;
}

a.v2-btn-s1 span {
    display: block;
    width: 100%;
    position: relative;
    z-index: 3;
    background-image: url('/img/arrow-right-light.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 30px auto;
    transition: all 0.3s ease-in;
}

a.v2-btn-s1.v4 {
    color: #383838;
    border-bottom: 2px solid #383838;
    font-weight: 500;
    padding: 15px 0;
    width: 280px;
}

a.v2-btn-s1.v4 span {
    background-image: url('/img/arrow-right-dark.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 30px auto;
}

a.v2-btn-s1.v4:hover {
    color: #383838;
    padding: 15px 0 15px 10px;
    border-color: white;
}

a.v2-btn-s1::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform: translate(0, 100%);
    transform-origin: bottom;
    transition: all 0.2s ease-in;
    z-index: 1;
}

@media only screen and (min-width: 1000px) {
    a.v2-btn-s1 {
        font-size: 34px;
        width: 503px;
        padding: 20px 0 20px 0;
    }
    a.v2-btn-s1 span {
        background-size: 54px auto;
        background-position: center right;
    }
    
    a.v2-btn-s1.v2 {
        font-size: 1.968vw; /*34px*/
        width: 29.109vw; /*503px*/
        padding: 1.157vw 0; /*20px 0 20px 0*/
        color: #fff;
    }
    a.v2-btn-s1.v2 span {
        background-size: 3.125vw auto; /*54px auto*/
    }
    a.v2-btn-s1.v3 {
        font-size: 1.620vw; /*28px*/
        width: 17.361vw; /*300px*/
        padding: 1.157vw 0; /*20px 0 20px 0*/
    }
    a.v2-btn-s1.v3 span {
        background-size: 2.315vw auto; /*40px auto*/
    }
    a.v2-btn-s1.v4 {
        font-size: 2.315vw; /*40px*/
        width: 22.280vw; /*385px*/
        padding: 1.157vw 0; /*20px 0 20px 0*/
        border-bottom: 0.116vw solid #383838; /* 2px */
    }
    a.v2-btn-s1.v4 span {
        background-size: 3.125vw auto; /*54px auto*/
    }
    a.v2-btn-s1.v4:hover {
        padding: 1.157vw 0 1.157vw 0.579vw; /*20px 0 20px 10px*/
    }
}



/*@media only screen and (min-width: 1920px) {
    a.v2-btn-s1 {
        font-size: 2.315vw;
        width: 29.109vw;
        padding: 1.157vw;
    }
    a.v2-btn-s1 span {
        background-size: 2.813vw auto;
        background-position: center right 1.667vw;
    }
}*/

a.v2-btn-s1:hover {
    color: #383838;
    padding-left: 10px;
}

@media only screen and (min-width: 1000px) {
    a.v2-btn-s1:hover {
        color: #383838;
        padding: 20px;
    }
    a.v2-btn-s1.v2:hover {
        color: #383838;
        padding: 1.157vw; /*20px*/
    }
    a.v2-btn-s1.v3:hover {
        color: #383838;
        padding: 1.157vw 0.405vw; /*20px 7px*/
    }
}

a.v2-btn-s1:hover span {
    background-image: url('/img/arrow-right-dark.svg');
    background-position: center right 20px;
}

@media only screen and (min-width: 1000px) {
    a.v2-btn-s1:hover span {
        background-position: center right 32px;
    }
    a.v2-btn-s1.v2:hover span {
        background-position: center right 1.852vw; /*32px*/
    }
    a.v2-btn-s1.v3:hover span {
        background-position: center right 0.579vw; /*10px*/
    }
}

a.v2-btn-s1:hover::before {
    transform: translate(0, 0);
    transform-origin: bottom;
    
}

a.v2-btn-s1.mt1 {
    margin-top: 15px;
}

@media only screen and (min-width: 1000px) {
    a.v2-btn-s1.mt1 {
        margin-top: 0.4em;
    }
}


.area-1 {
    width: 100%;
    padding: 0 32px;
    font-size: 16px;
    margin: 64px auto;
    gap: 32px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.38;
    grid-template-columns: 1fr;
}

.area-1.gap-s {
    gap: 12px 0;
}

.area-1.mt140 {
    margin-top: 130px;
}

@media only screen and (min-width: 820px) {
    .area-1 {
        display: grid;
        grid-template-columns: 44% 54%;
        column-gap: 32px;
        font-size: 20px;
        margin: 128px auto;
    }
    .area-1.v2 {
        grid-template-columns: 48% 50%;
    }
    .area-1.mt140 {
        margin-top: 268px;
    }
    .area-1.gap-s {
        gap: 32px 0;
    }
    .area-1 .topBgPstInfo {
        margin-bottom: 100px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-1 {
        font-size: 32px;
    }
    .area-1 .topBgPstInfo {
        margin-bottom: 150px;
    }
}


@media only screen and (min-width: 1920px) {
    .area-1 {
        margin: 7.407vw auto;
        /*font-size: 1.852vw;*/
        gap: 0 1.852vw;
    }
    .area-1 .topBgPstInfo {
        margin-bottom: 250px;
    }
}

.area-1 section {
    order: 2;
}

.area-1 section.v2 {
    order: 2;
}

@media only screen and (min-width: 820px) {
    .area-1 section {
        order: 1;
    }
    .area-1 section.v2 {
        order: 2;
    }
}

@media only screen and (min-width: 820px) {
    .area-1 section {
        padding: 0 0 0 54px;
    }
}

@media only screen and (min-width: 1920px) {
    .area-1 section {
        /*padding: 0 0 0 104px;*/
        padding: 0 0 0 6.019vw;
    }
}

.area-1 h1 {
    font-family: var(--rubik);
    font-size: 36px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    color: #383838;
    margin-bottom: 25px;
}

.area-1 h1 span {
    display: block;
    font-size: 25px;
    font-weight: 500;
    text-transform: none;
    margin-top: 18px;
}

@media only screen and (min-width: 1200px) {
    .area-1 h1 {
        font-size: 80px;
        margin-bottom: 40px;
    }

    .area-1 h1 span {
        font-size: 56px;
        font-weight: 500;
    }
    
    .area-1 h1 span.mt20 {
        margin-top: 20px;
    }
}

/*@media only screen and (min-width: 1920px) {
    .area-1 h1 {
        font-size: 4vw;
        margin-bottom: 2.083vw;
    }
}*/

h1.showM820 {
    display: block;
    text-align: center;
}

h1.hideM820 {
    display: none;
}

@media only screen and (min-width: 820px) {
    h1.showM820 {
        display: none;
    }

    h1.hideM820 {
        display: block;
    }
}

.a1-img {
    order: 1;
}

.a1-img.v2 {
    order: 1;
}

@media only screen and (min-width: 820px) {
    .a1-img {
        order: 2;
    }
    .a1-img.v2 {
        order: 1;
    }
}

@media only screen and (min-width: 1920px) {
    .a1-img {
        width: 52.604vw;
    }
}



.area-3 {
    width: 100%;
    background: url('/img/footer-v2-bg.jpg') top center no-repeat;
    background-size: cover;
    padding: 50px 0;
    display: flex;
    align-items: center;
}

@media only screen and (min-width: 820px) {
    .area-3 {
        height: 940px;
    }
}


@media only screen and (min-width: 1920px) {
    .area-3 {
        padding: unset;
        height: auto;
        aspect-ratio: 15 / 8;
    }
}

.area-3 section {
    width: 100%;
    padding: 0 32px;
    font-size: 24px;
    line-height: 1.38;
    color: #fff;
}

@media only screen and (min-width: 992px) {
    .area-3 section {
        width: 928px;
        padding: 0;
        font-size: 32px;
        margin: 0 auto;
    }
}

/*@media only screen and (min-width: 1920px) {
    .area-3 section {
        width: 48.333vw;
        font-size: 1.667vw;
    }
}*/

.area-3 section p {
    margin-bottom: 1.4em;
}

.area-3 h1 {
    text-transform: uppercase;
    font-family: var(--rubik);
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5em;
}

@media only screen and (min-width: 992px)  {
    .area-3 h1 {
        font-size: 80px;
    }
}

/*@media only screen and (min-width: 1920px) {
    .area-3 h1 {
        font-size: 4.167vw;
    }
}*/


footer {
    background-color: #252e3a;
    font-family: var(--nunito);
    color: #fff;
    text-align: center;
    font-size: 16px;
    /*padding: 32px;*/
    padding: 5px 32px 15px 32px;
}

@media only screen and (min-width: 1920px) {
    footer {
        font-size: 0.833vw;
        padding: 1.667vw;
    }
}

footer a:link,
footer a:visited {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.slogan {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--rubik);
    font-weight: 600;
    line-height: 1.56;
    font-size: 20px;
    gap: 0 10px;
}

@media only screen and (min-width: 750px) {
    .slogan {
        font-size: 32px;
    }
}

@media only screen and (min-width: 1920px) {
    .slogan {
        font-size: 1.667vw;
        gap: 0 0.521vw;
    }
}

.slogan img {
    margin-top: 7px;
    width: 48px;
}

@media only screen and (min-width: 1920px) {
    .slogan img {
        margin-top: 0.365vw;
        width: 2.500vw;
    }
}

.slogan span:nth-of-type(1) {
    color: #36bcce;
}

.slogan span:nth-of-type(2) {
    color: #eb482d;
}

.social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    padding: 5px 0;
}

@media only screen and (min-width: 1920px) {
    .social-media {
        gap: 0 0.521vw;
        padding: 0.521vw 0;
    }
    .social-media a:nth-of-type(1) img {
        width: 1.563vw;
    }
    .social-media a:nth-of-type(2) img {
        width: 1.146vw;
    }
    .social-media a:nth-of-type(3) img {
        width: 1.354vw;
    }
}

.no-break {
    white-space: nowrap;
}

span.no-line {
    color: transparent;
}

@media only screen and (min-width: 457px) {
    span.no-line {
        color: #fff;
    }
}

/*The vibe*/

.rotating-images-1 {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

/*@media only screen and (min-width: 820px) {
    .rotating-images-1 {
        aspect-ratio: 105 / 74;
    }
}*/

.rotating-images-1 img {
    position: absolute;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    object-fit:cover;
    border-radius: 12px;
}

@media only screen and (min-width: 820px) {
    .rotating-images-1 img {
        aspect-ratio: unset;
        border-radius: 0;
    }
}

.rotating-images-1 img.pos1 {
    width: 90%;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}

@media only screen and (min-width: 820px) {
    .rotating-images-1 img.pos1 {
        width: 53%;
        transform: none;
        top: 13%;
        /*left: 0;*/
        left: 13%;
    }
}

.rotating-images-1 img.pos1.to-2 {
    animation-name: animapos1-to-two;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animapos1-to-two {
    0% {
        transform: none;

    }
    10% {
        opacity: 0.5;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(5.51%) translateY(-30px) scale(1);
        filter: grayscale(100%);
    }
}

@media only screen and (min-width: 820px) {
    @keyframes animapos1-to-two {
        0% {
            transform: none;

        }

        10% {
            opacity: 0.5;
        }

        60% {
            opacity: 1;
        }

        100% {
            opacity: 1;
                transform: translateX(78.4%) translateY(-38.8%) scale(0.717);
            filter: grayscale(100%);
        }
    }
}


.rotating-images-1 img.pos1.to-3 {
    animation-name: animapos1-to-three;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animapos1-to-three {
    0% {
        transform: none;
        opacity: 0.5;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(22%) translateY(26%) scale(0.845);
        filter: grayscale(100%);
    }
}

.rotating-images-1 img.pos2 {
    display: block;
    width: 90%;
    top: 0;
    right: -45%;
    z-index: 4;
    filter: grayscale(100%);
}

@media only screen and (min-width: 820px) {
    .rotating-images-1 img.pos2 {
        width: 38%;
        top: 0%;
        right: 0;
    }
}

.rotating-images-1 img.pos2.to-1 {
    animation-name: animapos2-to-one;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animapos2-to-one {
    0% {
        transform: none;
        opacity: 1;
    }
   /* 50% {
        transform: translateX(-100%) translateY(100%) scale(0.3);
    }*/

    100% {
        opacity: 1;
        transform: translateX(-64%) translateY(46.5%) scale(1.42592);
        z-index: 7;
        filter: none;
    }
}

.rotating-images-1 img.pos2.to-3 {
    animation-name: animapos2-to-three;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animapos2-to-three {
    0% {
        transform: none;
        opacity: 0.5;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(-111.1%) translateY(0) scale(1);

    }
}

@media only screen and (min-width: 820px) {
    @keyframes animapos2-to-three {
        0% {
            transform: none;
            opacity: 0.5;
        }

        40% {
            opacity: 1;
        }

        /*50% {
        transform: translateX(0) translateY(10%) scale(0.3);
    }*/
        100% {
            opacity: 1;
            transform: translateX(-40.8%) translateY(88.2%) scale(1.18447);

        }
    }
}



.rotating-images-1 img.pos3 {
    width: 90%;
    top: 0;
    left: -45%;
    z-index: 3;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

@media only screen and (min-width: 820px) {
    .rotating-images-1 img.pos3 {
        width: 45%;
        left: auto;
        top: auto;
        top: 30%;
        right: 12%;
    }
}

.rotating-images-1 img.pos3.to-1 {
    animation-name: animapos3-to-one;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animapos3-to-one {
    0% {
        transform: none;
        opacity: 0.5;
    }
    40% {
            opacity: 1;
        }
    100% {
        opacity: 1;
            transform: translateX(55.6%) translateY(30px) scale(1);
        z-index: 7;
        filter: none;
    }
}

@media only screen and (min-width: 820px) {
    @keyframes animapos3-to-one {
        0% {
            transform: none;
            opacity: 1;
        }

        /*50% {
        transform: translateX(-60%) translateY(0) scale(0.3);
    }*/

        100% {
            opacity: 1;
            transform: translateX(-57.85%) translateY(-28.9%) scale(1.17778);
            z-index: 7;
            filter: none;
        }
    }
}

.rotating-images-1 img.pos3.to-2 {
    animation-name: animapos3-to-two;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animapos3-to-two {
    0% {
        transform: none;
        opacity: 0.5;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(55.6%) translateY(30px) scale(1);
        z-index: 7;
        filter: none;
    }
}

@media only screen and (min-width: 820px) {
    @keyframes animapos3-to-two {
        0% {
            transform: none;
            opacity: 0.5;
        }

        40% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: translateX(27%) translateY(-69.6%) scale(0.83078);
            filter: none;
        }
    }
}


ul.ri-1-links {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /*width: 160px;*/
    width: 90%;
    height: 6px;
    column-gap: 8px
}
    
@media only screen and (min-width: 820px) {
    ul.ri-1-links {
        width: 53%;
        bottom: auto;
        justify-content: center;
        top: 62%;
/*        left: 31%;*/
        left: 13%;
        z-index: 10;
        /*width: 20%*/;
        /*height: 1%;*/
        transform: none;
    }
}




ul.ri-1-links li {
    width: 65px;
    height: 100%;
    background-color: #fff;
    cursor: pointer;
    /*border-radius: 4.7px;*/
    border-radius: 3px;
    line-height: 0;
    font-size: 0;
}

@media only screen and (min-width: 1600px) {
    ul.ri-1-links li {
        width: 110px;
    }
}

@keyframes fill-bullet {
    0% {
        opacity: 1;
        background-position: 0 0;
    }

    100% {
        opacity: 1;
        background-position: -100% 0;
    }
}

ul.ri-1-links li.active {
    background-size: 200% 100%;
    background-image: linear-gradient(to left, #1fa5c2 50%, white 50%);
    animation: fill-bullet;
    animation-duration: 5s;
    animation-iteration-count: 1;
}

/*MATCH & MINGLE*/

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
}

.swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

@media only screen and (min-width: 820px) {
    .swiper-slide img {
        width: 75%;
        border-radius: 20px;
    }
}

.img-slide-1 {
    position: relative;
    width: 100%;
    /*aspect-ratio: 42 / 47;*/
    aspect-ratio: 457 / 467;
}

.img-slide-1 .slider-v1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@media only screen and (min-width: 820px) {
    .img-slide-1 {
        aspect-ratio: 465 / 368;
    }
    .img-slide-1 .slider-v1 {
        width: 87%;
    }
}

.is-1-links {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    width: 48%;
    height: 0.8%;
}

.is-1-links li {
    width: 22%;
    height: 100%;
    background-color: #fff;
    cursor: pointer;
    border-radius: 4.7px;
    line-height: 0;
    font-size: 0;
}

.is-1-links li.active {
    background-color: #1fa5c2;
}

@media only screen and (min-width: 820px) {
    .is-1-links {
        top: unset;
        bottom: 3.8%;
        left: 19%;
        transform: unset;
    }
}

.is-1-title {
    position: absolute;
    left: 0;
    bottom: 15%;
    height: 8.8%;
    width: 100%;
    background-image: radial-gradient(circle at 50% 50%, #8f1a92 0%, #2acaed 98%);
    display: flex;
    align-items: center;
    justify-content: end;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    font-family: var(--rubik);
    padding-right: 2vw;
}

.is1-t-small {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    text-transform: uppercase;
}

.is1-t-big {
    display: none;
}

@media only screen and (min-width: 820px) {
    .is-1-title {
        bottom: auto;
        width: 67%;
        top: 50%;
        transform: translateY(-50%);
        background-image: linear-gradient(to right, #29caed, #8f1991);
    }
    .is1-t-small {
        display: none;
    }
    .is1-t-big {
        display: inline-block;
    }
}

@media only screen and (min-width: 1500px) {
    .is-1-title {
        font-size: 40px;
    }
}

@media only screen and (min-width: 1920px) {
    .is-1-title {
        height: 2.917vw;
        font-size: 2.083vw;
    }
}

a.is-1-join {
    position: absolute;
    font-family: var(--rubik);
    text-transform: uppercase;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #26c1e3;
    color: #fff;
    width: 30%;
    border-radius: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3%;
    text-decoration: none;
    font-weight: 600;
    font-size: 36px;
}

@media only screen and (min-width: 820px) {
    a.is-1-join {
        left: unset;
        top: 50%;
        transform: translateY(-50%) translateX(0);
        right: 0;
    }
}

@media only screen and (min-width: 1500px) {
    a.is-1-join {
        font-size: 80px;
    }
}

@media only screen and (min-width: 1920px) {
    a.is-1-join {
        font-size: 4.167vw;
    }
}

a.is-1-join:hover {
    animation-name: joinBtn;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes joinBtn {
  0%   {
    }
  50%  {
      box-shadow: inset 0 0 0 2em #901790;
    }
  100% {
      box-shadow: inset 0 0 0 -2em #d71c1f;
      background-color: #d71c1f;
    }
}

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

/*Slide for big screens*/

.img-slide-2 {
    position: relative;
    background-color: #000;
    height: auto;
    width: 100%;
    aspect-ratio: 15 / 8;
    display: none;
}

@media only screen and (min-width: 1000px) {
    .img-slide-2 {
        display: block;
    }
}

.is2-bg1 {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/img/is2-img1.jpg') top center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s;
}

.is2-bg2 {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/img/is2-img2.jpg') top center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s;
}

.is2-bg3 {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/img/is2-img3.jpg') top center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s;
}

.is2-bg4 {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/img/is2-img4.jpg') top center no-repeat;
        background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s; 
}


.is2-bg1.active,
.is2-bg2.active,
.is2-bg3.active,
.is2-bg4.active {
    opacity: 1;
}

.img-slide-2 ul {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 0 0 100%;
    height: 100%;   
}

.img-slide-2 ul li {
    flex-grow: 1;
    position: relative;
    width: 0;
    overflow: visible;
    transition: width 1s cubic-bezier(0, 0, 0.2, 1);
    border-right: 2px solid #fff;
}

.img-slide-2 ul li:last-child {
    border-right: 0;
}

.img-slide-2 ul li:hover,
.img-slide-2 ul li.open {
    height: 100%;
    width: 55.365vw;
    display: block;
    flex-grow: 1;
}

.img-slide-2 ul li.open a {
    pointer-events: all;
}

.img-slide-2 ul li p {
    font-family: var(--rubik);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    position: absolute;
    font-size: 50px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    top: 80px;
    left: 40px;
}

@media only screen and (min-width: 1400px) {
    .img-slide-2 ul li p {
        font-size: 80px
    }
}

.img-slide-2 ul li:hover p,
.img-slide-2 ul li.open p {
        color: rgba(255, 255, 255, 1);
    }

.img-slide-2 ul li:last-child {
    border-right: 0;
}

.is2-txt {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    font-family: var(--nunito);
    line-height: 1.38;
    position: absolute;
    right: 0;
    bottom: 2.813vw;
    overflow: hidden;
    width: 55.365vw;
    padding: 2.500vw;
    font-size: 1.667vw;
    animation-name: is2-txt-out;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}

.is2-txt a {
    pointer-events: auto;
}

.img-slide-2 ul li:hover .is2-txt,
.img-slide-2 ul li.open .is2-txt {
    animation-name: is2-txt-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-delay: 0.6s;
}



@media only screen and (min-width: 1780px) {
    .is2-txt {
        width: 980px;
        padding: 48px 64px;
        font-size: 32px;
    }
}




@keyframes is2-txt-in {
  0%   {
      opacity: 0;
    }
  100% {
      opacity: 1;
      z-index: 1;
      
    }
}

@keyframes is2-txt-out {
  0%   {
      opacity: 1;
    }
  100% {
      opacity: 0;
    }
}


/*Slide for small screens*/

.sw-mobile {
    height: 720px;
}

.mySwiper2 {
    display: block;
}

@media only screen and (min-width: 1000px) {
    .mySwiper2 {
        display: none;
    }
}

.swiper-slide.slideM {
    height: 720px;
    background-color: #000;
    position: relative;
}

.swiper-slide.slideM:nth-child(1) {
    background: url('/img/is2-img1-s.jpeg') top left no-repeat;
    background-size: cover;
}

.swiper-slide.slideM:nth-child(2) {
    background: url('/img/is2-img2-s.jpeg') top left no-repeat;
    background-size: cover;
}

.swiper-slide.slideM:nth-child(3) {
    background: url('/img/is2-img3-s.jpeg') top left no-repeat;
    background-size: cover;
}

.swiper-slide.slideM:nth-child(4) {
    background: url('/img/is2-img4-s.jpeg') top left no-repeat;
    background-size: cover;
}

.slideM p {
    font-family: var(--rubik);
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
    font-size: 40px;
    text-align: left;
    /*border-bottom: 2px solid #fff;*/
    padding: 24px 12px 12px 12px;
}

.sM-txt {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-family: var(--nunito);
    line-height: 1.38;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    font-size: 18px;
    padding: 30px 15px 60px 15px;
}


/* overlay video */

.overlays {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9999;
    transition: all 1s
}
.overlayVideo span {
    display: block
}

.overlayVideo {
    width: 92.78%;
    max-width: 1080px;
    background-color: #252e3a;
    display: flex;
    position: absolute;
    color: #fff;
    font-weight: 400;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.max-1080 {
    width: 90%;
    max-width: 1080px
}

.vid video {
    width: 100%;
    height: auto
}

.hide {
    opacity: 0;
    visibility: hidden
}

.overlayVideo .vid {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden
}

.overlayVideo .vid video {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.closeVideo {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 16px
}

.closeVideo::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238f8f8f'%3E%3Cg%3E%3Cpath d='M898.295 8.394L904 14.098l5.705-5.704c.525-.525 1.376-.525 1.901 0 .525.525.525 1.376 0 1.901L905.902 16l5.704 5.705c.525.525.525 1.376 0 1.901-.525.525-1.376.525-1.901 0L904 17.902l-5.705 5.704c-.525.525-1.376.525-1.901 0-.525-.525-.525-1.376 0-1.901L902.098 16l-5.704-5.705c-.525-.525-.525-1.376 0-1.901.525-.525 1.376-.525 1.901 0z' transform='translate(-1156.000000, -664.000000) translate(260.000000, 656.000000)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
}

@media screen and (max-width:1024px) {

    .overlayVideo {
        width: 76%!important;
        flex-direction: column!important;
        height: auto;
        min-height: auto;
        max-height: none
    }

}

@media screen and (max-width:767px) {

    .overlayVideo {
        height: calc(0.5 * 100vw ) !important;
        width: 100vw !important;
    }
    .overlayVideo .vid{
        top: 50%;
        transform: translateY(-50%);
    }
    .overlays.s3 #overlayPlayer{
        height: calc(2 * 100vw ) !important;
    }
}


@media (orientation:landscape) and (max-width: 960px){

    .overlayVideo {
        height: 100vh;
        width: calc(1.777 * 100vh ) !important;
    }
}

.linkshareTip .linkshareTipText {
    opacity: 0;
    width: 120px;
    background-color: var(--CoupleBlue400);
    color: #fff;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 6px;
    padding: 5px 0;
    transition: all .6s;

    position: absolute;
    z-index: 1;
    top: -90%;
    left: 50%;
    margin-left: -80px;
}

.linkShareProfEvent {
    top: -200% !important;
    margin-left: -100px !important;
}

.linkShareProfEvent:after {
    left: 75% !important;
}

.linkshareTipText:after {
    content: '';
    display: block;
    position: absolute;
    left: 60%;
    width: 0;
    height: 0;
    border-top: 10px solid var(--CoupleBlue400);
    border-right: 10px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 10px solid transparent;
}

.go2Event {
    background-color: #eb482d !important;
    color: #fff !important;
    border-color: #eb482d !important;
}

.eventReserved {
    background-color: var(--blue) !important;
    color: #fff !important;
}

.eventReservedFeat {
    background-color: var(--purple) !important;
    color: #fff !important;
}

.blue-bar {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background-color: var(--blue);
    font-size: 30px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fira);
	font-weight: 600;
}

.featPurpleBkgrd {
    background-color: var(--purple) !important;
}

.featPurpleText {
    color: var(--purple) !important;
}

@media only screen and (min-width: 1280px) {
    .blue-bar {
        font-size: 40px;
    }
}

.container-1140 {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
}

@media only screen and (min-width: 1140px) {
    .container-1140 {
        width: 1140px;
        margin: 0 auto;
    }
}

.container-1280 {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
}

@media only screen and (min-width: 1280px) {
    .container-1280 {
        width: 1280px;
        margin: 0 auto;
    }
}

.container-1280.mb90 {
    margin-bottom: 90px;
}

.container-1140 {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
}

@media only screen and (min-width: 1140px) {
    .container-1140 {
        width: 1140px;
        margin: 0 auto;
        padding: 0;
    }
}

.container-1140.mtb64 {
    margin-top: 64px;
    margin-bottom: 64px;
}

.header-style1 {
    display: flex;
    justify-content: flex-end;
    margin: 50px 0;
    position: relative;
    flex-direction: column;
}

@media only screen and (min-width: 750px) {
    .header-style1 {
        flex-direction: row;
        margin: 50px 46px;
    }
}

.header-style2 {
    display: flex;
    margin: 50px 0;
    position: relative;
    flex-direction: column;
}

.header-style3 {
    margin: 20px 0;
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

@media only screen and (min-width: 750px) {
    .header-style3 {
        flex-direction: row;
    }
}

@media only screen and (min-width: 1024px) {
    .header-style3 {
        justify-content: flex-end;
    }
}

.profile-event:first-of-type {
    display: block;
}

.header-img1-big-screen {
    display: none;
}

.header-img1-small-screen {
    display: block;
}

.featImgRounded {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

@media only screen and (min-width: 750px) {
    .header-img1-big-screen {
        display: block;
    }
    .header-img1-small-screen {
        display: none;
    }
}

img.responsive {
    max-width: 100%;
}

img.rounded {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

@media only screen and (min-width: 750px) {
    img.rounded {
        border-radius: 15px;
    }
}

.current-event {
    font-family: var(--rubik);
    background-color: #fff;
    border-radius: 15px;
    border-top-left-radius: 0;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.15);
    transition: 0.3s;
    position: relative;
}

@media only screen and (min-width: 750px) {
    .current-event {
        position: absolute;
        left: 0;
        top: 34px;
        width: 508px;
        box-shadow: 6px 6px 8px 0 rgba(0, 0, 0, 0.15);
        border: 0;
        overflow: hidden;
    }
    .current-event.v2 {
        position: relative;
        left: unset;
        top: unset;
        width: unset;
        border-radius: unset;
        box-shadow: unset;
        overflow: hidden;
        border: 4px solid var(--blue);
        overflow: visible;
        display: flex;
        justify-content: space-between;
        padding: 20px 1.906vw 20px 2.422vw;
        align-items: center;
    }
}

.current-event-Feat {
    font-family: var(--fira);
    background-color: #fff;
    border: 4px solid var(--purple);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: 0.3s;
    position: relative;
}

@media only screen and (min-width: 750px) {
    .current-event-Feat {
        position: absolute;
        left: 0;
        top: 38px;
        width: 450px;
        border-radius: 15px;
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
        border: 0;
        overflow: hidden;
    }
    .current-event-Feat.v2 {
        position: relative;
        left: unset;
        top: unset;
        width: unset;
        border-radius: unset;
        box-shadow: unset;
        overflow: hidden;
        border: 4px solid var(--purple);
        overflow: visible;
        display: flex;
        justify-content: space-between;
        padding: 20px 1.906vw 20px 2.422vw;
        align-items: center;
    }
}

.current-event-profile {
    font-family: var(--fira);
    background-color: #fff;
    border: 2px solid var(--blue);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: 0.3s;
    position: relative;
}

@media only screen and (min-width: 750px) {
    .current-event-profile {
        font-family: var(--fira);
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 15px;
        width: 212px;
        border-radius: 8px;
        border: unset;
        overflow: hidden;
    }
}

.ce-title {
    background-color: var(--blue);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 15px;
    padding: 0 10px;
    height: 46px;
    font-size: 15px;
    font-weight: 500;
}

@media only screen and (min-width: 750px) {
    .ce-title {
        width: 105px;
        height: 52px;
        font-family: var(--nunito);
        font-size: 16px;
        font-weight: bold;
        border-radius: 0;
        border-bottom-right-radius: 8px;
        padding: unset;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .ce-title.v2 {
        width: 360px;
        height: 67px;
        border-top-left-radius: 20px;
        position: absolute;
        top: -67px;
        right: -4px;
    }
}

.ce-title-profile {
    background-color: var(--blue);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -32px;
    right: -2px;
    border-top-left-radius: 8px;
    padding: 0 10px;
    height: 30px;
    font-size: 16px;
}

@media only screen and (min-width: 750px) {
    .ce-title-profile {
        border-radius: unset;
        padding: unset;
        position: relative;
        top: 0;
        right: 0;
    }
}

ul.ce-users {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #004858;
    font-size: 18px;
    position: absolute;
    left: 16px;
    transform: translateY(-50%);
}

@media only screen and (min-width: 750px) {
    ul.ce-users {
        position: relative;
        left: unset;
        transform: none;
        margin: 24px 0 10px 0;
    }
}

ul.ce-users.v4 {
    margin: 10px 0 10px 24px;
}

ul.ce-users li {
    border-radius: unset;
    box-shadow: unset;
}

ul.ce-users li:hover {
    box-shadow: unset;
}

ul.ce-users.v2 {
    margin: 0;
    justify-content: start;
    position: absolute;
    left: 16px;
    transform: translateY(-29px);
    font-weight: 600;
}

@media only screen and (min-width: 602px) {
    ul.ce-users.v2 {
        transform: translateY(-50%);
    }
}

ul.ce-users.v3 {
    margin: 20px 0 20px 50px;
}

@media only screen and (min-width: 750px) {
    ul.ce-users.v3 {
        margin: 0 0 0 24px;
    }
}

ul.ce-users li:nth-child(-n+3) {
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background-color: #f1f1f1;
    border: 3px solid #fff;
    margin-left: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@media only screen and (min-width: 750px) {
    ul.ce-users li:nth-child(-n+3) {
        width: 54px;
        height: 54px;
    }
}

ul.ce-users.v2 li:nth-child(-n+3) {
    width: 42px;
    height: 42px;
    margin-left: -12px;
}

ul.ce-users.v4 li:nth-child(-n+3) {
    width: 37px;
    height: 37px;
    border-radius: 100%;
    background-color: #f1f1f1;
    border: 1px solid #fff;
    margin-left: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

ul.ce-users li:nth-child(-n+3) img {
    flex-shrink: 0;
    min-width: 100%;
    max-width: 100%;
}

ul.ce-users li:nth-child(1) {
    z-index: 3;
}

ul.ce-users li:nth-child(2) {
    z-index: 2;
}

ul.ce-users li:nth-child(3) {
    z-index: 1;
}

ul.ce-users li:last-child {
    background: #fff;
    border-radius: 12px;
    padding: 0 5px;
    margin-left: -10px;
    position: absolute;
    z-index: 2;
    transform: translateX(80px);
}

ul.ce-users.v2 li:last-child {
    transform: translateX(90px);
    line-height: 1.2;
}

ul.ce-users li.f-25 {
    font-size: 25px;
}

ul.ce-users li.f-16 {
    font-size: 16px;
}

.ce-buttons {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 32px 0 12px 0;
    align-items: center;
}

.ce-buttons.v3 {
    margin: 0 16px 12px 16px;
}

.ce-buttons.mlr0 {
    margin: 0 0 20px 0;
}

.ce-buttons.mlr12 {
    margin: 0 12px 0 12px;
}


@media only screen and (min-width: 750px) {
    /*.ce-buttons {
         margin: 32px 0 12px 0;
    }*/
    .ce-buttons.mlr0 {
        margin: 0 0 30px 0;
    }
    .ce-buttons.m0 {
        margin: 0;
    }
    .ce-buttons.v2 {
        margin: 0;
    }
    .ce-buttons.v2 button {
        margin: 0 6.484vw 0 0;
    }
    .ce-buttons.mlr12 {
        margin: 0 12px 20px 12px;
    }
}

a.ce-button-featEvent:link,
a.ce-button-featEvent:visited {
    width: 240px;
    height: 48px;
    font-size: 32px;
    background-color: #fff;
    border: 2px solid var(--purple);
    font-family: var(--firaCondensed);
    cursor: pointer;
    border-radius: 10px;
    color: var(--purple);
    transition: 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a.ce-button-featEvent:hover {
    background-color: var(--purple);
    color: #fff;
    text-decoration: none;
}

a.ce-button-featEvent.v3:link,
a.ce-button-featEvent.v3:visited {
    width: 128px;
    height: 24px;
    font-size: 16px;
    border: 1px solid var(--purple);
    border-radius: 3px;
}

a.ce-button-featEvent.responsive:link,
a.ce-button-featEvent.responsive:visited {
    background-color: var(--purple);
    color: #fff;
    font-size: 24px;
}

a.ce-button-featEvent.responsive:hover {
    background-color: #fff;
    color: var(--purple);
}

@media only screen and (min-width: 750px) {
    a.ce-button-featEvent.responsive:link,
    a.ce-button-featEvent.responsive:visited {
        background-color: #fff;
        color: var(--purple);
        font-size: 32px;
    }
    a.ce-button-featEvent.responsive:hover {
        background-color: var(--purple);
        color: #fff;
    }
}

a.ce-button:link,
a.ce-button:visited {
    width: 240px;
    height: 48px;
    font-size: 32px;
    background-color: #fff;
    border: 2px solid var(--blue);
    font-family: var(--firaCondensed);
    cursor: pointer;
    border-radius: 10px;
    color: #00596c;
    transition: 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a.ce-button:hover {
    background-color: var(--blue);
    color: #fff;
    text-decoration: none;
}

a.ce-button.v3:link,
a.ce-button.v3:visited {
    width: 128px;
    height: 24px;
    font-size: 16px;
    border: 1px solid var(--blue);
    border-radius: 3px;
}

a.ce-button.responsive:link,
a.ce-button.responsive:visited {
    background-color: var(--blue);
    color: #fff;
    font-size: 24px;
}

a.ce-button.responsive:hover {
    background-color: #fff;
    color: var(--blue);
}

@media only screen and (min-width: 750px) {
    a.ce-button.responsive:link,
    a.ce-button.responsive:visited {
        background-color: #fff;
        color: #00596c;
        font-size: 32px;
    }
    a.ce-button.responsive:hover {
        background-color: var(--blue);
        color: #fff;
    }
}

a.ce-button.w120-140:link,
a.ce-button.w120-140:visited {
    width: 120px;
    height: 24px;
    font-size: 14px;
    border: 1px solid var(--blue);
    border-radius: 5px;
}

@media only screen and (min-width: 602px) {
    a.ce-button.w120-140:link,
    a.ce-button.w120-140:visited {
        width: 140px;
        height: 32px;
        font-size: 20px;
        border: 2px solid var(--blue);
        border-radius: 10px;
    }
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(11,146,175,0.3);
    }
}

@keyframes pulse-box {
  0% {
    transform: scale(0.95);
      box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  }
  
  70% {
    transform: scale(1);
      box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.1);
  }
  
  100% {
    transform: scale(0.95);
      box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  }
}

h1.f20-32 {
    font-size: 20px;
    color: #17365F;
    text-align: center;
    margin-bottom: 40px!important;
    font-weight: 400;
}

@media only screen and (min-width: 750px) {
    h1.f20-32 {
       font-size: 32px; 
    }
}

.events-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    justify-content: center;
}

@media only screen and (min-width: 602px) {
    .events-grid {
        grid-template-columns: repeat(auto-fit, 261px);
        gap: 36px 32px;
    }
}

.events-grid li {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    border-radius: 15px;
    border-top-right-radius: 0;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

@media only screen and (min-width: 602px) {
    .events-grid li {
        border-radius: 5px;
        border-top-right-radius: 0;
    }
}

/*.events-grid li:hover {
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
}*/



.eg-details {
    z-index: 2;
    width: 100%;
    padding: 8px 0 8px 0;
}

@media only screen and (min-width: 992px) {
    .eg-details {
        width: auto;
        padding: 0 0 8px 0;
    }
}

.eg-title {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--nunito);
    display: flex;
    color: #004858;
    background-color: var(--CoupleGray300);
    color: var(--TextMediumEmphasis);
    font-size: 12px;
    font-weight: 600;
    display: grid;
    padding: 2px 10px;
    border-bottom-left-radius: 15px;
    text-align: center;
}

@media only screen and (min-width: 602px) {
    .eg-title {
        font-size: 15px;
    }
}

img.bb6-blue {
    object-fit: cover;
    width: 128px;
    height: 128px;
    margin-right: 20px;
    display: block;
}

@media only screen and (min-width: 602px) {
    img.bb6-blue {
        all: unset;
        width: 261px;
    }
}

img.event-img {
    object-fit: cover;
    width: 100%;
    display: block;
}

@media only screen and (min-width: 602px) {
    img.event-img {
        all: unset;
        width: 261px;
    }
}

ul.ce-opt {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #004858;
    /*display: flex;*/
    margin: 20px 30px;
    gap: 10px;
}

ul.ce-opt li {
    position: relative;
}

/*ul.ce-opt li::after {
    content: ',';
}*/

ul.ce-opt li:last-child::after {
    content: none;
}

@media only screen and (min-width: 750px) {
    ul.ce-opt {
        margin: 0;
        display: unset;
        gap: unset;
    }
    ul.ce-opt li::after {
        content: unset; 
    }
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.profile-event-dots {
    display: flex;
    justify-content: center;
    column-gap: 10px;
}

.profile-event-dots a {
    width: 10px;
    height: 10px;
    font-size: 0;
    overflow: hidden;
    background: #d8d8d8;
    border-radius: 100%;
}

.profile-event-dots a:hover,
.profile-event-dots a.active {
    background-color: #d64f38;
}


/*Registration overlay*/

.overlay-v2 a:hover {
    text-decoration: underline;
}

.mb12 {
    margin-bottom: 12px;
}

.mb20 {
    margin-bottom: 20px;
}

.overlay-v2 {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 16px;
    top: 0;
    left: 0;
    background: rgba(7, 10, 16, 0.8);
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.overlay-v2.hide {
    display: none;
}

.overlay-v2 a:link, .overlay-v2 a:visited {
    color: #5263DA;
    text-decoration: none;
}

.overlay-v2 a:hover {
    text-decoration: underline;
}
.overlay-v2 a.underline:link, 
.overlay-v2 a.underline:visited {
    color: #5263DA;
    text-decoration: underline;
}

.overlay-v2 a.underline:hover {
    text-decoration: none;
}

.overlay-v2 a:link, 
.overlay-v2 a:visited {
    color: #5263DA;
    text-decoration: none;
}

.overlay-v2 a:focus {
    outline: 0;
    text-decoration: underline;
}
.overlay-v2 a.underline:link, 
.overlay-v2 a.underline:visited {
    color: #5263DA;
    text-decoration: underline;
}

.overlay-v2 a.underline:hover {
    outline: 0;
    text-decoration: none;
}

.overlay-container {
    position: relative;
    width: 100%;
    max-width: 470px;
    background: linear-gradient(102.78deg, #4480D8 -1.83%, #683CD2 97.71%);
    box-shadow: 8px 8px 28px 0px rgba(0, 0, 0, 0.2);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    /* color: var(--TextHighEmphasis); */
    font-family: var(--nunito);
    font-size: 18px;
    display: none;
    overflow: hidden;
    height: auto;
    transition: all 0.3s;
}
.overlay-container.text-white {
    color: #fff;
}
.overlay-container.checkout {
    padding-left: 10px;
    padding-right: 10px;
}

@media only screen and (min-width: 768px) {
    .overlay-container {
        border-radius: 22px;
    }
}

@media only screen and (min-width: 920px) {
    .overlay-v2.checkout-overlay .overlay-close {
        color: #000;
    }
}

.oc-section {
    width: 100%;
    grid-row: 1;
    grid-column: 1/-1;
    transform: translateY(0);
    transition: all 0.3s linear;
}

.oc-section-big {
    justify-items: center;
    width: 100%;
    display: none;
    transition: all 0.5s linear;
}

.oc-section-big.show {
    display: grid;
}


.oc-section.slideUp {
    transform: translateY(-120%);
}

.oc-section.slideDown {
    transform: translateY(120%);
}

.oc-section .hide {
    display: none;
}

@media only screen and (min-width: 501px) {
    .oc-section.slideUp {
        transform: none;
        display: grid;
    }

    .oc-section.slideDown {
        transform: none;
        display: none;
    }
}

.overlay-container.v2 {
    padding: 0 25px;
}

.slideUp {
    transform: translateY(-120%);
}

.overlay-container.auto {
    max-width: fit-content;
    min-width: 100%;
    padding: 40px 15px;
}

.overlay-container.w780 {
    max-width: 780px;
    padding: 40px 0;
}

@media only screen and (min-width: 768px) {
    .overlay-container.auto {
        min-width: 700px;
        padding: 55px 20px;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .overlay-container.w780 {
        padding: 30px 0;
    }
}



.overlay-container.w860 {
    max-width: 860px;
    padding: 40px 0;
}

.overlay-container.w940 {
    max-width: 940px;
    padding: 30px 0 5px 0; /* 40px 0; */
}

.overlay-container.w770 {
    max-width: 770px;
    padding: 18px; /* 40px 0; */
}


.overlay-close {
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 2;
}

.overlay-container.show {
    display: grid;
    justify-items: center;
    align-content: center;
}

@media only screen and (min-width: 920px) {
    .overlay-container {
        padding: 25px 50px 40px;
    }

    .overlay-container.w770 .overlay-close {
        top: 30px;
        right: 30px;
    }
    
}

.overlay-container.w712 {
    max-width: 712px;
}

.overlay-container.w630 {
    max-width: 630px;
}


.or-title1 {
    font-family: var(--rubik);
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 10px;
}

.or-title2 {
    font-family: var(--nunito);
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 26px 0;
}

.or-title2.mb5 {
   margin: 26px 0 5px 0; 
}

.or-title3 {
    font-family: var(--rubik);
    font-size: 28px;
    margin-bottom: 16px;
}

.or-title4 {
    font-family: var(--rubik);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
}

.or-title-alt {
    font-family: var(--rubik);
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #fff;
    margin-top: 1em;
}

.or-title-alt:first-child{
    margin-top: 0;
}

.or-subtitle-alt {
    font-family: var(--rubik);
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #fff;
    margin-top: 1em;
}

.or-subtitle-alt:first-child{
    margin-top: 0;
}

.or-subtitle1 {
    margin-bottom: 34px;
}

.fw600 {
    font-weight: 600;
}

.or-subtitle2 {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}

.or-subtitle2 button {
    margin-left: auto;
    margin-right: auto;
}

.or-subtitle2.mb65 {
    margin-bottom: 65px;
}

.or-subtitle2.mb25 {
    margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
    .or-title-alt {
        font-size: 28px;
        line-height: 33px;
    }
    
    .or-subtitle-alt {
        font-size: 28px;
        line-height: 33px;
    }
}

@media screen and (max-width: 767px) {
    .or-subtitle2.mb25 {
        margin-bottom: 0;
    }
}

.or-subtext {
    font-size: 13px;
    line-height: 1.62;
}
.mt-15 {
    margin-top: 15px;
}
.or-text16 {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 28px;
}

.or-text16.mb0 {
    margin-bottom: 0;
}

.field-type-2 {
    margin-bottom: 52px;
    width: 100%;
    position: relative;
}

.field-type-2.mb5 {
    margin-bottom: 5px;
}

/* Sept 2024 nav */
.field-type-2.mb26 {
    margin-bottom: 26px;
}

/* Sept 2024 nav */
@media only screen and (min-width: 1728px) {
    .field-type-2.mb26 {
        margin-bottom: 1.505vw; /* 26px */
    }
}

.field-type-2.mb36 {
    margin-bottom: 36px;
}

.field-type-2.error span {
    font-size: 13px;
    font-weight: normal;
    color: #e9e9e9; /* var(--error); */
    text-align: left;
    width: 100%;
    display: flex;
    margin-top: 5px;
}

.field-type-2 input {
    width: 100%;
    height: 44px;
    border: 0;
    outline: 1px solid #26C1E3; /* Sept 2024 nav */
    border-radius: 16px; /* Sept 2024 nav */
    font-size: 16px;
    color: var(--TextHighEmphasis);
    font-family: var(--nunito);
    padding: 0 11px;
    transition: all 0.1s;
    box-sizing: border-box;
}

/* Sept 2024 nav */
@media only screen and (min-width: 1728px) {
    .field-type-2 input {
        height: 2.546vw; /* 44px */
        outline: 0.058vw solid #26C1E3; /* 1px */
        border-radius: 0.926vw; /* 16px */
        font-size: 0.926vw; /* 16px */
        padding: 0 0.637vw; /* 11px */
    }
}

#menuToggle .field-type-2 input {
    all: unset;
    width: 100%;
    height: 44px;
    border: 0;
    outline: 1px solid var(--CoupleBlue500);
    border-radius: 5px;
    font-size: 16px;
    color: var(--TextHighEmphasis);
    font-family: var(--nunito);
    padding: 0 11px;
    transition: all 0.1s;
    text-align: left;
    box-sizing: border-box;
}

.field-type-2 input:focus,
.field-type-2 input:hover,
#menuToggle .field-type-2 input:focus,
#menuToggle .field-type-2 input:hover {
    outline: 2px solid var(--CoupleBlue400);
}

.field-type-2 input::placeholder,
#menuToggle .field-type-2 input::placeholder {
    color: var(--TextLowEmphasis);
}

/*.field-type-2 input:focus::placeholder,
.field-type-2 input:hover::placeholder {
    color: var(--TextHighEmphasis);
}*/

.field-type-2 input[type="date"]::-webkit-inner-spin-button,
.field-type-2 input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    -webkit-appearance: unset;
}

input.date-field {
    -webkit-appearance: unset;
    background: #fff;
}

.field-type-2 input[type=date]:invalid::-webkit-datetime-edit {
    color: var(--TextLowEmphasis);
}

.field-type-2.error input,
#menuToggle .field-type-2.error input,
.field-type-2.error select {
    outline: 1px solid var(--error);
}

.field-type-2.error input:focus,
.field-type-2.error input:hover,
#menuToggle .field-type-2.error input:focus,
#menuToggle .field-type-2.error input:hover,
.field-type-2.error select:focus,
.field-type-2.error select:hover {
    outline: 2px solid var(--error);
}


.field-type-2 select {
    width: 100%;
    height: 44px;
    border: 0;
    outline: 1px solid var(--CoupleBlue500);
    border-radius: 5px;
    font-size: 16px;
    color: var(--TextHighEmphasis);
    font-family: var(--nunito);
    padding: 0 11px;
    transition: all 0.1s;
    cursor: pointer;
    padding: 10px;
    background: #fff url('/img/arrow_down.svg') center right 16px no-repeat;
    background-size: 10px auto;
}


.field-type-2 select:focus,
.field-type-2 select:hover {
    outline: 2px solid var(--CoupleBlue400);
}


.field-type-2 select:invalid,
.field-type-2 select option[value=""] {
    color: var(--TextLowEmphasis);
}


.field-type-2 i,
#menuToggle .field-type-2 i {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 7px; /* Sept 2024 nav */
    height: 22px; /* Sept 2024 nav */
    position: absolute;
    top: -12px; /* Sept 2024 nav */
    left: 18px; /* Sept 2024 nav */
    background: #fff;
    color: #000;
    font-size: 16px; /* Sept 2024 nav */
    color: #26C1E3; /* Sept 2024 nav */
    font-style: normal;
    border-radius: 8px;
}

 /* Sept 2024 nav */
 @media only screen and (min-width: 1728px) {
     .field-type-2 i {
         padding: 0 0.405vw; /* 0 7px */
         height: 1.273vw; /* 22px */
         top: -0.694vw; /* -12px */
         left: 1.042vw; /* 18px */
         font-size: 0.926vw; /* 16px */
     }
 }



.field-type-2:hover i,
.field-type-2 input:focus + i,
#menuToggle .field-type-2:hover i,
#menuToggle .field-type-2 input:focus + i {
    color: var(--CoupleBlue400);
    -webkit-text-stroke-width: 0.6px;
}


.field-type-2.error i,
#menuToggle .field-type-2.error i {
    color: #e34826;
}

.field-type-2.error:hover i,
.field-type-2.error input:focus + i,
#menuToggle .field-type-2.error:hover i,
#menuToggle .field-type-2.error input:focus + i {
    color: #e34826;
    -webkit-text-stroke-width: 0.6px;
}

.button-style-1 {
    cursor: pointer;
    width: 100%;
    max-width: 200px;
    height: 42px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    border: none;
    border-radius: 197px;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #6A39D2;
    margin-bottom: 15px;
}

.button-style-1.mx-wd250 {
    max-width: 250px;
}

.button-style-1.mb0 {
    margin-bottom: 0;
}

.button-style-1:hover {
    background-color: var(--CoupleBlue400);
}

.button-style-1:focus {
    background-color: var(--CoupleBlue700);
}

.button-style-1.disabled {
    pointer-events: none;
    background-color: var(--CoupleGray400);
    color: var(--TextLowEmphasis);
}

.button-style-google .nsm7Bb-HzV7m-LgbsSe {
    cursor: pointer;
    width: 100% !important;
    max-width: unset !important;
    height: 65px;
    /* margin-bottom: 7px; */
    /* margin-top: 14px; */
/*    background: #fff url('/img/google-logo.png') center left 10px no-repeat;*/
    /* background-size: 24px auto; */
    border-radius: 47px;
    font-family: var(--nunito);
    font-size: 16px;
    font-weight: 700;
    color: #444444;
    border: 1px solid #fff;
/*    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);*/
}


.mobile .button-style-google .nsm7Bb-HzV7m-LgbsSe {
    width: 250px!important;
    max-width: 250px!important;
    margin-left: auto;
    margin-right: auto;
}


.button-style-google .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c {
    min-width: 38px;
    width: 38px;
    height: 38px;
    margin-right: 0;
    order: 2;
}

.button-style-google .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0px 30px;
}



.button-style-google.mb0 {
    /* margin-bottom: 15px; */
}

/*.button-style-google:hover {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.17);
    color: var(--CoupleBlue500);
}

.button-style-google:focus {
    outline: 0;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.17);
    color: var(--CoupleBlue500);
}*/


.ce-event-title {
    display: grid;
    justify-content: center;
    text-align: center;
    font-size: 32px;
    text-transform: uppercase;
    margin: 32px 0 40px 0;
}


@media only screen and (min-width: 750px) {
    .ce-event-title {
        margin: unset;
    }

    .ce-event-title.single {
        margin: 20px 0 40px 0;
    }
}

.ce-event-title b {
    font-weight: 500;
    text-decoration: underline;
}

.ce-event-title span {
    font-size: 28px;
}

a.ce-button2:link,
a.ce-button2:visited {
    font-family: var(--rubik)!important;
    width: 256px;
    height: 44px;
    font-size: 24px;
    background-color: var(--CoupleBlue500);
    font-weight: 500;
    cursor: pointer;
    border-radius: 22px;
    color: #fff;
    text-transform: uppercase;
    transition: 0.25s;
    display: flex;
    justify-content: center;
    text-decoration: none;
    padding-top: 10px;
}

a.ce-button2:hover {
    background-color: var(--CoupleBlue400);
}

a.ce-button2:focus {
    background-color: var(--CoupleBlue600);
}

a.ce-button2.v2 {
    width: 220px;
    height: 40px;
    font-size: 20px;
}

.ce-cost {
    position: absolute;
    top: -22px;
    padding: 2px 12px;
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 0 5px;
    font-size: 20px;
}

.ce-cost.v2 {
    font-size: 14px;
    font-family: var(--rubik);
    top: -18px;
}

@media only screen and (min-width: 602px) {
    .ce-cost.v2 {
        font-size: 17px;
    }
}

.ce-acc-balance {
    font-family: var(--nunito);
    color: var(--TextMediumEmphasis);
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.eg-event-title {
    font-family: var(--rubik);
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 32px;
}



/**********
CHECKOUT
**********/


.checkout-grid {
    font-family: var(--nunito);
    width: 100%;
    color: #fff;
    border-bottom: 1px solid var( --CoupleGray400);
    margin-bottom: 20px;
    padding-bottom: 20px;
    display: none;
    align-content: start;
    position: relative;
    gap: 16px 0;
    overflow-y: scroll;
}

.checkout-grid.gap8 {
    gap: 8px 0;
}

.checkout-grid::-webkit-scrollbar {
    width: 24px;
}

.checkout-grid::-webkit-scrollbar-track {
    box-shadow: inset 0 0 16px 16px transparent;
    background: transparent;
    border: solid 10px transparent;
}
.checkout-grid::-webkit-scrollbar-thumb {
    background: transparent;
    border: solid 10px transparent;
    border-radius: 14px;
}

.checkout-grid::-webkit-scrollbar-track-piece:end {
    background: transparent;
}

.checkout-grid::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.checkout-grid::-webkit-scrollbar-button {
  display: none;
}

.checkout-grid.show {
    display: grid;
}

.checkout-grid ul {}

.checkout-grid.small {
    /*width: calc(100% + 26px);*/
    border-bottom: unset;
    margin: 0;
    padding: 0;
    gap: 5px 0px;
}

.checkout-grid.pb16 {
    padding-bottom: 16px;
}

.checkout-grid.h340 {
    max-height: 264px;
    overflow-y: scroll;
    /*overflow-x: hidden;*/
}

.checkout-grid.hFlex {
    overflow-y: scroll;
}

.checkout-grid.hFlex.h319 {
    max-height: 319px;
}

.checkout-grid.h292 {
/*    height: 292px;*/
    overflow-y: scroll;
    padding: 10px 0px 10px 0;
}

/*@media only screen and (min-height: 730px) {
    .checkout-grid.h340 {
        max-height: 330px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}*/


@media only screen and (min-width: 620px) {
    .checkout-grid.h340 {
        max-height: 350px;
    }
}


@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .checkout-grid.h340 {
        max-height: 264px;
    }

    .checkout-grid li {
        gap: 0;
    }
}

body .checkout-grid.h340::-webkit-scrollbar,
body .checkout-grid.hFlex::-webkit-scrollbar
{
    width: 24px;
    background: transparent;
}

/* 4px scroll thumb. 10px margin from right margin */
body .checkout-grid.h340::-webkit-scrollbar-track,
body .checkout-grid.hFlex::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 10px transparent;
    height: 34px;
}

body .checkout-grid.h340::-webkit-scrollbar-thumb,
body .checkout-grid.hFlex::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 16px 16px var(--CoupleBlue400);
    border: solid 10px transparent;
    border-radius: 14px;
    min-height: 30px;
}

body .checkout-grid.h340::-webkit-scrollbar-track-piece:end,
body .checkout-grid.hFlex::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 30px; 
}

body .checkout-grid.h340::-webkit-scrollbar-track-piece:start,
body .checkout-grid.hFlex::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 30px;
}

body .checkout-grid.h340::-webkit-scrollbar-button,
body .checkout-grid.hFlex::-webkit-scrollbar-button
{
  display: none;
}

 /* width */
 .checkout-grid.h292::-webkit-scrollbar {
     width: 4px;
 }

 /* Track */
 .checkout-grid.h292::-webkit-scrollbar-track {
     border-radius: 14px;
     background: transparent;
 }

 /* Handle */
 .checkout-grid.h292::-webkit-scrollbar-thumb {
     background: var(--CoupleBlue400);
     border-radius: 14px;
 }

body .checkout-grid.h292::-webkit-scrollbar-button {
  display: none;
}

body .checkout-grid.h292::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

body .checkout-grid.h292::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 15px;
}


.checkout-grid li {
    position: relative;
    display: grid;
    padding: 0 16px 0 12px;
    grid-template-columns: 60px 1fr 50px;
    gap: 0 16px;
    align-items: start;
}

@media only screen and (min-width: 620px) {
    .checkout-grid li {
        padding: 0 30px 0 45px;
        grid-template-columns: 120px 280px 1fr;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .checkout-grid li {
        grid-template-columns: 100px 280px 1fr;
    }
}

.checkout-grid li.v2 {
    grid-template-rows: 1fr 1fr;
}

.checkout-grid.small li {
    padding: 0 0 0 10px;
    align-items: center;
}

@media only screen and (min-width: 620px) {
    .checkout-grid.small li {
        grid-template-columns: 72px 3fr 1fr;
        gap: 0 8px;
    }
}

.checkout-grid li .row-span-2 {
    grid-row: span 2;
}

.checkout-grid li.cg-header {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    font-weight: 400;
    /*margin-bottom: -10px;*/
    min-height: 22px;
    grid-template-columns: 120px 1fr;
    
}

.checkout-grid li.cg-header.v2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

@media only screen and (min-width: 810px) {
    .checkout-grid li.cg-header,
    .checkout-grid li.cg-header.v2 {
        font-size: 16px;
        grid-template-columns: 120px 280px 1fr;
    }
}

.checkout-grid li.cg-header.special-offer {
    border-top: 1px solid var(--CoupleGray400);
    padding-top: 20px;
}

.checkout-grid li .span2 {
    text-align: left;
}

.checkout-grid li.hide {
    display: none;
}

@media only screen and (min-width: 810px) {
    .checkout-grid li .span2 {
        grid-column: span 2;
        justify-self: start;
    }
}

.checkout-grid li .span4 {
    grid-column: span 4;
    justify-self: start;
    text-align: left;
}

img.cg-img {
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

@media only screen and (min-width: 620px) {
    img.cg-img {
        height: 88px;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
        img.cg-img {
        height: 60px;
    }
}

img.cg-img2 {
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}



.cg-details {
    display: flex;
    align-items: start;
    flex-direction: column;
    font-size: 12px;
    color: #fff;
    line-height: 1.7;
    text-align: left;
    align-self: center;
}

.cg-details strong {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

#cg-detail-span1::after{
        content: "\a";
        white-space: pre;
    }

@media only screen and (min-width: 810px) {
    .cg-details strong {
        font-size: 20px;
    }
    .cg-details {
        font-size: 14px;
    }

    .cg-detail-multiline {
        line-height: 1.2;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    
    .cg-details {
        font-size: 12px;
    }
    .cg-details strong {
        font-size: 14px;
    }
}

.cg-details.row {
    flex-direction: row;
}

.cg-details2 {
    display: grid;
    grid-template-columns:1fr;
    gap: 0 16px;
    line-height: 1.6;
}

.cg-details2.v2 {
    justify-self: end;
    justify-items: end;
    gap: 5px 0;
}

.cg-details2 .cg-d2-small {
    display: block;
    justify-self: end;
}

.cg-details2 .cg-d2-big {
    display: none;
}

.order1 {
   order: 1; 
}

.order2 {
   order: 2; 
}

@media only screen and (min-width: 810px) {
    .cg-details2 {
        grid-template-columns: 1fr 1fr;
    }

    .cg-details2.v2 {
        justify-self: unset;
        justify-items: center;
        gap: 0;
    }

    .cg-details2 .cg-d2-small {
        display: none;
    }

    .cg-details2 .cg-d2-big {
        display: block;
    }

    .order1 {
        order: 2;
    }

    .order2 {
        order: 1;
    }
}

.checkout-grid .f15 {
    font-size: 14px;
    font-weight: 600;
}

.checkout-grid .f16 {
    font-size: 14px;
    font-weight: 600;
    /* text-align: right; */
}

.just-self-end {
    justify-self: end;
}

.just-self-center {
    justify-self: center;
}

.checkout-grid .f20 {
    font-size: 20px;
}

@media only screen and (min-width: 810px) {
    .checkout-grid .f15 {
        font-size: 15px;
    }
    
    .checkout-grid .f16 {
        font-size: 20px;
    }
}

.checkout-grid .multi {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 8px 0;
}




.cg-couple-coin {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background-color: var(--CoupleBlue800);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
}

.cg-couple-coin.red,
.cg-couple-coin2.red {
    background-color: #e63e29;
}

.cg-couple-coin img {
    width: 46px;
    height: 46px;
}

@media only screen and (min-width: 620px) {
    .cg-couple-coin {
        width: 120px;
        height: 88px;
    }

    .cg-couple-coin img {
        width: 60px;
        height: 60px;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .cg-couple-coin {
        width: 100px;
        height: 60px;
    }

    .cg-couple-coin img {
        width: 46px;
        height: 46px;
    }
}

.cg-couple-coin2 {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: rgba(49, 45, 100, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cg-couple-coin2 img {
    width: 46px;
    height: auto;
}


.cg-row-close {
    position: absolute;
    top: -6px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: rgba(49, 45, 100, 1);
    color: #fff;
    border-radius: 100%;
    font-size: 10px;
    line-height: 17px;
    font-weight: 700;
    cursor: pointer;
}

.cg-row-close:hover {
    background-color: rgba(49, 45, 100, 0.8);
}

.small .cg-row-close {
    left: 0;
}

@media only screen and (min-width: 620px) {
    .cg-row-close {
        left: 38px;
    }
}

.cg-row-close.hide {
    display: none;
}

.button-style-2 {
    height: 32px;
    padding: 0 20px;
    border: solid 1px var(--CoupleBlue500);
    font-family: var(--rubik);
    font-size: 16px;
    background-color: #fff;
    color: var(--TextHighEmphasis);
    border-radius: 8px;
    cursor: pointer;
}

.button-style-2:hover {
    border: solid 1px var(--CoupleBlue400);
    background-color: var(--CoupleBlue400);
    color: #fff;
}

.button-style-2:focus {
    border: solid 1px var(--CoupleBlue700);
    background-color: var(--CoupleBlue700);
    color: #fff;
}

.button-style-2.v1 {
    grid-row: 3;
    grid-column: span 3;
    justify-self: center;
    margin: 10px 0 0 0;
    transform: translateX(14px);
}

@supports (-webkit-touch-callout: none) {
    .button-style-2.v1 {
        transform: translateX(2px);
    }
}

@media only screen and (min-width: 620px) {
    .button-style-2.v1 {
        transform: translateX(4.5px);
    }
}

@media only screen and (min-width: 810px) {
    .button-style-2.v1 {
        grid-row: unset;
        grid-column: unset;
        justify-self: end;
        margin: 0;
        transform: none;
    }
}

.button-style-3 {
    height: 36px;
    font-family: var(--rubik);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    color: #6A39D2;
    border-radius: 197px;
    cursor: pointer;
    border: 0;
    height: 42px;
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .button-style-3 {
        height: 42px;
        font-size: 16px;
    }
}
.button-style-3.w50p {
    width: 50%;
}

.button-style-3.w100p {
    width: 100%;
}

.button-style-3.plr55 {
    padding: 0 55px;
}

.button-style-3:hover {
    background-color: var(--CoupleBlue400);
}

.button-style-3:focus {
    background-color: var(--CoupleBlue700);
}

.button-style-3.disabled {
    pointer-events: none;
    background-color: var(--CoupleGray400);
    color: var(--TextLowEmphasis);
}

.button-style-3.mt20 {
    margin-top: 20px;
}

.button-style-3.wVar920 {
    width: auto;
    padding: 0 55px;
    margin: 0 auto;
}

@media only screen and (min-width: 920px) {
    .button-style-3.wVar920 {
        width: 100%;
    }
}




.split-2 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 0;
}

@media only screen and (min-width: 920px) {
    .split-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 45px;
    }
}

.checkout-grid2 {
    display: grid;
    color: #fff;
    gap: 10px 0;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

.checkout-grid2.hide {
    transform: translateY(-120%);
    transform-origin: bottom;
    transition: all 0.3s ease-out;
}

.cg2-row {
    padding: 0 0 10px 0;
    line-height: 24px;
    font-size: 14px;
    text-align: left;
    position: relative;
}

.cg2-row::after {
    content: '';
    position: absolute;
    height: 1px;
    width: calc(100% - 30px);
    background-color: rgba(49, 45, 100, 1);
    bottom: 0;
    left: 10px;
}

.cg2-row.v2::after {
    width: 100%;
    left: 0;
}

.cg2-row.mb30 {
    margin-bottom: 10px; /* 30px; */
}

.cg2-checkout-top {
    display: grid;
    grid-template-columns: 1fr 18px;
    padding-right: 20px;
    padding-left: 10px;
}

cg2-checkout-top.grey {
    color: var(--TextMediumEmphasis);
}

.cg2-checkout-btm {
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 600;
    padding: 0 20px 10px 10px;
}

.cg2-checkout-btm::after {
    content: none;
}

.cg2-checkout-btm.v2 {
    padding: 0 0 10px 0;
}

@media only screen and (min-width: 920px) {
    .cg2-checkout-btm.v2 {
        display: none;
    }
}

.cg2-checkout-btm.grey {
    color: var(--TextLowEmphasis);
}

strong.f14 {
    font-weight: 600;
    font-size: 18px;
}

.checkout-flex1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: scaleY(0);
    transform: translateY(120%);
    transition: all 0.3s;
}

.checkout-flex1.start {
    justify-content: flex-start;
}

.checkout-flex1.show {
    transform: translateY(0);
    transform-origin: top;
    transition: all 0.3s;
}

@media only screen and (min-width: 920px) {
    .checkout-flex1 {
        transform: scaleY(1);
        transform-origin: top;
    }
}

.checkout-small-1,
.checkout-small-2 {
    grid-row: 1;
    grid-column: 1/-1;
    
}

.checkout-small-2 {
    margin: 0;
}

@media only screen and (min-width: 920px) {
    .checkout-small-1,
    .checkout-small-2 {
        grid-row: unset;
        grid-column: unset;
    }
    .checkout-small-2 {
        margin: 0;
    }
}


.check-type-1 {
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid var(--CoupleDarkGray300);
    padding: 3px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.check-type-1:active, 
.check-type-1:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.check-type-1:checked {
}

.check-type-1.disabled {
    pointer-events: none;
}

.check-type-1:checked::after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: #26c1e3;
    border-radius: 3px;
}

input.check-type-1.pos1 {
    grid-column: 2;
    grid-row: span 2;
}

.pos2 {
    grid-row: 2;
}


.checkout-payment-info {
    width: 100%;
    background: #fff;
    border: 1px solid #312D64;
    align-self: start;
    border-radius: 10px;
    padding: 16px 22px 3px;
    text-align: left;
    display: grid;
    gap: 8px 0; /* 20px 0; */
}

.checkout-payment-info .payment-types {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.1px;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .checkout-payment-info {
        margin-bottom: 10px; /* 30px; */
    }
}

.enter_payment {
    display: block;
}

@media only screen and (min-width: 920px) {
    .enter_payment {
        display: none;
    }
    
}

.cg2-pInfo-var {
    display: block;
    font-size: 16px;
    color: #fff;
    position: relative;
/*    margin-top: 30px;*/
}

.cg2-pInfo-var.mb30 {
    margin-bottom: 10px; /* 30px; */
}

.cg2-pInfo-var a:link,
.cg2-pInfo-var a:visited {
    background-color: #fff;
    position: relative;
    z-index: 1;
    padding: 0 10px;
    position: relative;
    text-decoration: underline;
    color: var(--TextLowEmphasis);
    text-decoration: underline;
}

.cg2-pInfo-var a:hover {
    text-decoration: none;
}

.cg2-pInfo-var::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
/*    height: 1px;*/
    width: calc(100% - 30px);
/*    background-color: var(--CoupleGray400);*/
}

@media only screen and (min-width: 920px) {
    .cg2-pInfo-var {
        display: none;
    }
}

.cpi-title {
    font-size: 20px;
    font-family: var(--nunito);
    font-weight: 700;
    display: block;
    margin-bottom: 11px;
}

.cpi-2col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 13px;
    position: relative;
}

input.type-cc {
    height: 50px;
    border: 0;
    background-color: #DBDAE7;
    border: 1px solid #DBDAE7;
    color: #444;
    border-radius: 8px;
    font-family: var(--nunito);
    font-size: 14px;
    padding: 0 10px;
    width: 100%;
}

input.type-cc::placeholder {
    color: #444;
}

input.type-cc:focus {
    border-color: #702AD0;
}

input.cc-number {
    width: 100%;
    background: #DBDAE7 url(/img/cc-number.png) center left 10px no-repeat;
    background-size: 30px auto;
    padding-left: 54px;
}


a.stripe-powered:link,
a.stripe-powered:visited {
    height: 31px;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 3px; 
    background-color: #33364c;
    color: #fff;
    font-size: 14px;
    border-radius: 6px;
    text-decoration: none;
}

a.stripe-powered:hover {
    
}

/* The switch - the box around the slider */
.switch-type-1 {
    position: relative;
    display: inline-block;
    font-size: 14px;
    /* padding-top: 8px;
    padding-bottom: 8px; */
}

@media only screen and (min-width: 420px) {
    .switch-type-1 {
        font-size: 14px;
    }
}

.switch-type-1.disabled {
    pointer-events: none;
}

/* Hide default HTML checkbox */
.switch-type-1 input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* The slider */
.switch-type-1 .slider {
    position: absolute;
    width: 28px;
    height: 8px;
    cursor: pointer;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 76px;
    border: solid 0.5px #E8ECF2;
    background-color: #E8ECF2;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch-type-1 .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    top: -4px;
    left: 0px;
    
    background-color: #CAD0D9;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 100%;
}

.switch-type-1 input:checked + .slider {
    background-color: #E8ECF2;
    border: solid 0.5px #E8ECF2;
}


.switch-type-1 input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
    background-color: #26C1E3;
}

.switch-type-1 .label {
    margin-right: 44px;
    cursor: pointer;
}

.checkout-payment-info .error {
    font-size: 13px;
    font-weight: normal;
    color: var(--error);
    text-align: left;
    width: 100%;
    display: flex;
}

.checkout-payment-info input.error {
    color: var(--error);
    margin: 0;
    font-size: 16px;
}

.checkout-payment-info input.error::placeholder {
    color: var(--error);
}


.cg-empty {
    height: 292px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    gap: 12px 0; 
    font-size: 24px;
    font-family: var(--rubik);
}

.cg-empty.show {
    display: flex;
}

.cg-empty.v2 {
    grid-column: 1 / -1;
    height: auto;
    padding: 20px 0;
}

button.close-window {
    height: 32px;
    border-radius: 8px;
    padding: 0 25px;
    border: 1px solid var(--CoupleGray600);
    background-color: var(--CoupleGray100);
    font-family: var(--rubik);
    font-size: 16px;
    cursor: pointer;
}


.cart-bubble {
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.15);
    position: fixed;
    right: 8px;
    bottom: 24px;
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background-color: var(--CoupleRedPrime);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    transition: all 0.3s;
}

.cart-bubble.hide {
    display: none;
}

.cart-bubble img {
    width: 30px;
}

.cart-bubble:hover {
    background-color: var(--CoupleBlue400);
}

@media only screen and (min-width: 920px) {
    .cart-bubble {
        width: 64px;
        height: 64px;
        bottom: 80px;
        right: 56px;
    }

    .cart-bubble img {
        width: 33px;
    }
}

.profile-coin-balance {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: space-between;
    font-family: var(--rubik);
    flex-direction: column;
    text-align: center;
    gap: 10px 10px;
}

@media only screen and (min-width: 501px) {
    .profile-coin-balance {
        text-align: unset;
        grid-template-columns: repeat(2, 1fr);
    }
}


.justify-end {
    justify-self: center;
}

.order-3-4 {
    order: 4;
}

@media only screen and (min-width: 501px) {
    .justify-end {
        justify-self: end;
    }

    .order-3-4 {
        order: unset;
    }
}

.pcb-style1 {
    font-weight: 500;
    padding-right: 17px;
}

.pcb-contents {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

@media only screen and (min-width: 501px) {
    .pcb-contents {
        all: unset;
        display: contents;
    }
}


/*.cc-balance-right {
    display: grid;
    justify-items: center;
    gap: 8px 0;
    font-weight: 500;
}

.cc-balance-left {
    display: grid;
    gap: 9px 0; 
}*/


.title-1 {
    width: 100%;
    display: grid;
    justify-items: start;
    justify-self: start;
    padding: 0 16px 24px 12px;
    margin-bottom: 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--CoupleGray400);
}

@media only screen and (min-width: 620px) {
    .title-1 {
        padding: 0 30px 24px 45px;
    }
    .title-1.pb18 {
        padding-bottom: 18px;
    }
}

.title-1 .f24 {
    font-size: 24px;
    font-family: var(--rubik);
}

.title-1 .f20 {
    font-size: 20px;
    font-family: var(--rubik);
}

select.sel-type-1 {
    box-sizing: border-box;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    
    background: rgba(49, 45, 100, 0.8) url('/img/dropdown-arrow-white.svg') center right 10px no-repeat;
    border: solid 1px transparent;
    padding: 0 25px 0 12px;
    margin: 0;
    height: 24px;
    border-radius: 8px;

    font-family: var(--nunito);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    cursor: default;
    color: #fff;
}


/*Table*/

ul.table-layout-1 {
    font-family: var(--nunito);
    font-size: 14px;
    width: 95%;
    margin: 0 auto;
    display: grid;
    /*gap: 6px 6px;*/
/*    height: 258px;*/
    max-height: 258px;
    overflow-y: auto;
    position: relative;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 {
        width: calc( 100% - 80px);
    }
}

ul.table-layout-1::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

/* 4px scroll thumb. 10px margin from right margin */
ul.table-layout-1::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px 5px transparent;
    border: solid 3px transparent;
    background-color: transparent;
}

ul.table-layout-1::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 5px 5px var(--CoupleBlue400);
    border: solid 3px transparent;
    border-radius: 14px;
}

ul.table-layout-1::-webkit-scrollbar-button
{
  display: none;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1::-webkit-scrollbar {
        width: 24px;
    }

    ul.table-layout-1::-webkit-scrollbar-track {
        box-shadow: inset 0 0 16px 16px transparent;
        border: solid 10px transparent;
    }

    ul.table-layout-1::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 16px 16px var(--CoupleBlue400);
        border: solid 10px transparent;
    }
}


ul.table-layout-1 li {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    background-color: #efefef;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li {
        grid-template-columns: 1fr 1fr 2.5fr 1fr 1fr 1fr;
        padding: 7px;
    }

    ul.table-layout-1.colTbl5 li{
        grid-template-columns: 1fr 1fr 2.5fr 1fr 1fr;
        padding: 7px;
    }
}

ul.table-layout-1 li.header {
    display: none;
    text-transform: uppercase;
    background: #fff;
    position: sticky;
    top: 0;
    left: 0;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li.header {
        display: grid;
    }
}

/* ul.table-layout-1 li.dark {
    background-color: unset;
} */

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li.dark {
        background-color: var(--CoupleGray100);
    }
}

ul.table-layout-1 li .subrow {
    display: contents;
}



@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .subrow div:not([name="noB"]) {
        border-top: 1px dashed var(--TextLowEmphasis);
        padding-top: 5px;
        margin-top: 5px;
    }
}

ul.table-layout-1 li .hideCol {
    display: none;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .hideCol {
        display: block;
    }
}

ul.table-layout-1 li .date {
    grid-column: 1 / -1;
    background-color: var(--CoupleGray100);
    padding: 0 0 0 10px;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .date {
        grid-column: unset;
        background-color: unset;
        padding: 0;
    }
}

ul.table-layout-1 li .pl20 {
    padding-left: 10px;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .pl20 {
        padding-left: 0;
    }
}

.toRight {
    text-align: right;
}

.toRightRes {
    text-align: left;
}

@media only screen and (min-width: 800px) {
    .toRightRes {
        text-align: right;
    }
}

ul.table-layout-1 li .details {
    grid-column: 1 / -1;
    display: flex;
    padding: 3px 0 3px 10px;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .details {
        display: contents;
        border-bottom: unset;
        padding-left: 0;
        grid-column: unset;
    }
}

ul.table-layout-1 li .details-2 {
    border-bottom: 1px dashed var(--TextLowEmphasis);
    padding: 3px 0 3px 20px;
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
}

ul.table-layout-1 li .details-2:last-of-type {
    border-bottom: unset;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .details-2 {
        display: contents;
        border-bottom: unset;
        padding-left: 0;
        grid-column: unset;
    }
}

@supports (-webkit-touch-callout: none) {
    ul.table-layout-1 li .details,
    ul.table-layout-1 li .details-2 {
        padding: 3px 20px;
    }
    ul.table-layout-1 li .pr20 {
        padding-right: 20px;
    }
}

.sBold {
    font-weight: 600;
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li .spaceRes {
        display: none;
    }
}


ul.table-layout-1 li > div {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 5px;
}

@media only screen and (max-width: 800px)
{
    .tbl-pl10 {
        padding-left: 10px;
    }
}

@media only screen and (min-width: 800px) {
    ul.table-layout-1 li > div {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
    }
}


.area-2 {
    width: 100%;
    margin: 0 auto;
    padding: 50px 20px;
    font-size: 18px;
    line-height: 25px;
}

.area-2.pt0 {
    padding-top: 0;
}

.area-2.pb285 {
        padding-bottom: 300px;
}

.area-2 .mb50 {
        margin-bottom: 50px;
}

.area-2.pt240 {
        padding-top: 240px;
}

.area-2.pb200 {
        padding-bottom: 220px;
}

.area-2.pb285 {
        padding-bottom: 300px;
}

@media only screen and (min-width: 1440px) {
    .area-2 {
        width: 83.333vw; /*1440px*/
        padding: 5.787vw 0; /*100px 0*/
        font-size: 1.852vw; /*32px*/
        line-height: 2.604vw; /*45px*/
    }
    .area-2 .mb50 {
        margin-bottom: 2.894vw;
    }
    .area-2.pt240 {
            padding-top: 13.889vw;
    }
    .area-2.pb200 {
        padding-bottom: 11.574vw;
    }
    .area-2.pb285 {
        padding-bottom: 16.493vw;
    }
}

h2.style-1,
.h2 {
    font-family: var(--rubik);
    font-size: 28px;
    line-height: 33px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

h2.style-1.v2 {
    margin-bottom: 10px;
    font-size: 40px;
}

@media only screen and (min-width: 800px) {
    h2.style-1,
    .h2 {
        font-size: 4.630vw; /*80px*/
        line-height: 5.498vw; /*95px*/
        margin-bottom: 4.630vw; /*80px*/
    }
    h2.style-1.mb50 {
        margin-bottom: 2.894vw; /*50px*/
    }
    h2.style-1.v2 {
        font-size: 60px;
        margin-bottom: 0.868vw; /* s */
    }
}

@media only screen and (min-width: 1728px) {
    h2.style-1.v2 {
        font-size: 4.630vw; /* 80px */
    }
}

h2.blue {
    color: var(--CoupleBlue400);
}

.h2.mb0 {
    margin-bottom: 0;
}

.h2.center-left {
    text-align: center;
}

@media only screen and (min-width: 1200px) {
    .h2.center-left {
        text-align: left;
    }
}

h3 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 35px;
}

@media only screen and (min-width: 800px) {
    h3 {
        font-size: 1.852vw; /*32px*/
        margin-bottom: 5.787vw; /*100px*/
    }
}

.subtitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: left;
}

.subtitle.v2 {
    font-family: var(--rubik);
    text-transform: uppercase;
    font-size: 24px;
    line-height: 35px;
}

@media only screen and (min-width: 800px) {
    .subtitle {
        font-size: 1.852vw; /*32px*/
        margin-bottom: 4.051vw; /*70px*/
        text-align: center;
    }
    .subtitle.v2 {
        font-size: 2.315vw; /*40px*/
        line-height: 3.183vw; /*55px*/
    }
}

.sub-title-2 {
    font-size: 18px;
    display: block;
    justify-content: center;
    text-align: center;
}

@media only screen and (min-width: 800px) {
    .sub-title-2 {
        font-size: 1.852vw; /* 32px */
    }
}

ul.list-1 {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    gap: 20px 0;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    justify-content: center;
    margin-top: 50px;
}

@media only screen and (min-width: 900px) {
    ul.list-1 {
        grid-template-columns: repeat(4, 230px);
        font-size: 28px;
        margin-top: 110px;
        line-height: 38px;
        }
    }

@media only screen and (min-width: 1728px) {
    ul.list-1 {
        grid-template-columns: repeat(4, 13.310vw); /*230px*/
        font-size: 1.620vw; /*28px*/
        line-height: 2.199vw; /*38px*/
        margin-top: 6.366vw; /*110px*/
    }
}

ul.list-1 li {
    display: grid;
    justify-items: center;
    gap: 20px 0;
}

ul.list-1 i {
    width: 154px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--CoupleGray300);
    border-radius: 100%;
}

ul.list-1 i img {
    width: 46%;
}

@media only screen and (min-width: 1440px) {
    ul.list-1 li {
        gap: 1.157vw 0; /*20px*/
    }
    ul.list-1 i {
        width: 8.912vw; /*154px*/
    }
}

.area-4 {
    width: 100%;
    background: linear-gradient(113.97deg, #26C1E3 -13.43%, #702AD0 99.9%);
    color: #fff;
}

.wrapper-1440 {
    position: relative;
    width: 100%;
    padding: 50px 20px;
    margin: 0 auto;
    font-size: 32px;
}

@media only screen and (min-width: 1440px) {
    .wrapper-1440 {
        width: 83.333vw; /*1440px*/
        padding: 5.787vw 0; /*100px 0*/
        font-size: 1.852vw; /*32px*/
        line-height: 2.604vw; /*45px*/
    }
    /*.wrapper-1440.pt285 {
        padding-top: 16.493vw;
    }*/
}




ul.list-3 {
    display: grid;
    gap: 30px 0;
    margin: 0 auto;
    font-size: 18px;
}

@media only screen and (min-width: 1060px) {
    ul.list-3 {
        width: 1060px;
        font-size: 1.852vw; /*32px*/
        gap: 2.604vw 0; /*45px 0*/
    }
}

@media only screen and (min-width: 1440px) {
    ul.list-3 {
        width: 61.343vw; /*1060px*/
    }
}




ul.list-3 li {
    display: flex;
    gap: 0 10px;
    font-weight: 700;
}

ul.list-3 i {
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
}

@media only screen and (min-width: 1060px) {
    ul.list-3 i {
        font-size: 2.778vw; /*48px*/
    }
    ul.list-3 li {
       gap: 0 2.315vw; /*0 40px*/
    }
}

.link-white a {
    color: #fff;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.button-style-4 {
    display: block;
    border: 0;
    cursor: pointer;
    height: 98px;
    background: #fff;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    font-weight: 700;
    font-size: 24px;
    padding: 0 40px;
}

.button-style-4:hover {
    background: var(--CoupleGray100);
}

@media only screen and (min-width: 600px) {
    .button-style-4 {
        height: 98px;
        font-size: 32px;
        padding: 0 60px;
        border-radius: 20px;
    }
}

.button-style-4.center {
    margin: 0 auto;
}

.button-style-4.mt100 {
    margin-top: 70px;
}

.button-style-4.mt50 {
    margin-top: 50px;
}

.button-style-4.mb20 {
    margin-bottom: 20px;
}



@media only screen and (min-width: 1440px) {
    .button-style-4 {
        height: 5.671vw;
        /*98px*/
        font-size: 1.852vw;
        /*32px*/
        padding: 0 3.472vw;
        /*0 60px*/
        border-radius: 1.157vw;
        /*20px*/
    }

    .button-style-4.mt100 {
        margin-top: 5.787vw; /*100px*/
    }
    .button-style-4.mb20 {
        margin-bottom: unset;
    }
}

.overflow-top {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #FAFAFA;
    box-shadow: 24px 24px 40px rgba(0, 0, 0, 0.4);
    border-radius: 25px;
    color: #383838;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /*position: absolute;
    left: 50%;
    transform: translateX(-50%);*/
    margin-top: -280px;
    margin-bottom: 70px;
    gap: 35px;
}

.overflow-top.v2 {
    flex-direction: column;
    font-size: 18px;
    text-align: center;
    gap: 20px;
}

.overflow-top.v3 {
    padding: 50px 50px 80px 50px;
}

@media only screen and (min-width: 1200px) {
    .overflow-top {
        width: 1200px;
        padding: 40px 40px 50px 50px;
        margin-top: -280px;
        margin-bottom: 100px;
        flex-direction: row;
    }
    .overflow-top.v2 {
        font-size: 1.852vw; /*32px*/  
        margin-bottom: 2.894vw; /*50px*/
    }
}


@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .overflow-top {
        margin-top: -230px;
    }
}


@media only screen and (min-width: 1728px) {
    .overflow-top {
        width: 69.444vw; /*1200px*/
        box-shadow: 1.389vw 1.389vw 2.315vw rgba(0, 0, 0, 0.4); /*24px 24px 40px*/
        border-radius: 1.447vw; /*25px*/
        padding: 2.315vw 2.315vw 2.894vw 3.183vw; /*40px 40px 50px 55px*/
        margin-top: -16.204vw; /*-280px*/
        margin-bottom: 5.787vw; /*100px*/
    }

     .overflow-top.v3 {
        padding: 2.315vw 2.315vw 4.630vw 3.183vw; /*40px 40px 80px 55px*/
        margin-bottom: 4.630vw; /* 80px */
    }
}

ul.list-2 {
    width: 100%;
    font-family: var(--nunito);
    font-weight: 700;
}

@media only screen and (min-width: 1200px) {
    ul.list-2 {
        width: 82%;
    }
}

ul.list-2 li {
    padding: 0 0 0 36px;
    background: url('/img/check-green.svg') center left no-repeat;
    background-size: 17px auto;
    font-size: 18px;
    line-height: 34px;
}

@media only screen and (min-width: 640px) {
    ul.list-2 li {
        padding: 0 0 0 56px;
        font-size: 32px;
        background-size: 34px auto;
        line-height: 45px;
    }
}

@media only screen and (min-width: 1728px) {
    ul.list-2 li {
        padding: 0 0 0 56px;
        background-size: 34px auto;
        font-size: 1.852vw; /*32px*/
        line-height: 2.604vw; /*45px*/
    }
}


.area-6 {
    background-color: #262E3A;
    color: #fff;
}


ul.list-4 {
    font-size: 18px;
    display: grid;
    gap: 10px 0;
    justify-content: center;
}

@media only screen and (min-width: 900px) {
    ul.list-4 {
        font-size: 1.620vw; /*28px*/
    }
}

ul.list-4 li {
    position: relative;
    display: contents;
    gap: 0 40px;
}

@media only screen and (min-width: 900px) {
    ul.list-4 li {
        display: flex;
        justify-content: center;
        text-align: center;
        gap: 0 2.315vw; /*0 40px*/
    }
}

ul.list-4 li span {
    position: relative;
    padding: 0 0 0 26px;
}

ul.list-4 li span::after {
    content: '';
    width: 9px;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}



@media only screen and (min-width: 900px) {
    ul.list-4 li span {
        padding: 0;
    }
    ul.list-4 li span::after {
        width: 0.521vw; /*9px*/
        left: auto;
        right: -1.505vw; /*-26px*/
    }

    ul.list-4 li span:last-of-type::after {
        all: unset;
    }
}


.area-7 {
    width: 100%;
    margin: 0 auto;
    padding: 50px 30px;
    font-size: 18px;
    line-height: 25px;
}

@media only screen and (min-width: 980px) {
    .area-7 {
        width: 980px;
    }
}

@media only screen and (min-width: 1440px) {
    .area-7 {
        width: 56.713vw; /*980px*/
        padding: 5.787vw 0; /*100px 0*/
        font-size: 1.852vw; /*32px*/
        line-height: 2.604vw; /*45px*/
    }
}


ul.faq {
    display: grid;
    font-family: var(--nunito);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
}

@media only screen and (min-width: 980px) {
    ul.faq {
        font-size: 28px;
    line-height: 38px;
    }
}

@media only screen and (min-width: 1440px) {
    ul.faq {
        font-size: 1.620vw; /*28px*/
        line-height: 2.199vw; /*38px*/
    }
}

ul.faq li {
    border-bottom: 1px solid rgba(56, 56, 56, 0.2);
    padding: 30px 0;
    overflow: hidden;
    perspective: 2000px;
    position: relative;
    display: grid;
}

ul.faq li:first-of-type {
    padding-top: 0;
}

@media only screen and (min-width: 1440px) {
    ul.faq li {
        padding: 1.736vw 0; /*30px 0*/
    }
}

.faq-title {
    font-weight: 700;
    display: block;
    padding-right: 80px;
    cursor: pointer;
    position: relative;
}

@media only screen and (min-width: 1440px) {
   .faq-title {
        padding-right: 4.630vw; /*80px*/
    }
}

.faq-title::after {
    content: '';
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 10px;
    right: 20px;
    transition: all 0.3s ease-in;
}

ul.faq li.open .faq-title::after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

@media only screen and (min-width: 980px) {
    .faq-title::after {
        border-width: 0 3px 3px 0;
        padding: 6px;
        top: 10px;
        right: 20px;
    }
}

@media only screen and (min-width: 1440px) {
    .faq-title::after {
        border-width: 0 0.174vw 0.174vw 0; /*0 3px 3px 0*/
        padding: 0.347vw; /*6px*/
        top: 0.579vw; /*10px*/
        right: 1.157vw; /*20px*/
    }
}

/*.faq-answers {
    transform-origin: top;
    overflow: hidden;
    margin-bottom: 0;
    transition: all 0.3s ease-out;
    top: -100%;
    position: absolute;
}

ul.faq li.open .faq-answers {
    transition: all 0.3 ease-in;
    margin-top: 0;
    position: relative;
    top: 0;
}*/

.toggleMe {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.toggleMe:not(.active) {
    display: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.graph-1 {
    margin: 0 auto;
    height: 537px;
    width: 335px;
    background: url('/img/graph-1s.svg') top center no-repeat;
    background-size: 255px auto;
    display: grid;
}

.graph-1 li {
    font-weight: 500;
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 18px;
    font-size: 16px;
    text-align: center;
}


.graph-1 li:nth-child(6) { margin-bottom: 35px; }


@media only screen and (min-width: 900px) {
    .graph-1 {
        width: 66.088vw;/*1142px*/
        height: 43.981vw; /* 760px */
        background: url('/img/graph-1.svg') top 6.366vw center no-repeat; /*110px*/
        background-size: 66.088vw auto; /*1142px*/
        grid-template-columns: repeat(6, minmax(0, 1fr));
        text-align: center;
    }
    .graph-1 li {
        margin: 0 -2.604vw 0 -2.604vw;
        /*-45px*/
        font-size: 1.6vw; /* 1.620vw   -  28px*/
        line-height: 2.604vw; /*45px*/
    }
    .graph-1 li:nth-child(6) { 
        margin-bottom: unset; 
    }
}


.g1-title {
    font-weight: 700;
}


/*.graph-1 li:first-child {
    margin-left: 0;
}

.graph-1 li:last-child {
    margin-right: 0;
}*/

.graph-1 li:nth-child(even) {
    justify-self: start;
}

.graph-1 li:nth-child(odd) {
    justify-self: end;
}

@media only screen and (min-width: 900px) {
    .g1-title br {
        display: none;
    }
    
    .graph-1 li:nth-child(even) {
        align-self: end;
    }

    .graph-1 li:nth-child(odd) {
        justify-self: unset;
    }
}


.list-5 {
    counter-reset: my-counter;
    display: grid;
    gap: 30px;
    margin: 0 auto;
}

.list-5 li {
    counter-increment: my-counter;
    padding-left: 25px;
    position: relative;
}

.list-5 li::before {
    content: counter(my-counter);
    font-weight: bold;
    font-size: 20px;
    width: 25px;
    position: absolute;
    display: block;
    left: 0;
}

@media only screen and (min-width: 960px) {
    .list-5 {
        width: 55.556vw; /*960px*/
    }
}

@media only screen and (min-width: 1440px) {
    .list-5 li {
        padding-left: 4.051vw; /*70px*/
    }
    .list-5 li::before {
        font-size: 2.778vw; /*48px*/
        width: 4.051vw; /*70px*/
    }
}



/* Customize the label (the container) */
.check-container {
    display: flex;
    gap: 0 10px;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media only screen and (min-width: 1200px) {
    .check-container {
         font-size: 1.852vw; /*32px*/
    }
}

/* Hide the browser's default checkbox */
.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    height: 26px;
    height: 26px;
    width: 26px;
    min-width: 26px;
    min-height: 26px;
    position: relative;
    background-color: transparent;
    border: 3px solid #FFFFFF;
    border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    display: none;
    position: absolute;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
    left: 6px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


@media only screen and (min-width: 1440px) {
    .checkmark {
        height: 2.315vw; /*40px*/
        width: 2.315vw; /*40px*/
        min-width: 2.315vw; /*40px*/
        min-height: 2.315vw; /*40px*/
        border: 0.174vw solid #FFFFFF; /*3px*/
        border-radius: 0.289vw; /*5px*/
    }

    .check-container .checkmark:after {
        left: 0.694vw; /*12px*/
        top: 0.347vw; /*6px*/
        width: 0.579vw; /*10px*/
        height: 1.157vw; /*20px*/
        border-width: 0 0.231vw 0.231vw 0; /*0 4px 4px 0*/
    }
}



/*Custom file input*/

.custom-file-input {
    height: 74px;
    display: flex;
    flex-direction: column;

}

.custom-file-input input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input input {
   /* margin-top: -30px;
    margin-left: -20px;*/
    display: none;
}

/*.custom-file-input input {
    visibility: hidden;
    display: none;
}*/

.custom-file-input label {
    font-weight: bold;
    font-family: var(--nunito);
    color: #383838;
    padding: 25px 50px 10px 70px;
    height: 74px;
    font-size: 18px;
    font-weight: 500;
    background: var(--CoupleGray300) url(/img/file.svg) center left 21px no-repeat;
    background-size: 25px auto;
    border-radius: 15px;
    border: 0;
    cursor: pointer;
}

@media only screen and (min-width: 1440px) {
    .custom-file-input {
        height: 4.282vw; /*74px*/
    }
    
    .custom-file-input label {
        background: var(--CoupleGray300) url(/img/file.svg) center left 0.868vw no-repeat; /*15px*/
        padding: 0.579vw 2.894vw 0.579vw 4.051vw; /*10px 50px 10px 70px*/
        height: 4.282vw; /*74px*/
        font-size: 1.852vw; /*32px*/
        background-size: 1.447vw auto; /*25px*/
        border-radius: 0.868vw; /*15px*/
    }
}

.max-file {
    font-size: 16px;
    margin-top: -10px;
}

@media only screen and (min-width: 1440px) {
    .max-file {
        font-size: 0.926vw; /*16px*/
        margin-top:-1.157vw;  /*-20px*/
    }
}



dl.list-6 {
    display: grid;
    gap: 10px 0; 
}

dl.list-6 dt {
    font-weight: bold;
    margin-top: 30px;
}

dl.list-6 dd:last-of-type {
    width: 100%;
    display: grid;
}



dl.list-6 dd span::before {
    content:'\2022';
    display: inline-block;
    padding-right: 20px;
}


@media only screen and (min-width: 700px) {
    dl.list-6 {
        justify-items: center;
        text-align: center;
        gap: 50px 0;
    }

    dl.list-6 dt {
        margin-top: 0.579vw; /*10px*/
    }

    dl.list-6 dd {
        width: 70%;
    }

    dl.list-6 dd:last-of-type {
        display: unset;
    }

    dl.list-6 dd span::after {
        content: '\2022';
        display: inline-block;
        padding-left: 10px;
    }

    dl.list-6 dd span:last-of-type::after {
        content: '';
        padding-right: 0;
    }
    dl.list-6 dd span::before {
        all: unset;
    }
}


@media only screen and (min-width: 1440px) {
    dl.list-6 {
        gap: 2.894vw 0; /*50px 0*/
    }
}



        
        
.list-7 {
    display: grid;
    margin: 0 auto;
    gap: 15px 0;
    font-size: 18px;
}

.list-7 li {
    position: relative;
    padding-left: 35px;
}

.list-7 li::before {
    content: '\2022';
    position: absolute;
    width: 35px;
    display: block;
    left: 0;
}

@media only screen and (min-width: 900px) {
    .list-7 {
        gap: 15px 0;
        width: 80%;
    }
}

@media only screen and (min-width: 1440px) {
    .list-7 {
        font-size: 1.852vw; /*32px*/
        gap: 0.868vw 0; /*15px 0*/
    }
    .list-7 li {
        padding-left: 2.025vw; /*35px*/
    }
    .list-7 li::before {
        width: 2.025vw; /*35px*/
    }
}



.list-8 {
    counter-reset: my-counter;
    display: grid;
    gap: 5px;
    margin: 0 auto;
}

.list-8 dt {
    counter-increment: my-counter;
    padding-left: 35px;
    position: relative;
    font-weight: 700;
}

.list-8 dd {
    padding-left: 35px;
    font-weight: 500;
    margin-bottom: 40px;
}

.list-8 dt::before {
    content: counter(my-counter)".";
    font-weight: 700;
    font-size: 18px;
    width: 35px;
    position: absolute;
    display: block;
    left: 0;
}



@media only screen and (min-width: 1440px) {
    .list-8 {
        gap: 0.289vw; /*5px*/
    }
    .list-8 dt,
    .list-8 dd {
        padding-left: 3.472vw; /*60px*/
    }
    .list-8 dt::before {
        font-size: 1.852vw; /*32px*/
        width: 3.472vw; /*60px*/
    }
}

br.resp-l {
    display: none;
}

@media only screen and (min-width: 600px) {
    br.resp-s {
        display: none;
    }
    br.resp-l {
        display: block;
    }

    .mdc_mblSbmtInst {
        display: none;
    }

    .mdc_dsktpSbmtInst {
        display: block;
    }
}

br.resp-600 {
    display: block;
                    
}

@media only screen and (min-width: 600px) {
    br.resp-600 {
        display: none;
    }
}

.mdc-intrst-form {
    margin: 0 auto;
    width: 55.556vw;
}

@media only screen and (max-width: 600px) {
    .mdc_mblAddLnBrk1::after{
        content: "\a";
        white-space: pre;
    }

    .mdc_mblSbmtInst {
        display: block;
    }

    .mdc_dsktpSbmtInst {
        display: none;
    }

    .mdc-intrst-form {
        width: 75.556vw;
    }
}


.milliondollarchallengepage .milliondollarchallenge-full-height .main-header ul.header-text2 {
    width: 100%;
}
.milliondollarchallenge h2.style-1,
.milliondollarchallenge .h2 {
    margin-bottom: 50px !important;
}
.milliondollarchallenge > .wrapper {
    max-width: 100% !important;
}
.milliondollarchallenge > .wrapper > .outer {
    max-width: 100%;
}
.milliondollarchallengepage #messages {
    position: absolute;
    width: 100%;
    z-index: 1;
    text-align: left;
}
.milliondollarchallengepage #messages .message {
    font-size: 12px;
    color: #fff;
    padding: 7px 1.736vw 7px 1.736vw;
    background: #26c1e3;
    margin: 0 auto;
    width: 100%;
    text-align: left;;
}
.milliondollarchallengepage #errorMessage {
    display: block;
    width: 100%;
    clear: both;
    position: absolute;
    top: 100%;
    font-size: 14px;
    text-align: center;
    margin-top: 13px;
}
.milliondollarchallengepage #messages .message.error {
    background: red;
}
.milliondollarchallenge.faq h3 {
    margin-bottom: 35px !important;
}
.milliondollarchallenge.content-details .list-6 a {
    color: #1d1f22;
    text-decoration: none;
}
@media only screen and (min-width: 1440px) {
    .milliondollarchallengepage > .wrapper {
        max-width: 100%;
    }
}
@media only screen and (min-width: 1024px) {
    .milliondollarchallengepage > .wrapper > .outer {
        max-width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .milliondollarchallenge-full-height.full-height {
        height: 100vh;
        height: -webkit-calc(100vh - 64px);
        height: -moz-calc(100vh - 64px);
        height: -ms-calc(100vh - 64px);
        height: calc(100vh - 64px);
    }
}
@media only screen and (min-width: 800px) {
    .milliondollarchallenge.main h2.style-1,
    .milliondollarchallenge.main .h2 {
        margin-bottom: 4.63vw !important;
    }
    .milliondollarchallenge.submit-pitch h2.style-1,
    .milliondollarchallenge.submit-pitch .h2 {
        margin-bottom: 2.894vw !important;
    }
}

/* social media showdown contest */

.imgs-2 {
    position: absolute;
    bottom: -14%;
    left: 50%;
    transform: translateX(-44%);
    width: 320px; 
}

@media only screen and (min-width: 800px) {
    .imgs-2 {
        position: absolute;
        left: unset;
        transform: none;
        bottom: -26%;
        right: -10%;
        width: 380px; 
    }
}

@media only screen and (min-width: 1728px) {
    .imgs-2 {
        position: absolute;
        bottom: -26%;
        right: -10%;
        width: 21.991vw; /* 380px */
    }
}


ul.list-9 {
    font-size: 18px;
    display: grid;
    gap: 30px 0;
    line-height: 1.5;
    text-align: center;
}

@media only screen and (min-width: 800px) {
    ul.list-9 {
        font-size: 28px;
        text-align: left;
    }
}

@media only screen and (min-width: 1728px) {
    ul.list-9 {
        font-size: 1.620vw; /* 28px */
        gap: 1.736vw 0; /* 30px 0 */
        line-height: 2.315vw; /* 40px */
    }
}

ul.list-9 li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px 0;
    align-items: center;
}

@media only screen and (min-width: 800px) {
    ul.list-9 li {
        grid-template-columns: 87px minmax(0, 1fr);
        gap: 0 50px;
    }
}

@media only screen and (min-width: 1728px) {
    ul.list-9 li {
        grid-template-columns: 5.035vw minmax(0, 1fr); /* 87px */
        gap: 0 2.894vw; /* 0 50px */
    }
}

ul.list-9 li span {
    width: 87px;
    aspect-ratio: 1 / 1;
    background-color: #EBECF0;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
}

ul.list-9 li span img {
    width: 40px;
}

@media only screen and (min-width: 1728px) { 
    ul.list-9 li span {
        width: 100%;
    }
    ul.list-9 li span img {
        width: 2.315vw; /* 40px */
    }
}

ul.list-10 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px 0;
    margin-bottom: 70px;
    font-size: 18px;
    text-align: center;
}

ul.list-10 li {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 60px 36px;
}

ul.list-10 li b {
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--rubik);
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 40px;
}

@media only screen and (max-width: 700px) {
    ul.list-10 li:first-of-type {
        padding-top: 140px;
    }
                   
                
                      
}

@media only screen and (min-width: 800px) {
    ul.list-10 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        font-size: 32px;
        gap: 0 10px;
        text-align: left;
    }
    ul.list-10 li {
    }
    ul.list-10 li b {
        font-size: 60px;
        line-height: 70px;
        justify-content: start;
    }
}

@media only screen and (min-width: 1728px) {
    ul.list-10 {
        font-size: 1.852vw; /* 32px */
        line-height: 2.604vw; /* 45px */
        gap: 0 0.579vw;/*  0 10px */
    }
    ul.list-10 li {
        padding: 3.472vw 2.083vw; /* 60px 36px */
        border-radius: 1.157vw; /* 20px */
    }
    ul.list-10 li b {
        font-size: 4.630vw; /* 80px */
        line-height: 5.208vw; /* 90px */
    }
}



ul.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    gap: 30px;
}

ul.grid-1  li {
    
}

ul.grid-1 li:nth-of-type(1) {
    order: 1;
}
ul.grid-1 li:nth-of-type(2) {
    order: 4;
                          
}
ul.grid-1 li:nth-of-type(3) {
    order: 2;
                        
     
}
ul.grid-1 li:nth-of-type(4) {
    order: 3;
}

ul.grid-1 .img1 {
    width: 670px;
    margin-top: -80px;
    margin-bottom: -40px;
}

ul.grid-1 li b {
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--rubik);
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 40px;
}

@media only screen and (min-width: 800px) {
    ul.grid-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        font-size: 28px;
        line-height: 38px;
        gap: 30px;
        text-align: left;
    }
    ul.grid-1 li b {
        font-size: 60px;
        line-height: 70px;
        justify-content: start;
    }
    ul.grid-1 .img1 {
        margin-top: -9.259vw; /* -160px */
        margin-bottom: unset;
    }
    ul.grid-1 .img2 {
        width: 721px;
        margin-left: 4.630vw; /* 80px */
    }
    ul.grid-1 li:nth-of-type(1) {
        order: 1;
    }
    ul.grid-1 li:nth-of-type(2) {
        order: 2;
    }
    ul.grid-1 li:nth-of-type(3) {
        order: 3;
    }
    ul.grid-1 li:nth-of-type(4) {
        order: 4;
    }
}

@media only screen and (min-width: 1100px) {
    ul.grid-1 .img2 {
        margin-top: -6.944vw; /* -120px */
                                           
                                        
                                       
                                   
    }
}

@media only screen and (min-width: 1728px) {
    ul.grid-1 {
        font-size: 1.620vw; /* 28px */
        line-height: 2.199vw; /* 38px */
        gap: 1.736vw; /* 30px */
    }
    ul.grid-1 li b {
        font-size: 4.630vw; /* 80px */
        line-height: 5.208vw; /* 90px */
        gap: 1.736vw; /* 30px */
    }
    ul.grid-1 .img1 {
        width: 38.773vw; /* 670px */
    }
    ul.grid-1 .img2 {
        width: 41.667vw; /* 720px */
    }
}

.input-leadgen-moreinfo-item {
    display: none;
}

/* --- v3 header --- */

/* small screen sizes calculated at 430 viewport width */

.main-header-v3 {
    position: relative;
    background-repeat: no-repeat;
    background-image: url(/img/header-v4-min450.webp), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    background-size: cover;
    border-bottom-left-radius: 8.372vw; /* 36px */
    border-bottom-right-radius: 8.372vw; /* 36px */
    margin-bottom: 15.814vw;
}

.main-header-v3.v2 {
    background-size: 90% auto, cover;
}

.main-header-v3--event {
    background-image: url(/img/header-v3-event-min450-2x.png), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    margin-bottom: 6.279vw; /* 27px */
}

.main-header-v3--about {
    background-image: url(/img/header-v3-event-min450-2x.png), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    margin-bottom: 13.953vw; /* 60px */
}

.main-header-v3--referral {
    background-image: url(/img/header-v3-pattern.png), linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: right bottom;
    overflow: hidden;
    margin-bottom: 0;
}

.main-header-v3--feedback {
    background-image: url(/img/header-v3-event-min450-2x.png), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    margin-bottom: 6.933vw; /* 26px */
}

.main-header-v3--rules {
    background-image: url(/img/header-v3-event-min450-2x.png), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    margin-bottom: 6.933vw; /* 26px */
}

.main-header-v3--rules .mhv3-text-image {
    width: 100%;
    bottom: -5.333vw; /* 20px */
}

.main-header-v3--faq {
    background-image: url(/img/header-v3-event-min450-2x.png), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    margin-bottom: 12.558vw; /* 54px */
}

@media only screen and (min-width: 992px) {
    .main-header-v3 {
        background-image: url(/img/header-v3-pattern.png), linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-position: right bottom;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
        margin-bottom: 0;
    }

    .main-header-v3.v2 {
        background-size: cover;
    }

    .main-header-v3 + .section-article {
        margin-top: -90px;
        position: relative;
    }

    .main-header-v3--rules .mhv3-text-image {
        width: 52.57%;
        padding-right: 2.6%;
        bottom: 0;
        left: 50%;
        right: initial;
        transform: translateX(-50%);
    }
}

@media only screen and (min-width: 1200px) { 
    .main-header-v3 + .section-article {
        margin-top: -150px;
    }

    .main-header-v3--rules .mhv3-text-image {
        width: 877px;
        padding-right: 45px;
    }
}

.mhv3-text {
    font-family: var(--rubik);
    color: #fff;
    display: grid;
    padding: 10vw 4.651vw 0; /* nov 2025 */
    text-align: center;
}

.main-header-v3--event .mhv3-text {
    padding: 27.209vw 1.163vw 22.558vw; /* 117px 5px 97px*/
}

.main-header-v3--referral .mhv3-text {
    padding: 66.933vw 1.163vw 15.2vw; /* 251px 5px 57px*/
}

.main-header-v3--about .mhv3-text {
    padding: 34.884vw 1.163vw 32.558vw; /* 150px 5px 140px*/
}

.main-header-v3--feedback .mhv3-text {
    padding: 34.884vw 1.163vw 32.558vw; /* 150px 5px 140px*/
}

.main-header-v3--rules .mhv3-text {
    padding: 11.467vw 2.667vw 78.667vw; /* 43px 10px 205px*/
}

.main-header-v3--faq .mhv3-text {
    padding: 34.884vw 1.163vw 32.558vw; /* 150px 5px 140px*/
}

/* @media only screen and (max-width: 991px) {
    .mhv3-text {
        text-shadow: 4px 4px 40px rgba(20, 10, 29, 0.60);
    }
} */

@media only screen and (min-width: 768px) {
    .main-header-v3--feedback .mhv3-text {
        padding: 166px 20px 180px;
    }
}

@media only screen and (min-width: 992px) {
    .mhv3-text {
        font-family: var(--rubik);
        color: #fff;
        position: relative;
        padding: 139px 29.38% 83px 83px;
        text-align: left;
    }

    .mhv3-text.v2 {
        padding: 162px 29.38% 60px 83px;
    }

    .main-header-v3--event .mhv3-text {
        padding: 244px 20px 154px;
    }

    .main-header-v3--referral .mhv3-text {
        padding: 358px 20px 48px;
    }

    .main-header-v3--about .mhv3-text {
        padding: 256px 20px 180px;
    }

    .main-header-v3--rules .mhv3-text {
        padding: 108px 10px 250px;
    }

    .main-header-v3--faq .mhv3-text {
        padding: 220px 5px 140px;
    }
}

@media only screen and (min-width: 1200px) {
    .main-header-v3--referral .mhv3-text {
        padding: 350px 20px 48px;
    }

    .main-header-v3--feedback .mhv3-text {
        padding: 150px 20px 126px;
    }

    .main-header-v3--rules .mhv3-text {
        padding: 108px 10px 327px;
    }

    .main-header-v3--faq .mhv3-text {
        padding: 270px 10px 170px;
    }
}

@media only screen and (min-width: 1400px) {
    .main-header-v3--event .mhv3-text {
        padding-left: 106px;
        padding-right: 106px;
    }
}

.mhv3-text-big {
    text-transform: uppercase;
    font-size: min(59px, 15.32vw); /* nov 2025 */
    font-weight: bold;
    text-align: center;
}


@media only screen and (min-width: 992px) {
    .mhv3-text-big {
        font-size: 52px;
        text-align: unset;
    }
}

@media only screen and (min-width: 1200px) {
    .mhv3-text-big {
        font-size: 64px;
    }
}

.mhv3-text-referral {
    font-size: 7.467vw; /* 28px */
    font-weight: bold;
    text-align: center;
    text-shadow: 4px 4px 40px rgba(20, 10, 29, 0.6);
    position: relative;
    z-index: 1;
}

.mhv3-text-about {
    font-size: 8.372vw; /* 36px */
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.mhv3-text-event {
    font-family: var(--rubik);
    color: #fff;
    text-align: center;
    font-size: 7.907vw; /* 34px */
    font-weight: 700;
    text-transform: uppercase;
}

.mhv3-text-rules {
    font-family: var(--rubik);
    color: #fff;
    text-align: center;
    font-size: 8vw; /* 30px */
    font-weight: 700;
    text-transform: capitalize;
}

.mhv3-text-feedback {
    font-family: var(--rubik);
    color: #fff;
    text-align: center;
    font-size: 7.467vw; /* 28px */
    font-weight: 700;
    text-transform: initial;
    margin-bottom: 4.267vw; /* 16px */
}

.main-header-v3--feedback p {
    font-family: var(--rubik);
    font-size: 5.867vw; /* 22px */
    font-weight: 500;
    line-height: 1.166;
    text-align: center;
}

.mhv3-text-event .yellow-txt {
    display: inline-block;
}

.mhv3-text-faq {
    font-size: 8.372vw; /* 36px */
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 991px) {
    .mhv3-text-event,
    .mhv3-text-about,
    .mhv3-text-faq {
        text-shadow: 4px 4px 40px rgba(20, 10, 29, 0.60);
    }
}

@media only screen and (min-width: 768px) {
    .mhv3-text-feedback {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .main-header-v3--feedback p {
        font-size: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .mhv3-text-event {
        font-size: 44px;
    }

    .mhv3-text-referral {
        font-size: 48px;
    }

    .mhv3-text-about {
        font-size: 48px;
    }

    .mhv3-text-feedback {
        font-size: 44px;
        margin-bottom: 20px;
    }

    .main-header-v3--feedback p {
        font-size: 22px;
    }

    .mhv3-text-rules {
        font-size: 48px;
    }

    .mhv3-text-faq {
        font-size: 48px;
    }
}

@media only screen and (min-width: 1200px) {
    .mhv3-text-event {
        font-size: 48px;
    }

    .mhv3-text-about {
        font-size: 62px;
    }

    .mhv3-text-feedback {
        font-size: 52px;
        margin-bottom: 40px;
    }

    .main-header-v3--feedback p {
        font-size: 36px;
        max-width: 741px;
        margin-left: auto;
        margin-right: auto;
    }

    .mhv3-text-rules {
        font-size: 64px;
    }

    .mhv3-text-faq {
        font-size: 64px;
    }
}

@media only screen and (min-width: 1400px) {
    .mhv3-text-feedback {
        font-size: 64px;
        margin-bottom: 74px;
    }
}


.mhv3-text .yellow-txt, 
body .yellow-txt {
    color: #F9C701;
}

.mhv3-text-medium {
    font-size: min(18px, 4.19vw);
    font-weight: 400;
    text-align: center;
    margin-bottom: min(380px, 88.37vw); /* nov 2025 */
}

@media only screen and (min-width: 992px) {
    .mhv3-text-medium {
        margin-top: 0;
        font-size: 24px;
        text-align: left;
        margin-bottom: unset; /* nov 2025 */
    }
}

.mhv3-button {
    margin-top: 4.186vw; /* 18px */
    width: 66.977vw; /* 288px */
    display: grid;
    font-size: 3.721vw; /* 16px */
    line-height: 1.625;
    gap: min(14px, 3.26vw); 
    font-weight: 500;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    color: #444;
    position: relative;
    /* margin-bottom: -10.814vw; */ /* -15.814vw; */ /* 68px */
    margin-bottom: min(60px, 13.95vw);
    z-index: 1;
}

@media only screen and (min-width: 992px) {
    .mhv3-button {
        margin-top: 60px;
        margin-bottom: 0;
        width: 300px;
        font-size: 18px;
        gap: 20px;
        margin-left: unset;
        margin-right: unset;
        color: #fff;
    }
}

.mhv3-button button {
    width: 100%;
    height: 15.349vw; /* 66px */
    border-radius: 38.605vw; /* 166px */
    background: #fff275;
    background-image: linear-gradient(93deg, #fff275 1%, #f9a300 102%);
    border: 0;
    padding: 0;
    font-size: 5.581vw; /* 24px */
    font-weight: bold;
    font-family: var(--rubik);
    color: #6a39d2;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.mhv3-button button:hover,
.mhv3-button button:focus,
.mhv3-button button:active {
    background: #702AD0;
    color: #fff;
}

@media only screen and (min-width: 640px) {
    .mhv3-button button {
        height: 76px;
        border-radius: 166px;
        font-size: 24px;
        max-width: 300px;
    }
}

.mhv3-text-image {
    width: 30.38%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.main-header-v3--referral .mhv3-text-image {
    width: 100%;
}

.mhv3-text-image > img {
    display: block;
    width: 81.7%;
    height: auto;  
}

.mhv3-pics {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.736vw 0 0 0;
    margin-top: -8vw;
    margin-bottom: -12vw;
}

.mhv3-pics img {
    width: 100%;
}

.mhv3-pics img:nth-of-type(1) {
    display: none;
}

.mhv3-pics img:nth-of-type(2) {
    width: 145.581vw; /* 626px */
}

.mhv3-pics img:nth-of-type(3) {
    display: none;
}


@media only screen and (min-width: 992px) {
    .mhv3-pics {
        align-items: flex-start;
        justify-content: space-between;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        margin-bottom: -39px;
    }
    .mhv3-pics img:nth-of-type(1) {
        width: 24.19%; /* 361px */
        display: block;
        /* margin-top: 26px; */
        margin-top: 36px;
    }
    .mhv3-pics img:nth-of-type(2) {
        width: 40.81%; /* 609px */
    }
    .mhv3-pics img:nth-of-type(3) {
        width: 23.39%; /* 349px */
        display: block;
        margin-top: 14px;
    }

    .main-header-v3--referral .mhv3-text-image {
        max-width: 837px;
        left: 50%;
        right: initial;
        transform: translateX(-50%);
    }

    .mhv3-text-image {
        right: 0px;
    }
}

@media only screen and (min-width: 1200px) {
    .mhv3-text-image {
        right: 73px;
    }
}

h1.v3 {
    margin-top: 10.698vw; /* 46px */
    margin-bottom: 5.35vw; /* 23px */
    font-family: var(--rubik);
    /* font-size: 7.442vw; */ /* 32px */
    font-size: 36px; /* nov 2025 */
    font-weight: bold;
    text-transform: uppercase;
    display: grid;
    justify-content: center;
    justify-items: center;
    text-align: center;
}

h1.v3.left {
    text-align: left;
    justify-items: start;
    justify-content: left;
}

h1.v3.mt0 {
    margin-top: 0;
}

h1.v3.m0 {
    margin: 0;
}

h1.v3 .f20-f24 {
    font-size: 20px;
    text-transform: none;
}

@media only screen and (min-width: 900px) {
    h1.v3 .f20-f24 {
        font-size: 1.389vw; /* 24px */
    }
}

h1.v3 .f25-f36 {
    font-size: 25px;
    text-transform: none;
    margin: 0;
}

@media only screen and (min-width: 900px) {
    h1.v3 .f25-f36 {
        font-size: 36px;
    }
}

h1.v3.yellow {
    color: #F9C701
}

@media only screen and (min-width: 992px) {
    h1.v3 {
        margin-top: 48px;
        margin-bottom: 18px;
        font-size: 48px; 
    }
}

/* @media only screen and (min-width: 1000px) {
    h1.v3 {
        font-size: 2.778vw; 
    }
} */

h1.v3 span.grad {
    /* background-image: linear-gradient(110deg, #26c1e3 2%, #1189ad 46%, #7120cc 99%); */
    background: linear-gradient(91.28deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

h2.v3 {
    font-family: var(--nunito);
    font-size: 4.186vw; /* 18px */
    font-weight: 500;
    text-align: center;
    padding: 0 4.651vw; /* 20px */
}

@media only screen and (min-width: 992px) {
    h2.v3 {
        font-size: 20px;
        padding: 0;
    }
}

.area-8 {
    margin-top: 10.93vw; /* 47px */
}

.area-8-wrapper {
    position: relative;
    padding: 0 6.047vw; /* 26px */
    display: grid;
    align-items: center;
    gap: 0 5.787vw; /* 100px */
    font-size: 18px;
}

.area-8 p {
    line-height: 1.35;
}

@media only screen and (min-width: 992px) {
    .area-8 {
        margin-top: 48px;
        font-size: 20px;
    }

    .area-8-wrapper {
        grid-template-columns: 1fr 500px; 
        gap: 0 70px;
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-8-wrapper {
        grid-template-columns: 1fr 731px; /* 785px */
        gap: 0 66px;
        padding-left: 80.5px;
        padding-right: 80.5px;
    }
}

.area-8 img {
    width: 100%;
}

ul.a8-list {
    display: grid;
    gap: 4.884vw 0; /* 21px */
    margin-bottom: 9.07vw; /* 39px */
}

@media only screen and (min-width: 992px) {
    ul.a8-list {
        gap: 50px 0; /* 50px */
        margin-bottom: unset;
    }
}

ul.a8-list li {
    display: grid;
    gap: 2.093vw 0; /* 9px */
    text-align: center;
}

@media only screen and (min-width: 992px) {
    ul.a8-list li {
        text-align: left;
        gap: 9px 0;
    }
}

ul.a8-list li span {
    justify-self: center;
    width: 13.953vw; /* 60px */
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background: #eaeef1 url('/img/checkmark-grad.svg') center center no-repeat;
    background-size: 6.279vw auto; /* 27px */
}

ul.a8-list p {
    font-size: 4.186vw; /* 18px */
}

ul.a8-list u {
    font-weight: 700;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

ul.a8-list u:before {
    content: '';
    background-color: #F9C701;
    border-radius: 42px;
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 3px;
    z-index: -1;
}

@media only screen and (min-width: 992px) {
    ul.a8-list li span {
        width: 60px; 
        background-size: 27px auto;
    }

    ul.a8-list p {
        font-size: 20px;
    }
    
}

.a8-shape1 {
    width: 90px;
    position: absolute;
    left: 26px;
    bottom: -130px;
}

@media only screen and (min-width: 800px) {
    .a8-shape1 {
        width: 8.102vw; /* 140px */
        /* left: 21.991vw;
        bottom: -1.794vw; */
    }
}

@media only screen and (min-width: 1000px) {
    .a8-shape1 {
        left: 21.991vw; /* 380px */
        bottom: -1.794vw; /* -31px */
    }
}

.a8-shape2 {
    display: none;
}

@media only screen and (min-width: 800px) {
    .a8-shape2 {
        display: block;
        width: 17.130vw; /* 296px */
        position: absolute;
        right: 0;
        bottom: -17.130vw; /* -470px */
    }
}

.area-9 {
    margin-top: 11.395vw;
}

.area-9 h1.v3 {
    font-size: 8.372vw; /* 36px */
}

.area-9 h2.v3 {
    font-size: 4.651vw; /* 20px */
}

.area-9 .v3 {
    margin-top: 0;
    margin-bottom: 0;
}

.area-9 .v3 + .v3 {
    margin-top: 5.349vw; /* 23px */
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) {
    .area-9 {
        margin-top: 73px;
    }

    .area-9-wrapper {
        padding: 0 0 0 50px;
    }

    .area-9 .v3 + .v3 {
        margin-top: 17px;
    }

    .area-9 h1.v3 {
        font-size: 48px;
    }
    
    .area-9 h2.v3 {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1400px) {
    .area-9-wrapper {
        padding: 0 143.5px;
    }
}

.vVideos-scrollable {
    display: grid;
    grid-template-columns: max-content;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    position: relative;
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease-in;
    scroll-behavior: smooth;
    padding-left: 8.372vw; /* 36px */
}

.vVideos-scrollable::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

@media only screen and (min-width: 992px) {
    .vVideos-scrollable {
        padding-left: 0;
    }
}


@media only screen and (min-width: 1200px) {
    .vVideos-scrollable {
        justify-content: center;
        cursor: unset;
    }
}

.vVideos-scrollable.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    scroll-behavior: unset;
}

/* July 2025 */
.vVideos {
    display: grid;
    grid-template-columns: repeat(3, 81.395vw); 
    gap: 2.326vw; /* 10px */
    margin: 8vw 0 0 auto; /* 75px */
    font-size: 5.581vw; /* 24px */
    font-weight: 700;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .vVideos {
        grid-template-columns: repeat(3, 350px);
    }
}

/* July 2025 */
@media only screen and (min-width: 992px) {
    .vVideos {
        margin-top: 40px;
        margin-bottom: 0;
        font-size: 24px;
        gap: 10px;
        /* grid-template-columns: repeat(3, 250px); */
    }
}

@media only screen and (min-width: 1200px) {
    .vVideos {
        grid-template-columns: repeat(3, 350px);
    }
}

.vVideos .vVideo {
    position: relative;
}

/* July 2025 */
.vVideo > div {
    width: 81.395vw; /* 350px */
    aspect-ratio: 35/59;
    border-radius: 5.814vw; /* 25px */
    border: 4px solid #3C96DE;
    overflow: hidden;
    position: relative;
    background-color: #D6DADE;
    display: flex;
    justify-content: center;
}

.vVideo > span {
    color: #fff;
    font-weight: 700;
    font-size: 5.581vw; /* 24px */
    line-height: 12.558vw; /* 54px */
    border-radius: 14.884vw; /* 54px */
    background: #702AD0;
    position: absolute;
    bottom: 5.116vw; /* 22px */
    left: 7.907vw; /* 34px */
    right: 7.907vw; /* 34px */
}

@media only screen and (min-width: 768px) {
    .vVideo > div {
        width: 350px;
        border-radius: 25px;
    }
}

@media only screen and (min-width: 768px) {
    .vVideo > span {
        font-size: 24px;
        line-height: 54px;
        border-radius: 64px;
        bottom: 22px;
        left: 34px;
        right: 34px;
    }
}

.vVideo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Add mobile touch feedback for video clicks */
@media (max-width: 768px) {
    .vVideo video {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }
}

/* July 2025 */
/* .vVideo span.border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 5.814vw;
    border: 4px solid transparent;
    background: linear-gradient(90deg, #26c1e3 -15%, #1189ad 56%, #7120cc 141%) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

@media only screen and (min-width: 768px) {
    .vVideo span.border {
        border-radius: 25px;
        border-width: 4px;
    }
} */

/* July 2025 */
.vVideo span.play {
    width: 22.326vw; /* 96px */
    aspect-ratio: 1/1;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    background: #7120CC url('/img/play.svg') center center no-repeat;
    background-size: 102% 102%;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 1);
    z-index: 1;
}

.vVideo span.play.hide {
    display: none;
}

/* July 2025 */
@media only screen and (min-width: 900px) {
    .vVideo span.play {
        width: 80px;
    }
}

/* July 2025 */
.vVideo-title {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-family: var(--rubik);
    font-weight: 700;
    padding: 0 0 15px 0;
}

/* July 2025 */
a.vVideo-button {
    margin: 43px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 260px;
    height: 66px;
    border-radius: 64px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    color: #702AD0;
    cursor: pointer
}

/* July 2025 */
a.vVideo-button:hover {
    opacity: 0.85;
}

/* July 2025 */
.corner {
    width: 0;
    height: 0;
    border-top: 130px solid #3C96DE;
    border-bottom: 130px solid transparent;
    border-right: 130px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}

/* July 2025 */
.corner span {
    position: absolute;
    top: -104px;
    left: -6px;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--nunito);
    transform: rotate(-45deg);
    display: block;
    color: white;
}


.area-10 {
    width: 100%;
    margin-top: 15.581vw; /* 67px */
    position: relative;
}

.area-10::before {
    content: '';
    width: 100%;
    height: 78%;
    border-radius: 9.302vw; /* 40px */
    background: linear-gradient(114deg, #26C1E3 -13.43%, #702AD0 99.9%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.area-10-wrapper {
    padding-top: 11.86vw; /* 51px */
    padding-left: 2.093vw; /* 9px */
    padding-right: 2.093vw; /* 9px */
}

.area-10 h1.v3 {
    font-size: 8.372vw; /* 36px */
}

@media only screen and (min-width: 992px) {
    .area-10 {
        margin-top: 83px;
    }

    .area-10::before {
        border-radius: 40px; /* 40px */
        height: 67%;
    }

    .area-10-wrapper {
        padding: 81px 50px 0;
    }

    .area-10 h1.v3 {
        font-size: 48px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-10::before {
        height: 71%;
    }

    .area-10-wrapper {
        padding: 81px 119px 0;
    }
}

img.a10-shape1 {
    display: none;
}

img.a10-shape2 {
    position: absolute;
    z-index: 1;
    right: 0;
    width: 124px;
    top: 30%;
}

@media only screen and (min-width: 900px) {
    img.a10-shape1 {
        display: block;
        position: absolute;
        z-index: 1;
        top: -1.3%; /* 30x */
        left: 4.051vw; /* 70px */
        width: 7.350vw; /* 127px */
    }

    img.a10-shape2 {
        width: auto;
        height: 42.245vw; /* 630px */
    }
}

.grid-2 {
    display: grid;
    gap: 2.326vw; /* 10px */
    padding-top: 10.93vw; /* 47px */
}

@media only screen and (min-width: 992px) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 36px;
        padding-top: 74px;
    }
}

.grid-2 .order1 { order: 1; }

.grid-2 .order2 { order: 2; }

.grid-2 .order3 { order: 3; }

.grid-2 .order4 { order: 4; }

.grid-2 .order5 { order: 5; }

.grid-2 .order6 { order: 6; }

.grid-2 .order7 { order: 7; }

.grid-2 .order8 { order: 8; }

.grid-2 .order9 { order: 9; }

.grid-2 .order10 { order: 10; }

@media only screen and (min-width: 992px) {
    .grid-2 .order1 { order: 1; }

    .grid-2 .order2 { order: 2; }
    
    .grid-2 .order3 { order: 4; }
    
    .grid-2 .order4 { order: 3; }
    
    .grid-2 .order5 { order: 5; }
    
    .grid-2 .order6 { order: 6; }
    
    .grid-2 .order7 { order: 8; }
    
    .grid-2 .order8 { order: 7; }

    .grid-2 .order9 { order: 9; }

    .grid-2 .order10 { order: 10; }
}

img.g2-img {
    width: 100%;
    display: block;
    border-radius: 5.58vw; /* 24px */
    border: 2px solid #F9C701;
}
img.g2-img.border {
    border: 1px solid #3f2989;
}

@media only screen and (min-width: 992px) {
    img.g2-img {
        border-radius: 24px;
        margin-bottom: 0;
        height: 100%;
        object-fit: cover;
    }
}

.g2-block {
    position: relative;
    margin-bottom: 9.3vw; /* 40px */
}

img.g2-block:last-child {
    margin-bottom: 0;
}


.g2-block.type1 {
    margin-right: 4.88vw; /* 21px */
}

.g2-block.type2 {
    margin-left: 4.88vw; /* 21px */
}

.g2-sub {
    display: block;
    position: absolute;
}

.g2-sub--image1 {
    width: 27.44vw; /* 118px */
    top: 2.33vw; /* 10px */
    left: 2.33vw; /* 10px */
}

.g2-sub--image2 {
    width: 27.44vw; /* 118px */
    bottom: 2.33vw; /* 10px */
    left: 2.33vw; /* 10px */
}

.g2-sub--image3 {
    width: 18.6vw; /* 80px */
    top: 50%;
    right: -4.88vw; /* -21px */
    transform: translateY(-50%);
}

.g2-sub--image4 {
    width: 18.6vw; /* 80px */
    top: 27.91vw; /* 120px */
    right: -4.88vw; /* -21px */
}

.g2-sub--image1-2 {
    width: 83.72vw; /* 360px */
    top: 2.79vw; /* 12px */
    left: 50%;
    transform: translateX(-50%);
}

.g2-sub--image2-2 {
    width: 83.72vw; /* 360px */
    bottom: 2.79vw; /* 12px */
    left: 50%;
    transform: translateX(-50%);
}

.g2-sub--image3-2 {
    width: 36.28vw; /* 156px */
    top: 50%;
    left: -8.6vw; /* -37px */
    transform: translateY(-50%);
}

.g2-sub--image1-3 {
    width: 19.07vw; /* 82px */
    top: 2.33vw; /* 10px */
    left: 2.33vw; /* 10px */
}

.g2-sub--image2-3 {
    width: 17.67vw; /* 76px */
    top: 50%;
    right: -4.88vw; /* -21px */
    transform: translateY(-50%);
}

.g2-sub--image3-3 {
    width: 74.19vw; /* 319px */
    bottom: 2.33vw; /* 10px */
    left: 2.33vw; /* 10px */
}

.g2-txt {
    border-radius: 24px; /* nov 2025 */
    border: 2px solid #fff;
    font-size: 3.26vw; /* 14px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.95vw 1.16vw 3.95vw  4.65vw; /* 17px 5px 17px 20px */
    min-height: 40.47vw; /* 174px */
    color: #fff;
    gap: 5px;
}

.g2-txt p {
    font-weight: 500;
    font-size: 3.26vw; /* 14px */
}

.g2-txt b {
    font-family: var(--rubik);
    font-size: 5.581vw; /* 24px */
    color: #F9C701;
    margin-bottom: 2.09vw; /* 9px */
}

@media only screen and (min-width: 992px) {
    .g2-block {
        height: 100%;
        margin-bottom: 0px;
    }
    
    .g2-block.type1 {
        margin-right: 0;
    }
    
    .g2-block.type2 {
        margin-left: 0;
    }
    
    .g2-sub--image1 {
        width: 118px;
        top: 10px;
        left: 10px;
    }
    
    .g2-sub--image2 {
        width: 118px;
        bottom: 10px;
        left: 10px;
    }
    
    .g2-sub--image3 {
        width: 80px;
        right: -21px;
    }
    
    .g2-sub--image4 {
        width: 80px;
        top: 120px;
        right: -21px;
    }
    
    .g2-sub--image1-2 {
        width: 360px;
        top: 12px;
    }
    
    .g2-sub--image2-2 {
        width: 360px;
        bottom: 12px;
    }
    
    .g2-sub--image3-2 {
        width: 156px;
        left: -37px;
    }
    
    .g2-sub--image1-3 {
        width: 82px;
        top: 10px;
        left: 10px;
    }
    
    .g2-sub--image2-3 {
        width: 76px;
        right: -21px;
    }
    
    .g2-sub--image3-3 {
        width: 319px;
        bottom: 10px;
        left: 10px;
    }
    
    .g2-txt {
        border-radius: 24px;
        font-size: 18px;
        padding: 17px 5px 17px 20px;
        min-height: 174px;
        justify-content: flex-start;
    }
    
    .g2-txt p {
        font-size: 17px;
    }
    
    .g2-txt b {
        font-size: 24px;
        margin-bottom: 9px;
    }
}

@media only screen and (min-width: 1300px) {
    .g2-sub--image1 {
        width: 162px;
        top: 14px;
        left: 14px;
    }
    
    .g2-sub--image2 {
        width: 162px;
        bottom: 14px;
        left: 14px;
    }
    
    .g2-sub--image3 {
        width: 109px;
        right: -30px;
    }
    
    .g2-sub--image4 {
        width: 109px;
        top: 166px;
        right: -30px;
    }
    
    .g2-sub--image1-2 {
        width: 500px;
        top: 17px;
    }
    
    .g2-sub--image2-2 {
        width: 500px;
        bottom: 17px;
    }
    
    .g2-sub--image3-2 {
        width: 216px;
        left: -77px;
    }
    
    .g2-sub--image1-3 {
        width: 112px;
        top: 14px;
        left: 14px;
    }
    
    .g2-sub--image2-3 {
        width: 105px;
        right: -28px;
    }
    
    .g2-sub--image3-3 {
        width: 440px;
        bottom: 14px;
        left: 14px;
    }

    .g2-txt {
        border-radius: 24px;
        border-width: 2px;
        font-size: 20px;
        padding: 25px 15px 27px 35px;
        gap: 17px;
    }

    .g2-txt p {
        font-size: 20px;
    }

    .g2-txt b {
        font-size: 32px;
        margin-bottom: 0;
    }
}

.g2-video-txt-area {
    position: relative;
    width: 100%;
    display: grid;
    gap: 5.814vw; /* 25px */
    margin-top: 9.767vw; /* 42px */
}

@media only screen and (min-width: 992px) {
    .g2-video-txt-area {
        grid-column: span 2;
        gap: 30px;
        margin-top: 0;
    }
}

.g2-video {
    /* overflow: hidden; */
    width: 100%;
    border-radius: 6.047vw; /* 26px */
    position: relative;
    box-shadow: 27px -24px 56px 0px rgba(0, 0, 0, 0.25);
    background-color: #FFF;
    margin: 1px;
    z-index: 1;
}

@media only screen and (min-width: 768px) {
    .g2-video {
        border-radius: 26px;
    }
}

.g2-video span.border {
    position: absolute;
    top: 0px; /* -1px; */
    bottom: 1px; /* -1px; */
    left: -1px;
    right: -1px;
    display: block;
    border-radius: 6.047vw; /* 26px */
    border: 4px solid transparent; 
    background: linear-gradient(90deg, #26c1e3 -15%, #1189ad 56%, #7120cc 141%) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

@media only screen and (min-width: 768px) {
    .g2-video span.border {
        border-radius: 26px;
        border-width: 4px;
    }
}

.g2-video video {
    width: 100%;
    height: 100%;
    border-radius: 6.047vw; /* 26px */
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Add mobile touch feedback for g2-video clicks */
@media (max-width: 768px) {
    .g2-video video {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }
}

@media only screen and (min-width: 768px) {
    .g2-video video {
        border-radius: 26px;
    }
}

.g2-video span.play {
    width: 13.488vw; /* 58px */
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: 4px solid #fff; /* #383838; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    background: url(/img/play-white.svg) left 60% center no-repeat;
    /* background: url(/img/play-dark-grey.svg) left 60% center no-repeat; */
    background-size: 6.047vw auto; /* 26px */
    z-index: 2;
}

@media only screen and (min-width: 992px) {
    .g2-video span.play {
        width: 94px;
        border-width: 4px;
        background-size: 42px auto;
    }
}

.g2-txt-area {
    border-radius: 6.047vw; /* 26px */
    background-image: linear-gradient(106deg, #26c1e3 -18%, #702ad0 101%);
    font-size: 7.442vw; /* 32px */
    font-family: var(--rubik);
    font-weight: bold;
    text-align: center;
    padding: 13.953vw 3.488vw 17.442vw;
    color: #fff;
    display: grid;
    gap: 13.488vw;
    justify-items: center;
    text-wrap: balance;
}

@media only screen and (min-width: 992px) {
    .g2-txt-area {
        border-radius: 26px;
        font-size: 36px;
        padding: 92px 30px 70px;
        gap: 53px;
    }
}

@media only screen and (min-width: 1300px) {
    .g2-txt-area {
        font-size: 40px;
    }
}

.g2-txt-area span {
    color: #F9C701;
}

@media only screen and (min-width: 992px) {
    .g2-txt-area br {
        display: none;
    }
}

button.button-style-5 {
    width: 66.977vw; /* 288px */
    height: 15.349vw; /* 66px */
    border-radius: 38.605vw; /* 166px */
    background-image: linear-gradient(102deg, #fff275 1%, #f9a300 102%);
    border: 0;
    font-size: 5.581vw; /* 24px */
    font-family: var(--rubik);
    font-weight: bold;
    color: #6a39d2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in;
}

button.button-style-5:hover {
    opacity: 0.85;
}

@media only screen and (min-width: 992px) {
    button.button-style-5 {
        width: 288px;
        height: 66px;
        border-radius: 166px;
        background: linear-gradient(93deg, #FFF275 0.94%, #F9A300 101.84%);
        font-size: 24px;
    }
}


/* Footer */
.footer-container {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    position: relative;
    z-index: 90; /* 99; 999; */
}

/* Ensure footer positioning works on all screen sizes */
body.grad-body-1 .footer-container {
    margin-top: auto;
    flex-shrink: 0;
}

footer.v3 {
    border-radius: 5.581vw 5.581vw 0px 0px; /* 24px 24px */
    background: linear-gradient(96deg, #32AAE1 -11.23%, #6E2FD1 76.1%);
    font-size: 3.721vw; /* 16px */
    position: relative;
    text-wrap: balance;
    height: revert;
    margin-top: 4.651vw; /* 20px */
    margin-left: 4.651vw; /* 20px */
    margin-right: 4.651vw; /* 20px */
    /* z-index: 2; */
}

footer.v3::before {
    content: '';
    border-radius: 8.372vw 8.372vw 0px 0px; /* 36px 36px */
    background: #311F4A;
    border-bottom: none;
    position: absolute;
    top: -4.651vw; /* 20px */
    bottom: 0;
    left: -4.651vw; /* 20px */
    right: -4.651vw; /* 20px */
    z-index: -1;
}

footer.v3 .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

footer.v3 .list > .list-item {
    width: 100%;
}

.footer-wrapper {
    position: relative;
    padding-top: 4.651vw; /* 20px */
    padding-bottom: 6.977vw; /* 30px */
}

@media only screen and (min-width: 576px) {
    .footer-wrapper {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    footer.v3 {
        border-radius: 24px 24px 0px 0px;
        font-size: 16px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    
    footer.v3::before {
        border-radius: 36px 36px 0px 0px;
        top: -20px;
        left: -20px;
        right: -20px;
    }
}

/* @media only screen and (min-width: 768px) {
    
} */

@media only screen and (min-width: 992px) {
    footer.v3 {
        border-radius: 24px 24px 0px 0px;
        font-size: 16px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 0 5px;
    }

    footer.v3::before {
        border-radius: 36px 36px 0px 0px;
        top: -20px;
        left: -20px;
        right: -20px;
    }

    footer.v3 .list {
        flex-direction: row;
    }

    footer.v3 .list > .list-item {
        width: 22.5%;
    }

    footer.v3 .list > .list-item:nth-child(3n + 1) {
        text-align: left;
    }

    footer.v3 .list > .list-item:nth-child(3n + 2) {
        width: 55%;
    }

    footer.v3 .list > .list-item:nth-child(3n) ul.footer-sm {
        justify-content: flex-end;
    }

    footer.v3 .links {
        line-height: 45px;
    }

    .footer-wrapper {
        padding-top: 29px;
        padding-bottom: 29px;
    }
}

@media only screen and (min-width: 1200px) {
    footer.v3 {
        font-size: 18px;
    }
}

footer.v3.toBottom {
    width: 100%;
    /* position: absolute; */
    position: relative;
    margin-top: -215px;
    left: 0;
    bottom: 0;
}

footer.v3.toAbsBottom {
    width: 100%;
    position: absolute;
    /* position: relative; */
    /* margin-top: -215px; */
    left: 0;
    bottom: 0;
}

footer.v3 br {
    display: block;
}

footer.v3 .pipe {
    display: none;
}

@media only screen and (min-width: 550px) {
    footer.v3 br {
        display: none;
    }

    footer.v3 .pipe {
        display: inline;
    }
}

.footer-slogan {
    text-transform: uppercase;
    font-size: 6.977vw; /* 30px */
    font-weight: bold;
    font-family: var(--rubik);
    margin-bottom: 7.209vw; /* 31px */
}

.footer-slogan span {
    color: #F9C701;
}

footer.v3 .logo {
    width: 24.419vw; /* 105px */
    margin-bottom: 3.256vw; /* 14px */
}

@media only screen and (min-width: 576px) {
    .footer-slogan {
        font-size: 30px;
        margin-bottom: 31px;
    }
    
    footer.v3 .logo {
        width: 105px;
        margin-bottom: 14px;
    }
}

@media only screen and (min-width: 768px) {
    .footer-slogan {
        font-size: 30px;
        margin-bottom: 3px;
    }

    footer.v3 .logo {
        margin-bottom: 7px;
    }
}

@media only screen and (min-width: 992px) {
    .footer-slogan {
        font-size: 38px;
        margin-bottom: 0;
    }

    footer.v3 .logo {
        width: 74px;
        margin-bottom: 0;
    }
}

.area-11 {
    position: relative;
    margin-top: 18.14vw; /* 78px */
}

.area-11-wrapper {
    padding-left: 6.977vw; /* 30px */
}

.area-11 h1.v3 {
    font-size: 8.372vw; /* 36px */
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 37.674vw; /* 162px */
}

.area-11 h1.v3 span.grad {
    background-image: linear-gradient(91deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
}

.area-11 h1.v3 .f20-f24 {
    color: #444;
    font-size: 4.651vw; /* 20px */
}

@media only screen and (min-width: 992px) {
    .area-11 {
        margin-top: 60px;
    }

    .area-11-wrapper {
        padding-left: 50px;
        padding-right: 50px;
    }

    .area-11 h1.v3 {
        font-size: 48px;
        padding-right: 0;
    }

    .area-11 h1.v3 span.grad {
        margin-bottom: 17px;
    }

    .area-11 h1.v3 .f20-f24 {
        font-size: 24px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-11-wrapper {
        padding-left: 126px;
        padding-right: 126px;
    }
}

.the-vibe-scrollable {
    display: grid;
    grid-template-columns: max-content;
    /* width: 100%; */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 13.488vw 0 11.628vw;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    position: relative;
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease-in;
    scroll-behavior: smooth;
}

.the-vibe-scrollable.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1.02);
    scroll-behavior: unset;
}

@media only screen and (min-width: 992px) {
    .the-vibe-scrollable {
        padding: 4.051vw 0; 
    }
}

.the-vibe-scrollable::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.the-vibe {
    display: grid;
    grid-template-rows: repeat(3, max-content);
    grid-auto-flow: column dense;
    gap: 2.093vw 4.651vw; /* 9px 20px */
    font-size: 4.186vw; /* 18px */
    padding: 0 44px 0 0; 
}

@media only screen and (min-width: 992px) {
    .the-vibe {
        grid-template-columns: repeat(autofit, 330px);
        gap: 10px 35px;
        font-size: 20px;
        padding: 0 44px 0 0; 
    }
}

.the-vibe li {
    display: contents;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    /*
      Introduced in Internet Explorer 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.the-vibe li img {
    width: 74.419vw; /* 320px */
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center center;
    border-radius: 24px;
    margin-bottom: 5.116vw; /* 22px */
}

.the-vibe li b {
    width: 74.419vw; /* 320px */
    font-family: var(--rubik);
    font-size: 4.651vw; /* 20px */
    color: #444;
    padding-right: 10px;
    text-transform: uppercase;
}

.the-vibe li p {
    width: 74.419vw; /* 320px */
    padding-right: 16px;
    line-height: 1.35;
}

@media only screen and (min-width: 992px) {
    .the-vibe li img {
        width: 325px;
        margin-bottom: 30px;
    }

    .the-vibe li b {
        width: 325px;
        font-size: 20px;
    }

    .the-vibe li p {
        width: 325px;
    }
}


ul.pagination-v1 {
    display: flex;
    justify-content: end;
    gap: 2.326vw; /* 10px */
    margin-top: -10.93vw; /* 47px */
    margin-right: 2.326vw; /* 10px */
}

@media only screen and (min-width: 992px) {
    ul.pagination-v1 {
        gap: 10px;
        margin-top: -44px;
        margin-right: 0;
    }
}

ul.pagination-v1 li {
    width: 11.163vw; /* 48px */
    height: 11.163vw; /* 48px */
    background-color: #ccced3;
    border-radius: 3.256vw; /* 14px */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
}

ul.pagination-v1 li img {
    width: 4.651vw; /* 20px */
}

@media only screen and (min-width: 992px) {
    ul.pagination-v1 li {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
    
    ul.pagination-v1 li img {
        width: 20px;
    }
}

.a11-shape1 {
    position: absolute;
    width: 60px;
    top: -10%;
    right: 70px;
}

.a11-shape2 {
    position: absolute;
    top: -28%;
    left: 0;
    height: 378px;
    z-index: -10;
}

@media only screen and (min-width: 900px) {
    .a11-shape1 {
        right: 0.579vw; /* 10px */
        width: 8.912vw; /* 154px */
    }
    .a11-shape2 {
        top: -30%;
        height: 33.218vw;/* 574px */
    }
}



/* EVENTS */ 
header.inner-v1 {
    background-image: url(/img/header-v3-event-min450-2x.png), linear-gradient(108deg, #26C1E3 -13.9%, #702BD0 99.92%);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom-left-radius: 8.372vw;
    border-bottom-right-radius: 8.372vw;
    position: relative;
    margin-bottom: 6.279vw;
}

header.inner-v1--style2 {
    margin-bottom: 9.067vw; /* 34px */
}

header.inner-v1--style2 + .section-article {
    text-align: center;
}

header.inner-v1--style2 + .section-article .article-wrapper {
    padding-left: 8.533vw; /* 32px */
    padding-right: 8.533vw; /* 32px */
}

header.inner-v1--style2 + .section-article p {
    font-size: 4.8vw; /* 18px */
}

header.inner-v1--style2 + .section-article p a {
    color: #FAA908;
    text-decoration: none;
}

.inner-v1-wrapper {
    position: relative;
    padding: 23.488vw 2.326vw 10.698vw; /* 101px 10px 46px */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--rubik);
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
}

.inner-v1-wrapper .header-price {
    background: #F9C701;
    border-bottom-left-radius: 4.186vw; /* 18px */
    border-bottom-right-radius: 4.186vw; /* 18px */
    color: #702AD0;
    font-weight: 700;
    font-size: 4.186vw; /* 18px */
    line-height: 1.16;
    display: block;
    padding: 1.86vw 1.163vw 3.023vw; /* 8px 5px 13px */
    min-width: 39.07vw; /* 168px */
    text-align: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* --- special event custom header image --- */

.eventTop-customImage {
    background-image: url('/img/beta-cp-26-Oct2023_1440.png') !important;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 320px !important;
}

@media only screen and (min-width: 1920px) {
    .eventTop-customImage {
        background-image: url('/img/beta-cp-26-Oct2023_1920.png') !important;
        height: 320px !important;
    }
}

@media only screen and (max-width: 1100px) {
    .eventTop-customImage {
        background-image: url('/img/beta-cp-26-Oct2023_tablet.png') !important;
    }
}

@media only screen and (max-width: 720px) {
    .eventTop-customImage {
        background-image: url('/img/beta-cp-26-Oct2023_mobile.png') !important;
    }
}

/* END --- special event custom header image --- */

@media only screen and (min-width: 992px) {
    header.inner-v1 {
        background-image: url(/img/header-v3-pattern.png), linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-position: right bottom;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
        margin-bottom: 0;
    }

    .inner-v1-wrapper {
        padding: 183px 25px 73px;
        text-align: left;
    }
    
    .inner-v1-wrapper .header-price {
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        font-size: 18px;
        padding: 8px 5px 13px;
        min-width: 168px;
        left: initial;
        right: 110px;
        transform: none;
    }
}

@media only screen and (min-width: 1200px) {
    .inner-v1-wrapper {
        padding-left: 238px;
        padding-right: 238px;
    }
}

header.inner-v1 span {
    position: relative;
    z-index: 2;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    -webkit-text-stroke: 1px #6444d4;
}

header.inner-v1--style2 span {
    font-family: var(--rubik);
    color: #702AD0;
    font-size: 4.267vw; /* 16px */
    font-weight: 700;
    -webkit-text-stroke: unset;
}

header.inner-v1 span.f-64 {
    font-size: 32px;
}

@media only screen and (min-width: 730px) {
    header.inner-v1 span.f-64 {
        font-size: 64px;
    }
}

header.inner-v1 span br.hidable {
    display: block;
}

header.inner-v1 span img.mobile {
    position: absolute;
    top: -50px;
    left: 23px;
}

header.inner-v1 span img.desktop {
    display: none;
}

@media only screen and (min-width: 650px) {
    header.inner-v1 span {
        font-size: 48px;
        -webkit-text-stroke: unset;
    }
    header.inner-v1 span br.hidable {
        display: none;
    }
    header.inner-v1 span img.desktop {
        display: block;
        position: absolute;
        top: unset;
        bottom: -70px;
        left: 68px;
    }
    header.inner-v1 span img.mobile {
        display: none;
    }
}

@media only screen and (min-width: 950px) {
    header.inner-v1 span img.desktop {
        bottom: -50px;
        left: 58px;
    }
}

header.inner-v1 span img.about {
    position: absolute;
    left: 6px;
    bottom: -85px;
}

br.br1180 {
    display: block;
}

@media only screen and (min-width: 730px) {
    header.inner-v1 span img.about {
        left: 6px;
        bottom: -15px;
    }
}

@media only screen and (min-width: 1180px) {
    br.br1180 {
        display: none;
    }

    header.inner-v1 span img.about {
        left: 76px;
        bottom: -80px;
    }
}

img.inner-v1-img1 {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

img.inner-v1-img2 {
    position: absolute;
    top: -88px;
    right: 0;
    display: none;
}

img.inner-v1-img3 {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
}

img.inner-v1-img4 {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    height: 100%;
}

@media only screen and (min-width: 650px) {
    img.inner-v1-img3 {
        height: 100%;
    }
    /*img.inner-v1-img4 {
        height: 100%;
    }*/
}

@media only screen and (min-width: 1100px) {
    img.inner-v1-img1 {
        display: block;
    }
    img.inner-v1-img2 {
        display: block;
    }
    img.inner-v1-img3 {
        display: none;
    }
    img.inner-v1-img4 {
        display: none;
    }
}

img.inner-v1-img5 {
    position: absolute;
    top: 245px;
    right: 0;
    display: block;
}

@media only screen and (min-width: 820px) {
    img.inner-v1-img5 {
        top: 0;
        right: 0;
    }
}


img.inner-v1-img6 {
    position: absolute;
    display: block;
    bottom: -10%;
    left: 5%;
    width: 71px;
}

@media only screen and (min-width: 820px) {
    img.inner-v1-img6 {
        width: 94px;
        bottom: -16%;
    }
}

@media only screen and (min-width: 1360px) {
    img.inner-v1-img6 {
        left: -10%;
    }
}

img.inner-v1-img7 {
    position: absolute;
    top: -9%;
    left: 4%;
    width: 54px;
}

@media only screen and (min-width: 920px) {
    img.inner-v1-img7 {
        top: -25.2%;
        left: 36%;
        width: 100px;
    }
}



.inner-v1 .header-split-2 {
    /* width: 1200px; */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    font-size: 4.267vw; /* 16px */
    color: #fff;
    text-transform: initial;
    padding: 5.333vw 3.467vw 3.467vw; /* 20px 13px 13px */
    position: relative;
    z-index: 2;
    text-align: center;
    text-wrap: wrap;
    align-items: center;
    gap: 2.4vw; /* 9px */
    justify-items: center;
}

@media only screen and (min-width: 992px) {
    .inner-v1 .header-split-2 {
        grid-template-columns: 1fr 417px;
        text-align: initial;
        font-size: 18px;
        gap: 10px;
        padding: 142px 50px 64px;
    }
}

@media only screen and (min-width: 1200px) {
    .inner-v1 .header-split-2 {
        padding-left: 0;
        padding-right: 0;
        max-width: 1170px;
    }
}

header.inner-v1 .hs2-txt1 {
    font-size: 8.533vw; /* 32px */
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--rubik);
    margin-bottom: 2.4vw; /* 9px */
}

header.inner-v1 .hs2-txt2 {
    font-size: 4.267vw; /* 16px */
    font-weight: 500;
    line-height: 1.1875;
    font-family: var(--rubik);
    padding-left: 5.6vw; /* 21px */
    padding-right: 5.6vw; /* 21px */
}

header.inner-v1 .hs2-txt3 {
    line-height: 1.4;
    text-wrap: balance;
}

header.inner-v1 .hs2-txt3 a {
    color: #FDD246;
    text-decoration: none;
}

header.inner-v1 .hs2-txt3 span.no-wrap {
    all: unset;
    text-wrap: nowrap;
}

@media only screen and (max-width: 767px) {
    header.inner-v1 .hs2-txt1,
    header.inner-v1 .hs2-txt2,
    header.inner-v1 .hs2-txt3 {
        text-shadow: 4px 4px 40px rgba(20, 10, 29, 0.6);
    }
}

@media only screen and (min-width: 992px) {
    header.inner-v1 .hs2-txt1 {
        font-size: 44px;
        margin-bottom: 0;
    }

    header.inner-v1 .hs2-txt2 {
        font-size: 22px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1200px) {
    header.inner-v1 .hs2-txt1 {
        font-size: 64px;
    }

    header.inner-v1 .hs2-txt2 {
        font-size: 24px;
    }

    header.inner-v1 .hs2-txt3 {
        font-size: 20px;
    }
}

hr.w175 {
    display: block;
    width: 175px;
    height: 5px;
    background-color: #fff;
    border-radius: 5px;
    margin: 20px auto;
    border: 0;
}

@media only screen and (min-width: 992px) {
    hr.w175 {
        margin: 18px 0;
    }
}

img.he-squiggly-1 {
    display: none;
}

img.he-squiggly-2 {
    display: none;
}

img.he-squiggly-3 {
    display: block;
    position: absolute;
    left: 6px;
    bottom: 55px;
}

@media only screen and (min-width: 720px) {
    img.he-squiggly-1 {
        display: block;
        position: absolute;
        left: 0;
        top: 35px;
    }
    img.he-squiggly-2 {
        display: block;
        position: absolute;
        left: 0;
        bottom: 25px;
    }
    img.he-squiggly-3 {
        display: none;
    }
}


header.inner-v1 .header-event {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-content: center;
    font-family: var(--nunito);
    text-transform: none;
    padding: 0;
}

header.inner-v1 .header-event span {
    font-weight: 700;
    font-size: 4.186vw; /* 18px */
    text-transform: none;
    -webkit-text-stroke: 0;
    
}

header.inner-v1 .header-event span.he-title-big {
    font-family: var(--rubik);
    font-size: 7.907vw; /* 34px */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 3.023vw; /* 13px */
}

header.inner-v1 button.orange-btn {
    margin-top: 13.256vw; /* 57px */
}

@media only screen and (max-width: 991px) {
    header.inner-v1 .header-event {
        text-shadow: 4px 4px 40px rgba(20, 10, 29, 0.60);
    }
}

@media only screen and (min-width: 992px) {
    header.inner-v1 .header-event {
        justify-items: flex-start;
        justify-content: flex-start;
        align-content: start;
    }

    header.inner-v1 .header-event span {
        font-size: 20px;
    }

    header.inner-v1 .header-event span.he-title-big {
        font-size: 48px;
        -webkit-text-stroke: 0;
        margin-bottom: 2px;
    }

    header.inner-v1 button.orange-btn {
        margin-top: 56px;
    }
}



/* header inner */
header.inner-event {
    position: relative;
}

header.inner-event:before {
    content: '';
    background: transparent url('/img/event-inner/hero-pattern-mobile.png') center top no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.inner-event-wrapper {
    padding-top: 12.53vw; /* 47px */
    padding-bottom: 18.13vw; /* 68px */
    padding-left: 3.47vw; /* 13px */
    padding-right: 3.47vw; /* 13px */
}

.inner-event-wrapper .content-block {
    position: relative;
}

.inner-event-wrapper .content-headings {
    text-align: center;
}

.inner-event-wrapper .content-description {
    padding-top: 13.33vw; /* 50px */
}

.inner-event-wrapper .content-description > .list {
    display: flex;
    flex-direction: column;
    gap: 10.67vw; /* 40px */
}

.inner-event-wrapper h2 {
    color: #fff;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 8vw; /* 30px */
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.inner-event-wrapper h2 span {
    color: #F9C701;
}

.inner-event-wrapper h2 u {
    position: relative;
    display: block;
    text-decoration: none;
}

.inner-event-wrapper h2 u:before {
    content: '';
    background: transparent url('/img/event-inner/underline-mobile.svg') center center no-repeat;
    background-size: contain;
    width: 97.07vw; /* 364px */
    height: 9.07vw; /* 34px */
    position: absolute;
    bottom: -4.27vw; /* -16px */
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.inner-event-wrapper ul {
    margin-bottom: 3.2vw; /* 12px */
    margin-left: 13.33vw; /* 50px */
    margin-right: 13.33vw; /* 50px */
    color: #fff;
}

.inner-event-wrapper ul li {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 4.8vw; /* 18px */
    position: relative;
    padding-top: 7.47vw; /* 28px */
    padding-bottom: 7.47vw; /* 28px */
    padding-left: 16vw; /* 60px */
}

.inner-event-wrapper ul li:before {
    content: '';
    background: linear-gradient(270deg, #F9C701 -3.06%, rgba(249, 199, 1, 0) 101.68%);
    width: 104px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.inner-event-wrapper ul li:last-child:before {
    content: none;
}

.inner-event-wrapper ul li i {
    width: 10.13vw; /* 38px */
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.inner-event-wrapper ul li i > img {
    width: 100%;
    height: auto;
    display: block;
}

.inner-event-wrapper .btn {
    border-radius: 44.27vw; /* 166px */
    background: #FFF275;
    background-image: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    color: #702AD0;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 6.4vw; /* 24px */
    text-transform: capitalize;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.13vw; /* 23px */
    height: 17.6vw; /* 66px */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.inner-event-wrapper .btn:hover ,
.inner-event-wrapper .btn:focus,
.inner-event-wrapper .btn:active {
    background: #702AD0;
    color: #fff;
}

.inner-event-wrapper .btn:hover i > img,
.inner-event-wrapper .btn:focus i > img,
.inner-event-wrapper .btn:active i > img {
    display: none;
}

.inner-event-wrapper .btn:hover i > img.alt,
.inner-event-wrapper .btn:focus i > img.alt,
.inner-event-wrapper .btn:active i > img.alt {
    display: block;
}

.inner-event-wrapper .btn i {
    width: 8.27vw; /* 31px */
}

.inner-event-wrapper .btn i > img {
    display: block;
    width: 100%;
    height: auto;
}

.inner-event-wrapper .btn i > img.alt {
    display: none;
}

.inner-event-wrapper .event-banner {
    position: relative;
}

.event-detail-img {
    max-height: 325px;
}

.inner-event-wrapper .event-banner > img {
    display: block;
    width: 100%;
    height: 100%; /* auto; */
    object-fit: cover;
}

.inner-event-wrapper .event-banner .event-banner-footer {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10.179166793823242px);
    border-radius: 3.2vw; /* 12px */
    display: flex;
    align-items: center;
    gap: 4.27vw; /* 16px */
    color: #fff;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 4.8vw; /* 18px */
    padding: 1.07vw 3.47vw; /* 4px 13px */
    position: absolute;
    bottom: 3.2vw; /* 12px */
    left: 3.2vw; /* 12px */
    right: 3.2vw; /* 12px */
}

.inner-event-wrapper .event-banner .event-banner-footer > img {
    width: auto;
    height: 8.53vw; /* 32px */
    margin-left: auto;
}

.inner-event-wrapper .event-banner .event-banner-footer i > img {
    width: 7.2vw; /* 27px */
    height: auto;
}

.inner-event-wrapper .event-banner .users-list {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.inner-event-wrapper .event-banner .users-list .user-item {
    width: 8.27vw; /* 31px */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: #fff;
    position: relative;
    margin-right: -2.13vw; /* -8px */
    overflow: hidden;
}

.inner-event-wrapper .event-banner .users-list .user-item:last-child {
    margin-right: 0;
}

.inner-event-wrapper .event-banner .users-list .user-item:nth-child(1) {
    z-index: 2;
}

.inner-event-wrapper .event-banner .users-list .user-item:nth-child(2) {
    z-index: 1;
}

.inner-event-wrapper .event-banner .users-list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-event-wrapper .content-promo {
    color: #fff;
    padding-top: 7.2vw; /* 27px */
    padding-left: 2.67vw; /* 10px */
    padding-right: 2.67vw; /* 10px */
    text-align: center;
}

.inner-event-wrapper .content-promo .list {
    display: flex;
    flex-direction: column;
    gap: 7.47vw; /* 28px */ 
}

.inner-event-wrapper .content-promo img {
    display: block;
    width: 30.93vw; /* 116px */
    height: auto;
    margin: 0 auto 7.47vw; /* 28px */
}

.inner-event-wrapper .content-promo span {
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 5.33vw; /* 20px */
}

@media only screen and (min-width: 768px) {
    header.inner-event:before {
        background: transparent url('/img/event-inner/hero-pattern-tablet.png') center top no-repeat;
        background-size: cover;
    }

    .inner-event-wrapper {
        padding-top: 47px;
        padding-bottom: 68px;
        padding-left: 13px;
        padding-right: 13px;
    }

    .inner-event-wrapper .content-description {
        padding-top: 50px;
    }

    .inner-event-wrapper .content-description > .list {
        gap: 40px;
        flex-direction: row;
    }

    .inner-event-wrapper h2 {
        font-size: 30px;
    }

    .inner-event-wrapper h2 u:before {
        width: 100%;
        height: 34px;
        bottom: -16px;
    }

    .inner-event-wrapper ul {
        margin-bottom: 12px;
        margin-left: 50px;
        margin-right: 50px;
    }

    .inner-event-wrapper ul li {
        font-size: 18px;
        padding-top: 28px;
        padding-bottom: 28px;
        padding-left: 60px;
    }

    .inner-event-wrapper ul li i {
        width: 38px;
    }

    .inner-event-wrapper .btn {
        border-radius: 166px;
        font-size: 20px;
        gap: 16px;
        width: 276px;
        height: 62px;
        margin-left: 50px;
    }

    .inner-event-wrapper .btn i {
        width: 26px;
    }

    .inner-event-wrapper .event-banner {
        /* max-width: 480px; */
        max-width: 530px;
        margin-left: auto;
        margin-right: auto;
    }

    .event-detail-img {
        max-height: 455px; /* 425px; */
        height: 100%;
    }

    .inner-event-wrapper .event-banner .event-banner-footer {
        border-radius: 12px;
        gap: 16px;
        font-size: 18px;
        padding: 4px 13px;
        bottom: 12px;
        left: 12px;
        right: 12px;
    }

    .inner-event-wrapper .event-banner .event-banner-footer > img {
        height: 32px;
    }

    .inner-event-wrapper .event-banner .event-banner-footer i > img {
        width: 27px;
    }

    .inner-event-wrapper .event-banner .users-list .user-item {
        width: 31px;
        margin-right: -8px;
    }

    .inner-event-wrapper .content-promo {
        padding-top: 27px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .inner-event-wrapper .content-promo .list {
        gap: 28px;
        flex-direction: row;
        justify-content: center;
    }

    .inner-event-wrapper .content-promo img {
        width: 116px;
        margin: 0 auto 28px;
    }

    .inner-event-wrapper .content-promo span {
        font-size: 20px;
    }

    /*IRL event neighborhood - displays same line on desktop, 
    hide mobile display on next line */
    #smlrnLocNbrhood {
        display: none !important;
    }

}

@media only screen and (max-width: 767px) {

    /*IRL event neighborhood - hide desktop display on same line, 
    show mobile display on next line */
    #smlrnLocNbrhood {
        display: inline-flex;
    }

    #lgscrnLocNbrhood {
        display: none !important;
    }
}

@media only screen and (min-width: 992px) {
    .inner-event-wrapper {
        padding: 128px 30px 90px;
    }

    .inner-event-wrapper h2 {
        font-size: 55px;
    }

    .inner-event-wrapper h2 br {
        display: none;
    }

    .inner-event-wrapper h2 u {
        display: inline-block;
    }

    .inner-event-wrapper h2 u:before {
        background: transparent url('/img/event-inner/underline-tablet.svg') center center no-repeat;
        background-size: contain;
        width: calc(100% + 40px);
        height: 35px;
        bottom: -10px;
    }

    .inner-event-wrapper ul {
        margin-left: 0;
        margin-right: 0;
    }

    .inner-event-wrapper ul li {
        font-size: 20px;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 51px;
    }

    .inner-event-wrapper ul li:first-child {
        padding-top: 11px;
    }

   /*  .inner-event-wrapper ul li:first-child i {
        top: calc(50% - 6px);
    } */

    .inner-event-wrapper ul li i {
        width: 32px;
    }

    .inner-event-wrapper .btn {
        margin-left: 0;
    }

    .inner-event-wrapper .content-description {
        padding-left: 30px;
        padding-right: 30px;
    }

    .inner-event-wrapper .content-description > .list {
        justify-content: center;
    }

    .inner-event-wrapper .content-description > .list > .list-item:nth-child(even) {
        width: 414px;
    }

    .inner-event-wrapper .content-promo {
        padding-top: 86px;
    }

    /*IRL catalog page event neighborhood - displays same line on desktop, 
    hide mobile display on next line */
    #smlrnLoctag {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {

    /*IRL catalog event neighborhood - hide desktop display on same line, 
    show mobile display on next line */
    #smlrnLoctag {
        display: inline-flex;
    }

    #lgscrnLoctag {
        display: none !important;
    }
}

@media only screen and (min-width: 1200px) {
    .inner-event-wrapper {
        padding-left: 76px;
        padding-right: 76px;
    }

    .inner-event-wrapper .content-description {
        padding-left: 71px;
        padding-right: 71px;
    }
}

@media only screen and (min-width: 1400px) {
    header.inner-event:before {
        background: transparent url('/img/event-inner/hero-desktop.png') center top no-repeat;
        background-size: cover;
        height: 1600px;
    }

    .inner-event-wrapper {
        padding: 138px 50px 66px 95px;
    }

    .inner-event-wrapper h2 {
        font-size: 64px;
    }

    .inner-event-wrapper h2 u:before {
        background: transparent url('/img/event-inner/underline.svg') center center no-repeat;
        background-size: contain;
        width: calc(100% + 43px);
        height: 40px;
        bottom: -10px;
        left: -5px;
        transform: none;
    }

    .inner-event-wrapper .content-description {
        padding-top: 56px;
        padding-left: 80px;
        padding-right: 80px;
    }

    .inner-event-wrapper .content-description > .list {
        gap: 44px;
        max-width: 1044px;
        margin-left: auto;
        margin-right: auto;
    }

    .inner-event-wrapper .content-description > .list > .list-item:nth-child(odd) {
        display: inline-flex;
        flex-direction: column;
        width: calc(100% - 544px);
    }

    .inner-event-wrapper .content-description > .list > .list-item:nth-child(even) {
       /*  width: 480px; */
        width: 530px;
    }

    .inner-event-wrapper ul {
        margin-bottom: auto;
    }

    .inner-event-wrapper ul li {
        font-size: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 60px;
    }

    .inner-event-wrapper ul li i {
        width: 38px;
    }

    .inner-event-wrapper ul li:first-child {
        padding-top: 14px;
    }

    /* .inner-event-wrapper ul li:first-child i {
        top: calc(50% - 6px);
    } */

    .inner-event-wrapper .btn {
        font-size: 24px;
        gap: 18px;
        width: 321px;
        height: 72px;
    }

    .inner-event-wrapper .btn i {
        width: 31px;
    }

    .inner-event-wrapper .event-banner .event-banner-footer {
        border-radius: 16px;
        gap: 22px;
        font-size: 24px;
        padding: 5px 18px;
        bottom: 16px;
        left: 16px;
        right: 16px;
    }

    .inner-event-wrapper .event-banner .event-banner-footer > img {
        height: 44px;
    }

    .inner-event-wrapper .event-banner .event-banner-footer i > img {
        width: 38px;
    }

    .inner-event-wrapper .event-banner .users-list .user-item {
        width: 43px;
        margin-right: -13px;
    }

    .inner-event-wrapper .content-promo .list {
        gap: 120px;
    }
}



.section-mixer {
    background: transparent url('/img/event-inner/mixer-bg-mobile.png') center top no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.mixer-wrapper {
    padding: 10.67vw 8.53vw 16vw; /* 40px 32px 60px */
    color: #fff;
}

.mixer-wrapper .content-headings {
    text-align: left;
}

.mixer-wrapper .content-description {
    padding-top: 11.73vw; /* 44px */
}

.mixer-wrapper .content-description > .list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5.87vw; /* 22px */
}

.mixer-wrapper .content-footer {
    padding-top: 13.33vw; /* 50px */
    margin-left: -5.6vw; /* -21px */
    margin-right: -5.6vw; /* -21px */
    text-align: center;
}

.mixer-wrapper .mixer-item {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px);
    border-radius: 7.47vw; /* 28px */
    padding: 10.13vw 13.87vw 10.13vw 5.87vw; /* 38px 52px 38px 22px */
    text-align: left;
    overflow: hidden;
}

.mixer-wrapper .mixer-logo {
    width: 21.33vw; /* 80px */
    display: block;
    margin-bottom: 3.47vw; /* 13px */
}

.mixer-wrapper h2 {
    color: #F9C701;
    font-family: var(--bebas);
    font-weight: 400;
    font-size: 46.93vw; /* 176px */
    text-transform: uppercase;
}

.mixer-wrapper h2 span {
    font-size: calc(156 / 176 * 1em);
    display: block;
    margin-top: calc(60 / 176 * -1em);
    margin-bottom: calc(30 / 176 * -1em);
}

.mixer-wrapper h5 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 9.6vw; /* 36px */
    display: block;
    margin-bottom: 8.8vw; /* 33px */
}

.mixer-wrapper h5:last-child {
    margin-bottom: 0;
}

.mixer-wrapper .mixer-item h3 {
    color: #F9C701;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 4.27vw; /* 16px */
    display: block;
    text-align: left;
    margin-bottom: 3.47vw; /* 13px */
}

.mixer-wrapper .mixer-item h3:last-child {
    margin-bottom: 0;
}

.mixer-wrapper .mixer-item p {
    font-family: var(--nunito);
    font-weight: 500;
    font-size: 4.27vw; /* 16px */
}

.mixer-wrapper .content-headings p {
    font-weight: 700;
    font-size: 4.8vw; /* 18px */
    position: relative;
    display: block;
    padding-left: 4.27vw; /* 16px */
}

.mixer-wrapper .content-headings p::before {
    content: '';
    background-color: #F9C701;
    border-radius: 8.8vw; /* 33px */
    width: 1.6vw; /* 6px */
    position: absolute;
    top: 2.67vw; /* 10px */
    bottom: 2.67vw; /* 10px */
    left: 0;
}

.mixer-wrapper .highlight {
    color: #F9C701;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 4vw; /* 15px */
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border: 2px solid #fff;
    border-radius: 16vw; /* 60px */
    padding: 2.93vw; /* 11px */
    text-align: center;
    display: block;
    margin-bottom: 12.8vw; /* 48px */
}

.mixer-wrapper .highlight:last-child {
    margin-bottom: 0;
}

.mixer-wrapper .content-footer p {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 6.4vw; /* 24px */
}

.mixer-wrapper .content-footer p + p {
    margin-top: 6.4vw; /* 24px */
}

.mixer-wrapper .content-footer p span {
    color: #F9C701;
}

.mixer-wrapper .btn {
    border-radius: 44.27vw; /* 166px */
    background: #FFF275;
    background-image: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    color: #702AD0;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 6.4vw; /* 24px */
    text-transform: capitalize;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.8vw; /* 18px */
    height: 17.6vw; /* 66px */
    margin-top: 1.6vw; /* 6px */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.mixer-wrapper .btn:hover ,
.mixer-wrapper .btn:focus,
.mixer-wrapper .btn:active {
    background: #702AD0;
    color: #fff;
}

.mixer-wrapper .btn:hover i > img,
.mixer-wrapper .btn:focus i > img,
.mixer-wrapper .btn:active i > img {
    display: none;
}

.mixer-wrapper .btn:hover i > img.alt,
.mixer-wrapper .btn:focus i > img.alt,
.mixer-wrapper .btn:active i > img.alt {
    display: block;
}

.mixer-wrapper .btn i {
    width: 8.27vw; /* 31px */
}

.mixer-wrapper .btn i > img {
    display: block;
    width: 100%;
    height: auto;
}

.mixer-wrapper .btn i > img.alt {
    display: none;
}

@media only screen and (min-width: 768px) {
    .mixer-wrapper {
        padding: 40px 32px 60px;
    }

    .mixer-wrapper .content-description {
        padding-top: 44px;
    }

    .mixer-wrapper .content-description > .list {
        gap: 22px;
        flex-direction: row;
        justify-content: center;
    }

    .mixer-wrapper .content-description > .list > .list-item {
        width: calc(100 / 2 * 1% - 22px);
    }

    .mixer-wrapper .content-footer {
        padding-top: 50px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .mixer-wrapper .mixer-item {
        border-radius: 28px;
        padding: 38px 52px 38px 22px;
        height: 100%;
    }

    .mixer-wrapper .mixer-logo {
        width: 80px;
        margin-bottom: 13px;
    }

    .mixer-wrapper h2 {
        font-size: 176px;
    }

    .mixer-wrapper h5 {
        font-size: 36px;
        margin-top: -34px;
        margin-bottom: 33px;
    }

    .mixer-wrapper .mixer-item h3 {
        font-size: 16px;
        margin-bottom: 13px;
    }

    .mixer-wrapper .mixer-item p {
        font-size: 16px;
    }

    .mixer-wrapper .content-headings p {
        font-size: 18px;
        padding-left: 16px;
    }

    .mixer-wrapper .content-headings p::before {
        border-radius: 33px;
        width: 6px;
        top: 10px;
        bottom: 10px;
    }

    .mixer-wrapper .highlight {
        font-size: 20px;
        border-radius: 60px;
        padding: 8px;
        display: inline-block;
        min-width: 409px;
        margin-bottom: 17px;
    }

    .mixer-wrapper .content-footer p {
        font-size: 24px;
    }

    .mixer-wrapper .content-footer p + p {
        margin-top: 24px;
    }

    .mixer-wrapper .btn {
        border-radius: 166px;
        font-size: 24px;
        gap: 18px;
        height: 66px;
        margin-top: 6px;
        margin-left: auto;
        margin-right: auto;
    }

    .mixer-wrapper .btn i {
        width: 31px;
    }
}

@media only screen and (min-width: 992px) {
    .section-mixer {
        background: transparent url('/img/event-inner/mixer-bg.png') center top no-repeat;
        background-size: cover;
        border-radius: 60px;
    }

    .mixer-wrapper {
        padding: 18px 0px 58px;
    }

    .mixer-wrapper .content-headings {
        max-width: 675px;
        margin-left: auto;
        margin-right: auto;
    }

    .mixer-wrapper .content-description {
        max-width: 1130px;
        margin-left: auto;
        margin-right: auto;
    }

    .mixer-wrapper .content-description > .list > .list-item {
        width: calc(100 / 3 * 1% - 15px);
    }

    .mixer-wrapper .content-footer {
        padding-top: 47px;
        max-width: 830px;
        margin-left: auto;
        margin-right: auto;
    }

    .mixer-wrapper .mixer-item {
        padding: 23px 21px 28px 27px;
    }

    .mixer-wrapper .mixer-logo {
        width: 116px;
        margin-bottom: 15px;
    }

    .mixer-wrapper h2 {
        font-size: 176px;
    }

    .mixer-wrapper h2 span {
        display: inline;
        font-size: inherit;
        margin: 0;
    }

    .mixer-wrapper .mixer-item h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .mixer-wrapper .content-headings p {
        font-size: 20px;
    }

    .mixer-wrapper .mixer-item p {
        font-size: 18px;
    }

    .mixer-wrapper .content-footer p + p {
        margin-top: 34px;
    }

    .mixer-wrapper .btn {
        width: 377px;
        height: 72px;
        margin-top: 6px;
    }
}

@media only screen and (min-width: 1600px) {
    .section-mixer {
        max-width: 1366px;
        margin-left: auto;
        margin-right: auto;
    }
}



.steps-wrapper {
    color: #fff;
    padding: 11.73vw 4vw; /* 44px 15px */
}

.steps-wrapper h2 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 6.93vw; /* 26px */
    text-align: center;
    display: block;
    margin-bottom: 14.13vw; /* 53px */
}

.steps-wrapper h6 {
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 4.8vw; /* 18px */
    text-align: center;
    display: block;
}

.steps-wrapper h6 a {
    color: #F9C701;
    text-decoration: underline;
}

.steps-wrapper h2:last-child {
    margin-bottom: 0;
}

.steps-wrapper .steps-list > .list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.steps-wrapper .steps-list > .list .list-item {
    position: relative;
    width: 100%;
}

.steps-wrapper .steps-list > .list .list-item:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.steps-wrapper .steps-list > .list .list-item:nth-child(3) .step-icon,
.steps-wrapper .steps-list > .list .list-item:nth-child(4) .step-icon {
    width: 17.07vw; /* 64px */
}

.steps-wrapper .steps-list > .list .list-item:nth-child(5) .step-icon {
    width: 18.13vw; /* 68px */
}

.steps-wrapper .steps-list .step-icon {
    width: 15.47vw; /* 58px */
    display: block;
    margin-bottom: 5.6vw; /* 21px */
}

.steps-wrapper .steps-list .step-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.steps-wrapper .steps-list h5 {
    color: #F9C701;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 5.33vw; /* 20px */
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.87vw; /* 7px */
}

.steps-wrapper .steps-list p {
    font-weight: 500;
    font-size: 4.27vw; /* 16px */
    max-width: 70.4vw; /* 264px */
}

@media only screen and (max-width: 767.9px) {
    .steps-wrapper .steps-list {
        margin-bottom: 10.93vw; /* 41px */
    }

    .steps-wrapper .steps-list > .list {
        margin: -7.07vw 0; /* -26.5px */
    }

    .steps-wrapper .steps-list > .list .list-item {
        padding: 7.07vw 0 7.07vw 6.4vw; /* 26.5px  0 26.5px 24px*/
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(odd):before {
        
        border-top-right-radius: 10.67vw; /* 40px */
        border-bottom-right-radius: 10.67vw; /* 40px */
        left: 55px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(even):before {
        
        border-top-left-radius: 10.67vw; /* 40px */
        border-bottom-left-radius: 10.67vw; /* 40px */
        right: 55px;
    }
}

@media only screen and (max-width: 991.9px) {
    .steps-wrapper .steps-list {
        margin-bottom: 41px;
    }

    .steps-wrapper .steps-list > .list {
        margin: -26.5px auto;
        max-width: 300px;
    }

    .steps-wrapper .steps-list > .list .list-item {
        padding: 26.5px 0 26.5px 24px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(odd):before {
        border-top: 2px solid #F9C701;
        border-bottom: 2px solid #F9C701;
        border-right: 2px solid #F9C701;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        left: 55px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(even):before {
        border-top: 2px solid #F9C701;
        border-bottom: 2px solid #F9C701;
        border-left: 2px solid #F9C701;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        right: 55px;
    }

    .steps-wrapper .steps-list > .list .list-item + .list-item:before {
        top: -2px
    }
}

@media only screen and (min-width: 768px) {
    .steps-wrapper {
        padding: 44px 15px;
    }

    .steps-wrapper h2 {
        font-size: 26px;
        margin-bottom: 53px;
    }

    .steps-wrapper h6 {
        font-size: 18px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(3) .step-icon,
    .steps-wrapper .steps-list > .list .list-item:nth-child(4) .step-icon {
        width: 64px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(5) .step-icon {
        width: 68px;
    }

    .steps-wrapper .steps-list .step-icon {
        width: 58px;
        margin-bottom: 21px;
    }

    .steps-wrapper .steps-list h5 {
        font-size: 20px;
        margin-bottom: 7px;
    }

    .steps-wrapper .steps-list p {
        font-size: 16px;
        max-width: 264px;
    }
}

@media only screen and (min-width: 992px) {
    .steps-wrapper {
        padding: 64px 0px 52px;
    }

    .steps-wrapper .steps-list > .list {
        gap: 8px;
        flex-direction: row;
        justify-content: center;
        margin: 0px 0px 80px;
    }

    .steps-wrapper .steps-list > .list > .list-item {
        width: calc(100 / 3 * 1% - 16px);
        padding: 37px 30px 40px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }

    .steps-wrapper .steps-list > .list .list-item:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: calc(50% - 40px);
        border-top: 2px solid #F9C701;
        border-bottom: 2px solid #F9C701;
        border-left: 2px solid #F9C701;
        border-right: none;
        border-radius: 40px 0px 0 40px;
    }

    .steps-wrapper .steps-list > .list .list-item:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: calc(50% - 40px);
        border-top: 2px solid #F9C701;
        border-bottom: 2px solid #F9C701;
        border-right: 2px solid #F9C701;
        border-left: none;
        border-radius: 0px 40px 40px 0px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(n + 4) {
        margin-top: -10px;
    }

    .steps-wrapper .steps-list .step-icon {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 0;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(n + 4) .step-icon {
        top: initial;
        bottom: 0;
        transform: translate(-50%, 50%);
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(3) .step-icon {
        width: 72px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(4) .step-icon {
        width: 66px;
    }

    .steps-wrapper .steps-list > .list .list-item:nth-child(5) .step-icon {
        width: 69px;
    }

    .steps-wrapper h2 {
        font-size: 36px;
        margin-bottom: 90px;
    }

    .steps-wrapper h6 {
        font-size: 20px;
    }

    .steps-wrapper .steps-list p {
        font-size: 20px;
        max-width: 100%;
    }
}



.section-checklist {
    margin-top: 11.73vw; /* 44px */
    margin-bottom: 11.73vw; /* 44px */
}

.checklist-wrapper {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 7.47vw; /* 28px */
    color: #fff;
    text-align: center;
    padding: 9.6vw 3.73vw; /* 36px 14px */
    margin-left: 3.47vw; /* 13px */
    margin-right: 3.47vw; /* 13px */
    position: relative;
    overflow: hidden;
}

.checklist-wrapper:before {
    content: '';
    background: transparent url('/img/event-inner/checklist-bg-mobile.png') center top no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.checklist-wrapper h2 {
    color: #F9C701;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 7.47vw; /* 28px */
    display: block;
    text-transform: uppercase;
    margin-bottom: 7.2vw; /* 27px */
}

.checklist-wrapper .list {
    display: flex;
    flex-direction: column;
    margin-bottom: 8.53vw; /* 32px */
    position: relative;
    z-index: 1;
}

.checklist-wrapper .list > .list-item {
    width: 100%;
    position: relative;
    padding: 8.27vw 4.27vw; /* 31px 16px */
}

.checklist-wrapper .list > .list-item + .list-item {
    margin-top: -2px;
}

.checklist-wrapper .list > .list-item:before {
    content: '';
    position: absolute;
    top: 8.27vw; /* 31px */
    bottom: 0;
    left: 0;
    right: 9.33vw; /* 35px */
    border-bottom: 2px solid #F9C701;
    border-left: 2px solid #F9C701;
    border-bottom-left-radius: 40px;
    z-index: -1;
}

.checklist-wrapper .list > .list-item:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8.27vw; /* 31px */
    left: 9.33vw; /* 35px */
    right: 0;
    border-top: 2px solid #F9C701;
    border-right: 2px solid #F9C701;
    border-top-right-radius: 40px;
    z-index: -1;
}

.checklist-wrapper .list > .list-item:first-child:after {
    left: 0;
}

.checklist-wrapper .list > .list-item:last-child:before {
    right: 0;
}

.checklist-wrapper .list > .list-item p {
    font-family: var(--nunito);
}

.checklist-wrapper .list > .list-item i {
    display: block;
    width: 9.87vw; /* 37px */
    margin-bottom: 4.27vw; /* 16px */
    margin-left: auto;
    margin-right: auto;
}

.checklist-wrapper .list > .list-item i > img {
    display: block;
    width: 100%;
    height: auto;
}

.checklist-wrapper h5 {
    color: #F9C701;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 4.27vw; /* 16px */
    max-width: 76vw; /* 285px */
    margin-bottom: 1.87vw; /* 7px */
    margin-left: auto;
    margin-right: auto;
}

.checklist-wrapper p {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 4.27vw; /* 16px */
}

.checklist-wrapper p a {
    color: inherit;
}

.checklist-wrapper p a.blue {
    color: var(--CoupleBlue400);
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .section-checklist {
        margin-top: 44px;
        margin-bottom: 44px;
    }

    .checklist-wrapper {
        border-radius: 28px;
        padding: 36px 14px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .checklist-wrapper h2 {
        font-size: 28px;
        margin-bottom: 27px;
    }

    .checklist-wrapper .list {
        margin-bottom: 32px;
    }

    .checklist-wrapper .list > .list-item {
        padding: 31px 16px;
    }

    .checklist-wrapper .list > .list-item + .list-item {
        margin-top: -2px;
    }

    .checklist-wrapper .list > .list-item:before {
        top: 31px;
        right: 35px;
        border-bottom-left-radius: 40px;
    }

    .checklist-wrapper .list > .list-item:after {
        bottom: 31px;
        left: 35px;
        border-top-right-radius: 40px;
    }

    .checklist-wrapper .list > .list-item i {
        width: 37px;
        margin-bottom: 16px;
    }

    .checklist-wrapper h5 {
        font-size: 16px;
        max-width: 285px;
        margin-bottom: 7px;
    }

    .checklist-wrapper p {
        font-size: 16px;
    }
}

@media only screen and (min-width: 992px) {
    .section-checklist {
        margin-top: 40px;
        margin-bottom: 64px;
    }

    .checklist-wrapper {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 30px;
        padding: 64px 78px;
    }

    .checklist-wrapper:before {
        background: transparent url('/img/event-inner/checklist-bg-desktop.png') right top no-repeat;
        background-size: cover;
    }

    .checklist-wrapper .list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 12px;
        margin-bottom: 72px;
    }

    .checklist-wrapper .list > .list-item {
        width: calc(50% - 6px);
        padding: 48px 30px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 22px;
    }

    .checklist-wrapper .list > .list-item:before {
        top: 31px;
        right: 35px;
        border-bottom-left-radius: 30px;
    }

    .checklist-wrapper .list > .list-item:after {
        bottom: 31px;
        left: 35px;
        border-top-right-radius: 30px;
    }

    .checklist-wrapper .list > .list-item i {
        width: 60px;
        flex: 0 0 60px;
        margin: 0;
    }

    .checklist-wrapper .list > .list-item p {
        text-align: left;
    }

    .checklist-wrapper h2 {
        font-size: 48px;
        margin-bottom: 70px;
    }

    .checklist-wrapper h5 {
        font-size: 24px;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .checklist-wrapper p {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1400px) {
    .checklist-wrapper {
        max-width: 1246px;
        margin-left: auto;
        margin-right: auto;
    }
}




.he-price-wrapper {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.he-price {
    width: 170px;
    height: 45px;
    border-radius: 0 0 18px 18px;
    background-color: #faad0f;
    font-family: var(--rubik);
    font-size: 18px;
    font-weight: bold;
    color: #6a39d2;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 1300px) {
    .he-price-wrapper {
        width: 1230px;
        justify-content: end;
    }
}

/* button.orange-btn {
    border: 0;
    margin-top: 40px;
    align-self: end;
    width: 288px;
    height: 66px;
    border-radius: 197px;
    background-image: linear-gradient(104deg, #fff275 1%, #f9a300 102%);
    font-size: 20px;
    font-weight: bold;
    font-family: var(--rubik);
    color: #6a39d2;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-left: auto;
    margin-right: auto;
}

button.orange-btn.mt26-50 {
    margin-top: 50px;
}

@media only screen and (min-width: 720px) {
    button.orange-btn {
        margin-left: 0;
    }
    button.orange-btn.mt26-50 {
        margin-top: 26px;
    }
}

@media only screen and (min-width: 900px) {
    button.orange-btn {
        height: 76px;
        width: 288px;
        margin-bottom: 30px;
    }
    button.orange-btn:hover {
        transform: scale(1.1);
    }
} */

button.orange-btn {
    width: 66.977vw; /* 288px */
    height: 15.349vw; /* 66px */
    border-radius: 38.605vw; /* 166px */
    background: #fff275;
    background-image: linear-gradient(93deg, #fff275 1%, #f9a300 102%);
    border: 0;
    padding: 0;
    font-size: 4.651vw; /* 20px */
    font-weight: bold;
    font-family: var(--rubik);
    color: #6a39d2;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

button.orange-btn:hover,
button.orange-btn:focus,
button.orange-btn:active {
    background: #702AD0;
    color: #fff;
}

@media only screen and (min-width: 640px) {
    button.orange-btn {
        height: 76px;
        border-radius: 166px;
        font-size: 24px;
        max-width: 300px;
    }
}

@media only screen and (max-width: 767px) {
    button.orange-btn {
        box-shadow: 4px 4px 40px 0px rgba(20, 10, 29, 0.60);
    }
}




.area-12 {
    width: 100%;
    margin: 0 auto;
    /* padding: 90px 20px 60px 20px; */
}

.area-12.v2 {
    padding: 25px 20px 60px 20px;
}

.area-12-wrapper {
    padding-top: 7.674vw; /* 33px */
    padding-left: 6.047vw; /* 26px */
    padding-right: 6.047vw; /* 26px */
}

.area-12--style2 .area-12-wrapper {
    padding-top: 0;
    padding-left: 3.47vw; /* 13px */
    padding-right: 3.47vw; /* 13px */
}

@media only screen and (min-width: 768px) {
    .area-12-wrapper {
        padding-top: 65px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .area-12--style2 .area-12-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 800px) {
    /* .area-12-wrapper {
        display: flex;
        flex-wrap: wrap;
    } */
}

@media only screen and (min-width: 992px) {
    .area-12-wrapper {
        padding-left: 51px;
        padding-right: 51px;
        display: block;
    }
}

.area-12 h1 {
    font-family: var(--rubik);
    font-size: 6.512vw; /* 28px */
    text-align: center;
    margin-bottom: 7.907vw; /* 34px */
}

@media only screen and (min-width: 992px) {
    .area-12 h1 {
        font-size: 36px;
        margin-top: -23px;
        margin-bottom: 42px;
    }
}

.area-12 h1.eventListHdr {
    margin-bottom: 55px;
    margin-top: -55px
}

.a12-box {
    position: relative;
    width: 100%;
    border-radius: 28px;
    box-shadow: 18px 18px 60px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 60px 55px 74px 83px 70px;
    justify-items: center;
    gap: 0 30px;
    margin: 0 auto 0 auto;
    transition: all 0.2s ease-in-out;
    padding: 0 0 14px 0;
    margin-bottom: 84px;
/*    cursor: pointer;*/
}

.area-12--style2 .a12-box {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    color: #fff;
    overflow: hidden;
}

.a12-box:last-child {
    margin-bottom: 0;
}

.a12-box.v2 {
    width: 100%;
    grid-template-rows: auto;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    cursor: auto;
    margin-bottom: 52px;
}

.area-12--style2 .a12-box.v2 {
    margin-bottom: 43px;
}

.a12-box.v2:last-child {
    margin-bottom: 0;
}

.a12-box.mt80-40 {
    margin-top: 80px;
}

@media only screen and (min-width: 420px) {
    .a12-box {
        width: 380px;
    }

    .a12-box.v2 {
        width: 380px;
    }
}

/* @media (min-width: 768px) and (max-width: 991px) {
    .a12-box:last-child,
    .a12-box.v2:last-child {
        margin-bottom: 84px;
    }
} */

@media only screen and (min-width: 992px) {
    .a12-box {
        margin: 0 0 40px 35px;
        height: 300px;
        width: auto;
        display: grid;
        justify-items: unset;
        grid-template-columns: 300px 1fr 95px;
        grid-template-rows: 50px 66px 28px 1fr;
        padding: 0;
    }

    .a12-box.oneitem {
        margin: 0 auto;
    }

    .a12-box.toRight {
        justify-self: end;
        margin: 0 35px 40px auto;
        grid-template-columns: 95px 1fr 300px;
    }

    .a12-box.v2 {
        width: 100%;
        height: 266px;
        grid-template-columns: 266px 1fr;
        gap: 0 30px;
        margin: 0 0 40px;
    }

    .a12-box.v2.toRight {
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr 266px;
    }

    .a12-box.mt80-40 {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 1200px) {
    .a12-box {
        width: 100%;
        gap: 0 60px;
        max-width: 967px;
    }

    .a12-box.v2.toRight {
        width: 100%;
        gap: 0 50px;
    }

    .a12-box.v2 {
        gap: 0 60px;
        margin: 0 0 40px;
        max-width: 100%;
    }

    .area-12--style2 .a12-box.v2 {
        gap: 0 48px;
    }
}

@media only screen and (min-width: 1400px) {
    .a12-box.v2 {
        gap: 0 60px;
        max-width: 1145px;
        margin-left: auto;
        margin-right: auto;
    }

    .area-12--style2 .a12-box.v2 {
        max-width: 1246px;
    }
}

.a12-box .main-img {
    display: block;
    border-radius: 28px;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}

.a12-box .main-img::before {
    content: '';
    background: linear-gradient(0deg, #000 -8.35%, rgba(0, 0, 0, 0.00) 34.06%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.a12-box .main-img img {
    width: 100%;
    transition: 0.3s;
}

.evtGridImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.a12-box.toRight .main-img {
    grid-row: 1;
    width: 100%;
    aspect-ratio: 1/1;
}

@media only screen and (min-width: 420px) {
    /* .a12-box .main-img,
    .a12-box.toRight .main-img {
        width: 380px;
        height: 380px;
    }
    .a12-box.v2 .main-img,
    .a12-box.v2.toRight .main-img {
        width: 380px;
        height: 380px;
    } */

}

@media only screen and (min-width: 992px) {
    .a12-box .main-img {
        grid-row: -1/1;
        width: 300px;
        height: 300px;
    }
    .a12-box.v2 .main-img,
    .a12-box.toRight.v2 .main-img {
        width: 266px;
        height: 266px;
    }
    .a12-box .main-img:hover img {
        transform: scale(1.05);
    }
    .a12-box.toRight .main-img {
        grid-row: -1/1;
        grid-column: 3;
        width: 300px;
        height: 300px;
    }

    .a12-box.v2.toRight .main-img {
        grid-row: unset;
        grid-column: 2;
    }
}

@media only screen and (min-width: 1200px) {
    .a12-box.v2 .main-img,
    .a12-box.v2.toRight .main-img {
        width: 266px;
        height: 266px;
    }

    /* .a12-box.v2.toRight .main-img {
        grid-row: unset;
        grid-column: 2;
    } */
}

.a12-txt {
    padding: 20px 35px 12px;
    font-size: 16px;
    display: grid;
    align-content: center;
}

.area-12--style2 .a12-txt {
    padding: 23px 25px;
}

.area-12--style2 .a12-txt p {
    font-weight: 500;
}

.toRight .a12-txt {
    text-align: left;
}

@media only screen and (min-width: 992px) {
    .a12-txt {
        padding: 20px 40px 20px 0;
        display: grid;
        align-content: center;
    }

    .area-12--style2 .a12-txt {
        padding: 20px 40px 20px 0;
    }
    
    .toRight .a12-txt {
        padding: 20px 0 20px 40px;
        text-align: left;
    }

    .a12-txt p {
        line-height: 1.35;
    }
}

@media only screen and (min-width: 1200px) {
    .a12-txt {
        font-size: 20px;
    }
}

.a12-txt b {
    font-size: 20px; /* 20px */
    padding-bottom: 8px; /* 8px */
}

@media only screen and (min-width: 768px) {
    .a12-txt b {
        font-size: 24px;
        padding-bottom: 0;
    }
}

.a12-social {
    display: grid;
    margin-top: 20px;
    grid-template-columns: repeat(3, 56px);
    grid-auto-rows: 56px;
    gap: 12px;
    justify-content: center;
}

.a12-social a {
    background-color: #eaeef1;
    border-radius: 16px;
    display: flex;
    justify-content: center;
}

.area-12--style2 .a12-social a {
    background-color: rgba(0, 0, 0, 0.5);
}

.a12-social a img {
    width: 32px;
}

@media only screen and (min-width: 768px) {
    .a12-social {
        margin-top: 10px;
    }

    .area-12--style2 .a12-social {
        margin-top: 21px;
    }
}

@media only screen and (min-width: 992px) {
    .a12-social {
        grid-template-columns: repeat(6, 56px);
        justify-content: start;
    }
}





.main-img-txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom:18px;
    text-align: center;
    color: #fff;
    font-family: var(--rubik);
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.main-img-txt span {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.users-list-v {
    display: flex;
    justify-content: center;
    align-self: end;
    margin: 0 0 0 12px;
}

.toRight .users-list-v {
    grid-row: 6;
}

@media only screen and (min-width: 992px) {
    .users-list-v {
        align-self: unset;
        grid-row: -1/1;
        grid-column: 3;
        margin: 15px 0 0 0;
        flex-direction: column;
    }

    .toRight .users-list-v {
        grid-row: -1/1;
        grid-column: 1;
        justify-self: end;
    }
}

.users-list-v img {
    width: 55px;
    height: 55px;
    border-radius: 100%;
    object-fit: cover;
    border: 1px solid #fff;
    margin-left: -15px;
}

.users-list-v span {
    width: 44px;
    height: 44px;
    border-radius: 100%;
    background-color: #eaeef1;
    border: 1px solid #fff;
    margin: 5px 0 0 -12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 992px) {
    .users-list-v img {
        width: 70px;
        height: 70px;
        margin-top: -15px;
        margin-left: unset;
    }
    .users-list-v span {
        margin: -15px 0 0 5px;
        width: 56px;
        height: 56px;
        font-size: 16px;
    }
}

.a12-price {
    width: 168px;
    height: 35px;
    position: absolute;
    top: -35px;
    transform: translateX(-50%);
    left: 50%;
    border-radius: 18px 18px 0 0;
    box-shadow: 32px 0px 60px 0px rgba(0, 0, 0, 0.20);
    background-color: #EAEEF1;
    font-weight: bold;
    font-size: 18px;
    font-family: var(--rubik);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 900px) {
    .a12-price {
        width: 35px;
        height: 168px;
        top: 50%;
        transform: translateY(-50%);
        left: -35px;
        border-radius: 18px 0 0 18px;
    }

    .toRight .a12-price {
        border-radius: 0 18px 18px 0;
        left: unset;
        right: -35px;
    }

    .a12-price span {
        transform: rotate(-90deg);
    }
    
}

.a12-t1 {
    align-self: end;
    justify-self: center;
    border-radius: 61px;
    background-color: #eaeef1;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
}

@media only screen and (min-width: 992px) {
    .a12-t1 {
        justify-self: start;
        padding: 5px 15px;
    }
}

.a12-t2 {
    align-self: end;
    justify-self: center;
    font-family: var(--rubik);
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(91deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.a12-t2.evtTtlLong {
    line-height: 1;
    text-align: left;
}

@media only screen and (min-width: 992px) {
    .a12-t2 {
        justify-self: start;
    }
}

@media only screen and (max-width: 991px) {
    .a12-t2.evtTtlLong {
        font-size: 30px;
        text-align: center;
    }

    .a12-t1.evtDtMargin {
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 1200px) {
    .a12-t2 {
        font-size: 48px;
    }

    .a12-t2.evtTtlLong {
        font-size: 30px;
    }
}

.a12-t3 {
    align-self: end;
    justify-self: center;
    font-family: var(--rubik);
    font-size: 24px;
    text-align: center;
    font-weight: 500;
}

.a12-t3 br {
    display: block;
}

@media only screen and (min-width: 992px) {
    .a12-t3 {
        font-size: 22px;
        justify-self: start;
        text-align: left;
    }
    .a12-t3 br {
        display: none;
    }

    .a12-t3.evtSubTtlAlign {
        align-self: unset;
    }
}

@media only screen and (min-width: 1200px) {
    .a12-t3 {
        font-size: 23px; /* 24px; */
    }
}


button.a12-button {
    border: 0;
    /* margin-top: 40px; */
    align-self: end;
    width: 288px;
    height: 66px;
    border-radius: 166px;
    background-image: linear-gradient(104deg, #fff275 1%, #f9a300 102%);
    font-size: 20px;
    font-weight: bold;
    font-family: var(--rubik);
    color: #6a39d2;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

button.a12-button.toCenter {
    margin-left: auto;
    margin-right: auto;
}

button.a12-button.mb10-40 {
    margin-bottom: 10px;
} 

@media only screen and (max-width: 767px) {
    button.a12-button.shaddow {
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
    }
}

@media only screen and (min-width: 992px) {
    button.a12-button {
        height: 76px;
        width: 288px;
        margin-bottom: 30px;
    }
    button.a12-button:hover {
        background: #702AD0;
        color: #fff;
    }
    button.a12-button.mb10-40 {
        margin-bottom: 40px;
    } 
}

.area-13 {
    margin-top: 9.535vw; /* 41px */
    overflow: hidden;
}

.area-13-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 5.581vw; /* 24px */
    padding-right: 5.581vw; /* 24px */
}

@media only screen and (min-width: 992px) {
    .area-13 {
        margin-top: 61px;
    }

    .area-13-wrapper {
        grid-template-columns: 1fr 1fr;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-13-wrapper {
        /* width: 1500px; */
        grid-template-columns: 550px 1fr;
        padding-left: 106px;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1500px) {
    .container-fluid {
        max-width: 1492px;
    }
}

.area-13 a:link,
.area-13 a:visited {
    text-decoration: none;
}

.area-13 a:hover {
    text-decoration: underline;
}

.area-13 a.blue-v2:link,
.area-13 a.blue-v2:visited {
    color: #486ac3;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
}

.area-13 a.blue-v2:hover {
    color: #486ac3;
    text-decoration: none;
}

.area-13 h1 {
    text-align: center;
    font-family: var(--rubik);
    font-size: 6.512vw; /* 28px */
    font-weight: bold;
    margin-bottom: 8.605vw; /* 37px */
    position: relative;
    z-index: 2;
    order: 1;
}

.area-13 footer {
    all: unset;
    order: 3;
    text-align: center;
    font-size: 3.721vw; /* 16px */
    margin-bottom: 7.209vw; /* 31px */
    position: relative;
    z-index: 2;
}

.area-13 footer br {
    display: block;
}

@media only screen and (min-width: 992px) {
    .area-13 h1 {
        order: unset;
        font-size: 36px;
        margin-bottom: 45px;
        grid-column: span 2;
    }

    .area-13 footer {
        font-size: 20px;
        order: unset;
        grid-column: span 2;
        grid-row: 3;
        margin-bottom: 0;
    }

    .area-13 footer br {
        display: none;
    }
}

.area-13 footer a {
   color: #486AC3;
}

ul.a13-list {
    font-size: 3.721vw; /* 16px */
    display: grid;
    gap: 9.302vw 0; /* 40px 0 */
    margin: 0 0 13.953vw 0; /* 0 0 60px 0 */
    order: 2;
}

ul.a13-list li {
    padding: 0 0 0 8.372vw; /* 36px */
    position: relative;
}

ul.a13-list li::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: #702AD0;
    border-radius: 100%;
    position: absolute;
    top: 6px;
    left: 0;
}

@media only screen and (min-width: 992px) {
    ul.a13-list {
        font-size: 20px;
        order: unset;
        gap: 40px 0;
        margin: 0 0 80px 0;
    }

    ul.a13-list li {
        padding: 0 0 0 46px;
    }
}

.a13-img {
    position: relative;
    order: 4;
}

.a13-img img {
    transition: 0.3s all;
}

.a13-img img:nth-of-type(1) {
    position: relative;
    max-width: 137%;
    margin-left: -14%;

}
.a13-img img:nth-of-type(2) {
    width: 80px;
    max-width: unset;
    position: absolute;
    top: -20px;
    left: 0;
}

.a13-img img:nth-of-type(3) {
    width: 66px;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

@media only screen and (min-width: 992px) {
    .a13-img {
        order: unset;
    }

    .a13-img img:nth-of-type(1) {
        margin-top: -75px;
        margin-left: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .a13-img img:nth-of-type(1) {
        width: auto;
        max-width: 128%;
        margin-top: -75px;
    }
}

@media only screen and (min-width: 1500px) {
    .a13-img img:nth-of-type(1) {
        margin-top: -103px;
    }
}



.area-14 {
    position: relative;
    margin: 9.302vw 0 0; /* 40px 0  */
}

.area-14:before {
    content: '';
    background-color: #6F2ED1;
    width: 100%;
    height: 38.372vw; /* 165px */
    position: absolute;
    top: 100%;
    z-index: -1;
}

.area-14-wrapper {
    border-top-left-radius: 9.302vw; /* 40px */
    border-top-right-radius: 9.302vw; /* 40px */
    background: linear-gradient(160deg, #3B97DE -5.62%, #6F2ED1 69.42%);
    padding: 11.628vw 2.093vw 12.791vw; /* 50px 9px 55px */
    display: grid;
    gap: 9.302vw 0; /* 40px */
    justify-content: center;
    text-align: center;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .area-14 {
        margin-top: 74px;
    }

    .area-14:before {
        content: none;
    }

    .area-14-wrapper {
        border-radius: 40px;
        background: linear-gradient(128deg, #34A6E0 -0.75%, #6F2DD1 76.5%);
        padding: 60px;
        margin-bottom: 116px;
    }
}

@media only screen and (min-width: 992px) {
    .area-14-wrapper {
        gap: 60px 0;
    }
}

@media only screen and (min-width: 1400px) {
    .area-14-wrapper {
        margin-left: 86px;
        margin-right: 86px;
    }
}

.area-14 h1 {
    font-family: var(--rubik);
    font-size: 8.372vw; /* 36px */
    font-weight: bold;
    text-transform: uppercase;
    color: #F9C701;
}

@media only screen and (min-width: 992px) {
    .area-14 h1 {
        font-size: 36px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-14 h1 {
        font-size: 48px;
    }
}

.area-14 h2 {
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
    .area-14 h2 {
        font-size: 20px;
        margin-bottom: 40px;
    }
}

.area-14 footer {
    all: unset;
    display: grid;
    font-family: var(--rubik);
    font-weight: bold;
    font-size: 4.651vw;
    color: #F9C701;
    line-height: 1.3;
    gap: 4.186vw 0;
}

@media only screen and (min-width: 992px) {
    .area-14 footer {
        font-size: 24px;
        gap: 5px 0;
    }
}

.area-14 footer a:link,
.area-14 footer a:visited {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    background-color: transparent;
    /* -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    user-select: none; 
    outline: 0;
    outline-style: none;
    outline-color: transparent;
    background-color: transparent;
    border-color: transparent;
    outline-color: transparent; */
}

.area-14 footer a:hover {
    text-decoration: none;
    border: 0;
    /* outline: 0;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    outline-color: transparent;
    background-color: transparent;
    border-color: transparent;
    outline-color: transparent; */
}

.area-14 footer a:active,
.area-14 footer a:focus {
    background-color: transparent;
    outline: none;
    /* border: 0;
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    outline-color: transparent;
    background-color: transparent;
    border-color: transparent; */
}

ul.a14-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 31.395vw; /* 135px */
    gap: 9.302vw 5.814vw; /* 40px 25px */
}

ul.a14-list li {
    position: relative;
    border-radius: 5.581vw; /* 24px */
    border: 2px solid #F9C701;
    height: 100%;
    font-size: 4.186vw; /* 18px */
    color: #fff;
    font-weight: 500;
    padding: 0 4.651vw; /* 0 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    ul.a14-list {
        gap: 100px 10px;
        grid-auto-rows: 130px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    ul.a14-list li {
        font-size: 20px;
        border-radius: 24px;
        padding: 0 40px;
    }
}

/* @media only screen and (min-width: 1105px) {
    ul.a14-list li {
        font-size: 20px;
    }
} */

ul.a14-list a:link,
ul.a14-list a:visited {
    color: #fff;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}

ul.a14-list li::after {
    content: '';
    position: absolute;
    top: -5.349vw; /* -23px */
    left: 50%;
    transform: translateX(-50%);
    width: 10.698vw; /* 46px */
    height: 10.698vw; /* 46px */
    border-radius: 100%;
    background: transparent url('/img/checkmark-alt.svg') center center no-repeat;
    background-size: contain;
}

@media only screen and (min-width: 992px) {
    ul.a14-list li::after {
        width: 60px;
        height: 60px;
        top: -30px;
    }
}

/* PROFILE oct 2023 */

.profile-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 16px;
    padding: 54px 0 54px 0;
    font-size: 16px;
    font-weight: 500;
    margin: 0 15px;
}

@media only screen and (min-width: 610px) {
    .profile-container {
        width: 580px;
        grid-template-columns: 580px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) {
    .profile-container {
        padding: 164px 0 105px 0;
        gap: 14px 10px;
    }
}

@media only screen and (min-width: 1200px) {
    .profile-container {
        width: 1170px;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* grid-template-rows: repeat(3, 1fr); */
        /* grid-template-rows: repeat(3, fit-content(33.33%)); */
        grid-template-rows: 250px 250px 250px;
    }
}

.profile-left {
    position: relative;
    grid-row: -1/1;
    background: url(/img/block-left-bg-mobile.png) no-repeat left top;
    background-size: 100% 100%;
    /* background: linear-gradient(113.99deg, #54BBFC -1.92%, #4446C6 84.26%);
    box-shadow: 6px 6px 30px 0px rgba(46, 28, 102, 0.2); */
    border-radius: 22px;
    padding: 13px;
    display: grid;
    gap: 16px 0;
    position: relative;
}

.profile-left:before {
    content: '';
    /* background: linear-gradient(151.03deg, #407CCD 9.53%, #6541D3 86.9%); */
    background: rgba(86, 96, 215, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    border-radius: 22px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

.profile-left > * {
    position: relative;
}

.profile-left .profile-title-1 {
    padding-left: 20px;
}

@media only screen and (min-width: 610px) {
    .profile-left {
        /* height: 725px; */
        padding: 18px;
        gap: 8px 0;
    }
}

@media only screen and (min-width: 768px) {
    .profile-left {
        background: url(/img/block-left-bg.png) no-repeat left top;
        background-size: 100% 100%;
    }
}

.profile-left form {
    display: contents;
}

.profile-right-1,
.profile-right-2,
.profile-right-3, 
.profile-right-4 {
    background: url(/img/block-right-bg-mobile.png) no-repeat left top;
    background-size: 100% 100%;
    border-radius: 22px;
    padding: 13px;
    position: relative;
}

.profile-right-1:before,
.profile-right-2:before,
.profile-right-3:before, 
.profile-right-4:before {
    content: '';
    background: rgba(86, 96, 215, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    border-radius: 22px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

.profile-right-1 > *,
.profile-right-2 > *,
.profile-right-3 > *, 
.profile-right-4 > * {
    position: relative;
}

.profile-right-1 {
    padding-bottom: 30px;
}

.profile-right-3 a {
    font-size: 14px;
}



.profile-right-4 a.button-red, 
.profile-right-4 button.button-red {
    padding-left: 23px;
    padding-right: 23px;
}

@media screen and (max-width: 767px) {
    .profile-right-3 {
        min-height: 220px;
    }

    .profile-right-4 {
        /* background: linear-gradient(105.03deg, #4476CE -3.97%, #6A37D2 102.52%); */
        background: none;
        border: 1px solid;
        border-image-source: linear-gradient(113.99deg, #54BBFC -1.92%, #4446C6 84.26%);
        padding-bottom: 10px;
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media only screen and (min-width: 768px) {
    .profile-right-1,
    .profile-right-2,
    .profile-right-3,
    .profile-right-4 {
        background: url(/img/block-right-bg.png) no-repeat left top;
        background-size: 100% 100%;
        padding: 18px 16px 16px;
    }

    .profile-right-1 {
        padding-bottom: 14px;
    }

    .profile-right-4 {
        padding: 18px 10px 20px 18px;
    }

    .profile-right-3 a {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1200px) {
    .profile-container.open {
        grid-template-rows: 250px 514px;
    }

    .profile-container.open .profile-right-hide {
        display: none;
    }

    .profile-container.open .profile-right-4 {
        background: url(/img/block-right-bg-open.png) no-repeat left top;
        background-size: 100% 100%;
    }
}

.profile-right-1.hide,
.profile-right-2.hide,
.profile-right-3.hide, 
.profile-right-4.hide {
    display: none;
}

.profile-right-4.scroll {
    overflow: auto;
}

.profile-right-1.span-2 {
    height: 100%;
    overflow: hidden;
    padding: 18px 10px 18px 18px;
}


.profile-container .span-2 {
    height: 100%;
    overflow: hidden;
    padding: 18px 10px 18px 18px;
}

@media only screen and (min-width: 1200px) {
    .profile-container .span-2 {
        grid-row: span 2;
        /* height: 358px; */
    }
}

.custom-scroll {
    overflow: auto;
    height: 100%;
}

.custom-scroll.hide {
    display: none ;
}



.custom-scroll::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border-right: solid 10px transparent;
    height: 34px;
}

.custom-scroll::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 16px 16px #2FB0E1;
    border-right: solid 10px transparent;
    border-radius: 14px;
    min-height: 30px;
}

.custom-scroll::-webkit-scrollbar-track-piece:end,
.custom-scroll::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 30px; 
}

.custom-scroll::-webkit-scrollbar-track-piece:start,
.custom-scroll::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 30px;
}

.custom-scroll::-webkit-scrollbar-button,
.custom-scroll::-webkit-scrollbar-button
{
  display: none;
}

 /* width */
.custom-scroll::-webkit-scrollbar {
     width: 4px;
 }

 /* Track */
.custom-scroll::-webkit-scrollbar-track {
     border-radius: 14px;
     background: transparent;
 }

 /* Handle */
 .custom-scroll::-webkit-scrollbar-thumb {
     background: #2FB0E1;
     border-radius: 12px;
 }

 @media screen and (min-width: 768px) {
    .custom-scroll {
        padding: 0 18px 0px 0;
        margin-left: 0;
        margin-right: 0;
        height: 90%;
/*        border-radius: 22px;*/
    }
 }


.profile-title-1 {
    color: #F9C701;
    font-family: var(--rubik);
    font-weight: bold;
    font-size: 18px; /* 18px */
}

.profile-title-1.hide {
    display: none;
}

.profile-title-1.mt10 {
    margin-top: 10px;
}

.profile-title-1.add_interests_title_1 {
    margin-left: 10px;
}

.upcoming-events-no-events {
    /*display: grid;
    justify-items: start;
    align-content: space-around;
    height: 100%;*/
    color: #fff;
    font-size: 3.721vw; /* 16px */
    display: grid;
    justify-items: start;
    align-content: space-between;
    min-height: 80px;
    margin-top: 13px;
}

.upcoming-events-no-events button.button-style-6, 
.upcoming-events-no-events a.button-style-6 {
    min-width: 220px;
    margin-top: 54px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .upcoming-events-no-events {
        font-size: 14px;
        margin-top: 20px;
    }

    .profile-title-1 {
        font-size: 16px;
    }

    .profile-title-1.add_interests_title_1 {
        margin-left: 0px;
    }

    .upcoming-events-no-events button.button-style-6, 
    .upcoming-events-no-events a.button-style-6 {
        margin-top: 32px;
        margin-bottom: 16px;
    }
}

@media only screen and (min-width: 1200px) {
    .upcoming-events-no-events {
        height: calc(100% - 40px);
    }
}

.upcoming-events-no-events.hide {
    display: none;
}

button.button-style-6,
a.button-style-6 {
    border: 0;
    border-radius: 197px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    height: 50px;
    padding: 0 20px;
    font-family: var(--rubik);
    font-size: 18px;
    font-weight: bold;
    color: #702AD0;
    cursor: pointer;
    transition: all 0.3s ease-in;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    min-width: 220px;
}

button.button-style-6:hover,
a.button-style-6:hover {
    background: #702AD0;
    color: #fff;
}

button.button-style-6.toCenter {
    margin: 0 auto;
    display: block;
}

button.button-style-6.plr10 {
    padding: 0 10px;
}

button.button-style-6.w100p {
    width: 100%;
}

button.button-style-6.mt15 {
    margin-top: 15px;
}

@media only screen and (min-width: 768px) {
    button.button-style-6 {
        font-size: 18px;
        padding: 0 22px;
        height: 50px;
        margin-top: 0;
    }
}


.upcoming-event {
    position: relative;
    width: 100%;
    border-radius: 12px;
    background-color: #fff;
    display: grid;
    grid-template-columns: 100px 1fr 42px;
    grid-template-rows: 36px 25px 1fr;
    justify-items: center;
    gap: 0 10px;
    margin: 0 auto 0 auto;
    transition: all 0.2s ease-in-out;
    padding: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.upcoming-event.hide {
    display: none;
}

@media only screen and (min-width: 500px) {
    .upcoming-event {
        grid-template-rows: 30px 30px 1fr;
        gap: 0 18px;
    }
}

.upcoming-event .ue-main-img {
    display: block;
    border-radius: 12px;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
    grid-row: 1 / -1;
}

.upcoming-event .ue-main-img img {
    width: 100%;
}

.upcoming-event .ue-main-img-txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    text-align: center;
    color: #fff;
    font-family: var(--rubik);
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.upcoming-event .ue-main-img-txt span {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.upcoming-event .ue-t1 {
    align-self: end;
    justify-self: start;
    border-radius: 20px;
    background-color: #a4abb4;
    color: #fff;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    line-height: 1.1;
}

@media only screen and (min-width: 768px) {
    .upcoming-event .ue-t1 {
        font-size: 12px;
        text-align: left;
        padding: 1px 10px;
    }
}

.upcoming-event .ue-t2 {
    align-self: end;
    justify-self: start;
    font-family: var(--rubik);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    background-image: linear-gradient(104deg, #26c1e3 2%, #1189ad 46%, #7120cc 98%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
}

@media only screen and (min-width: 500px) {
    .upcoming-event .ue-t2 {
        font-size: 20px;
    }
}

.upcoming-event .ue-t3 {
    align-self: end;
    justify-self: start;
    font-family: var(--rubik);
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 8px;
    text-align: left;
}

@media only screen and (min-width: 500px) {
    .upcoming-event .ue-t3 {
        font-size: 14px;
    }
}

.upcoming-event .ue-users-list {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-self: center;
    /* margin: 0 0 0 15px; */
    margin: 8px 0 0 0;
    grid-row: -1/1;
    grid-column: 3;
}

.upcoming-event .ue-users-list img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    object-fit: cover;
    border: 1px solid #fff;
    /* margin-left: -15px; */
    margin-top: -8px;
}

.upcoming-event .ue-users-list span {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #eaeef1;
    border: 1px solid #fff;
    margin: -8px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}



.profile-info {
    position: relative;
    margin: 5px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 10px;
}

.profile-info > div:nth-child(2) {
    width: calc(100% - 117px);
}

.profile-info > div:nth-child(3),
.profile-info > div:nth-child(4) {
    width: calc(50% - 5px);
}

.profile-info .profile-title-1 {
    display: block;
    margin-bottom: 10px;
}

.pi-info-image {
    position: relative;
}

.pi-info-image .upload-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pi-bio {
    position: relative;
}

.pib-description {
    font-family: var(--nunito);
    width: 100%;
    height: 102px;
    border: 1px solid transparent;
    background-color: rgba(49, 45, 100, 0.8);
    color: #fff;
    caret-color: #fff;
    font-weight: 400;
    font-size: 14px;
    border-radius: 14px;
    padding: 13px 18px;
    resize: none;
    overflow: auto;
}

.pib-description::placeholder {
    color: #fff;
}

.pib-description::-webkit-scrollbar-track {
    border-radius: 12px;
    background-color: transparent;
}

.pib-description::-webkit-scrollbar {
    background-color: transparent;
    position: relative;
    right: 10px;
}

.pib-description::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background-color: #2FB0E1;
    border: 7.5px solid transparent;
    background-clip: content-box;
}

.pib-description:empty:not(:focus):before {
    content: attr(data-text);
    color: #fff;
}

.pib-description:focus {
    border: 1px solid #702AD0;
}

@media only screen and (min-width: 768px) {
    .pib-description {
        padding: 6px 24px;
        font-size: 16px;
        height: 78px;
    }

    .profile-info {
        display: grid;
        grid-template-columns: 107px 1fr 1fr 1fr;
        align-items: end;
    }

    .profile-info > div:nth-child(2),
    .profile-info > div:nth-child(3),
    .profile-info > div:nth-child(4) {
        width: 100%;
    }
}

.pib-pic {
    position: relative;
    z-index: 2;
    width: 112px;
    height: 112px;
    border: 4px solid #702AD0;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: 8px;
    background-color: #312D64;
}

.pib-pi img {
    width: 100%;
}

.pib-name {
    color: #fff;
    position: absolute;
    left: 135px;
    top: -10px;
}

.pib-name.verified::after {
    content: '';
    width: 19px;
    height: 19px;
    background: url(/img/verified-badge.svg) 0 0 no-repeat;
    background-size: 100% ;
    position: absolute;
    top: 0;
    right: -27px;

}

.pib-edit-ic {
    position: absolute;
    top: 34px;
    right: 10px;
    z-index: 1;
}

.pib-edit-ic svg {
    color: #fff;
    fill: #fff;
}

/* .pib-edit-ic:hover svg {
    color: #62dc84;
    fill: #62dc84;
} */

.pi-updated {
    position: absolute;
    /* right: 0; */
    top: -40px;
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: bold;
    background-color: #62dc84;
    border-radius: 50px;
    padding: 3px 18px;
    color: #fff;
    animation-duration: 3s;
    animation-name: fadeOut;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.pi-updated.hide {
    display: none;
}

@media only screen and (min-width: 610px) {
    /* .pi-updated {
        font-size: 18px;
    } */

    .pib-pic {
        margin-left: 16px;
    }
}

@media only screen and (min-width: 768px) {
    /* .pib-description {
        padding-left: 150px;
    } */

    .pib-name {
        left: 150px;
    }
}

@keyframes fadeOut {
    0% {
      opacity: 1;
      visibility: 1;
    }
    80% {
        opacity: 1;
        visibility: 1;
    }
    90% {
        opacity: 0;
        visibility: 0;
    }
    100% {
        opacity: 0;
        visibility: 0;
        display: none;
    }
  }

.profile-left label {
    display: block;
    padding: 0 0 5px 20px;
    color: #fff;
}

.profile-left label.error {
    color: var(--error);
}

.profile-left input {
    width: 100%;
    border-radius: 12px;
    height: 48px;
    border: solid 1px transparent;
    background: rgba(49, 45, 100, 0.8);
    color: #fff;
    caret-color: #fff;
    font-family: var(--nunito);
    font-size: 14px;
    padding: 0 18px;
}

/* .profile-left input::placeholder {
    color: rgba(137, 133, 195, 1);
} */

input[type="date"]::-webkit-calendar-picker-indicator {
    /* display: none;
    -webkit-appearance: none; */
    width: 15px;
    padding: 0px;
    margin: 0px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.profile-left input.error,
.profile-left textarea.error {
    border-color: var(--error) !important;
    background-color: #c3c3c3 !important; /* #fff5f2 */
}

.profile-left input::placeholder {
    color: #fff;
}

.profile-left input:focus {
    border: 1px solid #702AD0;
    /* background-color: #f0f3f7; */
}

.pi-split-one {
    width: 100%;
}

.pi-error + .pi-split-one {
    margin-top: -16px;
}

.pi-split-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 11px;
}

.pi-split-three {
    display: grid;
    grid-template-columns: 1fr 1fr 91px;
    gap: 16px 6px;
}

.pi-split-three > div:last-child label {
    padding-left: 0;
    text-align: center;
}

.pi-split-three > div:last-child input {
    letter-spacing: 3px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.profile-title-1 + .pi-split-custom {
    margin-top: -6px;
}

.pi-split-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 6px;
}

.pi-split-custom > div:first-child {
    width: 100%;
}

.pi-split-custom > div:nth-child(2),
.pi-split-custom > div:nth-child(3) {
    width: calc(50% - 3px);
}

@media only screen and (min-width: 768px) {
    .pi-split-one {
        margin-top: 0;
    }

    .pi-split-three {
        gap: 10px;
        grid-template-columns: 1fr 1fr 100px;
    }

    .pi-error + .pi-split-one {
        margin-top: 0;
    }

    .profile-title-1 + .pi-split-custom {
        margin-top: -3px;
    }

    .profile-left label {
        font-size: 14px;
    }

    .pi-split-custom {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 10px;
    }

    .pi-split-custom > div:nth-child(2),
    .pi-split-custom > div:nth-child(3) {
        width: 100%;
    }
}

.pi-split-three .resp {
    grid-column: span 2;
}

@media only screen and (min-width: 580px) {
    .pi-split-three .resp {
        grid-column: unset;
    }
}

.pi-select {
    border-radius: 12px;
    height: 48px;
    border: solid 1px transparent;
    background: rgba(49, 45, 100, 0.8);
    color: #fff;
    font-family: var(--nunito);
    font-size: 14px;
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    cursor: pointer;
    padding: 0 20px 0 15px;
    position: relative;
}

.pi-select .custom-dropdown {
    margin-left: -15px;
    margin-right: -20px;
}

.pi-select.error {
    border-color: var(--error);
    background-color: #c3c3c3; /* #fff5f2; */
}

.pi-select.active {
    border: 1px solid #26c1e3;
    background-color: #f0f3f7;
}

.pi-select::before {
    content: "";
    width: 12px;
    height: 8px;
    background: url(/img/drop-down-arrow-white.svg) 0 0 no-repeat;
    background-size: 100%;
    grid-area: select;
    justify-self: end;
    cursor: pointer;
  }

.pi-select select {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0.5em; /* 0 1em 0 0; */
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
    grid-area: select;
    color: #fff;
}

.pi-select select::-ms-expand {
    display: none;
  }

.pi-select select option {
    color: #383838;
}

option:first-child {
    color: rgba(56, 56, 56, 0.44);
}

/* Select the center element's previous siblings */

.pi-select:focus-within {
    border: 1px solid #702AD0;
    /* background-color: #f0f3f7; */
}

@media screen and (min-widith: 768px) {
    .pi-select {
        height: 46px;
        font-size: 16px;
        padding: 0 20px 0 15px;
    }
}

.pi-input {
    position: relative;
}

.pi-input button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    height: 24px;
    background-color: #f26142;
    color: #fff;
    border: 0;
    border-radius: 60px;
    padding: 4px 15px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    font-family: var(--nunito);
    transition: 0.25s;
}

.pi-input .error {
    margin-top: unset;
}

.pi-input button:hover {
    opacity: 0.85;
}

.pi-input button.red {
    background-color: #F26142;
}


.pi-input button.green {
    background-color: #2BC53D;
    cursor: default;
}

.pi-input button.green:hover,
.pi-input button.red:hover {
    animation: none;
}

.pi-error {
    /*    color: var(--error);*/
    position: absolute; /* relative; */
    right: 0;
    top: -40px;
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: bold;
    background-color: #e34826;
    border-radius: 50px;
    padding: 3px 18px;
    color: #fff;
}
    
@media only screen and (min-width: 768px) {
    .pi-error {
/*        position: absolute;*/
        right: 33px;
        top: -40px; /* 168px; */
    }

    .pi-input button {
        height: 28px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

.pi-social-drop {
    box-sizing: border-box;
    position: absolute;
    top: 9px;
    right: 8px;
    height: 28px;
    width: 82px;
    padding: 4px 0 0 20px;
    background-color: #312D64;
    border: 1px solid #2FB0E1;
    border-radius: 61px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 0;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease-in;
    cursor: pointer;
}

.pi-social-drop::before {
    content: "";
    width: 12px;
    height: 8px;
    background: url(/img/drop-down-arrow.svg) 0 0 no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 14px;
    transition: all 0.3s ease-in;
}

.pi-social-drop.opened {
    border-radius: 12px;
    height: 128px;
}

.pi-social-drop.opened::before{
    transform: rotate(180deg);
}

.pi-social-drop a {
    cursor: pointer;
}

.pi-social-drop a img {
    display: block;
}

.pi-social-drop a.init {
    display: block;
    order: 1;
}

.pi-social-drop a:not(.init) {
    display: none;
}

.pi-social-drop.opened a {
    display: block; 
    order: 2;
}

.pi-social-drop.opened a.init {
    order: 1;
}




.pi-editor-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 10, 16, 0.8);
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
    z-index: 101;
    padding: 114px 0 0 0;
}

.pi-editor-wrapper.hide {
    display: none;
}

.pi-editor-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 15px;
}

@media only screen and (min-width: 610px) {
    .pi-editor-container {
        width: 580px;
        grid-template-columns: 580px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1200px) {
    .pi-editor-container {
        width: 1170px;
        margin: 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }
}


.pi-editor {
    padding: 15px 15px 20px;
    border-radius: 22px;
    background: linear-gradient(108.43deg, #3F8AD9 -8.3%, #683CD2 85%);
    box-shadow: 8px 8px 28px 0px rgba(0, 0, 0, 0.2);
}

.pi-editor-details {
    display: grid;
    grid-template-columns: 162px minmax(0, 1fr); /* 162px */
    grid-template-rows: 46px 145px;
    gap: 7px;
    margin: 16px 0 20px 0;
}

.pi-ed-image {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 14px;
    grid-row: -1/1;
    padding: 18px 14px 12px;
    display: grid;
    justify-items: center;
}

.pi-ed-ic {
    width: 107px;
    height: 107px;
    border-radius: 7px;
    background-color: #312D64;
    margin: 0;
    border: solid 2px #53BAFB;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.profImgAlert {
    border-color: var(--error);
    background-color: #c3c3c3;
}

.pi-editor-details .pi-group {
    position: relative;
}

.pi-editor-details .pi-group label {
    color: #fff;
    font-weight: 500;
    font-family: var(--nunito);
    font-size: 16px;
    position: absolute;
    top: -34px;
    left: 15px;
}

.pi-editor-details .pi-group input {
    display: block;
    width: 100%;
}

.pi-editor-details input {
    grid-column: 2;
    resize: none;
    border-radius: 12px;
    background: rgba(49, 45, 100, 0.8);
    border: 1px solid transparent;
    color: #fff;
    font-size: 14px;
    padding: 13px 14px;
}

.pi-editor-details input:focus {
    border: 1px solid #702AD0;
    /* background-color: #f0f3f7; */
}

.pi-editor-details input::placeholder,
.pi-editor-details textarea::placeholder {
    color: rgba(56, 56, 56, 0.44);
}

.pi-editor .profile-title-1 {
    font-size: 18px;
}

.pi-editor button.button-style-6, 
.pi-editor a.button-style-6 {
    min-width: 220px;
}

@media only screen and (min-width: 768px) {
    .pi-editor {
        padding: 15px 20px 20px;
    }

    .pi-editor-details {
        grid-template-columns: 162px minmax(0, 1fr);
        grid-template-rows: 46px 145px;
        margin-bottom: 20px;
    }

    .pi-editor-details input {
        font-size: 16px;
        padding: 12px 22px;
    }

    .pi-editor-details .pi-group label {
        font-size: 16px;
        top: -32px;
        left: 24px;
    }
}

.pi-editor-details textarea {
    resize: none;
    border-radius: 14px;
    background: rgba(49, 45, 100, 0.8);
    border: 1px solid transparent;
    color: #fff;
    grid-column: 2;
    overflow: auto;
    padding: 13px 14px;
    font-family: var(--nunito);
    font-size: 14px;
}

.pi-editor-details textarea::-webkit-scrollbar-track {
    border-radius: 12px;
    background-color: transparent;
}

.pi-editor-details textarea::-webkit-scrollbar {
    background-color: transparent;
    position: relative;
    right: 10px;
}

.pi-editor-details textarea::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background-color: #2FB0E1;
    border: 7px solid transparent;
    background-clip: content-box;
}

.pi-editor-details textarea:empty:not(:focus):before {
    content: attr(data-text);
    color: #fff;
}

@media only screen and (min-width: 768px) {
    .pi-editor-details textarea {
        padding: 6px 24px;
        font-size: 16px;
    }
}

.pi-editor-details textarea:focus {
    border: 1px solid #702AD0;
    /* background-color: #f0f3f7; */
}

.pi-editor-details input::placeholder,
.pi-editor-details textarea::placeholder {
    color: rgba(56, 56, 56, 0.44);
}


.upload-btn {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

.upload-btn button {
    width: 100%;
    height: 100%;
    border: 0;
    background: none;
    /* border-radius: 61px;
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    height: 28px;
    padding: 0 10px;
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: bold;
    color: #fff; */
    cursor: pointer;
    transition: all 0.3s ease-in;
}

.upload-btn input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.upload-btn button:hover {
    transform: scale(1.02);
}

@media screen and (min-width: 768px) {
    .upload-btn button {
        font-size: 16px;
    }
}

ul.interests {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 8px 9px;
}


ul.interests.hide {
    display: none;
}

ul.interests.center {
    margin-top: 14px;
}

ul.interests li {
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #2FB0E1;
    padding: 0 8px 0 12px;
    display: flex;
    gap: 0 10px;
    border-radius: 61px;
    height: 22px;
    display: inline-flex;
    align-items: center;
}

ul.interests li.hide {
    display: none;
}

ul.interests li i {
    font-style: normal;
    color: inherit;
    cursor: pointer;
}

ul.interests li i img {
    width: 8px;
    height: auto;
    display: block;
}

@media screen and (min-width: 768px) {
    ul.interests {
        padding-left: 0;
        padding-right: 0;
        gap: 6px;
    }

    ul.interests li {
        font-size: 12px;
        height: 24px;
    }
}

a.button-red,
button.button-red {
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #F26142;
    color: #fff;
    border: 0;
    border-radius: 28px;
    padding: 0 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    font-family: var(--nunito);
    transition: 0.25s;
    text-decoration: none;
}

a.button-red:hover,
button.button-red:hover {
    /* transform: scale(1.05); */
}

button.button-red.inactive {
    cursor: default;
} 

button.button-red.inactive:hover {
   transform: none;
}

button.button-red.plr25 {
    padding-left: 25px;
    padding-right: 25px;
}

button.button-red.mt-6 {
    margin-top: -6px;
}

a.button-red.mr8 {
    color: #fff;
    margin-right: 8px;
}

a.button-red.hide,
button.button-red.hide {
}

.btnPrfVrf {
    font-size: 14px !important;
    font-weight: normal !important;
    display: block !important;
    padding: 0 18px !important;
}

.btnPrfVrf span {
    font-size: 9px;
    display: block;
    margin-top: -4px;
}

.btnPrfVrfGo {
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 0 35px !important;
    display: block !important;
    height: 30px !important;
    pointer-events: none;
    margin-bottom: 3px !important;
}

.btnPrfVrfGo span {
    font-size: 9px;
    display: block;
    margin-top: -4px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: min-content;
    gap: 16px;
}

.grid-3 .toRight {
    color: #fff;
    justify-self: end;
}

.grid-3 .toLeft {
    justify-self: start;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 15px;
}

@media only screen and (min-width: 610px) {
    .grid-4 {
        grid-template-columns: 1fr 325px;
    }
}

@media only screen and (min-width: 768px) {
    .grid-3 {
        gap: 16px;
    }
}

.verify-wrapper {
    grid-column: span 2;
    display: grid;
    gap: 10px;
}

.verify-wrapper.hide {
    display: none;
}

@media only screen and (min-width: 610px) {
    .verify-wrapper {
        all: unset;
        display: contents;
    }
}

.payment-wrapper {
    grid-column: span 2;
    display: grid;
    align-content: start;
}

.payment-wrapper.hide {
    display: none;
}

.grid-4 .toRight {
    justify-self: end;
}

.grid-4 .toLeftRight {
    justify-self: end;
}

@media only screen and (min-width: 610px) {
    .grid-4 .toLeftRight {
        justify-self: start;
    }
}

.couple-coin-box {
    grid-column: span 2;
    position: relative;
    width: 100%;
    border-radius: 14px;
    background: rgba(49, 45, 100, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 10px 0;
    padding: 20px 20px 30px;
}

.couple-tix-box {
    grid-column: span 2;
    position: relative;
    width: 100%;
    border-radius: 12px;
    background: rgba(49, 45, 100, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 8px 0;
    padding: 20px 20px 30px;
}

.ccb-sum {
    display: flex;
    align-items: center;
    color: #fff;
    font-family: var(--rubik);
    font-size: 32px;
    font-weight: bold;
    line-height: 40px;
    gap: 0 6px;
}

.ccb-sum img {
    width: 30px;
    height: auto;
}

.verify-txt {
    order: 1;
}

@media only screen and (min-width: 768px) {
    .verify-txt {
        order: 2;
    }

    .ccb-sum {
        font-size: 32px;
    }

    .couple-coin-box {
        gap: 16px 0px;
    }

    .couple-tix-box {
        gap: 14px 0px;
    }
}


.verify-txt dt {
    font-size: 16px;
    font-weight: bold;
}

.verify-txt dd {
    font-size: 14px;
    padding-left: 14px;
    position: relative;
}

.verify-txt dd::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #383838;;
}

.verify-details {
    display: grid;
    justify-items: center;
    font-size: 10px;
    color: rgba(56, 56, 56, 0.44);
    order: 2;
}

@media only screen and (min-width: 610px) {
    .verify-details {
        order: 1;
    }
}

.verify-details img {
    margin-bottom: 14px;
}

.verify-details button {
    margin-bottom: 4px;
}

.card-details-wrapper {
    width: 100%;
    height: 35px;
    border-radius: 4px;
    border: solid 1.5px #d8d8d8;
    position: relative;
    color: #a2a2a2;
    padding: 10px 6px 0 6px;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 10px;
}

input.cc-details-2 {
    border-radius: 20px;
    border: solid 1px #cdd7df;
    background-color: #fff;
    font-family: var(--nunito);
    font-size: 16px;
    padding: 0 5px 0 10px;
}

input.cc-details-2.ml10 {
    margin-left: 10px;
}

input.cc-details-2::placeholder {
    color:rgba(56, 56, 56, 0.44);
}

input.cc-details-1 {
    border: 0;
    font-family: var(--nunito);
    font-size: 16px;
    padding: 0 5px 0 6px;
    background: transparent;
    width: 100%;
}

@media only screen and (min-width: 430px) {
    input.cc-details-1 {
        padding: 0 5px 0 56px;
        background: transparent url(/img/card-ic.svg) center left 16px no-repeat;
        background-size: 26px auto;
    }
}


input.cc-details-1::placeholder {
    color:rgba(56, 56, 56, 0.44)
}

.interests-container {
    text-align: center;
}

.interests-container p {
    color: #fff;
    font-size: 3.256vw; /* 14px */
    padding-top: 10px;
    max-width: 84.884vw; /* 365px */
    margin-left: auto;
    margin-right: auto;
}

.interests-container.hide {
    display: none;
}

.interests-container button.button-style-6, 
.interests-container a.button-style-6 {
    margin-top: 33px;
}

.interests-container .profile-title-1 {
    display: block;
    text-align: center;
    position: relative;
}

.interests-container .profile-title-1 .closeProfBtnDiv {
    float: none;
    margin-top: 0;
    position: absolute;
    top: 7px;
    right: 10px;
}

.interests-container .profile-title-1 .closeProfBtn:before {
    width: 9px;
    height: 9px;
}

.interests-main {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 27.77% 27.77% 1fr;
    border-right: 0;
    margin: 14px 0 0 1px;
    position: relative;
    background: rgba(49, 45, 100, 0.5);
    border-radius: 27px;
    padding: 5px;
    gap: 1px 2px;
}

.interests-main li {
    background: rgba(49, 45, 100, 0.8);
    color: #fff;
    height: 22px;
    font-weight: 400;
    font-size: 3.256vw; /* 14px */
    line-height: 22px;
    padding: 0 1.163vw;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

.interests-main li:nth-child(4n + 1) {
    width: auto;
}

.interests-main li:nth-child(4n) {
    width: auto;
}

.interests-main li.active,
.interests-main li:hover {
    background: rgba(112, 42, 208, 1);
    color: #fff;
}

.interests-main li:nth-child(1) {
    border-top-left-radius: 26px;
}

.interests-main li:nth-child(5) {
    border-bottom-left-radius: 26px;
}

.interests-main li:nth-child(4) {
    border-top-right-radius: 26px;
}

.interests-main li:nth-child(8) {
    border-bottom-right-radius: 26px;
}

.interests-sec {
    margin: 18px 0 16px 0;
}

.interests-sec li {
    display: flex;
    flex-wrap: wrap;
    color: #702AD0;
    gap: 8px 10px;
    justify-content: center;
    font-size: 12px;
}

.interests-sec li.hide {
    display: none;
}

.interests-sec li span {
    border: 1px solid #9A51FF;
    background: rgba(49, 45, 100, 0.8);
    color: #BB89FF;
    border-radius: 55px;
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    cursor: pointer;
}

.interests-sec li span.hide {
    display: none;
}

.interests-sec li span:hover {
    background-color: #702AD0;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .interests-main {
        border-radius: 33px;
        max-width: 453px;
        margin-top: 14px;
        margin-left: auto;
        margin-right: auto;
        padding: 7px;
    }

    .interests-main li {
        height: 26px;
        font-size: 16px;
        line-height: 26px;
        padding: 0px 6px;
    }

    .interests-main li:nth-child(1) {
        border-top-left-radius: 32px;
    }
    
    .interests-main li:nth-child(5) {
        border-bottom-left-radius: 32px;
    }
    
    .interests-main li:nth-child(4) {
        border-top-right-radius: 32px;
    }
    
    .interests-main li:nth-child(8) {
        border-bottom-right-radius: 32px;
    }

    .interests-container p {
        font-size: 14px;
        padding-top: 14px;
        max-width: 373px;
    }

    .interests-container button.button-style-6, 
    .interests-container a.button-style-6 {
        margin-top: 20px;
    }

    .interests-container .profile-title-1 .closeProfBtnDiv {
        right: 0px;
    }
    
    .interests-container .profile-title-1 .closeProfBtn:before {
        width: 10px;
        height: 10px;
    }

    .interests-sec {
        margin-top: 19px;
        margin-bottom: 19px;
    }

    .interests-sec li {
        gap: 10px;
    }

    .interests-sec li span {
        height: 20px;
    }
}

.area-15 {
    width: 100%;
}

.area-15-wrapper {

}

/*@media only screen and (min-width: 1150px) {*/
/*    .area-15 section {*/
/*        padding: 0;*/
/*        width: 1110px;*/
/*        margin: 0 auto;*/
/*    }*/
/*}*/

.a15-txt {
    font-weight: 500;
    font-size: 3.721vw; /* 16px */
    line-height: 1.375;
    margin: 10.233vw 6.977vw; /* 44px 30px */
    text-align: left;
}

.area-15 h1 {
    font-family: var(--rubik);
    font-size: 6.512vw; /* 28px */
    font-weight: 700;
    padding: 0 4.651vw; /* 0 20px */
    text-align: center;
    display: block;
}

@media only screen and (min-width: 768px) {
    .a15-txt {
        font-size: 20px;
        margin: 63px 40px;
        text-align: center;
    }

    .area-15 h1 {
        font-size: 36px;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .a15-txt {
        margin-left: 35px;
        margin-right: 35px;
    }
}

.box-left {
    display: grid;
    width: 351px;
    height: 301px;
    background: url('/img/box-small.svg') top left no-repeat;
    background-size: 351px auto;
    filter: drop-shadow(18px 18px 30px rgba(0, 0, 0, 0.2));
    margin: 201px auto 38px auto;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .box-left.alt {
        height: 282px;
        background: url('/img/box-small3.svg') top left no-repeat;
        margin-top: 201px;
    }
}

@media only screen and (min-width: 768px) {
    .box-left {
        filter: unset;
        display: grid;
        width: 765px;
        height: 407px;
        background: url('/img/box-leftM.svg') top left no-repeat;
        background-size: 765px auto;
        margin: 0 auto 50px auto;
        position: relative;
    }
}

@media only screen and (min-width: 992px) {
    .area-15 {
        background: url('/img/about-pattern.png') center center no-repeat;
        background-size: contain;
    }

    .area-15-wrapper {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media only screen and (min-width: 1200px) {
    .box-left {
        display: grid;
        width: 1080px;
        height: 360px;
        background: url('/img/box-leftL.svg') top left no-repeat;
        background-size: 1080px auto;
        margin: 0 0 50px -35px;
        position: relative;
    }

    .area-15-wrapper {
        max-width: 1106px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

.box-left img {
    position: absolute;
    border-radius: 22px;
    width: 227px;
    left: 50%;
    transform: translateX(-50%);
    top: -164px;
}

@media only screen and (min-width: 768px) {
    .box-left img {
        width: 241px;
        top: -56px;
        right: 10px;
        left: unset;
        transform: none;
    }
}

@media only screen and (min-width: 1200px) {
    .box-left img {
        top: -56px;
        right: -20px;
    }
}

.box-left p {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    position: relative;
    width: 311px;
    height: 175px;
    padding: 0 0 0 30px;
    margin: 91px auto 0 auto;
    display: grid;
}

@media only screen and (max-width: 767px) {
    .box-left.alt p {
        height: 154px;
    }
}

@media only screen and (min-width: 768px) {
    .box-left p {
        line-height: 27px;
        font-size: 20px;
        width: 405px;
        padding: 0 0 0 30px;
        margin: 90px 0 0 80px;
        height: unset;
        display: unset;
        place-items: center;
    }
}

@media only screen and (min-width: 1200px) {
    .box-left p {
        display: grid;
        width: 632px;
        height: 226px;
        margin: 50px 0 0 80px;
        padding-left: 35px;
    }
}

.box-left p span {
    position: relative;
}

.box-left p span::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: #702AD0;
    position: absolute;
    top: 6px;
    left: -30px;
}

.box-right {
    display: grid;
    width: 351px;
    height: 257px;
    background: url('/img/box-small2.svg') top left no-repeat;
    background-size: 351px auto;
    filter: drop-shadow(18px 18px 30px rgba(0, 0, 0, 0.2));
    margin: 201px auto 38px auto;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .box-right.alt {
        height: 235px;
        background: url('/img/box-small4.svg') top left no-repeat;
        margin-top: 201px;
    }
}

@media only screen and (min-width: 768px) {
    .box-right {
        filter: unset;
        display: grid;
        width: 765px;
        height: 407px;
        background: url('/img/box-rightM.svg') top left no-repeat;
        background-size: 765px auto;
        margin: 0 auto 50px 40px;
        position: relative;
    }
}

@media only screen and (min-width: 850px) {
    .box-right {
        margin-left: auto;
    }
}

@media only screen and (min-width: 1200px) {
    .box-right {
        display: grid;
        width: 1080px;
        height: 360px;
        background: url('/img/box-rightL.svg') top left no-repeat;
        background-size: 1080px auto;
        margin: 0 -85px 50px auto;
        position: relative;
    }

    .box-left p span::before {
        left: -35px;
    }
}

.box-right img {
    position: absolute;
    border-radius: 22px;
    /*box-shadow: 18px 18px 40px 0px rgba(0, 0, 0, 0.1);*/
    width: 227px;
    left: 50%;
    transform: translateX(-50%);
    top: -164px;
}

@media only screen and (min-width: 768px) {
    .box-right img {
        width: 241px;
        top: -54px;
        left: -18px;
        transform: none;
    }
}

@media only screen and (min-width: 1200px) {
    .box-right img {
        top: -56px;
        left: -56px;
    }
}

.box-right p {
    font-size: 16px;
    line-height: 22px;
    position: relative;
    width: 311px;
    padding: 0 0 0 30px;
    margin: 91px auto 0 auto;
    height: 166px;
    display: grid;
}

@media only screen and (max-width: 767px) {
    .box-right.alt p {
        margin-top: 91px;
        height: 110px;
    }
}

@media only screen and (min-width: 768px) {
    .box-right p {
        font-size: 20px;
        line-height: 27px;
        width: 405px;
        margin: 100px 0 0 160px;
        justify-self: center;
        height: unset;
        display: unset;
        place-items: center;
    }
}

@media only screen and (min-width: 1200px) {
    .box-right p {
        justify-self: center;
        display: grid;
        width: 632px;
        height: 226px;
        margin: 50px 0 0 80px;
    }
}

.box-right p span {
    position: relative;
}

.box-right p span::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: #702AD0;
    position: absolute;
    top: 6px;
    left: -30px;
}

.area-bottom {
    margin-top: 46px;
    position: relative;
}

.area-bottom:before {
    content: '';
    background: linear-gradient(113.97deg, #26C1E3 -13.43%, #702AD0 99.9%);
    border-radius: 40px 40px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% + 100px);
    z-index: -1;
}

.area-bottom-wrapper {
    display: grid;
    justify-content: center;
    margin-top: 46px;
    padding: 52px 0 42px 0;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .area-bottom {
        margin-top: 90px;
    }

    .area-bottom-wrapper {
        grid-template-columns: repeat(2, 370px);
    }
}

@media only screen and (min-width: 1200px) {
    .area-bottom {
        margin-top: 160px;
    }

    .area-bottom-wrapper {
        grid-template-columns: repeat(2, 583px);
    }
}

.area-bottom .squiggly {
    position: absolute;
    bottom: 40px;
    left: 5%;
    width: 90px;
}

@media only screen and (min-width: 400px) {
    .area-bottom .squiggly {
        bottom: 70px;
    }
}

@media only screen and (min-width: 750px) {
    .area-bottom .squiggly {
        bottom: 120px;
        left: 5%;
        width: 100px;
    }
}

@media only screen and (min-width: 1166px) {
    .area-bottom .squiggly {
        width: 124px;
        bottom: 150px;
        left: 5%;
    }
}

.box-ab {
    /*margin-top: -100px;*/
    width: 350px;
    height: 163px;
    padding: 0;
    background: url('/img/box-abS.svg') top left no-repeat;
    background-size: 350px auto;
    position: relative;
    display: grid;
    align-items: center;
    filter: drop-shadow(18px 18px 30px rgba(0, 0, 0, 0.2));
    padding: 0 0 0 12px;
}

.box-ab.mtb {
    margin-top: 25px;
    padding-left: 33px;
}

.box-ab.mtb p {
    margin-top: 40px;
    margin-left: 0;
}

@media only screen and (min-width: 768px) {
    .box-ab {
        filter: unset;
        margin-top: -220px;
        width: 470px;
        height: 359px;
        padding: 90px 90px 90px 70px; /* 70px 90px 90px 70px; */
        background: url('/img/box-abM.svg') top left no-repeat;
        background-size: 470px auto;
        position: relative;
        display: grid;
        align-items: start; /* center; */
        margin-left: -32px;
        grid-template-rows: auto 1fr;
    }

    .box-ab.mtb {
        margin-top: -220px;
        margin-bottom: 0;
        padding-left: 70px;
    }
}

@media only screen and (min-width: 1200px) {
    .box-ab {
        padding: 70px 90px 90px 120px;
        background: url('/img/box-ab.svg') top left no-repeat;
        width: 643px;
        height: 359px;
        margin-left: unset;
    }

    .box-ab.mtb {
        padding-left: 120px;
    }
}

.box-ab i {
    width: 66px;
    height: 66px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    position: absolute;
    top: 0;
    right: -4px;
}

@media only screen and (min-width: 768px) {
    .box-ab i {
        top: 40px;
        left: 324px;
        right: unset;
    }
}

@media only screen and (min-width: 1200px) {
    .box-ab i {
        width: 71px;
        height: 71px;
        left: 495px;
    }
}

.area-bottom h1 {
    font-family: var(--rubik);
    font-size: 28px;
    font-weight: 700;
    background-image: linear-gradient(91.28deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 768px) {
    .area-bottom h1 {
        font-size: 25px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-bottom h1 {
        font-size: 36px;
        text-align: center;
        transform: translateX(-30px);
    }

    .area-bottom .box-ab.mtb h1 {
        text-align: center;
    }
}

.area-bottom h1 br {
    display: none;
}

@media only screen and (min-width: 768px) {
    .area-bottom h1 br {
        display: block;
    }
}

@media only screen and (min-width: 1200px) {
    .area-bottom h1 br {
        display: none;
    }
}

.area-bottom p {
    font-size: 16px;
    font-family: var(--nunito);
    font-weight: 700;
    display: grid;
    gap: 20px 0;
    align-self: start;
    margin: 0 0 0 20px;
}

.area-bottom p.mt30 {
    margin-top: 30px;
}

@media only screen and (min-width: 768px) {
    .area-bottom p {
        margin-top: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .area-bottom p {
        font-size: 20px;
        margin-top: 20px;
    }
    .area-bottom p.mt30 {
        margin-top: unset;
    }
}

@media only screen and (min-width: 1200px) {
    .area-bottom p {
        margin-left: 30px;
    }
}

.area-bottom p a {
    color: #444;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
    padding: 0 0 0 30px;
    position: relative;
}

.area-bottom p a::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: #702AD0;
    position: absolute;
    top: 4px; /* 3px; */
    left: 0;
}

@media only screen and (min-width: 1200px) {
    .area-bottom p a::before {
        top: 7px;
    }
}

body.about {
    background: url('/img/about-bg.svg') top 570px left no-repeat;
    background-size: 864px auto;
}


body.faq {
    background-image: url('/img/about-bg.svg'), url('/img/faq-bg.svg');
    background-position: top 760px left, bottom 1140px right;
    background-size: 864px auto, 740px auto;
    background-repeat: no-repeat;
}

.faq-section {
    margin: 12.558vw auto 15.581vw; /* 54px auto 67px */
    display: grid;
    grid-template-columns: minmax(0, 1150px);
    padding-left: 3.721vw; /* 16px */
    padding-right: 3.721vw; /* 16px */
    justify-content: center;
    counter-reset: counter;
    text-align: left;
}

.faq-section h3 {
    counter-increment: counter;
    font-weight: 700;
    font-size: 6.51vw; /* 28px */
    text-align: left;
    padding-right: 11.63vw; /* 50px */
    margin-bottom: 4.65vw; /* 20px */
}

.faq-section h3:before {
    content: counter(counter, upper-roman) ". ";
    color: #702AD0;
}

@media only screen and (min-width: 768px) {
    .faq-section {
        padding: 0 50px;
        margin-top: 66px;
        margin-bottom: 94px;
    }

    .faq-section h3 {
        font-size: 32px;
        padding-right: 0;
        margin-bottom: 41px;
    }
}

dl.faq-v2 {
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 3.721vw; /* 16px */ 
}

@media only screen and (min-width: 768px) {
    dl.faq-v2 {
        font-size: 20px;
        padding-left: 43px;
    }
}

dl.faq-v2 dt {
    position: relative;
    font-size: 4.65vw; /* 20px */
    font-weight: 700;
    line-height: 1.3636;
    padding: 0 2.33vw 0 6.977vw; /* 0 10px 0 30px */
    margin-bottom: 4.65vw; /* 20px */
}

dl.faq-v2 dd {
    line-height: 1.875;
    margin-bottom: 4.65vw; /* 20px */
}

@media only screen and (min-width: 768px) {
    dl.faq-v2 dt {
        font-size: 32px;
        padding-left: 30px;
        margin-bottom: 23px;
    }

    dl.faq-v2 dd {
        margin-bottom: 41px;
    }
}

@media only screen and (min-width: 1200px) {
    dl.faq-v2 {
        max-width: 1061px;
    }
}

dl.faq-v2 dt::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #702AD0;
    position: absolute;
    top: 1.628vw; /* 7px; */
    left: 0;
}

@media only screen and (min-width: 768px) {
    dl.faq-v2 dt::before {
        width: 16px;
        height: 16px;
        top: 13px; /*14px;*/
    }
}

dl.faq-v2 a:link,
dl.faq-v2 a:visited {
    color: #408FDD;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
}

/* dl.faq-v2 a.blue-2:link,
dl.faq-v2 a.blue-2:visited {
    color: #31ACE1;
    text-decoration: none;
}

dl.faq-v2 a.blue-2:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
} */

dl.faq-v2 ul {
    padding: 0 0 0 10px;
    margin: 0 0 20px;
}

dl.faq-v2 ul li {
    padding: 0 0 0 20px;
    position: relative;
}

dl.faq-v2 ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #383838;
    position: absolute;
    top: 10px;
    left: 0;
}

@media only screen and (min-width: 768px) {
    dl.faq-v2 ul li::before {
        width: 8px;
        height: 8px;
        top: 14px;
    }
}

.profWhoIamStatus {
    margin-left: 10px;
    display: inline-block;
    color: #fff;
    position: relative;
    z-index: 1;
}

/* .profWhoIamStatus:before {
    content: '';
    background-color: #fff;
    position: absolute;
    top: 100%;
    width: 100%;
    height: 10px;
    z-index: -1;
} */

.profVerfStatusGo {
    background-color: #62dc84 !important;
}

.ft-size-16 {
    font-size: 16px !important;
}

.text-lred {
    color: #F9C701 !important;
}

.ft-size-12 {
    font-size: 12px !important;
    font-weight: 600;
}

.profIntrst-main-mod {
    /* overflow-y: hidden; */
    /* border-bottom: #eff0fb 18px solid; */
}

.font-weight-600 {
    font-weight: 600 !important;
}

.text-updateConfirm {
    font-family: var(--nunito);
    font-size: 14px;
    background-color: #2BC53D;
    border-radius: 50px;
    padding: 3px 10px;
    color: #fff;
}

.closeProfBtnDiv {
    float: right;
    margin-top: 6px;
}

.closeProfBtn {
    text-decoration: none !important;
    font-weight: bold;
    font-size: 18px;
}

.closeProfBtn:before {
    content: '';
    background: url('/img/modal-x.svg') top center no-repeat;
    background-size: 100% auto;
    display: block;
    width: 14px;
    height: 14px;
}

.profImageOverlay {
    position: fixed;
    top: 0;
    width: 95vw;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    height: 500px;
    border-radius: 16px;
}

.profImg-cropsave-container {
    background: #fff;
}

.crop-box {
    padding: 1rem !important;
    margin-bottom: 35px !important;
}

@media screen and (min-width: 992px) {
    .closeProfBtnDiv {
        margin-top: 8px;
    }
}



/*------------------------------------------------------*/

.swiper-shadow {
    width: calc(100% + 6.914vw);
    border-radius: 6.133vw; /* 23px */
    overflow: hidden;
    margin: 0 -3.467vw -13.333vw; /* 50px */
}

swiper-container.cityBased {
    width: 100%;
    padding: 0 3.467vw 13.333vw; /* 50px */
    border-radius: 6.133vw; /* 23px */
    color: #000;
    /*overflow: hidden;*/
    margin: 0 auto;
    position: relative;
    /*box-shadow: 16.74px 16.74px 23.44px 0px rgba(20, 10, 29, 0.24);*/
}

swiper-container.cityBased:before {
    content: '';
    border-bottom-left-radius: 6.133vw; /* 23px */
    border-bottom-right-radius: 6.133vw; /* 23px */
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 16.745px 16.745px 23.443px rgba(20, 10, 29, 0.24);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: absolute;
    top: 34%;
    bottom: 13.333vw; /* 50px */
    left: 3.467vw;
    right: 3.467vw;
    z-index: -1;
}

@media only screen and (min-width: 768px) {
    .swiper-shadow {
        width: calc(100% + 100px);
        border-radius: 23px;
        margin: 0 -50px -100px;
    }

    swiper-container.cityBased {
        border-radius: 23px;
        padding: 0 50px 100px;
    }

    swiper-container.cityBased:before {
        box-shadow: 20px 20px 28px 0px rgba(20, 10, 29, 0.24);
        border-bottom-left-radius: 23px;
        border-bottom-right-radius: 23px;
        top: 30%;
        bottom: 100px;
        left: 50px;
        right: 50px;
    }
}

@media only screen and (min-width: 992px) {
    swiper-container.cityBased:before {
        border-bottom-left-radius: 23px;
        border-bottom-right-radius: 23px;
    }
}

@media only screen and (min-width: 1200px) {
    swiper-container.cityBased:before {
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;
    }
}

swiper-container .bg {
    position: absolute;
}

.cityBased swiper-slide {
    text-align: center;
    font-size: 3.467vw; /* 13px */
    display: flex;
    justify-content: center;
    align-items: start;
}

@media only screen and (min-width: 992px) {
    .cityBased swiper-slide {
        font-size: 13px;
    }
}

.cityBased swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-slide {
    padding: 2.667vw; /* 10px */
    display: grid;
    grid-template-columns: 32.533vw minmax(0, 1fr); /* 122px */
    grid-template-rows: 32.533vw minmax(0, 1fr); /* 122px */
    gap: 2.667vw 4.267vw; /* 16px */
    align-items: stretch;
    /* height: 380px; */
    box-sizing: border-box;
}

.city-slide .cs-photo {
    position: relative;
    z-index: 3;
}

.city-slide .cs-photo span {
    color: #FAA908;
    background-color: #fff;
    border-radius: 11.733vw; /* 44px */
    font-weight: 700;
    font-size: 3.467vw; /* 13px */
    padding-left: 2.4vw; /* 9px */
    padding-right: 2.4vw; /* 9px */
    display: inline-block;
    position: absolute;
    bottom: 4.8vw; /* 18px */
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (min-width: 992px) {
    .city-slide {
        grid-template-columns: 146px minmax(0, 1fr);
        grid-template-rows: 146px  minmax(0, 1fr);
        gap: 10px 20px;
        padding: 10px;
    }

    .city-slide .cs-photo span {
        border-radius: 44px;
        font-size: 13px;
        padding-left: 9px;
        padding-right: 9px;
        bottom: 18px;
    }
}

.city-slide img {
    width: 32.533vw; /* 122px */
    border-radius: 50%;
    border: 3px solid #fff;
}

@media only screen and (min-width: 992px) {
    .city-slide img {
        width: 146px;
    }
}

.city-slide .cs-details {
    display: grid;
    align-content: center;
    position: relative;
}

.city-slide .cs-details i {
    font-style: normal;
    display: none;
}

@media only screen and (min-width: 450px) {
    .city-slide .cs-details i {
        display: unset;
    }
}

body .city-slide .cs-details > span:nth-of-type(1) {
    color: #702AD0;
    font-size: 4.267vw; /* 16px */
    font-family: var(--rubik);
    text-transform: uppercase;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-top: 4.533vw; /* 17px */
    padding-bottom: 4.533vw; /* 17px */
    margin-top: 9.067vw; /* 34px */
    margin-bottom: 3.2vw; /* 12px */
}

body .city-slide .cs-details > span:nth-of-type(1):before {
    content: '';
    background-color: #fff;
    border-top-left-radius: 6.133vw; /* 23px */
    border-top-right-radius: 6.133vw; /* 23px */
    position: absolute;
    top: 0;
    bottom: 0;
    left: -39.467vw; /* 148px */
    right: -2.667vw;
    z-index: -1;
}

body .city-slide .cs-details > span:nth-of-type(1) b:nth-of-type(1) {
    order: 2;
}

body .city-slide .cs-details > span:nth-of-type(1) b:nth-of-type(2) {
    order: 1;
}

@media only screen and (min-width: 450px) {
    body .city-slide .cs-details > span:nth-of-type(1) {
        flex-direction: row;
        gap: 4px;
    }

    body .city-slide .cs-details > span:nth-of-type(1) b:nth-of-type(1) {
        order: 1;
    }
    
    body .city-slide .cs-details > span:nth-of-type(1) b:nth-of-type(2) {
        order: 2;
    }
}

@media only screen and (min-width: 768px) {
    body .city-slide .cs-details > span:nth-of-type(1):before {
        border-top-left-radius: 23px;
        border-top-right-radius: 23px;
    }
}

@media only screen and (min-width: 992px) {
    body .city-slide .cs-details > span:nth-of-type(1) {
        font-size: 16px;
        padding-top: 17px;
        padding-bottom: 17px;
        margin-top: 34px;
        margin-bottom: 12px;
    }

    body .city-slide .cs-details > span:nth-of-type(1):before {
        left: -176px;
        right: -10px;
    }
}

body .city-slide .cs-details > span:nth-of-type(2) {
    font-size: 4.267vw; /* 16px */
    font-family: var(--rubik);
    text-transform: initial;
    text-align: left;
    -webkit-text-stroke: unset;
}

@media only screen and (min-width: 992px) {
    body .city-slide .cs-details > span:nth-of-type(2) {
        font-size: 16px;
    }
}

.city-slide .cs-details hr {
    display: inline-block;
    width: 154px;
    height: 5px;
    background-color: #fff;
    border: 0;
    border-radius: 5px;
    margin: 10px 0;
}

.city-slide ul {
    grid-column: span 2;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3.2vw 1.867vw; /* 12px 7px */
    justify-content: center;
    align-content: center;
}

.city-slide ul li {
    height: 6.667vw; /* 25px */
    width: 27.5vw; /* 103px */
    background-color: #fff;
    border: 1px solid #702AD0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16.8vw; /* 63px */
    color: #702AD0;
    white-space: nowrap;
    overflow: hidden;
}

@media only screen and (min-width: 992px) {
    .city-slide ul {
        gap: 12px 7px;
    }

    .city-slide ul li {
        width: 124px;
        height: 30px;
    }
}

.section-events {
    margin-bottom: -17.867vw; /* -67px */
}

.cb-events {
    display: grid;
    grid-template-columns: repeat(4, 305px);
    justify-content: space-between;
    gap: 0 10px;
    padding-top: 9.067vw; /* 34px */
    padding-bottom: 17.867vw; /* 67px */
    padding-left: 11.467vw; /* 43px */
}

@media only screen and (min-width: 768px) {
    .section-events {
        margin-bottom: -67px;
    }

    .cb-events {
        padding-top: 23px;
        padding-bottom: 67px;
        padding-left: 43px;
    }
}

@media only screen and (min-width: 992px) {
    .section-events {
        margin-top: 63px;
    }

    .section-events .container {
        padding-left: 0;
        padding-right: 0;
    }

    .cb-events {
        padding-top: 63px;
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media only screen and (min-width: 1200px) {
    .cb-events {
        padding-left: 74px;
        padding-right: 0;
        /* margin-left: -50px; */
        /*max-width: 1246px;*/
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: repeat(4, 1fr);
    }
}

.cb-events li {
    background-color: #fff;
    box-shadow: 12px 15px 67px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.cbe-img {
    position: relative;
    display: block;
}

.cbe-img img {
    width: 305px;
    height: 284px;
    border-radius: 0;
    display: block;
    position: relative;
}

.cbe-img span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, #14161A 7.2%, rgba(20, 22, 26, 0) 54.92%);
    z-index: 3;
}

.cbe-time {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -31px auto 0 auto;
    width: 265px;
    height: 47px;
    background: linear-gradient(92.48deg, #26C1E3 -17.97%, #7120CC 99.88%);
    border-radius: 69px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--nunito);
    position: relative;
    z-index: 5;
}

.cbe-users {
    display: flex;
    margin: 28px 0 30px 28px;
}

.cbe-users li {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border: 1px solid #fff;
    box-shadow: unset;
    margin-left: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    position: relative;
}

.cbe-users li img {
    width: 100%;
}

.cbe-users li.plus {
    border: none;
    background-color: transparent;
    margin-left: 0;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.cbe-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px 24px 20px;
}

.cbe-name {
    position: absolute;
    top: 185px;
    left: 31px;
    z-index: 5;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.35;
    color: #fff;
}

.cbe-name span {
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.33;
}

a.cbe-button {
    width: 183px;
    height: 47px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    box-shadow: 9px 8px 34px rgba(0, 0, 0, 0.19);
    text-decoration: none;
    color: #6A39D2;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 166px;
    transition: all 0.2s ease-in;
}

a.cbe-button:hover {
    background: #702AD0;
    color: #fff;
}

.cbe-link {
    width: 47px;
    height: 47px;
    border: 1px solid #CECECE;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.cbe-link img {
    margin-right: 2px;
}

.cbe-link:hover img {
    opacity: 0.8;
}

.cb-events-scrolable {
    display: grid;
    grid-template-columns: max-content;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    position: relative;
    z-index: 10;
    transition: all 0.2s ease-in;
    scroll-behavior: smooth;
}

.cb-events-scrolable.w1340 {
    width: 100%;
}

@media only screen and (min-width: 992px) {
    .cbe-time {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1340px) {
    .cb-events-scrolable.w1340 {
        width: 1340px;
    }
}


@media only screen and (min-width: 1390px) {
    .cb-events-scrolable {
        /* width: 1390px; */
    }
}

.cb-events-scrolable.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1.02);
    scroll-behavior: unset;
}

.cb-events-scrolable::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.cb-events-scrolable.mt-130 {
    margin-top: -130px;
}

.cb-events-scrolable.pb80 {
    padding-bottom: 80px;
}


@media only screen and (min-width: 1080px) 
{
    /* city pages - 3 events */
    .cityPgEv3Sect {
        justify-content: center;
    }

    .cityPgEv3 {
        width: unset;
        max-width: 1250px;
        grid-template-columns: repeat(auto-fit, 305px) !important;
    }
}

@media only screen and (min-width: 750px) 
{
    /* city pages - 2 events */
    .cityPgEv2Sect {
        justify-content: center;
    }

    .cityPgEv2 {
        width: unset;
        max-width: 1250px;
        grid-template-columns: repeat(auto-fit, 305px) !important;
    }
}

.cityPgEv1Sect {
    /* city pages - 1 event - center regardless */
    justify-content: center;
}

.cityPgEv1 {
    width: unset;
    max-width: 1250px;
    grid-template-columns: repeat(auto-fit, 305px) !important;
}


/* city page - first date idea images */
.cbe-img.fdimg {
    width: 73.333vw; /* 275px */
    height: 53.867vw; /* 202px */
    border-radius: 0;
    display: block;
    position: relative;
    border-radius: 8vw; /* 30px */
    object-fit: cover;
}

.cityPgFdI-ul {
    /* max-width: 1250px; */
}

@media only screen and (min-width: 768px) {
    .cbe-img.fdimg {
        width: 275px;
        height: 202px;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 992px) {
    .cbe-img.fdimg {
        width: 385px;
        height: 283px;
    }
}

@media only screen and (min-width: 1200px) {
    .cbe-img.fdimg {
        width: 100%;
    }
}


@media only screen and (min-width: 850px) 
{
    .cityPgFdI2 {
        grid-template-columns: repeat(2, 405px) !important;
    }

    .cityPgFdI2-sect {
        justify-content: center;
    }
}

@media only screen and (min-width: 500px) 
{
    .cityPgFdI1 {
        grid-template-columns: repeat(1, 405px) !important;
    }

    .cityPgFdI1-sect {
        justify-content: center;
    }
}

.area-16 {
    margin-top: 11.467vw; /* 43px */
}

.area-16-wrapper {
    position: relative;
    padding-left: 3.467vw; /* 13px */
    padding-right: 3.467vw; /* 13px */
    color: #444;
    font-weight: 500;
    font-size: 4.8vw; /* 18px */
    line-height: 1.38;
    display: grid;
    gap: 9.333vw; /* 35px */
    grid-template-columns: 1fr;
    justify-content: center;
}

.area-16 button.a12-button {
    border: 0;
    align-self: end;
    width: 76.8vw; /* 288px */
    height: 17.6vw; /* 66px */
    border-radius: 44.267vw; /* 166px */
    background: linear-gradient(93deg, #FFF275 0.94%, #F9A300 101.84%);
    font-size: 6.4vw; /* 24px */
    font-weight: bold;
    font-family: var(--rubik);
    color: #702AD0;
    cursor: pointer;
    margin-top: 2.667vw; /* 10px */
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.area-16 button.a12-button.toCenter {
    margin-left: auto;
    margin-right: auto;
}

.area-16 button.a12-button.mb10-40 {
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    .area-16 button.a12-button.shaddow {
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.30);
    }
}

@media only screen and (min-width: 768px) {
    .area-16 {
        margin-top: 43px;
    }

    .area-16-wrapper {
        gap: 35px;
        font-size: 18px;
    }

    .area-16 button.a12-button {
        border-radius: 166px;
        width: 288px;
        height: 66px;
        font-size: 24px;
        margin-top: 8px;
    }

    .area-16 button.a12-button:hover {
        background: #702AD0;
        color: #fff;
    }

    .area-16 button.a12-button.mb10-40 {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 992px) {
    .area-16-wrapper {
        grid-template-columns: 46.41% 49.59%;
        align-items: center;
        gap: 64px 4%;
        padding-left: 50px;
        padding-right: 50px;
        
    }
}

@media only screen and (min-width: 1200px) {
    .area-16-wrapper {
        font-size: 20px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1400px) {
    .area-16-wrapper {
        grid-template-columns: 47.2% 49.59%;
        gap: 64px 3.21%;
        max-width: 1246px;
    }
}

.area-16 h1 {
    font-family: var(--rubik);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 6.933vw; /* 26px */
    line-height: normal;
}

@media only screen and (min-width: 768px) {
    .area-16 h1 {
        font-size: 48px;
    }
}

@media only screen and (min-width: 992px) {
    .area-16 h1 {
        font-size: 48px;
        grid-column: span 2;
    }
}

.signup-box {
    padding: 8.533vw 8vw 10.133vw; /* 32px 30px 38px */
    background: linear-gradient(114deg, #26C1E3 -13.43%, #702AD0 99.9%);
    border-radius: 8vw; /* 30px */
    font-size: 8.533vw; /* 32px */
    font-weight: 700;
    line-height: 1.1875;
    font-family: var(--rubik);
    color: #fff;
    text-align: center;
    display: grid;
    align-content: center;
    gap: 8vw 0; /* 30px */
    position: relative;
    z-index: 1;
}

.signup-box > span {
    padding-left: 1.333vw; /* 5px */
    padding-right: 1.333vw; /* 5px */
}

@media only screen and (min-width: 768px) {
    .signup-box {
        padding: 32px 30px 38px;
        font-size: 32px;
        gap: 30px 0;
    }
}

@media only screen and (min-width: 992px) {
    .signup-box {
        border-radius: 30px;
    }

    .signup-box > span {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media only screen and (min-width: 1200px) {
    .signup-box {
        font-size: 40px;
        gap: 46px 0;
        padding: 40px 52px 50px;
    }

    .signup-box > span {
        padding-left: 26px;
        padding-right: 26px;
    }
}

input.field-type-3 {
    height: 10.667vw; /* 40px */
    background-color: #fff;
    border: 1px solid #473567;
    border-radius: 20.267vw; /* 76px */
    font-family: var(--nunito);
    font-size: 4.8vw; /* 18px */
    font-weight: 500;
    color: #444;
    padding: 0 9.333vw; /* 35px */
}

input.field-type-3:focus::placeholder {
    opacity: 0;
}

@media only screen and (min-width: 768px) {
    input.field-type-3 {
        height: 40px;
        border-radius: 76px;
        font-size: 18px;
        padding: 0 35px; 
    }
}

body .txt-grad {
    background-image: linear-gradient(91deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

body .txt-grad.plr15 {
    padding-left: 15px;
    padding-right: 15px;
}

body .txt-grad.balance {
    text-wrap: balance;
}

.a16-squiggly {
    position: absolute;
    bottom: -12%;
    right: -5%;
    width: 114px;
    transform: rotate(265deg);
}

.a16-squiggly.hideM { 
    display: block;
    transform: none;
}
.a16-squiggly.hideS { display: none;}

@media only screen and (min-width: 500px) {
    .a16-squiggly {
        bottom: -16%;
    }
    .a16-squiggly.hideM { display: none;}
    .a16-squiggly.hideS { display: block;}
}

@media only screen and (min-width: 800px) {
    .a16-squiggly {
        left: 30%;
        bottom: -20%;
        right: unset;
        transform: none;
    }
}

@media only screen and (min-width: 1140px) {
    .a16-squiggly {
        width: 140px;
    }
}

h1.v5 {
    width: 1350px;
    margin: 0 auto 0 auto;
    padding: 80px 0 0 20px;
    font-family: var(--rubik);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    background-image: linear-gradient(110deg, #26c1e3 2%, #1189ad 46%, #7120cc 99%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    margin-bottom: 29px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 1140px) {
    h1.v5 {
        padding: 80px 20px 0 40px;
    }
}

h1.v5 br {
    display: block;
}

@media only screen and (min-width: 600px) {
    h1.v5 {
        font-size: 32px;
        margin-bottom: 55px;
    }
    h1.v5 br {
        display: none;
    }
}

@media only screen and (min-width: 800px) {
    h1.v5 {
        font-size: 48px;
        margin-bottom: 62px;
    }
}


ul.list-11 {
    margin: 0 auto;
    /* padding: 0 20px; */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.667vw; /* 0 10px */
}

@media only screen and (min-width: 768px) {
    ul.list-11 {
        gap: 0 20px;
    }
}

@media only screen and (min-width: 992px) {
    ul.list-11 {
        gap: 0 45px;
    }
}

ul.list-11 img {
    margin-bottom: 4.8vw; /* 18px */
}

ul.list-11 li {
    display: grid;
    justify-items: start;
    color: #383838;
    font-family: var(--nunito);
    font-size: 4.8vw; /* 18px */
    max-width: 73.333vw; /* 275px */
}

a.l11-title {
    font-size: 5.333vw; /* 20px */
    color: #383838;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
    font-weight: 700;
    margin-bottom: 0.8vw; /* 3px */
}

a.l11-title:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    ul.list-11 img {
        margin-bottom: 15px;
    }
    
    ul.list-11 li {
        font-size: 18px;
        max-width: 275px;
    }
    
    a.l11-title {
        font-size: 24px;
        margin-bottom: 4px;
    }
}

@media only screen and (min-width: 992px) {
    ul.list-11 li {
        max-width: 385px;
    }
}

@media only screen and (min-width: 1200px) {
    ul.list-11 li {
        max-width: 100%;
    }
}

.area-17 {
    margin-top: 9.333vw; /* 35px */
}

.area-17-wrapper {
    padding-left: 10.667vw; /* 40px */
    margin-left: auto;
    margin-right: auto;
}

.area-17 h1 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 6.933vw; /* 26px */
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: 8.8vw; /* 33px */
    background: linear-gradient(91deg, #26C1E3 2.7%, #1189AD 45.76%, #7120CC 96.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 768px) {
    .area-17 {
        margin-top: 63px;
    }
    
    .area-17-wrapper {
        /* padding-left: 0; */
    }
    
    .area-17 h1 {
        font-size: 32px;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 992px) {
    .area-17-wrapper {
        padding-left: 50px;
    }
    
    .area-17 h1 {
        font-size: 48px;
        margin-bottom: 50px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-17-wrapper {
        max-width: 1200px;
        padding-left: 0;
    }
}

@media only screen and (min-width: 1400px) {
    .area-17-wrapper {
        max-width: 1246px;
    }
}

.area-18 {
    margin-top: 13.867vw; /* 52px */
    margin-bottom: 15.2vw; /* 57px */
}

.area-18-wrapper {
    margin-left: 3.467vw; /* 13px */
    margin-right: 3.467vw; /* 13px */
    border-radius: 10.667vw; /* 40px */
    background: linear-gradient(165deg, #3B97DE -6.24%, #6E2FD1 80.52%);
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 4.533vw; /* 17px */
    line-height: 1.35;
    padding: 13.867vw 4vw; /* 52px 15px */
    display: grid;
}

@media only screen and (min-width: 768px) {
    .area-18 {
        margin-top: 73px;
        margin-bottom: 82px;
    }

    .area-18-wrapper {
        border-radius: 40px;
    }
}

@media only screen and (min-width: 992px) {
    .area-18-wrapper  {
        margin-left: 50px;
        margin-right: 50px;
        font-size: 20px;
        padding: 71px 95px 77px;
    }
}

@media only screen and (min-width: 1200px) {
    .area-18-wrapper {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 1400px) {
    .area-18-wrapper {
        max-width: 1246px;
    }
}

.a18-txt {
    text-align: left;
}

@media only screen and (min-width: 992px) {
    .a18-txt {
        text-align: center;
    }
}

.area-18 a {
    color: #fff;
    font-size: 4.267vw; /* 16px */
    letter-spacing: 0.1em;
    line-height: 2.125;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
}

.area-18 a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 992px) {
    .area-18 a {
        font-size: 20px;
    }
}

body .lh27 {
    line-height: 27px;
}

.a18-title {
    position: relative;
    text-transform: uppercase;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 6.933vw; /* 26px */
    text-wrap: balance;
    color: #F9C701;
    display: block;
    line-height: 1.192;
    padding-top: 11.733vw; /* 44px */
    padding-bottom: 11.733vw; /* 44px */
    justify-self: center;
}

.a18-title:first-child {
    padding-top: 0;
}

@media only screen and (min-width: 992px) {
    .a18-title {
        font-size: 32px;
        padding-top: 34px;
        padding-bottom: 40px;
        display: inline-block;
        text-wrap: initial;
    }
}

@media only screen and (min-width: 1200px) {
    .a18-title {
        font-size: 48px;
        padding-top: 34px;
        padding-bottom: 51px;
    }

    .a18-title:first-child {
        padding-bottom: 58px;
    }
}



img.a18-img1 {
    position: absolute;
    top: 8.5%;
    left: 6%;
    width: 75px;
}

@media only screen and (min-width: 1230px) {
    img.a18-img1 {
        top: 12%;
        left: 6%;
        width: 109px;
    }
}

br.br800 {
    display: block;
}

@media only screen and (min-width: 800px) {
    br.br800 {
        display: none;
    }
}


.a18-title.lines::before,
.a18-title.lines::after {
    content: '';
    position: absolute;
    height: 1.333vw; /* 5px */
    background-color: #fff;
    border-radius: 15.733vw; /* 59px */
    width: 29.8%;
    left: 50%;
    transform: translateX(-50%);
}

.a18-title.lines::before {
    top: 8.533vw; /* 32px */
}

.a18-title.lines::after {
    bottom: 8.533vw; /* 32px */
}

@media only screen and (max-width: 991px) {
    .a18-title.lines {
        margin-top: 3.2vw; /* 12px */
        margin-bottom: 3.2vw; /* 12px */
    }
}

@media only screen and (min-width: 992px) {
    .a18-title.lines::before,
    .a18-title.lines::after {
        transform: translateY(-50%);
        top: 50%;
        width: 176px;
        height: 5px;
    }

    .a18-title.lines::before {
        left: initial;
        right: calc(100% + 14px);
    }

    .a18-title.lines::after {
        left: calc(100% + 14px);
    }
}


/* Login nov 2023 */

body.bg5 {
    background: url('/img/bg-51-mobile.svg') bottom right no-repeat, linear-gradient(159.66deg, #3B97DE -5.62%, #6F2ED1 69.42%);
    background-size: auto auto, contain;
    height: 100%;
}

.google-signin-loginpg {
    margin: 0 auto; width: fit-content;
}

@media only screen and (min-width: 768px) {
    body.bg5 {
        background: url('/img/bg-51-desktop.svg') bottom center no-repeat, linear-gradient(117.5deg, #26C1E3 0%, #702AD0 100%);
        background-size: 100% auto;
        height: 100%;
    }

    .google-signin-loginpg {
        width: 100%;
    }
}

.login-box-container {
    display: grid;
    place-items: flex-start;
    height: 100%;
    overflow: auto;
}

.login-box {
    color: #fff;
    position: relative;
    display: grid;
    justify-items: center;
    text-align: left;
    width: 100%;
    gap: 15px 24px;
    padding: 64px 11px;
    font-size: 14px;
}

.error-message {
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    margin-bottom: -5px;
}

.error-message .text-lred {
    display: block;
}

.error-message a {
    color: inherit;
}

.login-box-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px 0px;
}

.login-box-buttons .btn {
    border: 0;
    border-radius: 166px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-size: 24px;
    font-weight: 700;
    color: #702AD0;
    cursor: pointer;
    transition: all 0.3s ease-in;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 56px;
    padding: 0 20px;
}

.login-box-buttons .btn:hover {
    background: #702AD0;
    color: #fff;
}

.login-box-buttons .btn-invert {
    border: 2px solid #fff;
    border-radius: 166px;
    background: transparent;
    font-family: var(--rubik);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-in;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 56px;
    padding: 0 20px;
}

.login-box-buttons .btn-invert:hover {
    background: #702AD0;
    border-color: #702AD0;
    color: #fff;
}

.open-event {
    border: 2px solid #FFFFFF;
    border-radius: 26px;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 0 20px;
    width: 100%;
}

.open-event-image {
    width: 130px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
}

.open-event-image img {
    display: block;
    width: 100%;
    height: auto;
}

.login-box .open-event h5 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.login-box .open-event h5:last-child {
    margin-bottom: 0;
}

.login-box .open-event p {
    font-size: var(--nunito);
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 3px;
}

.login-box .open-event p:last-child {
    margin-bottom: 0;
}


@media only screen and (min-width: 768px) {
    .login-box {
        width: 487px;
        padding: 50px 0;
    }

    .error-message {
        font-size: 18px;
        line-height: 25px;
    }

    .error-message .text-lred {
        display: inline;
    }

    .login-box-buttons {
        flex-direction: row;
        gap: 0 18px;
        width: 100%;
        margin-top: 18px;
    }

    .open-event {
        max-width: 354px;
        margin-left: 0;
        margin-right: auto;
    }

    .login-box-buttons .btn,
    .login-box-buttons .btn-invert {
        width: 240px;
        height: 60px;
    }
}

@media only screen and (min-width: 992px) {
    .error-message {
        white-space: nowrap;
    }
}

@media only screen and (min-width: 1200px) {
    .login-box {
        margin-top: 120px;
        margin-bottom: auto;
    }
}


.login-box a:link,
.login-box a:visited {
    text-decoration-thickness: 0.7px;
    text-underline-offset: 3px;
}

.login-box p a {
    color: inherit;
}

.login-logo {
    width: 120px;
}

@media only screen and (min-width: 768px) {
    .login-logo {
        width: 160px;
    }

    .login-box-container {
        place-items: center;
    }
}

.login-box h1 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    margin-right: auto;
}

.login-box h1 span {
    color: #F9C701;
}

@media only screen and (min-width: 768px) {
    .login-box h1 {
        font-size: 48px;
        line-height: 57px;
    }
}

.login-box form {
    width: 100%;
    display: grid;
    gap: 16px;
}

@media only screen and (min-width: 768px) {
    .login-box form {
        width: 396px;
        margin-top: 14px;
        margin-right: auto;
    }
}

@media only screen and (min-width: 1728px) {
    .login-box form {
        width: 22.569vw; /* 390px */
        gap: 0.579vw; /* 10px */
    }
}

.login-box form input {
    height: 46px;
    border-radius: 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    color: #fff;
    /* margin-bottom: 10px; */
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    padding: 11px 0;
}

.login-box form input::placeholder {
    color: #fff;
}

.login-box form input:focus::placeholder {
    opacity: 0;
}

.login-box p {
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
}

.login-box.feedback p {
    font-size: 16px;
    line-height: 22px;
    margin-left: 0;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .login-box form input {
        font-size: 18px;
        line-height: 25px;
        padding-top: 9px;
        padding-bottom: 9px;
        height: 43px;
    }

    .login-box.feedback p {
        font-size: 18px;
        line-height: 25px;
        white-space: nowrap;
    }

    .login-box.feedback p:last-child {
        white-space: normal;
    }
}

.lb-links {
    display: flex;
    justify-content: center;
    gap: 0 36px;
    margin: 16px 0 0;
    font-size: 16px;
}

@media only screen and (min-width: 768px) {
    .lb-links {
        font-size: 18px;
        justify-content: flex-start;
        gap: 0 30px;
        margin-top: 20px;
    }
}


.lb-links a {
    color: inherit;
    font-weight: 400;
}

button.lb-button,
a.lb-button {
    border: 0;
    border-radius: 166px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-size: 24px;
    font-weight: 700;
    color: #702AD0;
    cursor: pointer;
    transition: all 0.3s ease-in;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    height: 56px;
    padding: 0 20px;
}

button.lb-button:hover,
a.lb-button:hover {
    background: #702AD0;
    color: #fff;
}

button.lb-button + p,
a.lb-button + p {
    margin-top: 16px; 
}

@media only screen and (min-width: 992px) {
    button.lb-button,
    a.lb-button {
        width: 240px;
        height: 60px;
        border-radius: 166px;
        margin-top: 21px;
        margin-left: 0;
    }
}

.lb-google-btn {
    margin-top: 10px;
}

.login-box-google {
    margin-top: 16px;
    margin-left: 0;
    margin-right: auto;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .login-box-google {
        max-width: 388px;
        margin-top: 20px;
    }
}

/* Sept 2024 nav */
body .nsm7Bb-HzV7m-LgbsSe {
    border-radius: 16px;
}

/* Sept 2024 nav */
@media only screen and (min-width: 1728px) {
    body .nsm7Bb-HzV7m-LgbsSe {
        border-radius: 0.926vw; /* 16px */
    }
}


/* Dating dashboard Dec 2023 */

.area-19-wrapper {
    padding-top: 6.4vw; /* 24px */
    padding-bottom: 17.333vw; /* 65px */
}

.area-19 .container {
    max-width: 357px;
}

.area-19.hide {
    display: none;
}

.area-19-split-one,
.area-19-split-two,
.area-19-split-three {
    margin-bottom: 22px;
}

.area-19-split-one:last-child,
.area-19-split-two:last-child,
.area-19-split-three:last-child {
    margin-bottom: 0;
}

.area-19-split-one {
    
}

.area-19-split-two {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.area-19-split-three {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.box-progress-bar {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 48px;
    color: #fff;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    height: 36px;
    padding: 4px 5px;
    margin-bottom: 11px;
    display: flex;
}

.box-progress-bar .box-progress {
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    border-radius: 48px;
    height: 100%;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.box-progress-bar .box-progress span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 9px;
    margin-right: 9px;
}

.area-19-box {
    background: rgba(86, 96, 215, 0.4);
    border-radius: 22px;
    backdrop-filter: blur(5px);
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    color: #fff;
    padding: 14px;
    width: 100%;
    position: relative;
}

.area-19-box .notification {
    width: 18px;
    height: 22px;
    position: absolute;
    top: 12px;
    right: 12px;
}

.area-19-box:not(.curved):before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.area-19-box.curved {
    /* aspect-ratio: auto 355 / 144; */
    border: none;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    padding: 10px 26px 16px;
    min-height: 145px;
    position: relative;
    z-index: 2;
}

.area-19-box.curved:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='357' height='145' viewBox='0 0 357 145' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_b_270_14910)'%3E%3Cmask id='path-1-inside-1_270_14910' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.793 0.183594C10.6427 0.183594 0.792969 10.0333 0.792969 22.1836V122.646C0.792969 134.797 10.6427 144.646 22.793 144.646H155.01C158.021 144.646 160.922 143.515 163.138 141.475L170.531 134.669C175.124 130.441 182.192 130.441 186.786 134.669L194.179 141.475C196.394 143.515 199.295 144.646 202.306 144.646H334.523C346.674 144.646 356.523 134.797 356.523 122.646V22.1836C356.523 10.0333 346.674 0.183594 334.523 0.183594H22.793Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.793 0.183594C10.6427 0.183594 0.792969 10.0333 0.792969 22.1836V122.646C0.792969 134.797 10.6427 144.646 22.793 144.646H155.01C158.021 144.646 160.922 143.515 163.138 141.475L170.531 134.669C175.124 130.441 182.192 130.441 186.786 134.669L194.179 141.475C196.394 143.515 199.295 144.646 202.306 144.646H334.523C346.674 144.646 356.523 134.797 356.523 122.646V22.1836C356.523 10.0333 346.674 0.183594 334.523 0.183594H22.793Z' fill='%235660D7' fill-opacity='0.4'/%3E%3Cpath d='M194.179 141.475L193.501 142.211L194.179 141.475ZM170.531 134.669L169.854 133.934L170.531 134.669ZM163.138 141.475L163.815 142.211L163.138 141.475ZM1.79297 22.1836C1.79297 10.5856 11.195 1.18359 22.793 1.18359V-0.816406C10.0904 -0.816406 -0.207031 9.48105 -0.207031 22.1836H1.79297ZM1.79297 122.646V22.1836H-0.207031V122.646H1.79297ZM22.793 143.646C11.195 143.646 1.79297 134.244 1.79297 122.646H-0.207031C-0.207031 135.349 10.0904 145.646 22.793 145.646V143.646ZM155.01 143.646H22.793V145.646H155.01V143.646ZM163.815 142.211L171.208 135.405L169.854 133.934L162.46 140.739L163.815 142.211ZM186.108 135.405L193.501 142.211L194.856 140.739L187.463 133.934L186.108 135.405ZM334.523 143.646H202.306V145.646H334.523V143.646ZM355.523 122.646C355.523 134.244 346.121 143.646 334.523 143.646V145.646C347.226 145.646 357.523 135.349 357.523 122.646H355.523ZM355.523 22.1836V122.646H357.523V22.1836H355.523ZM334.523 1.18359C346.121 1.18359 355.523 10.5856 355.523 22.1836H357.523C357.523 9.48104 347.226 -0.816406 334.523 -0.816406V1.18359ZM22.793 1.18359H334.523V-0.816406H22.793V1.18359ZM193.501 142.211C195.901 144.42 199.044 145.646 202.306 145.646V143.646C199.546 143.646 196.887 142.609 194.856 140.739L193.501 142.211ZM171.208 135.405C175.419 131.529 181.898 131.529 186.108 135.405L187.463 133.934C182.487 129.353 174.83 129.353 169.854 133.934L171.208 135.405ZM155.01 145.646C158.272 145.646 161.415 144.42 163.815 142.211L162.46 140.739C160.43 142.609 157.77 143.646 155.01 143.646V145.646Z' fill='url(%23paint0_linear_270_14910)' mask='url(%23path-1-inside-1_270_14910)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_b_270_14910' x='-9.20703' y='-9.81641' width='375.73' height='164.463' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='5'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_270_14910'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_270_14910' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_270_14910' x1='0.792969' y1='33.9388' x2='359.036' y2='45.7089' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2354BBFC'/%3E%3Cstop offset='1' stop-color='%234446C6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 23px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
}

.area-19-box.curved:after {
    content: '';
    clip-path: polygon(42% 99%, 8% 99%, 4% 97%, 1% 91%, 0% 82%, 0% 14%, 2% 7%, 5% 1%, 9% 0%, 46% 0%, 93% 0%, 96% 3%, 99% 10%, 100% 17%, 100% 85%, 98% 93%, 94% 98%, 90% 99%, 57% 99%, 53% 93%, 50% 90%, 46% 93%);
    backdrop-filter: blur(5px);
    border-radius: 23px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -2;
}

.area-19-box.curved > svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }

.area-19-box.chart {
    border-radius: 35px;
    padding: 15px 16px 16px;
}

.area-19-box-bg {
    border-radius: inherit;
    filter: drop-shadow(8px 8px 20px rgba(9, 8, 17, 0.15));
    -webkit-filter: drop-shadow(8px 8px 20px rgba(9, 8, 17, 0.15));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.area-19-box p {
    font-weight: 400;
    font-size: 12px;
    display: block;
}

.area-19-box p a {
    color: inherit;
}

.area-19-box .label {
    cursor: pointer;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 14px;
    background: rgba(49, 45, 100, 0.8);
    border: 1px solid #53B7FA;
    border-radius: 26px;
    display: inline-block;
    padding: 1px 23px;
    margin-bottom: 6px;
}

.area-19-box-title {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    display: block;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.area-19-box-title:before {
    content: '';
    border-top: 1px solid #fff;
    width: 191px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.area-19-box-title.no-border {
    padding-bottom: 0;
    margin-bottom: 14px;
}

.area-19-box-title.no-border:before {
    content: none;
}

.dashboard-ai-matches .area-19.pb420,
.dashboard-mutual-matches .area-19.pb420 {
	padding-bottom: 270px;
}

@media only screen and (min-width: 768px) {
    .area-19-wrapper {
        padding-top: 19px;
        padding-bottom: 177px;
    }

    .area-19 .container {
        max-width: 753px;
    }

    .area-19-box.chart {
        border-radius: 22px;
    }

    .area-19-box p {
        font-size: 16px;
    }

    .area-19-box.curved {
        overflow: hidden;
    }

    .area-19-box.curved:before {
        background-image: url("data:image/svg+xml,%3Csvg width='754' height='145' viewBox='0 0 754 145' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_b_270_24829)'%3E%3Cmask id='path-1-inside-1_270_24829' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.7617 0.183594C10.6115 0.183594 0.761719 10.0333 0.761719 22.1836V122.646C0.761719 134.797 10.6114 144.646 22.7617 144.646H353.534C356.545 144.646 359.446 143.515 361.661 141.475L369.055 134.669C373.648 130.441 380.716 130.441 385.309 134.669L392.702 141.475C394.918 143.515 397.819 144.646 400.83 144.646H731.602C743.752 144.646 753.602 134.797 753.602 122.646V22.1836C753.602 10.0333 743.752 0.183594 731.602 0.183594H22.7617Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.7617 0.183594C10.6115 0.183594 0.761719 10.0333 0.761719 22.1836V122.646C0.761719 134.797 10.6114 144.646 22.7617 144.646H353.534C356.545 144.646 359.446 143.515 361.661 141.475L369.055 134.669C373.648 130.441 380.716 130.441 385.309 134.669L392.702 141.475C394.918 143.515 397.819 144.646 400.83 144.646H731.602C743.752 144.646 753.602 134.797 753.602 122.646V22.1836C753.602 10.0333 743.752 0.183594 731.602 0.183594H22.7617Z' fill='%235660D7' fill-opacity='0.4'/%3E%3Cpath d='M392.702 141.475L392.025 142.211L392.702 141.475ZM369.055 134.669L368.377 133.934L369.055 134.669ZM385.309 134.669L384.632 135.405L385.309 134.669ZM361.661 141.475L362.339 142.211L361.661 141.475ZM1.76172 22.1836C1.76172 10.5856 11.1637 1.18359 22.7617 1.18359V-0.816406C10.0592 -0.816406 -0.238281 9.48105 -0.238281 22.1836H1.76172ZM1.76172 122.646V22.1836H-0.238281V122.646H1.76172ZM22.7617 143.646C11.1637 143.646 1.76172 134.244 1.76172 122.646H-0.238281C-0.238281 135.349 10.0592 145.646 22.7617 145.646V143.646ZM353.534 143.646H22.7617V145.646H353.534V143.646ZM362.339 142.211L369.732 135.405L368.377 133.934L360.984 140.739L362.339 142.211ZM384.632 135.405L392.025 142.211L393.38 140.739L385.987 133.934L384.632 135.405ZM731.602 143.646H400.83V145.646H731.602V143.646ZM752.602 122.646C752.602 134.244 743.199 143.646 731.602 143.646V145.646C744.304 145.646 754.602 135.349 754.602 122.646H752.602ZM752.602 22.1836V122.646H754.602V22.1836H752.602ZM731.602 1.18359C743.199 1.18359 752.602 10.5856 752.602 22.1836H754.602C754.602 9.48104 744.304 -0.816406 731.602 -0.816406V1.18359ZM22.7617 1.18359H731.602V-0.816406H22.7617V1.18359ZM392.025 142.211C394.425 144.42 397.568 145.646 400.83 145.646V143.646C398.07 143.646 395.41 142.609 393.38 140.739L392.025 142.211ZM369.732 135.405C373.942 131.529 380.421 131.529 384.632 135.405L385.987 133.934C381.01 129.353 373.353 129.353 368.377 133.934L369.732 135.405ZM353.534 145.646C356.796 145.646 359.939 144.42 362.339 142.211L360.984 140.739C358.953 142.609 356.294 143.646 353.534 143.646V145.646Z' fill='url(%23paint0_linear_270_24829)' mask='url(%23path-1-inside-1_270_24829)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_b_270_24829' x='-9.23828' y='-9.81641' width='772.84' height='164.463' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='5'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_270_24829'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_270_24829' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_270_24829' x1='0.761719' y1='33.9388' x2='756.086' y2='86.4577' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2354BBFC'/%3E%3Cstop offset='1' stop-color='%234446C6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    }

    .area-19-box.curved:after {
        clip-path: polygon(44% 100%, 41% 100%, 3% 100%, 2% 100%, 1% 96%, 0 89%, 0 86%, 0 20%, 0 15%, 0 11%, 1% 4%, 2% 1%, 3% 0, 97% 0%, 98% 1%, 99% 4%, 100% 11%, 100% 12%, 100% 27%, 100% 86%, 100% 88%, 100% 90%, 100% 88%, 99% 96%, 98% 100%, 97% 100%, 96% 100%, 53% 100%, 52% 97%, 51% 92%, 50% 91%, 49% 93%, 49% 93%, 48% 98%, 47% 100%, 46% 100%);    
    }

    .area-19-box-title:before {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .area-19 .container {
        max-width: 936px;
    }

    .area-19-wrapper {
        padding: 116px 0 0;
        margin-bottom: 70px;
    }

    .area-19-split-two {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-19-split-three {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .area-19-box.curved {
        aspect-ratio: 288 / 145;
        padding: 10px 12px 17px;
    }

    .area-19-box.curved:before {
        background-image: url("data:image/svg+xml,%3Csvg width='289' height='146' viewBox='0 0 289 146' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_b_270_23852)'%3E%3Cmask id='path-1-inside-1_270_23852' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.9622 0.693512C10.8119 0.693512 0.962189 10.5433 0.962189 22.6935V123.156C0.962189 135.307 10.812 145.156 22.9622 145.156H120.916C123.927 145.156 126.828 144.024 129.043 141.985L136.436 135.179C141.029 130.951 148.098 130.951 152.691 135.179L160.084 141.985C162.299 144.024 165.2 145.156 168.211 145.156H266.166C278.316 145.156 288.166 135.307 288.166 123.156V22.6935C288.166 10.5432 278.316 0.693512 266.166 0.693512H22.9622Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.9622 0.693512C10.8119 0.693512 0.962189 10.5433 0.962189 22.6935V123.156C0.962189 135.307 10.812 145.156 22.9622 145.156H120.916C123.927 145.156 126.828 144.024 129.043 141.985L136.436 135.179C141.029 130.951 148.098 130.951 152.691 135.179L160.084 141.985C162.299 144.024 165.2 145.156 168.211 145.156H266.166C278.316 145.156 288.166 135.307 288.166 123.156V22.6935C288.166 10.5432 278.316 0.693512 266.166 0.693512H22.9622Z' fill='%235660D7' fill-opacity='0.4'/%3E%3Cpath d='M160.084 141.985L159.407 142.721L160.084 141.985ZM136.436 135.179L135.759 134.443L136.436 135.179ZM129.043 141.985L128.366 141.249L129.043 141.985ZM1.96219 22.6935C1.96219 11.0955 11.3642 1.69351 22.9622 1.69351V-0.306488C10.2596 -0.306488 -0.0378113 9.99097 -0.0378113 22.6935H1.96219ZM1.96219 123.156V22.6935H-0.0378113V123.156H1.96219ZM22.9622 144.156C11.3642 144.156 1.96219 134.754 1.96219 123.156H-0.0378113C-0.0378113 135.859 10.2597 146.156 22.9622 146.156V144.156ZM120.916 144.156H22.9622V146.156H120.916V144.156ZM129.72 142.721L137.113 135.915L135.759 134.443L128.366 141.249L129.72 142.721ZM152.014 135.915L159.407 142.721L160.761 141.249L153.368 134.443L152.014 135.915ZM266.166 144.156H168.211V146.156H266.166V144.156ZM287.166 123.156C287.166 134.754 277.764 144.156 266.166 144.156V146.156C278.868 146.156 289.166 135.859 289.166 123.156H287.166ZM287.166 22.6935V123.156H289.166V22.6935H287.166ZM266.166 1.69351C277.764 1.69351 287.166 11.0955 287.166 22.6935H289.166C289.166 9.99096 278.868 -0.306488 266.166 -0.306488V1.69351ZM22.9622 1.69351H266.166V-0.306488H22.9622V1.69351ZM159.407 142.721C161.807 144.93 164.949 146.156 168.211 146.156V144.156C165.451 144.156 162.792 143.119 160.761 141.249L159.407 142.721ZM137.113 135.915C141.324 132.039 147.803 132.039 152.014 135.915L153.368 134.443C148.392 129.863 140.735 129.863 135.759 134.443L137.113 135.915ZM120.916 146.156C124.178 146.156 127.32 144.93 129.72 142.721L128.366 141.249C126.335 143.119 123.676 144.156 120.916 144.156V146.156Z' fill='url(%23paint0_linear_270_23852)' mask='url(%23path-1-inside-1_270_23852)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_b_270_23852' x='-9.03781' y='-9.30649' width='307.204' height='164.463' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='5'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_270_23852'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_270_23852' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_270_23852' x1='0.962189' y1='34.4488' x2='290.303' y2='42.1238' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2354BBFC'/%3E%3Cstop offset='1' stop-color='%234446C6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    }

    .area-19-box.curved:after {
        clip-path: polygon(42% 99%, 8% 99%, 4% 97%, 1% 91%, 0% 82%, 0% 14%, 2% 7%, 5% 1%, 9% 0%, 46% 0%, 93% 0%, 96% 3%, 99% 10%, 100% 17%, 100% 85%, 98% 93%, 94% 98%, 90% 99%, 57% 99%, 53% 93%, 50% 90%, 46% 93%);
    }

    .area-19-box-bg {
        border-radius: 12px;
    }

    .area-19-box-title {
        font-size: 20px;
        padding-bottom: 9px;
        margin-bottom: 16px;
    }

    .area-19-box {
        min-height: 234px;
    }

    .area-19-box.min-height-auto {
        min-height: auto;
    }

    .area-19-box .label {
        margin-bottom: 12px;
    }
}

/* @media only screen and (min-width: 1728px) {
    .area-19 {
        padding: 1.736vw 0 16.178vw 0;
        min-height: calc(100% - 7.15vw);
    }

    .area-19.v2 {
        padding:  1.736vw 0.868vw 16.178vw 0.868vw; 
        min-height: calc(100% - 7.15vw);
    }

    .area-19.pb420 {
        min-height: calc(100% - 6vw);
    }

    .dashboard-ai-matches .area-19.v2,
    .dashboard-mutual-matches .area-19.v2 {
        padding-bottom: 16.178vw;
    }
} */

/* @media only screen and (max-width: 1727px) {
    .dashboard-ai-invites .area-19.v2 {
           margin-bottom: 45px;
    }
}
@media only screen and (min-width: 860px) and (max-width: 1727px) {
    .area-19.pb420 {
        min-height: 829px;
    }
} */

.area-19 h1,
.area-19 .h1 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 24px;
    color: #F9C701;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
}

@media only screen and (min-width: 768px) {
    .area-19 h1,
    .area-19 .h1 {
        padding-left: 40px;
        text-align: left;
    }
}

@media only screen and (min-width: 992px) {
    .area-19 h1,
    .area-19 .h1 {
        font-size: 28px;
        padding-left: 0;
        margin-bottom: 26px;
    }
}

.area-19 h1.hide {
    display: none;
}

.a19-title {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 18px;
    display: block;
    text-align: center;
    margin-bottom: 12px;
}

.a19-title.ai-title {
    margin-bottom: 14px;
}

.area-19 h1.mb16 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.area-19 h1.mb16 .close-matches {
    display: block;
    width: 24px;
    height: 24px;
    margin-left: 14px;
}

.area-19 h1.mb16 .close-matches img {
    width: 100%;
    height: auto;
    display: block;
}

.area-19 h1.mb16 .close-matches:hover {
    cursor: pointer;
}

.a19-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0px 10px;
    margin-top: 13px;
    margin-bottom: 10px;
}

.a19-info-list > li {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 34px;
    color: #fff;
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    width: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    padding: 3px;
}

.a19-info-list i {
    background: #26C1E3;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.a19-info-list i.yellow {
    background: #F9C701;
}

@media only screen and (min-width: 768px) {
    .a19-info-list {
        margin-bottom: 0;
    }

    .area-19 h1.mb16 {
        justify-content: flex-start;
    }
}

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

    .a19-title {
        font-size: 20px;
        line-height: 24px;
    }

    .a19-title.ai-title {
        margin-bottom: -23px;
    }
}

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

@media only screen and (max-width: 859px) {
    a.open_find_match.blue-btn {
        font-size: 20px;
    }

    footer.v3 div span.no-line {
        display: table;
        width: 100%;
        height: 0;
        visibility: hidden;
        font-size: 0;
    }
}

@media only screen and (max-width: 799px) {
    /* .area-19 h1.mb16 {
        width: 356px;
        max-width: 100%; 
    } */
    .im-badge {
        font-size: 14px;
        line-height: normal;
    }
    .mm-message {
        line-height: 1;
    }
    .vector_match .im-badge {
        font-size: 14px;
    }
    .vector_match .im-close,
    .individual_match .im-close {
        top: 7px;
        right: 20px;
        font-size: 20px;
    }
    .a19-match {
        font-size: 13px;
    }
    .a19-message-center {
        /* min-height: calc(100vh - 325px); */
    }
    /* .a19-mc-msg {
        height: 16px;
    } */

    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices */ 
        .a19-message-center {
            min-height: calc(100vh - 435px);
        }
    }
}

.a19-title.mb15 {
    margin-bottom: 20px;
}

.a19-title.mtb15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Aug 2024 */
.a19-title.mt6 {
    margin-top: 6px;
}

/* Aug 2024 */
@media only screen and (min-width: 860px) {
    .a19-title.mt6 {
        margin-top: 0;
    }
}

.a19-error {
    color: #fff;
    display: block;
    text-align: center;
}

.a19-hr {
    width: 60%;
    margin: 15px auto;
    border: 0;
    border-top: 1px solid #C8CCD1;
}

.a19-hr.m0 {
    margin: 0 auto ;
}

@media only screen and (min-width: 860px) {
    .a19-hr {
        margin: 20px auto;
    }
}

/* .a19-container {
    padding: 20px 10px;
    background-color: #fff;
    border-radius: 22px;
    margin: 0 auto;
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 14px;
    display: grid;
    position: relative;
    overflow: hidden;
}

@media only screen and (min-width: 860px) {
    .a19-container {
        width: 840px;
        padding: 40px;
        font-size: 20px;
    }
    .dashboard-ai-matches .a19-container {
       margin-bottom: 45px;
    }
} */

.a19-container.hide {
    display: none;
}

.a19-container2 {
    margin: 0 auto;
    position: relative;
}

/* section.area-19 h1.mb16 {
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 860px) {
    .a19-container2, 
    section.area-19 h1.mb16 {
        width: 840px;
    }
} */

.a19-container2.hide {
    display: none;
}

.a19-container2.w940 {
    width: 100%;
}

.invites_match_new .hide,
.invites_matches .hide,
.a19-container.vector_match .hide {
    display: none !important;
}

.invite-note-add .a19-mc-wm-suggestions,
.invite_gallery .a19-mc-wm-suggestions {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: -5px;
    right: -5px;
}

.progress-bar {
    height: 50px;
    border-radius: 60px;
    border: 1px solid #C8CCD1;
    background: rgba(255, 255, 255, 0.9); 
    display: flex;
    padding: 7px;
    position: relative;
    z-index: 2;
    margin: 10px 0;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .progress-bar {
        margin: 15px 0;
    }

    .invite-note-add .a19-mc-wm-suggestions,
    .invite_gallery .a19-mc-wm-suggestions {
        width: 45px;
        height: 45px;
        bottom: -17px;
        right: -17px;
    }
}

.progress-bar.v2 {
    height: 36px;
    margin: 0;
    display: grid;
    align-items: center;
    grid-template-columns: 120px 1fr;
    font-family: var(--rubik);
    grid-row: 1;
    grid-column: 1/4;
    font-size: 15px;
    padding: 4px 4px 4px 10px;
}

/* Aug 2024 */
.h133 .progress-bar.v2 {
    grid-row: 2;
    font-size: 16px;
}

@media only screen and (min-width: 700px) {
    .progress-bar.v2 {
        grid-template-columns: 190px 1fr;
        font-size: 18px;
    }

    /* Aug 2024 */
    .h133 .progress-bar.v2 {
        grid-row: unset;
        font-size: 16px;
    }
}

@media only screen and (min-width: 960px) {
    .progress-bar.v2 {
        padding: 4px 4px 4px 24px;
        grid-row: unset;
        grid-column: unset;
    }
}

/* Aug 2024 */
.progress-bar.v3 {
    height: auto;
    display: grid;
    grid-template-rows: auto 36px;
    border-radius: 10px;
}

.progress-bar .flex {
    display: flex;
    align-items: center;    
}

.progress-bar .flex .bar.zero {
    padding: 0;
}

.progress-bar .flex .valueCounter {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* Aug 2024 */
.progress-bar-title {
    font-weight: 700;
    font-size: 14px;
    color: #6348D4;
    margin-left: 12px;
}

/* Aug 2024 */
@media only screen and (min-width: 860px) {
    .progress-bar-title {
        font-size: 18px;
    }
}

.progress-bar.mb18 {
    margin-bottom: 18px;
}

.progress-bar.mb25 {
    margin-bottom: 25px;
}

.progress-bar .bar {
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    height: 100%;
    border-radius: 60px;
    font-family: var(--nunito);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding: 0 15px 0 0;
    text-align: right;
    animation: progressAnimation 2s ease-out;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: end;
}

@media only screen and (max-width: 700px) {
    .progress-bar.v2 .bar {
        padding: 0 10px;
    }
}

@keyframes progressAnimation {
    0%   { 
        width: 0; 
        background-color: #26C1E3;
    }
    100% { 
        background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    }
  }

  @property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.valueCounter {
    animation: counter 2s ease-out;
    counter-reset: num var(--num);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.valueCounter:before {
    content: '';
    background: url('/img/chemistry-icon.png') center center no-repeat;
    background-size: contain;
    width: 29px;
    height: 44px;
}

.valueCounter.w90-white {
    width: 112px;
    height: 112px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #373A7D;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    color: #fff;
    font-family: var(--rubik);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    position: relative;
}

.valueCounter-bg.w90-white {
    border: 1px solid transparent;
    border-radius: 50%;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask:
    linear-gradient(#000 0 0) padding-box, 
    linear-gradient(#000 0 0);
    mask-composite: exclude; 
    border-radius: 50%;
    width: 112px;
    height: 112px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mutual-matches:not(.v2) .pie {
    font-size: 16px;
}

@media only screen and (min-width: 768px) {
    .valueCounter:before {
        width: 25px;
        height: 39px;
    }
    
    .valueCounter.w90-white {
        width: 98px;
        height: 98px;
        gap: 8px;
        font-size: 26px;
        line-height: 31px;
    }
    
    .valueCounter-bg.w90-white {
        width: 98px;
        height: 98px;
    }

    .mutual-matches:not(.v2) .pie {
        font-size: 25px
    }
}

@media only screen and (min-width: 992px) {
    .valueCounter:before {
        width: 30px;
        height: 46px;
    }
    
    .valueCounter.w90-white {
        width: 117px;
        height: 117px;
        gap: 9px;
        font-size: 32px;
        line-height: 38px;
    }
    
    .valueCounter-bg.w90-white {
        width: 117px;
        height: 117px;
    }
}

.valueCounter.sec1 {
    animation: counter 1s .5s both;
}

.valueCounter.sec12 {
    animation: counter 1.2s .6s both;
}

.valueCounter.sec13 {
    animation: counter 1.3s .8s both;
}



.valueCounter::after {
    content: counter(num) "%";
}

@keyframes counter {
    from {
        --num: 0;
    }
}

.valueCounter.v2 {
    animation: counter-v2 1s ease-out;
    counter-reset: num var(--num);
}

.valueCounter.v2::after {
    content: counter(num, decimal-leading-zero);
}

@keyframes counter-v2 {
    from {
        --num: 1;
    }
}

.a19-match {
    position: relative;
    cursor: pointer;
}

.a19-match--wide {
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
    margin-top: 18px;
    margin-bottom: 14px;
}

.a19-match > .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width: 301px;
    margin-left: auto;
    margin-right: auto;
}

.a19-match > .list:before {
    content: '';
    background-color: #fff;
    border-radius: 26px;
    width: 13px;
    height: 6px;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
}

.a19-match > .list > .list-item {
    text-align: center;
}

.a19-match-value {
    display: inline-grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.a19-match-value span {
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 20px;
    background-color: #4CBAFF;
    border-radius: 6px;
    width: 28px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a19-match-title {
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 18px;
    line-height: 13px;
    display: block;
    margin-top: 16px;
}

.a19-match-report {
    color: #fff !important;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    display: inline-block;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .a19-match > .list {
        max-width: 513px;
    }

    .a19-match--wide {
        padding-bottom: 13px;
        margin-top: -4px;
    }

    .a19-match > .list:before {
        width: 29px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-match > .list {
        max-width: 264px;
    }

    .a19-match--wide > .list {
        max-width: 100%;
        justify-content: center;
        gap: 0 130px;
    }

    .a19-match--wide > .list > .list-item {
        display: inline-flex;
        align-items: center;
        gap: 41px;
    }

    .a19-match--wide > .list > .list-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    .a19-match > .list:before {
        width: 13px;
    }

    .a19-match--wide {
        border-bottom: none;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 16px;
    }

    .a19-match--wide > .list:before {
        width: 43px;
    }

    .a19-match--wide .a19-match-title {
        margin-top: 0;
    }
}

.a19-match.noPointer {
    cursor: text;
}

.a19-match .pointer {
    cursor: pointer;
}

.a19-match.white {
    background-color: #fff;
}

.a19-match span.f12 {
    font-size: 12px;
    letter-spacing: -1px;
}

@media only screen and (min-width: 430px) {
    .a19-match span.f12 {
        font-size: 14px;
        letter-spacing: normal;
    }
}

@media only screen and (min-width: 860px) {
    .a19-match span.f12 {
        font-size: 18px;
    }
}

.a19-match-circle {
    width: 46px;
    height: 46px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: 2px solid #6348D4;
    padding: 1px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a19-match-circle span {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: #6348D4;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

@media only screen and (min-width: 860px) {
    .a19-match-circle {
        width: 76px;
        height: 76px;
        aspect-ratio: 1/1;
        font-size: 24px;
        padding: 3px;
    }
}

.a19-dots {
    position: absolute;
    right: 7px;
}

@media only screen and (min-width: 860px) {
    .a19-dots {
        right: 10px;
    }
}

.a19-line {
    width: 100%;
    height: 3px;
    background-color: #6348D4;
    border-radius: 5px;
}

.a19-box-1 {
    padding: 20px 0;
    position: relative;
}

@media only screen and (min-width: 600px) {
    .a19-box-1 {
        border-radius: 14px;
        border: 1px solid #C8CCD1;
        padding: 20px 25px;
    }
}

.dash-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    background: rgba(86, 96, 215, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    border-radius: inherit;
    color: #fff;
    display: grid;
    gap: 27px 0;
    padding: 27px 38px;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
}

.dash-info:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.dash-info.hide {
    display: none;
}

.dash-info.auto {
    height: auto;
    width: calc(100% - 20px);
    z-index: 2;
}

.dash-info.pos2 {
    top: -30px;
    left: 10px;
}

.dash-info.info_ai {
    height: 100%;
    padding: 14px;
}

.dash-info.info_ai .dash-info-title {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 10px;
}

.dash-info ul {
    text-align: center;
}

.dash-info ul > li {
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    margin-bottom: 25px;
}

.dash-info ul > li:before {
    content: '● ';
}

.dash-info-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 25px;
}

.dash-info-title.center {
    display: block;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .dash-info.auto {
        width: calc(100% - 80px);
    }
    .dash-info.pos2 {
        top: -30px;
        left: 40px;
    }

    .dash-info {
        height: auto;
        font-size: 16px;
        line-height: 22px;
        gap: 30px 0;
        padding: 34px 87px 38px;
        text-align: center;
    }

    .dash-info-title {
        font-size: 20px;
        line-height: 27px;
    }

    .dash-info.auto {
        padding: 16px 26px 26px 26px;
    }

    .dash-info.info_ai {
        padding: 14px 48px;
    }

    .dash-info ul > li {
        font-size: 16px;
        line-height: 30px;
    }
}

@media only screen and (min-width: 992px) {
    .dash-info {
        font-size: 18px;
        line-height: 24px;
        padding: 30px;
        gap: 28px 0;
        text-align: left;
    }

    .dash-info.info_ai .dash-info-title {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 8px;
    }

    .dash-info ul > li {
        font-size: 18px;
        line-height: 40px; /* 24px; */
    }
}

.close-dash {
    position: absolute;
    top: 22px;
    right: 22px;
    cursor: pointer;
}

.close-dash img {
    width: 10px;
    height: auto;
}

.dash-info-list {
    display: grid;
    gap: 3px 0;
    margin-top: 5px;
}

.dash-info-list li {
    padding: 0 0 0 27px;
    position: relative;
}

.dash-info-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #383838;
    position: absolute;
    left: 8px;
    top: 9px;
}

@media screen and (min-width: 768px) {
    .close-dash {

    }
}

@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
  }
  
  .pie {
    --p:20;      /* the percentage */
    --b:18px;    /* the thickness */
    --c:darkred; /* the color */
    --w:140px;   /* the size*/
    
    width:var(--w);
    aspect-ratio:1/1;
    position:relative;
    display:inline-grid;
    /* margin:3px; */
    place-content:center;
    font-size:25px;
    font-weight:bold;
    font-family:sans-serif;
    background-color: #25223d;
    border-radius:50%;
    cursor: pointer;
  }

  @media only screen and (min-width: 992px) {
    .pie {
        --b:22px;    /* the thickness */
        margin:5px;
    }
  }

  /* .pie.w360 {
    width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pie.w320 {
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pie.w280 {
    width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
  } */

.pie.w500 {
    width: 322px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie.w500:after {
    transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(320px/2 - 50%));
}

.pw-456 {
    width: 286px;
}

@media only screen and (min-width: 992px) {
    .pie.w500 {
        width: 403px;
    }

    .pie.w500:after {
        transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(401px/2 - 50%));
    }

    .pw-456 {
        width: 456px;
    }
}


.pie.w434 {
    width: 275px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie.w434:after {
    transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(273px/2 - 50%));
}

.pw-390 {
    width: 224px;
}

@media only screen and (min-width: 992px) {
    .pie.w434 {
        width: 343px;
    }

    .pie.w434:after {
        transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(343px/2 - 50%));
    }

    .pw-390 {
        width: 390px;
    }
}



.pie.w368 {
    width: 227px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie.w368:after {
    transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(225px/2 - 50%));
}

.pw-324 {
    width: 176px;
}

@media only screen and (min-width: 992px) {
    .pie.w368 {
        width: 281px;
    }

    .pie.w368:after {
        transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(279px/2 - 50%));
    }

    .pw-324 {
        width: 233px;
    }
}

.pw-114 {
    width: 160px;
}

.pie.w114 {
    width: 160px;
    --b: 16px; 
    margin: 0;
}

.pie.w114:after {
    transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(159px/2 - 50%));
}

@media only screen and (min-width: 768px) {
    .pw-114 {
        width: 140px;
    }

    .pie.w114 {
        width: 140px;
        --b: 15px;
    }

    .pie.w114:after {
        transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(139px/2 - 50%));
    }
}

@media only screen and (min-width: 992px) {
    .pw-114 {
        width: 167px;
    }

    .pie.w114 {
        width: 167px;
        --b: 16px; 
    }
    .pie.w114:after {
        transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(166px/2 - 50%));
    }
}



  .pie.bg1 {
    background-color: transparent;
  }

  .pie.bg2 {
    background-color: transparent;
  }

  .pie.center {
    margin: 0 auto;
  }

  .pie:before,
  .pie:after {
    content:"";
    position:absolute;
    border-radius: 50%;
  }

.pie:before {
    inset: 0;
    background:
        radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p)*1%), rgba(49, 45, 100, 0.8) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

  

  .animate {
      animation: p 1s .5s both;
  }

  .animate2 {
      animation: p 1.2s .6s both;
  }

  .animate3 {
      animation: p 1.3s .8s both;
  }

  @keyframes p {
      from {
          --p: 0;
      }
  }

.pie-wrapper {
    aspect-ratio: 1/1;
    /* background-color: #fff; */
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie-multiple {
    font-family: var(--nunito);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pie-multiple span {
    position: relative;
}

.pie-multiple span:after {
    content: '●';
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
}

@media only screen and (min-width: 992px) {
    .pie-multiple {
        font-size: 18px;
    }

    .pie-multiple span:after {
        right: -2px;
    }
}

.pie-multiple li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    width: 90%;
    padding: 0 0 0 21px;
    position: relative;
}

.pie-multiple li::before {
    content: '';
    width: 13px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (min-width: 992px) {
    .pie-multiple li {
        padding: 0 0 0 27px;
        width: 80%;
    }
    .pie-multiple li::before {
        width: 17px;
    }
}

.pie-multiple li:nth-of-type(1):before {
    background: #E5587A ;
}

.pie-multiple li:nth-of-type(2):before {
    background: #54EA90 ;
}

.pie-multiple li:nth-of-type(3):before {
    background: #FAA908;
}

.pie-multiple li .valueCounter {
    justify-self: end;
}

.pie-multiple li .js-end {
    justify-self: end;
}


.a19-box-2 {
    background-color: #EFF2F4;
    border-radius: 14px;
    padding: 10px;
}

@media only screen and (min-width: 992px) {
    .a19-box-2 {
        padding: 25px 25px 15px 25px;
    }
}

.a19-chart {
    /* display: grid;
    grid-template-columns: 90px repeat(5, minmax(0, 1fr));
    grid-template-rows: 150px 1px auto;
    gap: 0; */
    justify-content: center;
}

@media only screen and (min-width: 992px) {
    .a19-chart {
        /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
        gap: 0 50px;
    }
}

.a19-peak {
    border-radius: 30px;
    padding: 6px;
    animation: peakAnimation 1s ease-out;
    align-self: end;
    position: relative;
    width: 100%;
    min-height: 86px;
}

.a19-peak span {
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 16px;
    writing-mode: vertical-lr;
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%) rotate(-180deg);
    white-space: nowrap;
}

@keyframes peakAnimation {
    0%   { 
        height: 0; 
    }
    100% { 
    }
  }

.a19-chart .red {
    background-color: #E5587A;
}
.a19-chart .blue {
    background-color: #33A8E0;
}
.a19-chart .green {
    background-color: #54EA90;
}
.a19-chart .yellow {
    background-color: #F6CC37;
}
.a19-chart .orange {
    background-color: #F68868;
}

.a19-chart .a19-line {
    background-color: #C8CCD1;
    border-radius: 10px;
    grid-column: 2/7;
    height: 1px;
    margin-top: -17px;
}

@media only screen and (min-width: 600px) {
    .a19-chart .a19-line {
        grid-column: 1/-1;
        margin-top: 1px;
    }
}

.a19-name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
}

.a19-name span {
    width: 14px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    display: block;
}

.a19-chart .subgrid {
    grid-column: 1;
    grid-row: 1/-1;
    display: grid;
    justify-items: start;
}

@media only screen and (min-width: 600px) {
    .a19-chart .subgrid {
        margin-top: 26px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        justify-items: unset;
        grid-column: 1/-1;
        grid-row: unset;
        /*gap: 0 50px;
        padding: 0 20px;*/
    }
}

.subgrid-0 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-column: 2/7;
    /* padding: 18px 15px; */
    gap: 0 16px;
    height: 327px;
}

.subgrid-item {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 30px;
    width: 100%;
    height: 100%;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (min-width: 768px) {
    .subgrid-0 {
        height: 327px;
        gap: 0 65px;
        max-width: 525px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 992px) {
    .subgrid-0 {
        gap: 0 38px;
        height: 403px;
    }
}

.lightbox-gallery {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(7, 10, 16, 0.8);
    backdrop-filter: blur(60px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-gallery.hide {
    display: none;
}

.lightbox-gallery.plr30 {
    padding-top: 70px;
    padding-left: 10px;
    padding-right: 10px;
}

.lightbox-gallery .lightbox-container.scroll {
    max-height: 100%;
}

@media only screen and (min-width: 768px) {
    .lightbox-gallery.plr30 {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media only screen and (min-width: 992px) {
    .lightbox-gallery.plr30 {
        padding: 98px 0px 20px;
    }
}

#dshbd-ddcards.swiper-wrapper {
    /*height: auto;*/
}

.lightbox-gallery .swiper {
    height: auto;
    width: 88%;
    aspect-ratio: 4/5;
}

@media only screen and (min-width: 768px) {
    .lightbox-gallery .swiper {
        width: 75%;
    }
}

@media only screen and (min-width: 992px) {
    .lightbox-gallery .swiper {
        max-height: 65%;
        width: auto;
        aspect-ratio: 4/5;
    }

    .lightbox-gallery .swiper .swiper-button-prev:after,
    .lightbox-gallery .swiper .swiper-button-next:after {
        content: none;
    }

    .lightbox-gallery .swiper .swiper-button-prev {
        background: url('/img/swiper-prev.svg') center center no-repeat;
        background-size: container;
        width: 93px;
        height: 93px;
        left: -170px;
    }

    .lightbox-gallery .swiper .swiper-button-next {
        background: url('/img/swiper-next.svg') center center no-repeat;
        background-size: container;
        width: 93px;
        height: 93px;
        right: -170px;
    }
}

@media only screen and (min-width: 1200px) {
    .lightbox-gallery .swiper .swiper-button-prev {
        left: -300px;
    }

    .lightbox-gallery .swiper .swiper-button-next {
        right: -300px;
    }
}

.lightbox-gallery .swiper img {
    width: 100%;
    height: 100%;
}


.lightbox-gallery.gifts_gallery .swiper {
    height: 240px;
    width: 300px;
}

@media only screen and (min-width: 768px) {
    .lightbox-gallery.gifts_gallery .swiper {
        width: 535px;
        height: 427px;
        position: relative;
    }
}

@media only screen and (min-width: 992px) {
    .lightbox-gallery.gifts_gallery .swiper {
        width: 535px;
        height: 440px;
    }
}


.lightbox-gallery.gifts_gallery .swiper .ttl {
    position: absolute;
    top: 15px;
    color: #444444;
    font-size: 16px;
    line-height: 23px;
    font-weight: 800;
}



.lightbox-gallery.gifts_gallery .swiper .from {
    position: absolute;
    bottom: 10px;
    left: 5px;
    right: 5px;
    color: #444444;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}

.lightbox-gallery.gifts_gallery .swiper .from.to span {
    color: #389FDF;
}

@media only screen and (min-width: 768px) {
    .lightbox-gallery.gifts_gallery .swiper .ttl {
        top: 25px;
        font-size: 28px;
        line-height: 38px;
    }

    .lightbox-gallery.gifts_gallery .swiper .from {
        font-size: 20px;
        line-height: 27px;
        bottom: 30px;
    }
}

.lightbox-gallery.gifts_gallery .swiper .from span {
    color: #3BDB7B;
}


.lightbox-gallery.gifts_gallery .swiper img {
    width: 180px;
    height: auto;
    max-width: 100%;
}

@media only screen and (min-width: 768px) {
    .lightbox-gallery.gifts_gallery .swiper img {
        width: 300px;
    }
}

.lightbox-gallery .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    border-radius: 7px;
}

.lightbox-gallery.gifts_gallery .swiper-slide {
    box-shadow: 2.84px 2.84px 7.1px 0px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
}

.dash_box_gallery .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
}

@media only screen and (min-width: 821px) {
    .dash_box_gallery .swiper-slide {
        height: 750px;
        max-height: 80%;
        width: auto;
        aspect-ratio: 4/5;
    }
}

@media only screen and (min-width: 768px) {
    .lightbox-gallery .swiper-slide {
        border-radius: 16px;
    }

    .lightbox-gallery.gifts_gallery .swiper-slide {
        border-radius: 12px;
    }
}

ul.mutual-matches,
ul.mutual-matches:not(.v2) {
    display: grid;
    gap: 22px 0;
}

@media only screen and (min-width: 768px) {
    ul.mutual-matches {
        gap: 22px 0;
    }
}

ul.mutual-matches > li {
    position: relative;
    width: 100%;
    /* cursor: pointer; */
}

.mutual-match-empty:hover {
    cursor: not-allowed;
}

@media only screen and (max-width: 959px) {
    .mutual-match-empty br {
        display: none !important;
    }
}

.mm-details-container {
    display: flex;
    gap: 7px;
    flex-direction: column;
}

@media only screen and (min-width: 960px) {
    .mm-details-container {
        gap: 30px;
        flex-direction: row;
    }
}

/* ul.mutual-matches.v2 li {
    position: relative;
    display: grid;
    grid-template-columns: 80px 2fr 1fr ;
    padding: 8px;
    justify-content: start;
    background-color: #fff;
    border-radius: 22px;
    height: auto;
    gap: unset;
    align-items: center;
    gap: 16px 8px;
    width: 100%;
} */

.single-match {
    position: relative;
    width: 100%;
    padding: 6px 6px 15px;
    background: rgba(86, 96, 215, 0.4);
    box-shadow: 8px 8px 40px rgba(9, 8, 17, 0.15);
    backdrop-filter: blur(5px);
    border-radius: 22px;
}

.single-match:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.single-match > .list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-match .match-info {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    position: relative;
}

.single-match .match-info:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.single-match .match-info-list > ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
}

.single-match .match-actions-list {
    padding-left: 8px;
    padding-right: 8px;
}

.single-match .match-actions-list > ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 12px;
}

.single-match .match-actions-list > ul > li a,
.single-match .match-actions-list > ul > li .match-item {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 65px;
    border: none;
    color: #fff;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 18px;
    line-height: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 26px 11px 35px;
    width: 100%;
    height: 48px;
    position: relative;
}

.single-match .match-actions-list > ul > li a:before,
.single-match .match-actions-list > ul > li .match-item:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.single-match .match-actions-list > ul > li .empty {
    background: rgba(49, 45, 100, 0.2);
    pointer-events: none;
    cursor: none;
}

.single-match .match-actions-list > ul > li.listen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.single-match .match-actions-list > ul > li.listen > *:first-child {
    background: linear-gradient(94deg, #FEDD20 -0.23%, #FAAF07 100.4%);
    padding-right: 25px;
}

.single-match .match-actions-list > ul > li.listen > *:last-child {
    justify-content: center;
    gap: 0 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.single-match .match-actions-list i {
    display: inline-block;
    width: 25px;
    text-align: center;
}

.single-match .match-actions-list i > img {
    display: block;
    max-width: 25px;
    margin-left: auto;
    margin-right: auto;
}

.single-match .match-actions-pie {
    --p:100;      /* the percentage */
    --b:16px;    /* the thickness */
    --c:rgba(49, 45, 100, 0.8); /* the color */
    --w:140px;   /* the size*/
}

@media screen and (min-width: 768px) {
    .single-match {
        padding: 8px;
    }

    .single-match > .list {
        gap: 17px;
        flex-direction: row;
        align-items: center;
    }

    .single-match > .list > .list-item {
        width: 50%;
    }

    .single-match .match-info {
        display: grid;
        grid-template-columns: 146px 1fr;
        gap: 9px;
    }

    .single-match .match-actions {
        display: inline-grid;
        align-items: center;
        grid-template-columns: 1fr 140px;
        gap: 0 40px;
        position: relative;
    }

    .single-match .match-actions:before {
        content: '';
        border-left: 1px solid #53BAFB;
        border-radius: 10px;
        height: 110px;
        position: absolute;
        top: 50%;
        left: 176px;
        transform: translateY(-50%);
    }

    .single-match .match-actions-list {
        padding-left: 0;
        padding-right: 0;
    }

    .single-match .match-actions-list > ul > li a,
    .single-match .match-actions-list > ul > li .match-item {
        border-radius: 54px;
        font-size: 14px;
        line-height: 13px;
        padding: 9px 15px;
        width: 158px;
        height: 40px;
        gap: 18px;
        justify-content: center;
    }

    .single-match .pie-wrapper {
        justify-content: flex-start;
    }

    .single-match .match-actions-list > ul > li.listen {
        grid-template-columns: 112px 42px;
        gap: 0 5px;
    }
    
    .single-match .match-actions-list > ul > li.listen > *:first-child {
        gap: 0 16px;
        padding-left: 10px;
        padding-right: 10px;
        width: 112px;
    }
    
    .single-match .match-actions-list > ul > li.listen > *:last-child {
        width: 42px;
        padding: 10px;
        aspect-ratio: 1 / 1;
    }
    
    .single-match .match-actions-list > ul > li.listen > *:last-child span {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    .single-match > .list {
        gap: 20px;
    }

    .single-match .match-info {
        grid-template-columns: 176px 1fr;
        gap: 11px;
        padding: 10px;
    }

    .single-match .match-actions {
        grid-template-columns: 1fr 167px;
        gap: 0 48px;
    }

    .single-match .match-actions:before {
        border-radius: 12px;
        height: 132px;
        left: 212px;
    }

    .single-match .match-actions-list > ul > li a,
    .single-match .match-actions-list > ul > li .match-item {
        border-radius: 65px;
        font-size: 18px;
        line-height: 15px;
        width: 190px;
        height: 48px;
    }

    .single-match .match-actions-list > ul > li.listen {
        grid-template-columns: 135px 49px;
    }
    
    .single-match .match-actions-list > ul > li.listen > *:first-child {
        gap: 0 17px;
        width: 135px;
    }
    
    .single-match .match-actions-list > ul > li.listen > *:last-child {
        width: 49px;
    }
}

/* individual AI Match - do not display Details link
and expand Listen button to full width. */
.full-width-toggle.listen {
    grid-template-columns: 1fr !important;
}

.full-width-toggle.listen > *:first-child {
    width: 100% !important;
}

.full-width-toggle.listen > *:last-child {
    display: none !important;
}

/* Aug 2024 */
li.disabled {
    opacity: 0.8;
}

/* ul.mutual-matches.v2 li.h133 {
    gap: 8px 8px;
} */

.btn:disabled, button:disabled {
    opacity: 0.5
}

/* @media only screen and (min-width: 960px) {
    ul.mutual-matches.v2 li {
        background: unset;
        border-radius: unset;
        padding: 10px 0 0 155px;
        grid-template-columns: unset;
        height: 104px;
        align-items: unset;
        gap: unset;
        width: 100%;
    }


    ul.mutual-matches.v2 li {
        padding: 10px 0 0 155px;
        gap: unset;
    }

    ul.mutual-matches.v2 li.h133 {
        height: 133px;
        padding: 7px 0 0 165px;
        gap: unset;
    }

    ul.mutual-matches.v2 li:not(.h133) {
        height: 115px;
        padding: 10px 0 10px 160px;
        gap: 0;
        align-items: center;
    }

    ul.mutual-matches.v2 li::before {
        content: '';
        width: 770px;
        height: 100%;
        background-color: #fff;
        border-radius: 22px;
        position: absolute;
        top: 0;
        left: 60px;
        z-index: -1;
    }

    ul.mutual-matches.v2 li:not(.h133)::before {
        height: 104px;
        margin-top: 5px;

} */

ul.mutual-matches li.mutual-match-empty {
    color: #383838;
    font-size: 20px;
    font-weight: bold;
    padding: 9px 20px;
}


/* ul.mutual-matches.v2 li.mutual-match-empty {
    color: #383838;
    font-size: 20px;
    font-weight: bold;
    padding: 9px 20px;
    text-align: center;
    display: block;
}

ul.mutual-matches.v2 li.mutual-match-empty::before {
    width: 100%;
    left: 0;
} */

.mm-icon {
    width: 160px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(83, 186, 251, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}

@media only screen and (min-width: 768px) {
    .mm-icon {
        border-radius: 8px;
        width: 146px;
        height: 146px;
    }
}

@media only screen and (min-width: 992px) {
    .mm-icon {
        border-radius: 10px;
        width: 176px;
        height: 176px;
    }
}


.mm-icon.v2 {
    position: relative;
    border: 2px solid #6348D4;
    width: 80px;
    height: 80px;
    grid-row: 2;
    top: unset;
    left: unset;
}

/* Aug 2024 */ 
.h133 .mm-icon.v2 {
    grid-row: 3;
}

@media only screen and (min-width: 960px) {
    ul.mutual-matches li .mm-icon.v2 {
        width: 151px;
        height: 151px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        grid-row: unset;
        border: 6px solid #6348D4;
    }

    ul.mutual-matches li:not(.h133) .mm-icon.v2 {
        width: 133px;
        height: 133px;
    }

    /* Aug 2024 */ 
    .h133 .mm-icon.v2 {
        grid-row: unset;
    }
}


.mm-icon img {
    width: 100%;
}

/* Aug 2024 */
.mm-invited {
    height: 36px;
    border: 1px solid #D4D4D4;
    border-radius: 55px;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 16px;
    color: #818181;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 4px 4px 10px;
    grid-row: 1;
    grid-column: 1/4;
}

ul.v2 li:not(.h133) .mm-invited {
    display: none !important;
}

/* Aug 2024 */
@media only screen and (min-width: 960px) {
    .mm-invited {
        grid-row: unset;
        grid-column: unset;
        padding: 4px 4px 4px 24px;
    }
}

/* Aug 2024 */
@media only screen and (max-width: 455px) {
    .mm-invited, .progress-bar.v2 b, .progress-bar .bar {
        font-size: 12px;
    }
    .mm-details.v2 {
        font-size: 15px;
        height: 24px;
    }
    .h133 .progress-bar.v2 {
        grid-template-columns: 95px 1fr;
        height: 30px;
    } 
}

/* Aug 2024 */
@media only screen and (max-width: 429px) {
    .mm-invited {
        font-size: 13px;
    }
}

/* Aug 2024 */
@media only screen and (max-width: 410px) {
    .mm-invited {
        font-size: 12px;
    }
}

/* Aug 2024 */
.mm-invited b {
    color: #383838;
}

.mm-details {
    font-family: var(--nunito);
    width: 100%;
    height: 40px;
    padding-left: 44px;
    background: #312D64;
    font-size: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
}

.mm-details:before {
    content: '';
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.mm-details i {
    width: 29px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.mm-details i > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mm-details.type {
    background: linear-gradient(90.8deg, #6D7EEF 1.64%, #6542D3 100%);
}

.mm-details.type-connect {
    background: linear-gradient(90.8deg, #36A0DF 1.64%, #3C53CB 100%);
}

.mm-details.accepted {
    background: linear-gradient(91.1deg, #30E99F -1.57%, #2799A6 78.04%);
}

.mm-details.rejected {
    background: linear-gradient(90.81deg, #FF604B -1.11%, #9C4516 96.35%);
}

.mm-details.new {
    background: linear-gradient(90.8deg, #51B8FF 1.64%, #3039D3 100%);
}

.mm-details.sent {
    background: linear-gradient(90.8deg, #C54DFD 1.64%, #6637C4 100%);
}

.mm-details.resend {
    background: linear-gradient(91.06deg, #FACA08 -7.79%, #BB6F2C 80.41%);
}

.mm-details.not-interested {
    background: linear-gradient(91.06deg, #769194 -7.79%, #58657A 80.41%);
}

@media only screen and (min-width: 768px) {
    .mm-details {
        font-size: 14px;
        height: 33px;
        padding-left: 36px;
    }

    .mm-details i {
        width: 22px;
    }
}

@media only screen and (min-width: 992px) {
    .mm-details {
        font-size: 18px;
        height: 40px;
        padding-left: 44px;
    }

    .mm-details i {
        width: 28px;
    }
}

.mm-details.bold {
    font-weight: 700;
}

.mm-details.v2 {
    width: auto;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (min-width: 960px) {
    .mm-details.v2 {
        width: 166px;
        height: 36px;
    }
}


.mm-percent {
    position: absolute;
    top: 15px;
    right: 15px;
}

@media only screen and (min-width: 768px) {
    .mm-percent {
        position: static;
    }
}

.mm-type {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 30px;
    border-radius: 78px;
    background-color: #26C1E3;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 800px) {
    .mm-type {
        width: 264px;
        height: 48px;
        bottom: -24px;
        font-size: 20px;
    }
}

.mm-type.connect {
    background-color: #6539ca;
}

.mm-message {
    width: 100%;
    height: 50px;
    padding: 0 5px;
    border-radius: 12px;
    background-color: #497DDB;
    border: 2px solid #fff;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media only screen and (min-width: 600px) {
    .mm-message {
        width: 210px;
        height: 40px;
        font-size: 20px;
        border-radius: 42px;
    }
}

.mm-message.purple {
    background-color: #6C36D2;
}

.mm-message.orange {
    background-color: #F3A32A;
}

.mm-message.green {
    background-color: #3BDB7B;
}

.mm-message.red {
    background-color: #E63E29;
}

@media only screen and (min-width: 960px) {
    .mm-message {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.im-badge {
    height: 44px;
    width: 120px;
    background-color: #26C1E3;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px 0 22px 0;
    border: 2px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
    padding: 8px;
}

.im-badge.purple {
    background-color: #6C36D2;
}

.im-badge.orange {
    background-color: #F3A32A;
}

.im-badge.blue {
    background-color: #497DDB;
}

.im-badge.red {
    background-color: #E63E29;
}

.im-badge.green {
    background-color: #3BDB7B;
}

/* @media only screen and (min-width: 800px) {
    .im-badge {
        height: 55px;
        width: 193px;
        font-size: 24px;
        border: 4px solid #fff;
    }
}

.im-user {
    position: relative;
    width: 280px;
    height: 122px;
    padding: 12px 0 0 130px;
    margin: 55px auto 30px auto;
}

@media only screen and (min-width: 800px) {
    .im-user {
        width: 410px;
        height: 150px;
        padding: 12px 0 0 167px;
        margin: 38px auto 30px auto; 
    }
} */

/* Aug 2024 */
/* @media only screen and (min-width: 860px) {
    .im-user {
        margin: 18px auto 30px auto;
    }
} */

/* .imu-icon {
    width: 122px;
    height: 122px;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #6348D4;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 2;
}

@media only screen and (min-width: 800px) {
    .imu-icon {
        width: 150px;
        height: 150px;
        border: 6px solid #6348D4;
    }
}

.imu-icon img {
    width: 100%;
} */

/* .imu-name {
    display: grid;
    font-size: 15px;
}

.imu-name span:first-of-type {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--rubik);
}

.imu-name.v2 {
    height: 100%;
    align-content: center;
}

@media only screen and (min-width: 800px) {
    .imu-name {
        font-size: 16px;
    }
    .imu-name span:first-of-type {
        font-size: 26px;
    }
} */

.imu-sign-ic {
    width: 60px;
    height: 60px;
    background-color: #6C36D2;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.imu-sign-name {
    position: absolute;
    right: 30px;
    bottom: 15px;
    width: 194px;
    height: 34px;
    padding: 0 0 0 78px;
    display: flex;
    align-items: center;
    background-color: #EFF2F4;
    border: 1px solid #C8CCD1;
}

.imu-sign-ic img {
    width: 70%;
    height: 70%;
}

@media only screen and (min-width: 800px) {
    .imu-sign-ic {
        width: 75px;
        height: 75px;
    }

    .imu-sign-name {
        right: 30px;
        bottom: 15px;
        width: 260px;
        height: 44px;
        padding: 0 0 0 52px;
    }
}

.a19-hr.v2 {
    display: none;
}

@media only screen and (min-width: 800px) {
    .a19-hr.v2 {
        display: block;
    }
}

.im-grid {
    width: 100%;
    /* display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto; */
}

/* @media only screen and (min-width: 870px) {
    .im-grid {
        width: 700px;
    }
}

.im-grid > div:nth-of-type(1) { order: 1; }

.im-grid > div:nth-of-type(2) { order: 1; }

.im-grid > div:nth-of-type(3) { order: 2; }

.im-grid > div:nth-of-type(4) { order: 4; }

.im-grid > div:nth-of-type(5) { order: 5; }

.im-grid > div:nth-of-type(6) { order: 6; }

.im-grid > div:nth-of-type(7) { order: 7; }
.im-grid > div:nth-of-type(8) { order: 8; }
.im-grid > div:nth-of-type(9) { order: 9; }
.im-grid > div:nth-of-type(10) { order: 10; }


@media only screen and (min-width: 870px) {
    .im-grid>div:nth-of-type(1) { order: 1; }

    .im-grid>div:nth-of-type(2) { order: 2; }

    .im-grid>div:nth-of-type(3) { order: 3; }

    .im-grid>div:nth-of-type(4) { order: 4; }

    .im-grid>div:nth-of-type(5) { order: 5; }

    .im-grid>div:nth-of-type(6) {  order: 6; }

    .im-grid > div:nth-of-type(7) { order: 7; }
    .im-grid > div:nth-of-type(8) { order: 8; }
    .im-grid > div:nth-of-type(9) { order: 9; }
    .im-grid > div:nth-of-type(10) { order: 10; }
} */

/* Aug 2024 */
.im-invited {
    font-family: var(--nunito);
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    background: #702AD0;
    border: 1px solid #53BAFB;
    border-radius: 36px;
    padding: 7px;
    width: 100%;
    margin-top: 21px;
    margin-bottom: -19px;
    margin-left: 6px;
    margin-right: 6px;
}

.im-invited-txt {
    font-weight: 700;
}

/* Aug 2024 */
@media only screen and (min-width: 768px) {
    .im-invited {
        font-size: 16px;
        padding: 2px 30px;
        width: auto;
        margin: 0 0 0 auto;
    }
}

/* Aug 2024 */
@media only screen and (min-width: 992px) {
    .im-invited {
        font-size: 18px;
        padding: 4px 50px;
    }
}

/* Aug 2024 */

.img-list {
    font-weight: 400;
    font-size: 14px;
    max-height: 180px;
    overflow: auto;
}

.summary-text {
    max-height: 306px;
    overflow: auto;
}

.img-list::-webkit-scrollbar-track,
.img-text.notes-summary-text::-webkit-scrollbar-track,
.img-text.bio-text::-webkit-scrollbar-track,
.summary-text::-webkit-scrollbar-track {
    border-radius: 12px;
    background-color: transparent;
}

.img-list::-webkit-scrollbar,
.img-text.notes-summary-text::-webkit-scrollbar,
.img-text.bio-text::-webkit-scrollbar,
.summary-text::-webkit-scrollbar {
    background-color: transparent;
    position: relative;
    right: 10px;
}

.img-list::-webkit-scrollbar-thumb,
.img-text.notes-summary-text::-webkit-scrollbar-thumb,
.img-text.bio-text::-webkit-scrollbar-thumb,
.summary-text::-webkit-scrollbar-thumb {
    border-radius: 14px;
    background-color: rgba(49, 45, 100, 0.8);
    border: 7.5px solid transparent;
    background-clip: content-box;
}

.img-text:empty:not(:focus):before {
    content: attr(data-text);
    color: #fff;
}

.img-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #fff;
}

.img-list ul li {
    background-color: #4CBAFF;
    border-radius: 67px;
    line-height: 28px;
    padding: 0 10px;
    font-weight: 700;
    order: 1;
}

.img-list ul li.onWhite {
    background-color: transparent;
    border: 1px solid #4CBAFF;
    color: #4CBAFF;
    font-weight: 400;
    order: 2;
}

@media only screen and (min-width: 768px) {
    .img-list {
        font-size: 16px;
    }
}

.img-text {
    font-size: 14px;
    line-height: 19px;
}

.img-text:not(.invite-note-add) {
    max-height: 86px;
    overflow: auto;
}

.invites_match_new .img-text {
    background-color: #EFF2F4;
    border: 1px solid #C8CCD1;
    padding: 15px 15px;
    margin: 15px 0 25px 0;
    border-radius: 10px;
    font-size: 15px;
}

.img-text.notes-summary-text {
    max-height: 220px;
    overflow: auto;
}

.img-text.notes-summary-text b {
    display: none;;
}

.img-text.notes-summary-text br {
    display: table;
    content: " ";
    margin: 10px 0;
}

@media only screen and (min-width: 768px) {
    .img-text, .invites_match_new .img-text,
    .grid-2col.invite-note-show {
        font-size: 16px;
        line-height: 22px;
    }
}

@media only screen and (min-width: 992px) {
    .img-text, .invites_match_new .img-text,
    .grid-2col.invite-note-show {
        font-size: 18px;
        line-height: 25px;
    }

    .img-text:not(.invite-note-add) {
        max-height: 163px;
    }
}

.img-gifts.swiper {
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
}

@media only screen and (max-width: 768px) {
    .aimNoGifts {
        margin-left: 0 !important;
    }
}

.img-gifts.swiper .swiper-wrapper {
    align-items: center;
}

.img-gifts .swiper-slide {
    background: transparent;
}

.img-gifts .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms linear;
}

.img-gifts .swiper-slide .img-gift {
    margin-right: -265px;
    width: 90px;
    max-width: 119px;
    height: 141px;
    padding: 0;
    transition: cubic-bezier(1, 0.23, 0.5, 0.8) margin 500ms, height 0s;
}

.img-gifts .swiper-slide.swiper-slide-prev .img-gift {
    background: #35316A;
    margin-right: -130px;
    width: 105px;
    height: 165px;
}

.img-gifts .swiper-slide.swiper-slide-next {
    position: relative;
    z-index: 2;
}

.img-gifts .swiper-slide.swiper-slide-next .img-gift {
    background: #35316A;
    margin-left: -130px;
    margin-right: 0;
    width: 105px;
    height: 165px;
}

.img-gifts .swiper-slide.swiper-slide-next + .swiper-slide .img-gift {
    margin-left: -265px;
    margin-right: 0;
}

.img-gifts .swiper-slide.swiper-slide-active {
    position: relative;
    z-index: 3;
}

.img-gifts .swiper-slide.swiper-slide-active .img-gift {
    background: #312D64;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 10px 5px;
    /* width: 100%; */
    height: 165px;
    overflow: hidden;
}

.img-gifts .swiper-slide.swiper-slide-active .img-gift > * {
    opacity: 1;
}

.img-gifts .swiper-button-prev {
    left: 0;
    width: 25px;
}

.img-gifts .swiper-button-prev:after {
    content: '';
    background: url('/img/img-gifts-prev.svg') center center no-repeat;
    background-size: contain;
    width: 12px;
    height: 20px;
}

.img-gifts .swiper-button-next {
    right: 0;
    width: 25px;
}

.img-gifts .swiper-button-next:after {
    content: '';
    background: url('/img/img-gifts-next.svg') center center no-repeat;
    background-size: contain;
    width: 12px;
    height: 20px;
}

.img-gift {
    background: #292555;
    border: 1px solid #53BAFB;
    border-radius: 14px;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    height: 180px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    cursor: pointer;
}

.img-gift > * {
    opacity: 0;
}

.img-gift img {
    width: 100%;
    height: auto;
}

.dshBrd-ai-match-gifts {
    padding-bottom: 12px !important;
    margin-top: -16px;
}



@media only screen and (min-width: 768px) {
    .img-gifts.swiper {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 408px;
        margin-bottom: 8px;
    }

    .img-gifts .swiper-slide .img-gift {
        margin-right: -305px;
        width: 100px;
        height: 156px;
    }
    
    .img-gifts .swiper-slide.swiper-slide-prev .img-gift {
        margin-right: -145px;
        width: 115px;
        height: 182px;
    }
    
    .img-gifts .swiper-slide.swiper-slide-next .img-gift {
        margin-left: -145px;
        width: 115px;
        height: 182px;
    }
    
    .img-gifts .swiper-slide.swiper-slide-next + .swiper-slide .img-gift {
        margin-left: -305px;
    }
    
    .img-gifts .swiper-slide.swiper-slide-active .img-gift {
        padding: 20px 10px 12px;
        width: 122px;
        height: 180px;
    }
    
    .img-gifts .swiper-button-prev {
        left: 0;
        width: 35px;
    }
    
    .img-gifts .swiper-button-prev:after {
        width: 12px;
        height: 20px;
    }
    
    .img-gifts .swiper-button-next {
        right: 0;
        width: 35px;
    }

    .img-gifts .swiper-button-next:after {
        width: 12px;
        height: 20px;
    }
}

.img-gift.empty {
    background-color: #DFE4E8;
}

.img-gift span.sent {
    color: #389FDF;
    font-size: 18px;
    margin-top: auto;
    margin-bottom: 9px;
}

.img-gift span.received {
    color: #3BDB7B;
    font-size: 18px;
    margin-top: auto;
    margin-bottom: 9px;
}

.img-gift span {
    align-self: end;
    font-size: 16px;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .img-gift span {
        font-size: 18px;
        line-height: 13px;
    }

    .img-gift span.sent,
    .img-gift span.received {
        font-size: 20px;
        line-height: 14px;
        margin-bottom: 11px;
    }
}

.im-buttons {
    position: relative;
    display: flex;
    justify-items: center;
    justify-content: center;
    gap: 8px;
    margin: 23px 0 5px 0;
}

.im-buttons::before {
    content: '';
    width: 76%;
    height: 1px;
    background-color: #c9ccd1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
}

@media only screen and (min-width: 870px) {
    .im-buttons {
        margin: 5px 0 5px 0;
        gap: 25px;
    }
    .im-buttons::before {
        display: none;
    }
}


button.btn-im {
    width: 156px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

button.btn-im:hover {
    transform: scale(1.05);
}

@media only screen and (min-width: 870px) {
    button.btn-im {
        width: 230px;
        height: 44px;
        font-size: 20px;
    }
}

button.btn-im.purple {
    background-color: #6C36D2;
}

button.btn-im.purple img {
    width: 24px;
}

button.btn-im.red {
    background-color: #E63E29;
}

button.btn-im.red img {
    width: 16px;
}


button.btn-im.yellow {
    color: #383838;
    background-color: #FCC938;
    font-weight: 700;
    font-family: var(--nunito);
}

.im-close {
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-weight: 900;
    font-size: 18px;
}

.im-close img {
    width: 10px;
    height: auto;
    display: block;
}

@media only screen and (min-width: 992px) {
    .im-close {
        top: 30px;
        right: 30px;
    }
}

.a19-message-center {
    margin-top: 8px;
}

.a19-message-wrapper {
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 15px;
    display: flex;
    position: relative;
    padding-left: 7px;
    padding-right: 7px;
}

@media only screen and (min-width: 768px) {
    .a19-message-center {
        margin-bottom: 30px;
    }

    .a19-message-wrapper {
        display: grid;
        height: 80vh;
        grid-template-columns: 326px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 0 8px;
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-message-center {
        margin-top: 100px;
        /* height: 100vh; */
    }

    .a19-message-wrapper {
        grid-template-columns: 420px minmax(0, 1fr);
        height: calc(100vh - 110px);
    }
}

/* @media only screen and (min-width: 1380px) {
    .a19-message-wrapper {
        margin: 50px auto 300px auto;
    }
} */

/* @media only screen and (min-width: 1230px) {
    .a19-message-wrapper {
        width: 1200px;
        margin: 50px auto 300px auto;
    }
} */

/* @media only screen and (min-width: 1728px) {
    .a19-message-wrapper {
        margin:50px auto 15.5vw auto;
    }
} */

/* @media only screen and (min-height: 720px)and (min-width: 800px) {
    .a19-message-wrapper {
        height: 80vh;
    }
}

@media only screen and (min-height: 1080px) {
    .a19-message-wrapper {
        height: 86vh;
    }
}

@media only screen and (min-height: 1800px) {
    .a19-message-wrapper {
        height: 92vh;
    }
} */


.a19-message-center.hide {
    display: none;
}

.a19-mc-left {
    position: relative;
    background: rgba(86, 96, 215, 0.4);
    backdrop-filter: blur(5px);
    border-radius: 18px;
    padding: 14px 10px 10px;
    margin-bottom: 8px;
}

.a19-mc-left:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.a19-mc-left > * {
    position: relative;
    z-index: 1;
}

.a19-mc-left-fullheight .a19-mcl-button {
    display: none;
}

@media only screen and (min-width: 768px) {
    .a19-mc-left {
        border-radius: 18px;
        padding: 13px 0px 10px 10px;
        position: relative;
        margin-bottom: 0;
    }

    .a19-header {
        padding-right: 10px;
    }
}

.a19-mcl-button {
    padding: 16px 0 0 0;
    height: 86px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a19-mcl-button.hide {
    display: none;
}

@media only screen and (min-width: 800px) {
    .a19-mcl-button {
        padding: 0;
        height: 86px;
        width: calc(100% - 16px);
        border: 1px solid #C8CCD1;
        position: absolute;
        bottom: 8px;
        border-radius: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


.a19-mcl-button button {
    border: 0;
    cursor: pointer;
    color: #6E32D1;
    width: 188px;
    height: 46px;
    border-radius: 60px;
    background: url(/img/chat-ic-purple.svg) top 13px right 28px no-repeat, linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 18px;
    text-align: left;
    padding: 0 0 0 28px;
    transition: all 0.3s ease-in-out;
    background-size: 24px auto, auto;
}

.a19-mcl-button button:hover {
    transform: scale(1.02);
}

.a19-mcl-button button.inactive {
    display: none;
}

@media only screen and (min-width: 800px) {
    .a19-mcl-button button {
        width: 240px;
        height: 60px;
        font-size: 20px;
        padding: 0 0 0 42px;
        color: #fff;
        background: url(/img/chat-ic.svg) center right 45px no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
        background-size: unset;
    }
    .a19-mcl-button button.inactive {
        display: block;
        background: #D3D5DE url(/img/chat-ic-grey.svg) center right 45px no-repeat;
        color: #B2B4BC;
        pointer-events: none;
    }
}



.a19-mc-title {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 13px;
    display: block;
    text-align: center;
}

.a19-mc-title-show {
    display: block;
}

@media only screen and (min-width: 800px) {
    .a19-mc-title {
        display: block;
    }
}

@media only screen and (max-width: 799px) {
    .a19-mc-title-show {
        color: #fff;
    }
}

@media only screen and (min-width: 768px) {
    .a19-mc-conversations {
        width: calc(100% - 15px);
        height: calc(100% - 77px);
        padding-right: 5px;
        position: absolute;
        border-radius: inherit;
        overflow-y: auto;
    }

    .a19-mc-conversations::-webkit-scrollbar {
        width: 3px;
    }
}

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

}

.a19-mc-conversations::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
}

/* 4px scroll thumb. 10px margin from right margin */
.a19-mc-conversations::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px 4px transparent;
    background-color: transparent;
}

.a19-mc-conversations::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 4px 4px #312D64;
    border-radius: 14px;
}

.a19-mc-conversations::-webkit-scrollbar-button {
  display: none;
}

.a19-mc-conversations::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

.a19-mc-conversations::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}

ul.a19-mcc-1,
ul.a19-mcc-2 {
    margin-top: 8px;
    gap: 10px 0;
    display: grid;
    align-content: start;
}

@media only screen and (min-width: 768px) {
    ul.a19-mcc-1,
    ul.a19-mcc-2 {
        gap: 14px 0;
    }
}

ul.a19-mcc-1.hide,
ul.a19-mcc-2.hide {
    display: none;
}

ul.a19-mcc-1 li,
ul.a19-mcc-2 li {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 12px;
    color: #fff;
    height: 100px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 86px 1fr 65px;
    grid-template-rows: 28px 1fr;
    gap: 4px 10px;
    padding: 6px 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

ul.a19-mcc-1.v2 li,
ul.a19-mcc-2.v2 li {
    font-size: 16px;
    line-height: 16px;
    grid-template-rows: 27px 20px 1fr;
    gap: 3px 10px;
}

ul.a19-mcc-1 li.unread,
ul.a19-mcc-2 li.unread {
    font-weight: 700;
}

ul.a19-mcc-1 li.unread:before,
ul.a19-mcc-2 li.unread:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

ul.a19-mcc-1 li.selected,
ul.a19-mcc-2 li.selected {
    background: #702AD0;
    color: #fff;
}

@media only screen and (min-width: 768px) {
    ul.a19-mcc-1 li {
        /* background-color: #fff; */
        /* border: 1px solid #C8CCD1; */
        /* color: #383838; */
    }
    /* ul.a19-mcc-1 li.unread {
        border: 2px solid #A2A7AC;
    } */
    .a19-mc-conversations ul.a19-mcc-1 li:not(.selected):hover,
    .a19-mc-conversations ul.a19-mcc-2 li:not(.selected):hover {
        /* background-color: #fcfcfc; */
        /* color: #383838; */
        background-color: #702AD0;
    }
}

@media only screen and (min-width: 992px) {
    ul.a19-mcc-1 li,
    ul.a19-mcc-2 li {
        gap: 3px 15px;
    }

    ul.a19-mcc-1.v2 li, 
    ul.a19-mcc-2.v2 li {
        gap: 3px 15px;
    }
}



.a19-mc-ic {
    align-self: center;
    width: 86px;
    height: 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1/-1;
    position: relative;
}

.a19-mc-ic.v2 {
    border: 1px solid #6E32D1;
}

.a19-mc-ic .a19-mc-label {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -2px;
}

.a19-mc-ic img {
    border: 2px solid #312D64;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 100%;
}

.a19-mc-i img {
    width: 100%;
}

.a19-mc-alert {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 26px;
    height: 26px;
    background: #702AD0;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

@media only screen and (min-width: 992px) {
    /* .a19-mc-alert {
        width: 32px;
        height: 32px;
        right: 5px;
        bottom: 5px;
    } */
}

.a19-mc-name {
    font-size: 16px;
    align-self: end;
    line-height: 1;
    white-space: nowrap;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.a19-mc-time {
    font-size: 14px;
    align-self: start;
    justify-self: end;
    line-height: 1;
}

.a19-mc-msg {
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 48px;
}

@media only screen and (min-width: 768px) {
    .a19-mc-msg {
        grid-column: 2 / 4;
        padding-right: 30px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-msg {
        font-size: 16px;
        line-height: 18px; /* 16px; */
        padding-right: 38px;
    }
}

.a19-mc-label {
    align-self: center;
    background-color: #26C1E3;
    font-weight: 700;
    font-size: 14px;
    justify-self: start;
    padding: 0 14px;
    display: flex;
    align-items: center;
    align-self: flex-start;
}

.a19-mc-details .a19-mc-label {
    font-size: 12px;
    align-self: flex-start;
}

.a19-mc-label.yellow {
    background-color: #FDD246;
}

/* ul.a19-mcc-2 {
    margin-top: 8px;
    gap: 12px 0;
    display: grid;
    align-content: start;
    width: calc(100% - 2px)
}

@media only screen and (min-width: 800px) {
    ul.a19-mcc-2 {
        gap: 5px 0;
    }
}

ul.a19-mcc-2.hide {
    display: none;
}

ul.a19-mcc-2 li {
    background-color: #fff;
    border-radius: 14px;
    height: 86px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 67px 1fr 110px;
    gap: 5px 10px;
    padding: 0 5px 0 5px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.1s ease-in;
    align-items: center;
    justify-items: start;
} */

.a19-mc-details {
    display: flex;
    flex-direction: column;
    line-height: 22px;
    gap: 2px 10px;
}

.a19-mc-details span:nth-of-type(1) {
    font-size: 18px;
    font-weight: 700;
}

@media only screen and (min-width: 800px) {
    .a19-mc-details span:nth-of-type(1) {
        font-size: 20px;
    }
}

.a19-mc-details span {
    white-space: nowrap;
    max-width: 134px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
}

@media only screen and (min-width: 380px) {
    .a19-mc-details span {
       max-width: 156px;
    }
}

@media only screen and (min-width: 420px) {
    .a19-mc-details span {
       max-width: 196px;
    }
}

@media only screen and (min-width: 800px) {
    .a19-mc-details span {
        font-size: 18px;
        max-width: 95px;
        overflow: visible;
    }
    .a19-mc-details .a19-mc-label {
        font-size: 12px;
    }
}

@media only screen and (min-width: 799px) {
    .a19-mc-details .a19-mc-label {
        font-size: 12px;
    }
}

.a19-chat-btn {
    border: 0;
    cursor: pointer;
    width: 98px;
    height: 46px;
    border-radius: 60px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 18px;
    color: #6E32D1;
    transition: all 0.3s ease-in-out;
}

.a19-chat-btn:hover {
    transform: scale(1.02);
}

.a19-mc-right {
    display: none;
}

.a19-mc-right.block {
    display: block;
    margin-bottom: 20px;
    width: 100%;
}

.a19-mcr-container {
    position: relative;
    /* padding: 0 10px; */
    gap: 8px 0;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    .a19-mc-right {
        border-radius: 18px;
        display: block;
        /* margin: 10px; */
    }

    .a19-mc-right.block {
        margin-bottom: 0;
    }

    /* .a19-mc-right.noStyles {
        border: 0;
        border-radius: 0;
        margin: 10px;
    } */

    .a19-mcr-container {
        padding: unset;
        width: 100%;
        height: 100%;
        position: relative;
        justify-content: space-between;
    }

    .a19-mcr-container.hide {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-right {
        z-index: 2;
    }
}

.a19-mc-messages-wrapper {
    flex: 1 1 auto;
    /* background: rgba(86, 96, 215, 0.4); */
    backdrop-filter: blur(5px);
    border-radius: 18px;
    position: relative;
    height: calc(100svh - 190px);
}

.a19-mc-messages-wrapper:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.a19-mc-messages-wrapper .scroll-block {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    border-radius: inherit;
    overflow-y: auto;
}

.a19-mc-messages-wrapper .scroll-block::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

.a19-mc-messages-wrapper .scroll-block::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px 4px transparent;
    border: solid 3px transparent; 
    background-color: transparent;
}

.a19-mc-messages-wrapper .scroll-block::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 4px 4px #312D64;
    border: solid 3px transparent; 
    border-radius: 14px;
}

.a19-mc-messages-wrapper .scroll-block::-webkit-scrollbar-button
{
  display: none;
}

.a19-mc-messages-wrapper .scroll-block::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 16px; 
}

.a19-mc-messages-wrapper .scroll-block::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 16px;
}

.a19-mc-messages {
    position: relative;
    /* background-color: #fff; */
    /* border-radius: 22px;  */
    padding: 8px 0px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px 0;
}

/* height: calc(100vh - 165px); */
@media only screen and (max-width: 767px) {
    .a19-mc-messages {
        padding: 8px;
    }
}

@media only screen and (min-width: 768px) {
    /* .a19-mc-messages-wrapper {
         border: 2px solid #6E32D1;
    } */
    .a19-mc-messages-wrapper {
        height: calc(100% - 156px);
    }

    .a19-mc-messages {
        background-color: unset;
        border-radius: unset;
        padding: 9px;
        gap: 8px 0;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-messages-wrapper {
        height: calc(100% - 96px);
    }
}

.a19-mcm-sent {
    position: relative;
    min-height: 60px;
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    background: #312D64;
    border-radius: 12px;
    padding: 6px;
    /* text-align: center; */
    text-wrap: balance;
    display: inline-grid;
    grid-template-columns: 42px 1fr;
    /* grid-template-rows: 40px 1fr; */
    gap: 0px 6px;
    margin-left: auto;
}

/* .a19-mcm-sent span {
    font-weight: 400;
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    right: 12px;
} */

@media only screen and (min-width: 768px) {
    .a19-mcm-sent {
        grid-template-columns: 50px 1fr;
        padding: 4px 6px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mcm-sent {
        grid-template-columns: 60px 1fr;
        max-width: 650px;
        padding: 10px;
    }

    /* .a19-mcm-sent span {
        font-size: 15px;
    } */
}

.a19-mcm-received {

}

@media only screen and (min-width: 800px) {
    .a19-mcm-received {

    }
}

.a19-mcm-rIc {
    display: flex;
    gap: 0 5px;
    /* align-items: center; */
    /* grid-row: 1 / -1; */
    grid-area: 1 / 1 / 3 / 2;
}

@media only screen and (min-width: 800px) {
    .a19-mcm-rIc { 
        gap: 0 13px;
    }
}

.a19-mcm-rIc i {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid #702AD0;
    border-radius: 100%;
}

@media only screen and (min-width: 768px) {
    .a19-mcm-rIc i  {
        width: 50px;
        height: 50px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mcm-rIc i  {
        width: 60px;
        height: 60px;
    }
}

.a19-mcm-header {
    font-weight: 700;
    align-self: start;
    text-align: left;
}

@media only screen and (min-width: 992px) {
    .a19-mcm-header {
        font-size: 16px;
        line-height: 22px;
        padding-top: 7px;
    }
}

.a19-mcm-rIc i img {
    width: 100%;
}

.a19-mcm-rIc span {
    font-size: 15px;
    font-weight: 700;
}

@media only screen and (min-width: 768px) {
    .a19-mcm-rIc span  {
        font-size: 20px;
    }
}

.a19-mcm-rTxt {
    /* width: 88%; */
    /* border: 1px solid #D9D9D9; */
    /* border-radius: 12px; */
    /* padding: 9px 9px 26px 9px; */
    font-size: 14px;
    line-height: 19px;
    position: relative;
    /* margin-top: 20px; */
    position: relative;
    /* overflow: auto; */
    word-break: break-word;
    align-self: start;
}

.a19-mcm-rTxt p {
    line-height: inherit;
}

@media only screen and (min-width: 992px) {
    .a19-mcm-rTxt {
        /* width: 78%;
        padding: 20px 30px 30px 30px;
        font-size: 18px;
        line-height: 24px;
        margin-top: 28px; */
    }
}

.a19-mcm-rTxt span {
    font-weight: 400;
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    right: 12px;
}

@media only screen and (min-width: 800px) {
    .a19-mcm-rTxt span {
        font-size: 15px;
    }
}



.a19-mc-write-message {
    position: relative;
    backdrop-filter: blur(5px);
    background: rgba(86, 96, 215, 0.4);
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    border-radius: 22px;
    max-height: 105px;
    width: 100%;
    padding: 10px 9px 10px 9px;
    display: grid;
    grid-template-columns: 1fr 35px;
    gap: 0 7px;
    align-items: center;
}

.a19-mc-write-message:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

@media only screen and (min-width: 768px) {
    .a19-mc-write-message {
        /* border: 1px solid #C8CCD1; */
        /* padding: 10px 10px 10px 15px; */
        /* grid-template-columns: 38px 1fr 46px 54px; */
        grid-template-columns: 1fr 45px;
        gap: 0 10px;
        border-radius: 18px;
        max-height: 148px;
        width: 100%;
        height: 148px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-write-message {
        /* border: 1px solid #C8CCD1; */
        /* padding: 10px 10px 10px 15px; */
        /* grid-template-columns: 38px 1fr 46px 54px; */
        grid-template-columns: 1fr 103px;
        gap: 0 13px;
        border-radius: 18px;
        max-height: 88px;
        height: 88px;
        padding: 8px 21px 8px 10px;
    }
}

.a19-mc-wm-field {
    height: 80px;
    overflow-y: auto;
    width: 100%;
    padding: 13px 13px 13px 52px;
    font-size: 14px;
    font-family: var(--nunito);
    font-weight: 400;
    cursor: text;
    background: rgba(49, 45, 100, 0.4);
    border-radius: 12px;
    color: #fff;
    word-break: break-all;
}

.a19-mc-wm-field::placeholder {
    color: #fff;
    opacity: 1;
}

.a19-mc-wm-field:focus:before {
    content: none !important;
}

@media only screen and (min-width: 768px) {
    .a19-mc-wm-field {
        font-size: 14px;
        height: 130px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-wm-field {
        font-size: 16px;
        height: 70px;
        padding-left: 62px;
        display: flex;
        align-items: center;
    }

    .a19-mc-wm-field::placeholder {
        line-height: 44px;
    }
}

.a19-mc-wm-field[contentEditable="true"]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
}

.a19-mc-wm-field::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

.a19-mc-wm-field::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px 4px transparent;
    border: solid 3px transparent; 
    background-color: transparent;
}

.a19-mc-wm-field::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 4px 4px #fff;
    border: solid 4px transparent; 
    border-radius: 14px;
}

.a19-mc-wm-field::-webkit-scrollbar-button
{
  display: none;
}

.a19-mc-wm-field::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 5px; 
}

.a19-mc-wm-field::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 5px;
}

.a19-mc-wm-smilies {
    position: absolute;
    top: 17px;
    left: 17px;
    width: 34px;
    min-height: 34px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: rgba(49, 45, 100, 0.8) url('/img/smiley.svg') 50% 50% no-repeat;
    background-size: 60% auto;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    transform-origin: center center;
}

.a19-mc-wm-smilies:hover {
    background-size: 65% auto;
}

.a19-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
}

.a19-mc-wm-suggestions {
    position: relative;
    width: 25px;
    min-height: 25px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: #702AD0 url('/img/stars.svg') center center no-repeat;
    background-size: 54% auto;
    border: 1px solid #fff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    transform-origin: center center;
}

.a19-mc-wm-suggestions:hover {
    transform: scale(1.05);
}

.a19-mc-wm-sendBtn {
    width: 35px;
    min-height: 35px;
    aspect-ratio: 1/1;
    border: 0;
    border-radius: 100%;
    background: #3A9BDF url(/img/send-ic.svg) top 55% left 44% no-repeat;
    background-size: 50% auto;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    transition: all 0.3s ease-in-out;
    transform-origin: center center;
}

.a19-mc-wm-sendBtn:not(.disabled):hover {
    transform: scale(1.02);
    opacity: 0.95;
}

.a19-mc-wm-sendBtn.disabled {
    background-color: gray;
    cursor: not-allowed;
}

.a19-mc-wm-smilies-wrapper {
    width: 437px;
    height: 241px;
    /* background: url(/img/smilies_bg-small.png) top left no-repeat;
    background-size: contain; */
    position: absolute;
    top: -205px;
    left: -3px;
    transform: none;
    opacity: 1;
    padding: 18px 86px 46px 22px;
}

@media only screen and (min-width: 768px) {
    .a19-mc-wm-smilies-wrapper {
        top: -248px;
        left: -20px;
        width: 350px;
        height: 224px;
        padding: 15px 0px 16px 16px;
    }

    .a19-buttons {
        gap: 14px 0;
    }

    .a19-buttons .a19-mc-wm-suggestions {
        width: 32px;
        height: 32px;
    }

    .a19-mc-wm-sendBtn {
        width: 45px;
        min-height: 45px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-wm-smilies-wrapper {
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }

    .a19-buttons {
        flex-direction: row;
        justify-content: flex-end;
        gap: 0 12px;
    }

    .a19-mc-wm-sendBtn {
        width: 49px;
        height: 49px;
    }

    .a19-buttons .a19-mc-wm-suggestions {
        width: 42px;
        height: 42px;
    }

    .a19-mc-wm-smilies {
        top: 50%;
        left: 17px;
        transform: translateY(-50%);
        width: 38px;
        min-height: 38px;
    }
}

.a19-mc-wm-smilies-wrapper.hide {
    display: none;
}

.a19-mc-wm-smilies .a19-mc-wm-smilies-wrapper:hover {
    /* transform: none; */
    opacity: 1;
}



.a19-mc-wm-smilies-wrapper > div:first-of-type {
    overflow-y: auto;
    height: 100%;
    padding: 1px;
}

.a19-mc-wm-smilies-wrapper > div:first-of-type::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

.a19-mc-wm-smilies-wrapper > div:first-of-type::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px 4px transparent;
    border: solid 4px transparent; 
    background-color: transparent;
}

.a19-mc-wm-smilies-wrapper > div:first-of-type::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 4px 4px #702BCF;
    border: solid 6px transparent; 
    border-radius: 14px;
}

.a19-mc-wm-smilies-wrapper > div:first-of-type::-webkit-scrollbar-button {
  display: none;
}

.a19-mc-wm-smilies-wrapper > div:first-of-type::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 5px; 
}

.a19-mc-wm-smilies-wrapper > div:first-of-type::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 5px;
}

.a19-mc-wm-suggestions-wrapper {
    position: absolute;
    bottom: 71px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 20px);
    background: #27244C;
    border-radius: 22px; /* 47px; */
    color: #fff;
    padding: 11px 9px 10px;
    z-index: 10;
}


.a19-buttons .a19-mc-wm-suggestions-wrapper {
    width: 100%;
    bottom: 108px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.a19-buttons .a19-mc-wm-suggestions-wrapper.type3 {
    border-radius: 22px;
}

.a19-mc-wm-suggestions-wrapper .suggestions-generating span {
    float: left;
    width: calc(100% - 68px);
}

.a19-mc-wm-suggestions-wrapper .suggestions-generating img {
    float: right;
    width: 68px;
    height: 50px;
    text-align: center;
    object-fit: cover;
}

@media only screen and (min-width: 768px) {
    .a19-buttons .a19-mc-wm-suggestions-wrapper {
        bottom: 156px;
        right: 0px;
        border-radius: 47px;
        width: 350px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-buttons .a19-mc-wm-suggestions-wrapper {
        bottom: 98px;
        right: 70px;
    }
}

@media only screen and (min-width: 1600px) {
    .a19-buttons .a19-mc-wm-suggestions-wrapper {
        right: -70px;
        width: 347px;
    }
}

@media only screen and (max-width: 767px) {
    .a19-mc-wm-suggestions-wrapper p.suggestions-start.center {
        font-size: 14px;
        line-height: 19px;
        padding: 0;
    }
    .a19-mc-wm-suggestions-wrapper .suggestions-generating span {
        width: calc(100% - 36px);
        font-size: 14px;
    }
    .a19-mc-wm-suggestions-wrapper .suggestions-generating img {
        width: 36px;
        height: 36px;
    }
}

.a19-mc-wm-smilies-wrapper {
    background: #27244C;
    border-radius: 14px;
    position: relative;
}

.a19-mc-wm-smilies-wrapper::before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index: -1; */
}

.a19-mc-wm-smilies-wrapper::after {
    content: '';
    background: url('/img/chat-bg.png') no-repeat center center;
    background-size: cover;
    width: 63.5px;
    height: 42px;
    position: absolute;
    bottom: -16px;
    left: 0;
}

.a19-mc-wm-smilies-wrapper > * {
    position: relative;
    z-index: 1;
}

.a19-mc-wm-smilies-wrapper #emoji > div {
    width: 36.18px;
    height: 36.18px;
    padding: 6px;
    float: left;
    border: 1px solid #4B73D9;
    margin-left: -1px;
    margin-top: -1px;
    text-align: center;
}

.a19-mc-wm-smilies-wrapper #emoji > div:first-child {
    border-top-left-radius: 6px;
}

.a19-mc-wm-smilies-wrapper #emoji > div:nth-child(9) {
    border-top-right-radius: 6px;
}

.a19-mc-wm-smilies-wrapper #emoji > div:nth-last-child(9) {
    border-bottom-left-radius: 6px;
}

.a19-mc-wm-smilies-wrapper #emoji > div:last-child {
    border-bottom-right-radius: 6px;
}

.a19-mc-wm-smilies-wrapper #emoji > div.eic:hover {
    background: url(/img/chat-ic.svg) center right 45px no-repeat, linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
}

@media only screen and (max-width: 767px) {
    .a19-mc-wm-smilies-wrapper {
        width: 360px;
        height: 210px;
        top: -236px;
        left: -17px;
        padding: 17px 4px 17px 17px;
    }
    .a19-mc-wm-smilies-wrapper #emoji > div {
        padding: 2px 0;
        font-size: 22px;
        text-align: center;
    }
    .imu-name span:first-of-type {
        font-size: 17px;
    }
}

@media only screen and (min-width: 768px) {
    .a19-mc-wm-suggestions-wrapper {
        bottom: 64px;
        left: initial;
        right: -31px;
        transform: none;
        width: 100%;
        max-width: 366px;
        padding: 12px 10px 10px;
    }
}

@media only screen and (min-width: 992px) {
    .a19-mc-wm-smilies-wrapper {
        top: -260px;
    }

    .a19-mc-wm-smilies-wrapper::after {
        background: url(/img/suggestion-arrow3.png) top center no-repeat;
        background-size: contain;
        width: 60.5px;
        height: 24px;
        bottom: -21px;
        left: 50%;
        right: initial;
        transform: translateX(-50%);
    }
}

.a19-mc-wm-suggestions-wrapper p {
    padding: 0 15px;
}

.retry-ai {
    text-decoration: underline;
    cursor: pointer;
    float: right;
}

span.empty-lightbox-msg {
    color: #383838;
    font-size: 22px;
    font-weight: bold;
}

span.empty-lightbox-msg.no-comp-report-msg {
    color: #fff;
}

span.empty-lightbox-msg.hide {
    display: none;
}

.load-more-matches {
    color: #fff;
    font-size: 18px;
    margin: 30px auto 0;
    text-align: center;
    text-decoration: underline;
}

.load-more-matches:hover {
    font-weight: 700;
    cursor: pointer;
}

@media only screen and (min-width: 800px) {
    .load-more-matches {
        font-size: 20px;
    }
}

.a19-mc-write-message.disabled>* {
    pointer-events: none;
    opacity: 0.4;
}

.a19-mc-wm-suggestions-wrapper p.f19 {
    font-size: 14px;
    line-height: 18px;
}

.a19-mc-wm-suggestions-wrapper p.b {
    font-weight: 700;
}

.a19-mc-wm-suggestions-wrapper p.center {
    text-align: center;
}

.a19-mc-wm-suggestions-wrapper p.hide {
    display: none;
}

.a19-mc-wm-suggestions-wrapper:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.a19-mc-wm-suggestions-wrapper::after {
    content: '';
    width: 50px;
    height: 46px;
    background: url(/img/suggestion-arrow.png) top center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -21px;
    right: -2px;
}

.a19-buttons .a19-mc-wm-suggestions-wrapper::after {
    background: url(/img/suggestion-arrow2.png) top center no-repeat;
    background-size: contain;
    bottom: -26px;
    right: 0px;
}

.a19-buttons .a19-mc-wm-suggestions-wrapper.type2::after {
    background: url(/img/suggestion-arrow2-2.png) top center no-repeat;
    background-size: contain;
    width: 57px;
    height: 50px;
    bottom: -16px;
    right: 0px;
}

.a19-mc-wm-suggestions-wrapper > * {
    position: relative;
    width: 100%;
    z-index: 1;
}

@media only screen and (min-width: 768px) {
    .a19-mc-wm-suggestions-wrapper::after {
        width: 70px;
        height: 54px;
        background: url(/img/suggestion-arrow-d.png) top center no-repeat;
        background-size: contain;
        bottom: -24px;
        right: 0px;
    }

    .a19-buttons .a19-mc-wm-suggestions-wrapper::after {
        width: 65.5px;
        height: 36.5px;
        background: url(/img/suggestion-arrow2-t.png) top center no-repeat;
        background-size: contain;
        bottom: -16px;
        right: 0px;
    }

    .a19-buttons .a19-mc-wm-suggestions-wrapper.type2::after {
        background: url(/img/suggestion-arrow2-2-t.png) top center no-repeat;
        background-size: contain;
        width: 69px;
        height: 44px;
        bottom: -16px;
        right: 0px;
    }

    .a19-buttons .a19-mc-wm-suggestions-wrapper.type3::after {
        background: url(/img/suggestion-arrow2-3-t.png) top center no-repeat;
        background-size: contain;
        width: 68.5px;
        height: 44.5px;
        bottom: -16px;
        right: 0px;
    }

    .a19-mc-wm-suggestions-wrapper p.f19 {
        font-size: 14px;
    }
}

@media only screen and (min-width: 1600px) {
    .a19-buttons .a19-mc-wm-suggestions-wrapper::after,
    .a19-buttons .a19-mc-wm-suggestions-wrapper.type2::after,
    .a19-buttons .a19-mc-wm-suggestions-wrapper.type3::after {
        background: url(/img/suggestion-arrow3.png) top center no-repeat;
        background-size: contain;
        width: 60.5px;
        height: 24px;
        bottom: -21px;
        left: 50%;
        right: initial;
        transform: translateX(-50%);
    }
}

.a19-mc-wm-suggestions-wrapper.hide { 
    display: none;
}

.a19-mc-wm-suggestions-wrapper dl {
    display: grid;
    gap: 8px 0;
}

.a19-mc-wm-suggestions-wrapper dl.hide {
    display: none;
}

.a19-mc-wm-suggestions-wrapper dl dt {
    padding: 0 9px;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    text-align: left;
}

.a19-mc-wm-suggestions-wrapper dl dd {
    background: rgba(49, 45, 100, 0.8);
    border-radius: 12px;
    padding: 8px 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    position: relative;
    text-align: left;
    cursor: pointer;
}

.a19-mc-wm-suggestions-wrapper dl dd:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.a19-ms-close-message {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 24px;
    height: 24px;
    background: #312D64;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s ease-in;
}

.a19-ms-close-message:hover {
    transform: scale(1.02);
}

@media only screen and (min-width: 800px) {
    .a19-ms-close-message {
        display: none;
    }
}

.zodiacIcon {
    max-height: 25px;
}

/* END Dating dashboard Dec 2023 */



/* Couple games 2024 */

.couple-game-btm-bar {
    position: fixed;
    bottom: -2px;
    left: -2px;
    height: 47px;
    width: calc(100% + 4px);
    background: #EEF0F4;
    border: 2px solid #31ADE1;
    border-radius: 12px 12px 0px 0px;
    display: grid;
    grid-template-columns: 24% 52% 24%;
    box-shadow: 0px -8px 20px 0px rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 800px) {
    .couple-game-btm-bar {
        height: 90px;
        border-radius: 18px 18px 0px 0px;
    }
}

.couple-game-btm-bar > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 7px;
    padding: 0 7px;
}

.couple-game-btm-bar > div::after {
    content: '';
    width: 1px;
    height: 16px;
    position: absolute;
    top: 15px;
    right: 0;
    background-color: #B9BECA;
}

@media only screen and (min-width: 800px) {
    .couple-game-btm-bar>div {
        gap: 0 20px;
        padding: 0 20px;
    }

    .couple-game-btm-bar>div::after {
        height: 40px;
        top: 25px;
    }
}

.couple-game-wrapper {
    padding-top: 34px;
    padding-bottom: 7px;
    /* display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center; */
    display: grid;
    grid-template-rows: 58px auto auto auto;
    justify-items: center;
    height: calc(100% - 109px);
    gap: 20px 0;
    overflow-y: auto;
}

@media only screen and (min-width: 800px) {
    .couple-game-wrapper {
        height: calc(100% - 152px);
        padding-bottom: 48px;
    }
}

.couple-game-wrapper.v2 {
    grid-template-rows: 1fr;
    align-items: center;
    padding-top: 7px;
}

.couple-game-wrapper.v3 {
    grid-template-rows: 1fr;
    align-items: center;
    padding-top: 7px;
    height: calc(100% - 99px);
    gap: 15px 0;
}

@media only screen and (min-width: 430px) {
    .couple-game-wrapper.v3 {
        width: 430px;
        margin: 0 auto;
    }
}


/* mobile short screens */
@media (pointer:none), (pointer:coarse) and (max-height: 675px) and (max-width: 420px) {
    .couple-game-wrapper {
        padding-top: 0px;
        gap: 0px 0;
    }
}

/* Desktop short screens */
@media only screen and (max-height: 760px) {
    .couple-game-wrapper {
        padding-top: 10px;
        gap: 15px 0;
        padding-bottom: 10px;
    }
}

span.cg-btn {
    width: 80px;
    height: 28px;
    border-radius: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 12px;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease-in;
}


@media only screen and (min-width: 800px) {
    span.cg-btn {
        width: 182px;
        height: 54px;
        font-size: 20px;
        gap: 13px;
    }
}

span.cg-btn:hover {
    transform: scale(1.02);
}

span.cg-btn.white {
    background-color: #fff;
    color: #6449D4;
}

span.cg-btn.gray {
    background-color: #DADEE7;
    color: #6449D4;
    border: 1px solid #6A39D2;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 15px;
    left: 15px;
}

@media only screen and (min-width: 445px) {
    span.cg-btn.gray {
        bottom: 20px;
        left: 20px;
    }
}


span.cg-btn.purple {
    background-color: #6449D4;
    color: #FCC32F;
}

span.cg-btn.red {
    background-color: #C5262F;
    color: #fff;
}

span.cg-btn.yellow {
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    color: #6A39D2;
}

span.cg-btn.left {
    margin-right: auto;
}

span.cg-btn.right {
    margin-left: auto;
}

svg.cg-w23 {
    width: 14px;
}

svg.cg-w26 {
    width: 14px;
}

svg.cg-w43 {
    width: 24px;
}

@media only screen and (min-width: 800px) {
    svg.cg-w23 {
        width: 23px;
    }

    svg.cg-w43 {
        width: 43px;
    }

    svg.cg-w26 {
        width: 26px;
    }
    
}

.couple-game-progress-wrapper {
    /* position: absolute;
    bottom: 56px;
    left: 50%; 
    transform: translateX(-50%);*/
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    width: 100%;
    padding: 0 23px;
    margin-top: auto;
    position: fixed;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (min-width: 800px) {
    .couple-game-progress-wrapper {
        width: 560px;
        padding: unset;
        font-size: 14px;
        /* bottom: 140px; */
        margin: auto auto  0 auto;
        position: fixed;
        bottom: 115px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.couple-game-progress {
    width: 100%;
    height: 12px;
    padding: 4px;
    background: rgba(24, 19, 46, 0.6);
    border-radius: 70px;
    display: flex;
}

@media only screen and (min-width: 800px) {
    .couple-game-progress {
        margin-top: 6px;
        width: 560px;
        height: 16px;
        padding: 4px;
    }
}

.couple-game-progress .bar {
    background: #FBBA22;
    height: 100%;
    border-radius: 70px;
    animation: progressAnimation2 1s ease-out;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: end;
}

@keyframes progressAnimation2 {
    0%   { 
        width: 0; 
        background-color: #FBBA22;
    }
    100% { 
        background-color: #FBBA22;
    }
  }

.couple-game-skip {
    width: 92px;
    height: 24px;
    border-radius: 87px;
    border: 1px solid #fff;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    margin: 0 auto;
    transition: all 0.2 ease-in;
}

@media only screen and (min-width: 800px) {
    .couple-game-skip {
        width: 128px;
        height: 40px;
        font-size: 16px;
    }
}

.couple-game-skip:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.cg-pie-wrapper {
    width: 58px;
    height: 58px;
    aspect-ratio: 1/1;
    border: 6px solid #365394;
    border-radius: 50%;
    position: relative;
    /* margin: 0 auto;
    display: grid;
    justify-content: center; */
}


@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

.pie-cg {
    --p: 20;
    /* the percentage */
    --b: 6px;
    /* the thickness */
    --c: #FBBA22;
    /* the color */
    --w: 58px;
    /* the size*/

    width: var(--w);
    aspect-ratio: 1/1;
    position: absolute;
    top: -6px;
    left: -6px;
    display: inline-grid;
    place-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.pie-cg:before,
.pie-cg:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie-cg:before {
    inset: 0;
    background:
        radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie-cg:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

.animate-cg {
    animation-name: p2;
    animation-duration: 15s;
    animation-iteration-count: 1;
    animation-timing-function: steps(1500);
}

@keyframes p2 {
    from {
        --p: 0;
    }
}
.cg-options {
    width: 290px;
    padding: 20px;
    border: 2px solid #fff;
    border-radius: 22px;
    display: grid;
    gap: 34px 0;
    justify-content: center;
    font-family: var(--rubik);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: auto;
    position: fixed;
    top: 32vh;
    left: 50%;
    transform: translateX(-50%);
}

.cg-options.v2 {
    border: 0;
    padding: 0;
    justify-content: stretch;
}

.cg-options.gap16 {
    gap: 16px 0;
}

@media only screen and (min-width: 800px) {
    .cg-options {
        width: 345px;
    }
}

/* mobile short  */
@media (pointer:none),
(pointer:coarse) and (max-height: 675px) {
    .cg-options {
        padding: 10px;
    }
}

@media only screen and (max-height: 760px) {
    .cg-options {
        padding: 10px;
        top: 32vh;
    }
}

.cg-rating-1 {
    display: grid;
    justify-content: center;
    gap: 10px 0;
    position: relative;
}



@media only screen and (min-width: 800px) {
    .cg-rating-1 {
        gap: 15px 0;
    }
}



.cg-rating-1::before,
.cg-rating-1::after {
    content: '';
    width: 4px;
    height: 15px;
    border-radius: 56px;
    background-color: #FBBA22;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.cg-rating-1::before {
    top: -25px;
}

.cg-rating-1::after {
    bottom: -25px;
}


.cg-rating-1 fieldset {
    border: 0;
    display: grid;
    gap: 10px 0;
}


.cg-title-1, .cg-title-2 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    padding: 0 20px;
    text-align: center;
    height: 10px;
    position: fixed;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.cg-title-1.v2 {
    font-size: 22px;
    height: 22px;
}

.cg-title-1.v3 {
    font-size: 28px;
    padding-top: 10px;
    height: 28px;
}

@media (min-aspect-ratio: 16/9) and (max-height: 820px) {
    .cg-title-1 {
        font-size: 24px;
        height: 24px;
    }
}

@media only screen and (min-width: 800px) {
    .cg-title-1 {
        font-size: 36px;
        height: 36px;
    }
    .cg-title-1.v2 {
        font-size: 36px;
        height: 10px;
    }
}

input[type="radio"] {
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    appearance: none;
    background-color: transparent;
    outline: none;
    transition: outline 0.1s;
    cursor: pointer;
}

input[type="radio"]:not(:disabled):checked {
    border: 2px solid #fff;
    background-clip: content-box;
    padding: 4px;
    background-color: #FBBA22;
}

input[type="radio"]:disabled {
    background-color: #d9d9d9;
    pointer-events: none;
}

input[type="radio"]:disabled:checked {
    background-image: radial-gradient(circle,
            #8b8c89 0%,
            #8b8c89 50%,
            transparent 50%,
            transparent 100%);
}

@media (hover: hover) {
    input[type="radio"]:not(:disabled):hover {
        outline: 6px solid rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
}


@media (prefers-reduced-motion: reduce) {
    input[type="radio"] {
        transition: none;
    }

    input[type="radio"]:focus-visible {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
    input[type="radio"]:not(:disabled):hover {
        transform: scale(1);
    }
}

button.cgo-button-1 {
    width: 100%;
    height: 8vh;
    display: block;
    background-color: transparent;
    border: 0;
    outline: 2px solid #fff;
    border-radius: 22px;
    color: #fff;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

button.cgo-button-1:hover {
    outline: 6px solid #FBBA22;
}

/* mobile short screens */
@media (pointer:none), (pointer:coarse) and (max-height: 675px) and (max-width: 420px) {
    button.cgo-button-1 {
        height: 50px;
    }
}

/* Desktop short screens */
@media only screen and (max-height: 830px) and (min-width: 420px) {
    button.cgo-button-1 {
        height: 54px;
    }
}

.cg-options-onWhite {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vh; /* 40% of the viewport height */
    height: 40vh; /* Equal to the width to maintain a square shape */
    padding: 0;
    margin: 0;
    border-radius: 22px;
    background-color: #fff;
    text-align: center;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: clamp(16px, calc(20px + (36–20) * (100vw - 768px)/(1920–768)), 48px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.cg-options-onWhite img {
    width: 50%; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

.cg-options-onWhite span {
    margin-top: 10%; /* Adjust the top margin to space out the text from the image */
    margin-left: 10%;
    margin-right: 10%;
    font-size: 1em; /* Adjust based on your design needs */
    color: #333; /* Adjust the text color as needed */
    display: block; /* Make the span behave like a block element */
}

.cg-options-2 {
    width: 100%;
    padding: 0 20px;
    display: grid;
    gap: 0 20px;
    overflow: hidden;
    margin: auto;
    position: fixed;
    top: 31vh;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (min-width: 500px) {
    .cg-options-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 940px) {
    .cg-options-2 {
        width: 925px;
        margin: auto;
        gap: 0 45px;
    }
}

@media only screen and (max-height: 910px) and (min-width: 500px) {
    .cg-options-2 {
        width: 645px;
    }
}

.cg-options-2 img {
    width: 100px;
    aspect-ratio: 1/1;
    border-radius: 22px;
    cursor: pointer;
    border: 6px solid transparent;
    transition: border 0.2s ease-in;
    justify-self: center;
    /* width: 180px; */
    width: 24vh;

}

@media only screen and (min-width: 500px) {
    .cg-options-2 img {
        width: 50vh;
    }
}

.cg-options-2 img:hover {
    border: 6px solid #FBBA22;
}

.swiper-slide-nav {
    position: relative;
    height: 50px;
    width: calc(100% - 10px);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 19px;
    background:
        linear-gradient(0deg, #F4F5F8, #F4F5F8);
    border: 1px solid #DADEE7;
    justify-self: center;
    color: #3D93DE;
}

.swiper-slide-nav li:not(:last-child) {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #BFC5D1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide-nav li:last-child {
    position: absolute;
    right: 10px;
    top: 13px;
}

.swiper-slide-title {
    background: url(/img/swiper-slide-title.svg) top -1px center no-repeat;
    background-size: 80% 100%;
    font-family: var(--num);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* END Couple games 2024 */


/* ------------------------- */


/* Moved from css/styles.css */

a, button,input,select,textarea {
    transition: all .3s;
}

.noDisplay {
  display: none !important;
}

#coin-balance {
  transition: --num 1s;
  counter-reset: num var(--num);
  /* Use counter-reset instead of counter-set for compatibility */
  font: 800 120% system-ui;
}

#coin-balance::after {
  content: counter(num);
}

.personality-profile-card,
.financial-profile-card {
  display: flex;
  flex-direction: column;
}

.preevent-upper-label,
.preevent-lower-label {
  text-align: center;
}

p,
.line-height-1-5 {
    line-height: 1.5;
}

@media only screen and (min-width: 768px) {
  .logo {
    margin: 8px 0 0 0;
  }
}

@media only screen and (min-width: 1064px) {
  .logo {
    margin-left: 0;
  }
}

.mb-1 {
    margin-bottom: 8px !important;
}

.font-text {
    font-family: var(--nunito);
    font-weight: 600;
}

h1,
h2,
h3 {
    margin-bottom: 0; /* !important; */
}

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

hr {
    width: 100%;
    border: none;
    height: 2px;
    background-color: #d8d8d8;
}

.btn {
    outline: none;
    min-width: 220px;
    height: 40px;
    text-align: center;
    font-size: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none !important;
}

.pagination {
    font-size: 24px;
    color: #1b7a8b;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 65px;
    padding: 0 60px;
}
.pagination a {
    text-decoration: none;
    display: block;
    padding: 5px;
    margin: 5px;
    color: #1b7a8b;
}

.pagination a.active {
    font-weight: 600;
}

.error {
    text-align: center;
    font-weight: bold;
    color: #ff0000 !important;
    margin-top: 5px;
    caret-color: #ff0000 !important;
}

.tooltip .tooltiptext {
    position: absolute; 
    background-color: #6D34D2;   
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: all .6s;
    right: 0;
    transform: translateX(112%);
    font-size: 14px;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #6D34D2 transparent transparent;
}
.tooltip-white .tooltiptext {
    background-color:  #fff;
    color: #6D34D2; 
    transform: translateX(120%);  
}

.tooltip-white .tooltiptext::after {
    border-color: transparent #fff transparent transparent;  
}
.tooltip .tooltiptext.tooltip-bottom{
    right: auto;
    bottom: 0;
    transform: translateY(125%);
}
.tooltip .tooltiptext.tooltip-bottom::after{
    transform: translate(-50%,-50%);
    top: 0;
    left: 50%;
    border-color: transparent transparent #6D34D2 transparent;
}

.tooltip .tooltiptext.tooltip-top{
    right: auto;
    left:50%;
    top: 0;
    transform: translate(-50%,-125%);
}
.tooltip .tooltiptext.tooltip-top::after{
    transform: translate(-50%,100%);
    bottom: 0;
    left: 50%;
    border-color: #6D34D2 transparent transparent transparent;
}
.tooltip-white .tooltiptext.tooltip-top::after {
    border-color: #fff transparent transparent transparent;  
}

.tooltip:not(.tooltipclick):hover .tooltiptext {
    opacity: 1;
  }

/* END Moved from css/styles.css */





/* Nav 2024 */

ul.v3-nav {
    display: none;
}

@media only screen and (min-width: 768px) {
    ul.v3-nav {
        display: flex;
        height: 100%;
        align-items: center;
        font-size: 18px;
        gap: 50px;
        padding-left: 50px;
        position: relative;
    }
}

@media only screen and (min-width: 1728px) {
    ul.v3-nav {
        /* font-size: 0.926vw; 
        gap: 2.315vw; 
        padding-left: 2.894vw; */
    }
}

ul.v3-nav li {
    /* position: relative; */
    height: 100%;
    display: flex;
    align-items: center;
    /* perspective: 2000px; */
}

ul.v3-nav a {
    color: var(--color-primary);
    text-decoration: none;
}

ul.v3-nav a:hover,
ul.v3-nav a.active {
    text-decoration: underline;
    -webkit-text-stroke-width: 0.5px;
}

a.bell-notification {
    align-self: center;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
}

a.bell-notification svg {
    width: 23px;
    margin-top: 3px;
    transition: all 0.1s ease-out;
}

@media only screen and (min-width: 1728px) {
    /* a.bell-notification svg {
        width: 1.157vw; 
        margin-top: 0.174vw;
    } */
}

a.bell-notification:hover svg {
    transform: scale(1.2);
}


ul.v3-nav li.account svg {
    width: 22px;
    display: block;
    transition: all 0.1s ease-out;
}

@media only screen and (min-width: 1728px) {
    /* ul.v3-nav li.account svg {
        width: 1.157vw;
    } */
}

ul.v3-nav li.account:hover svg {
    transform: scale(1.2);
}

.v3-nav-submenu {
    position: absolute;
    right: 0;
    top: 95px;
    background-color: #fff;
    width: 625px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* grid-template-rows: repeat(3, 60px); */ /* Sept 2024 nav */
    grid-auto-rows: 71px; /* Sept 2024 nav */
    gap: 0 20px;
    justify-items: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: all 300ms;
    transform-origin: center -15px;
    transform: rotateX(-25deg);
    overflow: hidden; /* Sept 2024 nav */
    grid-auto-flow: dense;
}

/* Add new classes for left/right positioning */
.v3-nav-submenu li.nav-left {
    grid-column: 1;
}

.v3-nav-submenu li.nav-right {
    grid-column: 2;
    margin-top: 0;
}

/* Hide gaps between items */
.v3-nav-submenu li.d-none {
    display: none;
    grid-area: unset;
}

@media only screen and (min-width: 992px) {
    .v3-nav-submenu {
        top: 79px;
        right: -60px;
        font-size: 20px;
    }

    .v3-nav-submenu a:hover,
    .v3-nav-submenu a:focus {
        text-shadow: none;
        -webkit-text-stroke-width: 0;
    }
}


.v3-nav-submenu.singleCol {
    grid-template-columns: 1fr;
    width: 300px;
}

@media only screen and (min-width: 1728px) {
    .v3-nav-submenu.singleCol {
        width: 17.361vw; /* 300px */
    }
}

.v3-nav-submenu.show {
    visibility: visible;
    opacity: 1;
    transition: all 300ms;
    transform-origin: 50% 50%;
    transform: none;
    box-shadow: 0px 14px 40px 0px rgba(46, 28, 102, 0.2);
}

.v3-nav-submenu li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.v3-nav-submenu li.line {
    all: unset;
    width: 1px;
    height: calc(100% - 80px);
    border-left: 1px solid #D4D4D4;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.v3-nav-submenu li::after {
    content: "";
    height: 1px;
    width: calc(100% - 60px);
    border-top: 1px solid #D4D4D4;
    position: absolute;
    bottom: 0;
    left: 30px;
}

/* Sept 2024 nav */
.v3-nav-submenu li.no-line::after {
    all: unset;
}

.v3-nav-submenu li.noLine::after {
    all: unset;
}

.v3-nav-submenu li.v3-ns-signIn {
    display: grid;
}

.v3-nav-submenu li.v3-ns-signIn.active {
    background-color: #26C1E3;
}

.v3-nav-submenu li.v3-ns-signIn.active a {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    padding: 14px 0 10px 0;
}

.v3-nav-submenu li.v3-ns-signIn.active a:hover {
    color: #fff;
}

@media only screen and (min-width: 1728px) {
    .v3-nav-submenu li.v3-ns-signIn.active a {
        font-size: 1.62vw; /* 28px */
        padding: 0.81vw 0 0.579vw 0;/* 14px 0 10px */
    }
}

.v3-ns-signIn-content {
    background-color: #fff;
    width: 300px;
    border: 4px solid #26C1E3;
    border-radius: 20px;
    padding: 26px 26px 10px 26px;
    display: none;
}

@media only screen and (min-width: 1728px) {
    .v3-ns-signIn-content {
        width: 17.361vw; /* 300px */
        border-width: 0.231vw; /* 4px */
        border-radius: 1.157vw; /* 20px */
        padding: 1.505vw 1.505vw 0.579vw 1.505vw; /* 26px 26px 10px 26px */
    }
}

.v3-ns-signIn-content.show {
    display: grid;
}

.v3-ns-signIn-content.mobile {
    margin: 0 16px;
    width: calc(100% - 32px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;   
    overflow: hidden;
    max-height: 0;
    display: grid;
    padding: 0 26px 0 26px;
}

.v3-ns-signIn-content.mobile.show {
    max-height: 999px;
    visibility: visible;
    opacity: 1;
    transition: all 1.2s;
    margin-top: -20px;
    padding: 26px 26px 10px 26px;
}

.v3-nav-submenu:has(.v3-ns-signIn-content.show) {
    grid-template-rows: 60px auto;
}

@media only screen and (min-width: 1728px) {
    .v3-nav-submenu:has(.v3-ns-signIn-content.show) {
       grid-template-rows: 3.472vw auto; /* 60px auto */
    }
}


.v3-nav-submenu li.v3-ns-signIn.active a.purple-link,
#menu li a.purple-link {
    font-size: 16px;
    font-weight: 500;
    color: #643BCA;
    text-decoration: underline;
    font-family: var(--nunito);
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
    padding: 0;
    min-height: auto;
    height: auto;
}

.v3-nav-submenu li.v3-ns-signIn.active a.purple-link:hover,
#menu li a.purple-link:hover {
    color: #643BCA;
    font-weight: 500;
    text-decoration: none;
    margin: 0;
}

@media only screen and (min-width: 1728px) {
    .v3-nav-submenu li.v3-ns-signIn.active a.purple-link {
        font-size: 0.926vw; /* 16px */
        text-decoration-thickness: 0.029vw; /* 0.5px */
        text-underline-offset: 0.116vw; /* 2px */
        margin: 0;
    }
}

button.button-login {
    border: 0;
    width: 100%;
    background-image: linear-gradient(104deg, #fff275 1%, #f9a300 102%);
    height: 48px;
    border-radius: 16px;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    color: #6A39D2;
/*    margin-top: 16px;*/
    cursor: pointer;
    margin-bottom: 16px;
}

@media only screen and (min-width: 1728px) {
    button.button-login {
        height: 2.778vw; /* 48px */
        border-radius: 0.926vw; /* 16px */
        font-size: 1.157vw; /* 20px */
        margin-top: 0.926vw; /* 16px */
    }
}

button.button-login.w250 {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}

/* END Sept 2024 nav */




ul.v3-nav .v3-nav-submenu a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

ul.v3-nav .v3-nav-submenu a:hover {
    color: #702AD0;
    text-decoration: none;
    -webkit-text-stroke: 0;
}

.v3-nav-submenu .notification {
    position: absolute;
    right: 22px; /* 30px; */
    width: 40px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #702AD0; /* #3C97DE; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}


/* END Nav 2024 */


.dash-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 50px;
    font-size: 20px;
    line-height: 27px;
    text-align: center;
}

.dash-box p {
    margin-bottom: 12px;
}

@media only screen and (min-width: 768px) {
    .dash-box {
        gap: 0 30px;
        grid-template-columns: 1fr 140px;
        text-align: left;
        padding: 1px 2px 1px 11px;
    }

    .dash-box .a19-title {
        text-align: left;
    }

    .dash-box p {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 992px) {
    .dash-box {
        gap: 0 50px;
        grid-template-columns: 1fr 152px;
    }

    .dash-box p {
        font-size: 18px;
        margin-bottom: 7px;
    }

    .dash-box .a19-title {
        margin-top: 8px;
        margin-bottom: 25px;
    }
}

.dash-box.hide {
    display: none;
}

.dash-box.col1 {
    grid-template-columns: 1fr;
    padding: 20px 10px;
}

@media only screen and (min-width: 640px) {
    .dash-box.col1 {
        padding: 40px 20px;
    }
}

@media only screen and (max-width: 860px) {
    .a19-container:has(.dash-box) {
        padding: 10px;
    }
    .dashboard-ai-matches .a19-container {
        margin-bottom: 20px;
    }
}

a.blue-btn {
    width: 255px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 160px;
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a.blue-btn:hover {
    transform: scale(1.02);
}

.open_find_match {
    /* font-family: 'Rubik'; */
}

body .db-hideSmall {
    display: none;
}

body .db-hideBig {
    display: flex;
    margin: 12px auto 0 auto;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    body .db-hideSmall {
        display: flex;
        width: 220px;
        margin-top: 20px;
    }
    
    body .db-hideBig {
        display: none;
    }
}

.db-imageS {
    position: relative;
    width: 160px;
    margin: 10px auto;
}

.db-imageS img {
    width: 100%;
    height: auto;
    border-radius: 7px;
    border: 1px solid #C8CCD1;
    background-color: #fff;
    cursor: pointer;
    display: block;
}

.db-imageS img.enlarge {
    all: unset;
    width: 27px;
    aspect-ratio: 1/1;
    position: absolute;
    top: -13px;
    right: -13px;
    cursor: pointer;
}

.db-imageS img:first-of-type {
    min-height: 198px;
    object-fit: contain;
}


img.db-img1 {
    max-height: 96%;
    width: auto;
    margin: 0 16px;
}

span.a19-close {
    /* position: absolute; */
    width: 24px;
    aspect-ratio: 1/1;
    /* border-radius: 100%;
    border: 1px solid #fff; */
    /* right: 0;
    top: -40px; */
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 17px;
}

span.a19-close img {
    width: 100%;
    height: auto;
    display: block;
}

@media only screen and (min-width: 768px) {
    span.a19-close {
        /* width: 35px; */
        top: -63px;
    }

    .db-imageS {
        width: 140px;
        margin-top: 0;
    }

    .db-imageS img:first-of-type {
        min-height: 174px;
    }

    .db-imageS img.enlarge {
        top: -6px;
        right: -6px;
    }

    img.db-img1 {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media only screen and (min-width: 992px) {
    .db-imageS {
        width: 152px;
    }

    .db-imageS img:first-of-type {
        min-height: 189px;
    }

    img.db-img1 {
        max-width: 687px;
        max-height: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1200px) {
    img.db-img1 {
        margin-top: 0;
    }
}

.f20-15 {
    font-size: 15px;
}

@media only screen and (min-width: 800px) {
    .f20-15 {
        font-size: 20px;
    }
}

.lightbox-container {
    position: relative;
    width: 100%;
    /* margin: 0 auto;
    padding: 30px 10px;
    background-color: #fff;
    border-radius: 22px; */
    max-height: 92%;
    overflow: auto;
    display: grid;
}

@media only screen and (min-width: 768px) {
    .lightbox-container {
        padding: 30px 30px;
    }

    .lightbox-date-gift .lightbox-container.scroll,
    .lightbox-gallery.find_match .lightbox-container.scroll {
        padding: 16px 0 0;
        max-height: 95%;
    }
}

@media only screen and (min-width: 800px) {
    .lightbox-container  {
        width: 750px;
    }
}

@media only screen and (min-width: 992px) {
    .lightbox-date-gift .lightbox-container.scroll {
        padding-top: 33px;
    }
}

.lightbox-container.hide {
    display: none;
}

.lightbox-container.scroll {
    /* margin-right: -10px; */
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.lightbox-container.scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.lightbox-container.scroll::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.lightbox-container.scroll::-webkit-scrollbar-thumb {
    background: #5660d7;
    border: 0px none transparent;
    border-radius: 50px;
}

.lightbox-container.scroll::-webkit-scrollbar-thumb:hover {
    background: #5660d7;
}

.lightbox-container.scroll::-webkit-scrollbar-thumb:active {
    background: #5660d7;
}

.lightbox-container.scroll::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none transparent;
    border-radius: 12px;
}

.lightbox-container.scroll::-webkit-scrollbar-track:hover {
    background: transparent;
}

.lightbox-container.scroll::-webkit-scrollbar-track:active {
    background: transparent;
}

.lightbox-container.scroll::-webkit-scrollbar-corner {
    background: transparent;
}

.lightbox-container.scroll::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}

.lightbox-container.scroll::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}

/* .lightbox-container.scroll::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
} */

/* 4px scroll thumb. 10px margin from right margin */

/* .lightbox-container.scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 25px 25px transparent;
    border: solid 6px transparent;
    background-color: transparent;
}

.lightbox-container.scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px #5660D7;
    border: solid 6px transparent;
    border-radius: 14px;
}

.lightbox-container.scroll::-webkit-scrollbar-button {
  display: none;
} */


@media only screen and (min-width: 768px) {
    /* .lightbox-container.scroll {
        padding: 0;
        margin-right: -10px;
    } */
}




.invite-event {
    display: grid;
    border-radius: 22px;
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    background: #5660D7;
    color: #fff;
    padding: 39px 6px 22px;
    position: relative;
    max-width: 334px;
    margin-left: auto;
    margin-right: auto;
}

.invite-event > * {
    z-index: 1;
}

.invite-event:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.invite-event-group {
    width: 100%;
    background: rgba(49, 45, 100, 0.8);
    border-radius: 14px;
    padding: 10px;
    margin-top: 15px;
    text-align: center;
}

.invite-event-group--overflow {
    overflow: hidden;
}

.lightbox-container.success {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 16px;
    line-height: 2;
    text-align: center;
}

.lc-title {
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    justify-self: center;
}

@media only screen and (min-width: 768px) {
    .invite-event {
        max-width: 600px;
        padding: 30px 33px 32px;
    }

    .invite-event-group {
        padding: 15px 30px;
        margin-top: 22px;
    }

    .lc-title {
        font-size: 24px;
    }
}

@media only screen and (min-width: 850px) {
    .invite-event {
        max-width: 691px;
    }
}

@media only screen and (min-width: 1200px) {
    .invite-event {
        max-width: 974px;
        padding: 30px 34px 34px;
    }
}

.select-event {
    display: grid;
    gap: 5px 0;
}

.select-event .se-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--nunito);
    padding: 24px 0 0 4px;
    display: flex;
    align-items: center;
    gap: 0 5px;
    justify-self: left;
    width: 100%;
    overflow: visible;
}

.select-event .invite-event-group .se-title {
    justify-self: center;
    justify-content: center;
    padding-left: 0;
    font-size: 18px;
    margin-bottom: 10px;
    padding-top: 0;
}

.select-event .invite-event-group .se-title.se-title-left {
    padding-top: 10px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .select-event {
        gap: 10px 0;
    }

    .select-event .se-title {
        font-size: 20px;
        padding: 12px 0 0 4px;
        gap: 0px 20px;
    }

    .select-event .invite-event-group .se-title {
        font-size: 20px;
        padding-top: 0;
        justify-content: center;
    }

    .select-event .invite-event-group .se-title.se-title-left {
        justify-content: start;
        padding-top: 5px;
    }
}

@media only screen and (min-width: 992px) {
    .select-event .invite-event-group .se-title {
        font-size: 24px;
    }

    .select-event .invite-event-group .se-title.se-title-left {
        padding-top: 13px;
    }
}

.select-event .se-title > div {
    position: relative;
    overflow: visible;
    z-index: 999999;
}

.select-event .se-title img {
    display: block;
    width: 15px;
    height: auto;
    cursor: pointer;
}

.select-event .se-title .tooltip-v2 {
    width: 350px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 12px;
    background: #27244C;
    border-radius: 47px;
    padding: 16px 22px;
    box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.15);
    text-align: center;
    display: none;
    z-index: 999999;
    pointer-events: none;
}

.select-event .se-title .tooltip-v2:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tooltip-v2 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    pointer-events: none;
    width: 350px;
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 16px;
    background: #27244C;
    border-radius: 14px;
    border: 1px solid #499DE7;
    padding: 16px 22px;
    box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.15);
    text-align: left;
}

@media only screen and (min-width: 768px) {
    .select-event .se-title .tooltip-v2 {
        width: 430px;
        font-size: 16px;
        padding: 10px;
        transform: translateX(-50%);
    }

    .select-event .se-title img {
        width: 23px;
    }
}

@media only screen and (min-width: 850px) {
    .select-event .se-title .tooltip-v2 {
        width: 467px;
    }
}

@media only screen and (min-width: 1200px) {
    .select-event .se-title .tooltip-v2 {
        padding-left: 38px;
        padding-right: 38px;
        bottom: 100%;
        margin-bottom: 15px;
    }
}

.tooltip-v2::after {
    content: '';
    background: url(/img/tooltip-v2.png) 0 0 no-repeat;
    background-size:  cover;
    display: block;
    position: absolute;
    width: 56px;
    height: 18px;
    bottom: -17px;
    left: 190px; /* 94px; */
}

@media only screen and (min-width: 768px) {
    .tooltip-v2::after {
        /* width: 56px;
        height: 18px; */
        bottom: -17px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media only screen and (min-width: 992px) {
    .tooltip-v2::after {
        bottom: -18px;
    }
}

.select-event .se-events {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-direction: column;
    flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
    .select-event .se-events {
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 1200px) {
    .select-event .se-events {
        flex-direction: row;
        gap: 15px;
        flex-wrap: nowrap;
    }
}

.select-event .se-events span {
    background: rgba(49, 45, 100, 0.8);
    border: 1px solid #4CBAFF;
    border-radius: 52px;
    /*color: #7B75C9;*/
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 14px;
    cursor: pointer;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.select-event .se-events span:hover,
.select-event .se-events span.selected {
    background-color: #702AD0;
    border-color: #702AD0;
    color: #fff;
}

.select-event .se-events span.active {
    background-color: #702AD0;
    border-color: #702AD0;
    color: #fff;
}

.cc-ballance {
    font-family: var(--nunito);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin: 2px auto 0;
    color: #fff;
}

.cc-ballance .cc-image {
    display: inline-block;
    width: 16px;
}

.cc-ballance .cc-image img {
    margin: 0 2px -2px;
}

.cc-ballance + .invite-event-group {
    margin-top: 10px;
}

.absolute-no-cc {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 10;
    font-size: 16px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .select-event .se-events span {
        border-radius: 44px;
        height: 44px;
        padding: 0 8px;
        font-size: 14px;
        border: 1px solid transparent;
    }

    .cc-ballance {

    }
}

@media only screen and (min-width: 992px) {
    .select-event .se-events span {
        border-radius: 42px;
        height: 46px;
    }

    .cc-ballance + .invite-event-group {
        margin-top: 30px;
    }
}

.se-textarea {
    position: relative;
    width: 100%;
    height: 190px;
    background: rgba(49, 45, 100, 0.8);
    border: 1px solid #499DE7;
    border-radius: 10px;
}

.se-textarea.v2 {
    background-color: #fff;
    height: 70px;
    margin: 24px 0 32px;
}

@media only screen and (min-width: 768px) {
    .se-textarea.v2 {
        height: 70px;
    }

    .se-textarea {
        height: 160px;
        border-radius: 12px;
        margin-bottom: 15px;
    }
    
    .se-textarea.v2 {
        background-color: #fff;
        height: 70px;
        margin: 24px 0 32px;
    }
}

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

}

.se-textarea textarea {
    width: 100%;
    height: 100%;
    padding: 0px;
    border: 0;
    border-radius: inherit;
    background-color: transparent;
    display: block;
    resize: none;
    overflow: auto;
    font-family: var(--nunito);
    color: #fff;
    font-size: 14px;
    line-height: 19px;
    padding: 17px 8px 8px 15px;
}

.se-textarea textarea::placeholder {
    color: #fff;
}

@media only screen and (min-width: 768px) {
    .se-textarea textarea {
        font-size: 18px;
        line-height: 25px;
        padding: 21px 26px;
    }
}

.se-textarea img {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}

.se-textarea.v2 img {
    bottom: 14px;
    width: 32px;
}

@media only screen and (min-width: 500px) {
    .se-textarea.v2 img {
        bottom: 18px;
        width: 46px;
    }
}

.se-textarea textarea::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

/* 4px scroll thumb. 10px margin from right margin */
.se-textarea textarea::-webkit-scrollbar-track {
    box-shadow: inset 0 0 25px 25px transparent;
    border: solid 6px transparent;
    background-color: transparent;
}

.se-textarea textarea::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px #949596;
    border: solid 6px transparent;
    border-radius: 14px;
}

.se-textarea textarea::-webkit-scrollbar-button {
  display: none;
}

.se-textarea textarea::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 10px; 
}

.se-textarea textarea::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 10px;
}

button.button-style-7 {
    border: 0;
    align-self: end;
    width: 220px;
    height: 50px;
    border-radius: 160px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-size: 18px;
    font-weight: 700;
    font-family: var(--rubik);
    color: #702AD0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    justify-self: center;
    margin: 15px 0 0 0;
}

button.button-style-7:disabled {
    opacity: 0.5;
}

button.button-style-7:hover {
    background: #702AD0;
    color: #fff;
}

@media screen and (min-width: 768px) {
    button.button-style-7 {
        font-size: 20px;
        border-radius: 166px;
        margin-top: 22px;
    }
}

.mySwiperGifts {
    overflow: visible;
    width: 100%;
    margin: 0 auto;
}

.mySwiperGifts .swiper-wrapper  {
    /* overflow: hidden; */
}

.date-gifts {
    padding: 0 0 10px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.date-gift .swiper-slide {
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: #312D64;
    /* width: 90px; */
    height: 124px;
    margin-top: 6px;
    cursor: pointer;
}

.date-gift .swiper-slide-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    font-weight: bold;
    border-radius: 10px;
    color: #fff;
    /* max-height: 20vw; */
    padding: 16px 9px 7px;
    overflow: hidden;
}

.date-gift.mySwiperGifts {
    padding: 0 44px;
}

.date-gift .date-gift-arrow {
    background-color: transparent;
    width: 30px;
    background-size: 22px auto;
}

.date-gift .date-gift-arrow.toLeft {
    background-position: left center;
}

.date-gift .date-gift-arrow.toRight {
    background-position: 0 center;
}

.date-gift .swiper-slide.swiper-slide-next {
    margin-right: 100px !important;
}

@media screen  and (max-device-width: 480px) and (orientation: portrait) {
    .date-gift {
        /*overflow-x: scroll;*/
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .gift::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }
}


@media screen and (min-width: 768px) {
    .date-gift .swiper-slide.swiper-slide-next {
        margin-right: 24px !important;
    }

    .date-gift .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide {
        margin-right: 70px !important;
    }

    .date-gift.mySwiperGifts {
        padding-left: 60px;
        padding-right: 60px;
    }

    .date-gift .swiper-slide-inner {
        font-size: 18px;
        border-radius: 10px;
        padding: 16px 9px 7px;
    }

    .date-gift .swiper-slide i {
        font-size: 18px;
    }
}

@media screen and (min-width: 1200px) {
    .date-gift .swiper-slide.swiper-slide-next {
        margin-right: 56px !important;
    }

    .date-gift .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide {
        margin-right: 56px !important;
    }

    .date-gift .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide {
        margin-right: 120px !important;
    }

    .date-gift.mySwiperGifts {
        padding-left: 75px;
        padding-right: 75px;
    }

    .date-gift .swiper-slide i {
        margin-top: 20px;
    }

    .date-gift .date-gift-arrow.toLeft {
        background-position: right center;
    }
    
    .date-gift .date-gift-arrow.toRight {
        background-position: 7px center;
    }
}

.date-gift-arrow {
    width: 38px;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(239, 242, 244, 0.8) url('/img/arrow-left-purple.svg') 5px center no-repeat;
    background-size: 26px auto;
    cursor: pointer;
    z-index: 10;
}

/*@media only screen and (max-width: 500px) {
    .date-gift-arrow {
        display: none;
    }
}*/


.date-gift-arrow.toLeft {
    left: 0; 
}

.date-gift-arrow.toLeft.hide {
    opacity: 0.3;
    visibility: visible;
    display:  block !important;
}

.date-gift-arrow.toRight {
    right: 0; /*10px*/
    transform: rotate(180deg);  
}


.date-gift-arrow.toRight.hide {
    opacity: 0.3;
    visibility: visible;
    display:  block !important;
}

.date-gift .swiper-slide.date-gift-arrow:hover {
    border: 0;
}

.date-gift .swiper-slide.date-gift-arrow.selected {
    border: 0;
    background-color: unset;
}

/* .date-gift .swiper-slide:not(.disabled):not(.selected):hover .swiper-slide-inner {
    background-color: #E4E4E4;
    outline: 1px solid #D4D4D4;
} */

.date-gift .swiper-slide:not(.disabled).selected {
    outline: 6px solid #4D81E4;
}

.date-gift .swiper-slide.disabled .swiper-slide-inner img {
    opacity: 0.2;
}

.swiper-button-disabled {
    opacity: 0.5;;
}

.date-gift .swiper-slide i {
    font-family: var(--nunito);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    transition: all 0.1s ease-in;
    margin-top: 10px;
}

/* .date-gift .swiper-slide.selected i,
.date-gift .swiper-slide.selected:not(.disabled):hover i  {
    font-size: 20px;
    font-weight: 700;
    background-color: #6C36D2;
    outline: 1px solid #6C36D2;
    color: #fff;
    font-style: normal;
} */

/* .date-gift .swiper-slide:not(.disabled):hover i {
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    background-color: #E4E4E4;
    outline: 1px solid #D4D4D4;
} */

.grid-2col {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 15px 25px;
    background-color: #EFF2F4;
    border: 1px solid #C8CCD1;
    padding: 15px 15px;
    margin: 15px 0 25px 0;
    border-radius: 10px;
    font-size: 15px;
}

.grid-2col.invite-note-show {
    display: block;
    font-size: 15px;
    padding: 15px;
}

.grid-2col.invite-note-show .grid-2col-details {
    gap: 0;
}

@media only screen and (min-width: 650px) {
    .grid-2col,
    .grid-2col.invite-note-show {
        grid-template-columns: 180px minmax(0, 1fr);
        font-size: 20px;
        padding: 25px 30px;
        gap: 15px 25px;
    }
}

.gift-95-180-ic {
    width: 95px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: #fff;
    border: 4px solid #6348D4;
    display: grid;
    place-items: center;
}

.gift-95-180-ic img {
    width: 120px;
    max-width: 80%;
}

@media only screen and (min-width: 650px) {
    .gift-95-180-ic {
        width: 180px;
        border-width: 6px;
    }
}

.grid-2col-details {
    display: contents;
}

@media only screen and (min-width: 650px) {
    .grid-2col-details {
        display: grid;
        gap: 16px 0;
    }
}

.grid-2col-txt {
    grid-column: span 2;
}

@media only screen and (min-width: 650px) {
    .grid-2col-txt {
        grid-column: unset;
    }
}




.cg-profile-setup {
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #342B70;
    border: 6px solid #FBBA22;
    border-radius: 24px;
}


.couple-game-btn {
    width: 240px;
    height: 60px;
    border-radius: 160px;
    border: 0;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #6A39D2;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 0 auto;
    transition: all 0.2 ease-in;
    text-transform: uppercase;
    font-family: var(--rubik);
}

.couple-game-btn:hover {
    opacity: 0.9;;
}



.couple-game-btn2 {
    cursor: pointer;
    height: 60px;
    border-radius: 160px;
    border: 2px solid #fff;
    background-color: transparent;
    min-width: 186px;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

}

.couple-game-btn2:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.couple-game-btn.resize {
    margin: 0;
}



@media only screen and (max-width: 800px), 
only screen and (max-height: 920px), 
only screen and (max-height: 720px) {
    .couple-game-btn.resize,
    .couple-game-btn2 {
        height: 45px;
        font-size: 16px;
    }

    .couple-game-btn {
        width: 160px;
    }

    .couple-game-btn2 {
        min-width: unset;
        width: 130px;
    }
}

.a19-mcm-alert {
    position: relative;
    min-height: 60px;
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: 400;
    color: #7A75BB;
    background: rgba(49, 45, 100, 0.8);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    text-wrap: balance;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a19-mcm-alert:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.a19-mcm-alert > * {
    position: relative;
    z-index: 1;
}

.a19-mcm-alert span {
    position: absolute;
    bottom: 6px;
    right: 12px;
    font-size: 12px;
}

.a19-mcm-recived {
    position: relative;
    min-height: 60px;
    font-family: var(--nunito);
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    background: #6D31D0;
    border-radius: 12px;
    padding: 6px;
    /* text-align: center; */
    text-wrap: balance;
    display: inline-grid;
    grid-template-columns: 40px 1fr;
    /* grid-template-rows: 40px 1fr; */
    gap: 0px 6px;
    margin-right: auto;
}

@media screen and (min-width: 768px) {
    .a19-mcm-alert {

    }

    .a19-mcm-recived {
        grid-template-columns: 50px 1fr;
    }
}

@media screen and (min-width: 992px) {
    .a19-mcm-recived {
        grid-template-columns: 60px 1fr;
        max-width: 650px;
        padding: 10px;
    }
}

/* Ticket bundle module  July 2024*/

.cg-couple-tixbdl {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: rgba(49, 45, 100, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cg-couple-tixbdl img {
    width: 58px;
    height: auto;
}

.overlay-container.w1130 {
    padding: 40px 0 20px 0;
    max-width: 1130px;
}

.title-f28Rubik {
    font-family: var(--rubik);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 35px;
}

@media only screen and (min-width: 810px) {
    .title-f28Rubik {
        font-size: 28px;
    }
}

.ticket-bundle {
    width: 100%;
    padding: 0 20px;
    display: grid;
    gap: 25px 25px;
}

@media only screen and (min-width: 810px) {
    .ticket-bundle {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tb-box {
    position: relative;
    background-color: #F5F6F8;
    padding: 40px 25px 40px 25px;
    border-radius: 10px;
    font-size: 20px;
    color: #383838;
    display: grid;
    gap: 10px;
}

@media only screen and (max-height: 768px) {
    .tb-box {
        padding: 20px 25px 20px 25px;
        font-size: 18px;
    }
}

.tb-best-value {
    position: absolute;
    background-color: #fff;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 26px;
    border: 2px solid #1189AD;
    border-radius: 50px;
    font-family: var(--rubik);
    font-size: 18px;
    font-weight: 500;
    color: #1189AD;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-height: 768px) {
    .tb-best-value {
        height: 24px;
        order: 1px solid #1189AD;
        font-size: 16px;
    }
}

.tb-bold {
    font-family: var(--rubik);
    font-size: 28px;
    font-weight: 700;
}

@media only screen and (max-height: 768px) {
    .tb-bold {
        font-size: 24px;
    }
}


.tb-bold.grey {
    color: #656565;
}

.tb-bold.strike {
    text-decoration: line-through;
    color: #909090;
}

.tb-list {
    position: relative;
    justify-self: start;
    padding-left: 20px;
    margin-bottom: 15px;
    text-align: left;
}

.tb-box .mt26 {
    margin-top: 26px;
}

.tb-box .mt36 {
    margin-top: 36px;
}

@media only screen and (max-height: 768px) {
    .tb-list {
        margin-bottom: 9px;
    }
    .tb-box .mt26 {
        margin-top: 20px;
    }
    
    .tb-box .mt36 {
        margin-top: 26px;
    }
}

.tb-list::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: #1189AD;
    position: absolute;
    left: 0;
    top: 8px;
}

.button-style-3.plr40 {
    padding: 0 40px;
}

.overlay-v2.scroll{
    overflow-y: auto;
    align-items: start;
  }

  .button-style-8 {
    height: 36px;
    font-family: var(--rubik);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    background-color: var(--CoupleBlue500);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: 0;
    padding: 0 20px;
}

@media only screen and (min-width: 1000px) {
    .button-style-8 {
        height: 56px;
        font-size: 25px;
        padding: 0 40px;
    }
}

@media only screen and (max-height: 768px) {
    .button-style-8 {
        height: 46px;
        font-size: 20px;
        padding: 0 30px;
    }
}

.button-style-8:hover {
    background-color: var(--CoupleBlue400);
}

.button-style-8:focus {
    background-color: var(--CoupleBlue700);
}

.button-style-8.disabled {
    pointer-events: none;
    background-color: var(--CoupleGray400);
    color: var(--TextLowEmphasis);
}

/* END Ticket bundle module  July 2024*/



/* AI Matchmaker - Find your perfect partner */
.matchmaker {
    display: grid;
    border-radius: 22px;
    box-shadow: 8px 8px 40px 0px rgba(9, 8, 17, 0.15);
    /* margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px; */
    background: #5660D7;
    padding: 31px 6px 10px;
    position: relative;
    max-width: 334px;
    margin-left: auto;
    margin-right: auto;
}

.matchmaker > * {
    z-index: 1;
}

.matchmaker:before {
    content: '';
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90.76deg, #54BBFC 0.31%, #4446C6 99.8%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.lc-title2 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    text-align: center;
    justify-self: center;
    color: #fff;
    display: grid;
}

.lc-title2 span {
    font-size: 24px;
}

@media only screen and (min-width: 768px) {
    .matchmaker {
        padding: 30px 27px 24px;
        max-width: 689px;
    }

    .lc-title2 {
        font-size: 32px;
        line-height: 38px;
        gap: 3px 0;
    }

    .lc-title2 span {
        font-size: 24px;
        line-height: 28px;
    }
}

.lg-list-1 {
    display: grid;
    gap: 26px 0;
    margin-top: 38px;
}

.lg-list-1 li {
    position: relative;
    border: 1px solid #4CBAFF;
    border-radius: 14px;
    color: #fff;
    text-align: center;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
}

.lg-list-1 li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #F9C701;
}

@media only screen and (min-width: 768px) {
    .lg-list-1 {
        margin-top: 32px;
        gap: 15px 0px;
    }

    .lg-list-1 li {
        padding: 13px 20px;
        font-size: 18px;
    }

    .lg-list-1 li::before {
        left: 15px;
    }
}

.lg-price {
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.lg-list-2 {
    border: 1px solid #4CBAFF;
    border-radius: 14px;
    padding: 22px 22px 28px;
    margin: 20px 4px 0;
    display: grid;
    gap: 20px 0;
    color: #fff;
}

.lg-list-2 dt {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--rubik);
    text-align: center;
}

.lg-list-2 dd {
    position: relative;
    padding: 0 0 0 30px;
    font-family: var(--nunito);
    font-size: 16px;
    font-weight: 700;
    background: url(/img/list-ic.svg) top 3px left no-repeat;
    background-size: 18px auto;
}

@media only screen and (min-width: 768px) {
    .lg-price {
        font-size: 18px;
    }

    .lg-list-2 {
        padding: 20px 47px 30px;
        margin: 25px 0 0 0;
    }

    .lg-list-2 dt {
        font-size: 32px;
    }
    
    .lg-list-2 dd {
        padding: 0 0 0 34px;
        font-size: 18px;
    }
}

.lg-list-2 dd::before {
    content: '';
    width: 2px;
    height: calc(100% - 5px);
    background: #F9C701;
    position: absolute;
    top: 25px;
    left: 9px;
}

.lg-list-2 dd:last-of-type:before {
    all: unset;
}

button.button-style-7.v2 {
    font-size: 20px;
    width: 198px;
    margin: 0;
    min-height: 52px;
    height: 52px;
    font-weight: 700;
}

@media only screen and (min-width: 768px) {
    button.button-style-7.v2 {
        width: 100%;
        min-height: 56px;
        height: 56px;
    }
}

/* END AI Matchmaker - Find your perfect partner */


/* Aug 2024 */
.lh26 {
    line-height: auto;
}

body a.bw-link {
    color: #383838; 
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
}

/* nov 2025 */
@media only screen and (max-width: 992px) {
    body a.bw-link.v2 {
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 166px;
        padding: 0 35px;
        height: 30px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        text-decoration-thickness: 0.3px;
        text-underline-offset: 2px;
    }
}

body a.bw-link:hover {
    color: #383838;
    text-decoration: none;
}

@media only screen and (min-width: 992px) {
    .lh26 {
        line-height: 1.505vw;
    }

    body a.bw-link {
        color: #fff;
    }
    
    body a.bw-link:hover {
        color: #fff;
    }

    
}

.g2-title {
    font-family: var(--rubik);
    font-size: 5.581vw; /* 24px */
    font-weight: 700;
    margin-bottom: 4.651vw; /* 20px */
}

@media only screen and (min-width: 992px) {
    .g2-title {
        font-size: 24px;
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .g2-title {
        font-size: 28px;
    }
}

ul.footer-sm {
    display: flex;
    justify-content: center;
    gap: 0 4.651vw; /* 20px */
    margin-top: 5.116vw; /* 22px */
}

ul.footer-sm li {
    width: 8.14vw; /* 35px */
    height: 8.14vw; /* 35px */
    border: 1px solid #fff;
    border-radius: 2.326vw; /* 10px */
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.footer-sm li a {
    width: 70%;
}

ul.footer-sm li.w60p a {
    width: 60%;
}

ul.footer-sm li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

ul.footer-sm li img {
    display: block;
}

@media only screen and (min-width: 576px) {
    ul.footer-sm {
        gap: 0 20px;
        margin-top: 15px;
    }
    
    ul.footer-sm li {
        width: 35px;
        height: 35px;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 992px) {
    ul.footer-sm {
        margin-top: 0;
    }
}

.lc-buttons {
    display: grid;
    gap: 26px 34px;
    margin: 25px 0 0 0;
}

.lc-buttons > div {
    display: grid;
    gap: 10px 0;
}

@media only screen and (min-width: 768px) {
    .lc-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* margin: 49px 0 0 0; */
    }

    .lc-buttons > div {
        gap: 13px 0;
    }
}



/* END Aug 2024 */

/* Oct 2024 */

.a12-box2 {
    position: relative;
    width: 100%;
    border-radius: 28px;
    box-shadow: 18px 18px 60px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 100px 10px 10px 10px;
    margin: 115px auto 38px auto;
}

@media only screen and (min-width: 900px) {
    .a12-box2 {
        padding: 100px 35px 70px 35px;
    }
}

.a12-box2-main-title {
    position: relative;
    height: 136px;
    width: 90%;
    font-family: var(--rubik);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: end;
    background-color: #fff;
    position: absolute;
    top: -58px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0 20px 0;
}

@media only screen and (min-width: 900px) {
    .a12-box2-main-title {
        height: 114px;
        justify-content: end;
        align-items: center;
        padding: 0;
    }
}

.a12-box2-main-title span.border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 120px;
    border: 4px solid transparent;
    background: linear-gradient(90.91deg, #35A5E0 -2.11%, #6D33D1 100.75%) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.a12-box2-main-title .icon {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 4px solid #3D97DF;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    border-radius: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a12-box2-main-title .icon img {
    width: 45px;
}

@media only screen and (min-width: 900px) {
    .a12-box2-main-title .icon {
        width: 160px;
        height: 160px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid #3D97DF;
    }

    .a12-box2-main-title .icon img {
        width: 90px;
    }
}

.a12-box2-main-title h1.v3 {
    width: 100%;
}

@media only screen and (min-width: 900px) {
    .a12-box2-main-title h1.v3 {
        width: calc(100% - 160px);
    }
}

.a12-box2-txt {
    font-size: 16px;
    font-weight: 500;
    text-wrap: balance;
    text-align: center;
    margin-bottom: 27px;
}

@media only screen and (min-width: 900px) {
    .a12-box2-txt {
        font-size: 20px;
        margin-bottom: 38px;
    }
}

.a12-box2-txt2 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 27px;
    text-align: center;
    margin-bottom: 27px;
}

@media only screen and (min-width: 900px) {
    .a12-box2-txt2 {
        font-size: 36px;
        margin-bottom: 38px;
    }
}

.a12-box2-grid1 {
    width: 100%;
    min-height: 180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    background: url(/img/grid_bg.svg) center center no-repeat;
    background-size: 370px auto;
    margin-bottom: 27px;
}

.a12-box2-grid1 > div {
    padding: 0 10px;
}

@media only screen and (min-width: 900px) {
    .a12-box2-grid1 {
        width: 780px;
        font-size: 24px;
        background-size: 550px auto;
        margin-bottom: 55px;
    }

    .a12-box2-grid1 > div {
        padding: 0 20px;
    }
}



.a12-box2-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

@media only screen and (min-width: 1100px) {
    .a12-box2-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 80px;
    }
}

.a12-details {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 62px;
    border-radius: 110px;
    background-color: #6642D4;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    justify-self: center;
}

@media only screen and (min-width: 390px) {
    .a12-details {
        font-size: 15px;
    }
}

@media only screen and (min-width: 415px) {
    .a12-details {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1100px) {
    .a12-details {
        height: 92px;
        max-width: unset;
        font-size: 24px;
    }
}

.a12-details::after {
    content: '';
    height: 50px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: #fff url(/img/calendar-ic.svg) center center no-repeat;
    background-size: 26px auto;
    position: absolute;
    left: 10px;
}

@media only screen and (min-width: 1100px) {
    .a12-details::after {
        height: 76px;
        background-size: 38px auto;
    }
}

.a12-details.location {
    background-color: #35A5E0;
}

.a12-details.location::after {
    background: #fff url(/img/location-ic.svg) center center no-repeat;
    background-size: 22px auto;
}

@media only screen and (min-width: 1100px) {
    .a12-details.location::after {
        background-size: 34px auto;
    }
}

body {
    counter-reset: counter;
}

.a12-box2-hiw {
    max-width: 840px;
    padding: 32px 10px 18px 18px;
    margin: 0 auto 44px auto;
    border: 1px solid #CACDD1;
    border-radius: 24px;
    font-weight: 500;
    font-size: 16px;
    display: grid;
    gap: 42px 0;
}

@media only screen and (min-width: 600px) {
    .a12-box2-hiw {
        padding: 50px;
        font-size: 20px;
        gap: 54px 0;
        margin: 0 auto 54px auto;
    }
}

.a12-box2-hiw dt {
    font-size: 26px;
    font-weight: 700;
    font-family: var(--rubik);
    justify-self: center;
    margin-bottom: -14px;
}

@media only screen and (min-width: 600px) {
    .a12-box2-hiw dt {
        font-size: 36px;
        margin-bottom: unset;
    }
}

.a12-box2-hiw dd {
    position: relative;
    padding: 0 0 0 58px;
}

@media only screen and (min-width: 600px) {
    .a12-box2-hiw dd {
        padding: 0 0 0 120px;
    }
}

.a12-box2-hiw dd::before {
    content: counter(counter);
    counter-increment: counter;
    width: 46px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: #EBEBEB;
    border: 1px solid #CACDD1;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-family: var(--rubik);
    font-size: 24px;
}

@media only screen and (min-width: 600px) {
    .a12-box2-hiw dd::before {
        width: 76px;
        font-size: 40px;
    }
}

.list-disk {
    list-style-type: disc;
    padding-left: 20px;
}

.mb15 {
    margin-bottom: 15px;
}

.a12-box.mb35-90 {
    margin-bottom: 35px;
}

@media only screen and (min-width: 900px) {
    .a12-box.mb35-90 {
        margin-bottom: 90px;
    }
}

.notifiction-center {
    z-index: 10;
    width: 100%;
    height: auto; /* calc(100% - 60px); */
    padding: 15px 20px 45px 20px;
    box-shadow: 40px 40px 50px 0px rgba(11, 12, 17, 0.1);
    position: fixed;
    top: 60px;
    background-color: #fff;
    font-size: 18px;
    font-weight: 400;
    overflow: auto;
}



@media only screen and (min-width: 600px) {
    .notifiction-center {
        font-size: 20px;
        padding: 15px 35px 45px 35px;
    }
}


@media only screen and (min-width: 992px) {
    .notifiction-center {
        max-width: 1090px;
        max-height: 80%;
        border-radius: 20px;
        position: fixed;
        top: 10.718vh; /* 100px */
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}

.notifiction-center.hide {
    display: none;
}

.notifiction-center::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

/* 4px scroll thumb. 10px margin from right margin */
.notifiction-center::-webkit-scrollbar-track {
    box-shadow: inset 0 0 25px 25px transparent;
    border: solid 6px transparent;
    background-color: transparent;
}

.notifiction-center::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px #949596;
    border: solid 6px transparent;
    border-radius: 14px;
}

.notifiction-center::-webkit-scrollbar-button {
  display: none;
}

.notifiction-center::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 10px; 
}

.notifiction-center::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 10px;
}

.notifiction-center ul {
    display: grid;
}

.notifiction-center ul li {
    border-bottom: 1px solid #D4D4D4;
    padding: 37px 0 20px 0;
    display: grid;
    gap: 16px 0;
}

@media only screen and (min-width: 600px) {
    .notifiction-center ul li {
        padding: 37px 20px 20px 20px;
    }
}

a.nc-title {
    font-weight: 700;
    padding-left: 50px;
    position: relative;
}

a.nc-title::before {
    content: '!';
    width: 38px;
    aspect-ratio: 1/1;
    border: 3px solid #26C1E3;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 0;
    color: #26C1E3;

}

.notifiction-center ul li a {
    color: #383838;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.notifiction-center ul li a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 600px) {
    .notifiction-center ul li a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

img.nc-close {
    position: absolute;
    top: 28px;
    right: 24px;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

img.nc-close:hover {
    transform: scale(0.8);
}

/* END Oct 2024 */


/* Custom dropdown */
.custom-dropdown {
    position: relative;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 18px;
    margin: 0;
    /* width: 100%; */
    height: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
    grid-area: select;
    color: #fff;
    cursor: pointer;
}

.custom-select {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.dropdown-options {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #353D7C;
    border-radius: 12px;
    box-shadow: 0px 14px 20px 0px #0000001A;
    color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: hidden;
    display: none;
    z-index: 1000;
}

.dropdown-options::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: url(/img/drop-down-arrow-white.svg) 0 0 no-repeat;
    background-size: 100%;
    transform: rotate(180deg);
    justify-self: end;
    pointer-events: none;
    cursor: pointer;
}

.option {
    font-weight: 400;
    font-size: 14px;
    padding: 6px 18px;
}

.option:hover {
    background-color: #312D64;
}

.waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 50%;
    height: 50%;
}
.waveform div {
    flex: 1;
    background-color: #6A39D2;
    transition: height 0.2s ease-in-out;
}

/*AIMM pair request update Aug 2025*/

.note-gift-sent-prreq {
    background: #3F3B7B;
    padding: 15px;
    max-width: 130px;
    border: 1px solid #53BAFB;
    border-radius: 14px;
    align-self: flex-start;
}

.msg-gift-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.msg-gift-container .msg-text {
    flex: 1;
}

.gift-sent-prreq {
    background: #3F3B7B;
    padding: 15px;
    max-width: 155px;
    border: 1px solid #53BAFB;
    border-radius: 14px;
    margin: 0 auto;
}

/* Mobile adjustments for gift-only */
@media (max-width: 768px) {
    .gift-sent-prreq {
        max-width: 100px;
        padding: 8px;
    }
    
    .gift-sent-prreq img {
        width: 100%;
        height: auto;
        max-height: 60px;
        object-fit: contain;
    }
}

/* Gift image alignment in title - only when both message and gift */
.msg-gift-container {
    position: relative;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.msg-gift-container .msg-text {
    flex: 1;
}

.msg-gift-container .note-gift-sent-prreq {
    flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .msg-gift-container .note-gift-sent-prreq {
        max-width: 80px;
        padding: 10px;
    }
    
    .msg-gift-container .note-gift-sent-prreq img {
        width: 100%;
        height: auto;
    }
}

/* August 2025 */
.lp-area {
    margin: 40px auto 0 auto;
    padding: 0 13px;
    color: white;
}

@media only screen and (min-width: 975px) {
    .lp-area {
        margin: 100px auto 0 auto;
    }
}

@media only screen and (min-width: 1240px) {
    .lp-area {
        width: 1240px;
        margin: 100px auto 0 auto;
    }
}

.lpa-grid-1 {
    display: grid;
    gap: 0 50px;
    font-family: var(--nunito);
    font-weight: 300;
    font-size: 16px;
    margin: 0 0 35px 0;
}

@media only screen and (min-width: 530px) {
    .lpa-grid-1 {
        font-size: 20px;
        margin: 0 0 82px 0;
    }
}

@media only screen and (min-width: 975px) {
    .lpa-grid-1 {
        grid-template-columns: minmax(0, 1fr) 504px;
    }
}

.lpa-g1-title {
    display: none;
}

@media only screen and (min-width: 530px) {
    .lpa-g1-title {
        display: block;
        position: relative;
        z-index: 1;
        font-family: var(--rubik);
        font-weight: 700;
        font-size: 40px;
        text-transform: uppercase;
        line-height: 1.3;
        margin: -200px auto 50px auto;
        text-align: center;
    }
}

@media only screen and (min-width: 975px) {
    .lpa-g1-title {
       font-size: 64px;
       margin: 0 0 50px 0;
       text-align: left;
    }
}

body u.underline-1,
body u.underline-2 {
    position: relative;
    text-decoration: none;
    display: inline-flex;
}

.lpa-g1-title u.underline-1::before {
    content: '';
    width: 106%;
    height: 21px;
    position: absolute;
    bottom: -1px;
    left: -2px;
    z-index: -1;
    background: url(/img/lpa-underline-1.png) top left no-repeat;
    background-size: 100% auto;
}

.lpa-g1-title u.underline-2::before {
    content: '';
    width: 106%;
    height: 21px;
    position: absolute;
    bottom: 1px;
    left: -2px;
    z-index: -1;
    background: url(/img/lpa-underline-2.png) top left no-repeat;
    background-size: 100% auto;
}

.lpa-g1-left {
    margin: 30px 0 0 0;
    order: 2;
}

@media only screen and (min-width: 530px) {
    .lpa-g1-left {
        margin: 55px 0 0 0;
    }
}

.lpa-g1-right {
    order: 1;
    display: grid;
    justify-content: center;
    align-items: start;
}

.lpa-g1-right img {
    max-width: 100%;
    grid-row: 1;
    grid-column: 1;
}

@media only screen and (min-width: 530px) {
    .lpa-g1-right img {
        max-width: 504px;
    }
}

@media only screen and (min-width: 975px) {
    .lpa-g1-left {
        order: 1;
    }

    .lpa-g1-right {
        order: 2;
    }
}

.lpa-g1-right-title {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    align-self: end;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 0 30px 0;
    line-height: 1.3;
    z-index: 2;
}

.lpa-g1-right-title u.underline-1::before {
    content: '';
    width: 106%;
    height: 21px;
    position: absolute;
    bottom: -8px;
    left: -2px;
    z-index: -1;
    background: url(/img/lpa-underline-1s.png) top left no-repeat;
    background-size: 100% auto;
}

.lpa-g1-right-title u.underline-2::before {
    content: '';
    width: 106%;
    height: 21px;
    position: absolute;
    bottom: -5px;
    left: -2px;
    z-index: -1;
    background: url(/img/lpa-underline-2s.png) top left no-repeat;
    background-size: 100% auto;
}

@media only screen and (min-width: 530px) {
    .lpa-g1-right-title {
        display: none;
    }
}

.lpa-txt-footer {
    font-family: var(--nunito);
    font-weight: 300;
    font-size: 12px;
    font-style: italic;
}

.mb14 {
    margin-bottom: 14px;
}

.lpa-g1-txt {
    margin: 0 0 33px 0;
}

@media only screen and (min-width: 530px) {
    .lpa-g1-txt {
        margin: 90px 0 62px 0;
    }
}

@media only screen and (min-width: 975px) {
    .lpa-g1-txt {
        margin: 0 0 62px 0;
    }
}



.lpa-grid-2 {
    margin: 0 0 50px 0;
}

@media only screen and (min-width: 700px) {
    .lpa-grid-2 {
        margin: 0 0 100px 0;
    }
}

.lpa-g2-title {
    font-family: var(--rubik);
    font-size: 26px;
    display: grid;
    justify-content: center;
    text-align: center;
    gap: 24px 0;
    margin: 0 0 36px 0;
}

@media only screen and (min-width: 700px) {
    .lpa-g2-title {
        font-size: 36px;
    }
}

.lpa-g2-title b {
    font-weight: 700;
    text-wrap: balance;
}

@media only screen and (min-width: 700px) {
    .lpa-g2-title b {
        text-wrap: unset;
    }
}

.lpa-g2-title b:has(.path) {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: column;
    margin-bottom: 15px;
}

@media only screen and (min-width: 1100px) {
    .lpa-g2-title b:has(.path) {
        flex-direction: row;
    }
}


.lpa-g2-title .yellow-txt {
    color: #F9C701;
}

.lpa-g2-title > span {
    font-family: var(--nunito);
    font-weight: 300;
    font-size: 16px;
}

@media only screen and (min-width: 700px) {
    .lpa-g2-title > span {
        font-size: 20px;
    }
}

.lpa-g2-title > span.w80p {
    font-size: 16px;
}

@media only screen and (min-width: 700px) {
    .lpa-g2-title span.w80p {
        max-width: 80%;
        margin: 0 auto;
        font-size: 20px;
    }
}

ul.lpa-list-1 {
    display: grid;
    gap: 40px 10px;
    color: var(--CoupleText);
    font-family: var(--nunito);
    font-weight: 300;
    font-size: 16px;
    margin: 94px 0 0 0;
    justify-items: center;
}

@media only screen and (min-width: 450px) {
    ul.lpa-list-1 {
        gap: 80px 10px;
    }
}


@media only screen and (min-width: 700px) {
    ul.lpa-list-1 {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1240px) {
    ul.lpa-list-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 10px;
    }
}

ul.lpa-list-1 li {
    width: 334px;
    height: 251px;
    position: relative;
    background: url(/img/lpa-grid-2.svg) top left no-repeat;
    background-size: 100% 100%;
    display: grid;
    padding: 17px 10px 28px 28px;
    line-height: 1;
    align-self: center;
}

@media only screen and (min-width: 450px) {
ul.lpa-list-1 li {
        width: unset;
        max-width: 398px;
        height: 251px;
        gap: 7px 0;
    }
}

ul.lpa-list-1 li > i {
    width: 93px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: 1px solid #fff;
    position: absolute;
    top: -27px;
    left: 118.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 450px) {
    ul.lpa-list-1 li > i {
        width: 117px;
        top: -58px;
        left: 34.8%;
    }
}

ul.lpa-list-1 li > i img {
    width: 58%;
}

ul.lpa-list-1  li > i > span {
    width: 85.47%;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul.lpa-list-1 li span {
    width: 44px;
    aspect-ratio: 1/1;
    background-color: #3A9ADE;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: white;
    align-self: end;
}

@media only screen and (min-width: 450px) {
    ul.lpa-list-1 li span {
         width: 48px;
        align-self: unset;
        margin: 0 0 8px 0;
    }
}

ul.lpa-list-1 li b {
    font-weight: 700;
    font-size: 20px;
    align-self: center;
}

@media only screen and (min-width: 450px) {
    ul.lpa-list-1 li b {
        align-self: unset;
    }
}

.lpa-list-2 {
    display: grid;
    gap: 54px 0;
}

.lpa-list-2 .lpa-l2-area {
    position: relative;
}

.lpa-list-2 .lpa-l2-area > div {
    position: relative;
    display: grid;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px);
    border-radius: 28px;
    padding: 84px 21px;
    font-weight: 300;
    font-size: 16px;
}

@media only screen and (min-width: 700px) {
    .lpa-list-2 .lpa-l2-area > div {
        padding: 50px 160px;
        font-size: 20px;
    }
}

.lpa-list-2 .lpa-l2-area > div::before {
    content: '';
    width: 52px;
    height: 42px;
    background: url(/img/quote-yellow.svg) top left no-repeat;
    background-size: 100%;
    position: absolute;
    top: 25px;
    left: 21px;
}

@media only screen and (min-width: 700px) {
    .lpa-list-2 .lpa-l2-area > div::before {
        top: 18px;
        left: 92px;
    }
}

.lpa-list-2 .lpa-l2-area > div::after {
    content: '';
    width: 52px;
    height: 42px;
    background: url(/img/quote-yellow.svg) top left no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 42px;
    right: 21px;
    transform: rotate(180deg);
}

@media only screen and (min-width: 700px) {
    .lpa-list-2 .lpa-l2-area > div::after {
        bottom: 27px;
        right: 106px;
    }
}

.lpa-l2-name {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(71.58vw, 345px);
    height: 37px;
    color: #F9C701;
    border-radius: 28px;
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 700;
}

@media only screen and (min-width: 700px) {
    .lpa-l2-name {
        font-size: 20px;
        width: 345px;
        left: unset;
        right: 167px;
        transform: none;
    }
}

.lpa-grid-3 {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px);
    border-radius: 28px;
    padding: 40px 20px 27px 20px;
    margin: 0 0 50px 0;
}

@media only screen and (min-width: 700px) {
    .lpa-grid-3 {
        padding: 40px 66px 64px 66px;
    margin: 0 0 100px 0;
    }
}

.lpa-g3 {
    display: grid;
    gap: 16px 20px;
}

@media only screen and (min-width: 1110px) {
    .lpa-g3 {
        grid-template-columns: 448px 1fr;
    }
}

.lpa-g3-lr {
    position: relative;
}

.lpa-g3-lr {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px);
    border-radius: 28px;
    padding: 52px 20px 54px 28px;
    font-weight: 300;
    font-size: 16px;
}

.lpa-g3-lr:first-of-type {
        margin-bottom: 35px;
    }

@media only screen and (min-width: 700px) {
    .lpa-g3-lr {
        font-size: 20px;
    }
}

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

    .lpa-g3-lr:first-of-type {
        margin: 0;
    }
}

.lpa-g3-lr b {
    font-weight: 700;
}

.lpa-g3-lr dl {
    display: grid;
    gap: 16px 0;
}

.lpa-g3-lr dd {
    position: relative;
    padding: 0 0 0 28px;
}

.lpa-g3-lr dd::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #F9C701;
    position: absolute;
    left: 0;
    top: 7px;
}

.lpa-g3-lr .toTop {
    /* background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px); */
    background-color: #0e1017;
    width: 90%;
    border-radius: 28px;
    height: 37px;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
}

@media only screen and (min-width: 700px) {
    .lpa-g3-lr .toTop {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1110px) {
    .lpa-g3-lr .toTop {
        width: 68%;
    }
}

.lpa-g3-footer {
    font-weight: 300;
    font-size: 12px;
    text-align: center;
}

@media only screen and (min-width: 1110px) {
    .lpa-g3-footer {
        grid-column: 2;
    }
}

.lpa-g3-lr dt span {
    white-space: nowrap;
    margin-left: 5px;
}

@media screen and (max-width: 600px) {
    .lpa-g3-lr dt span {
        font-size: 14px;
        margin-left: 0;
    }
}


/* BUTTONS */

/* Yellow gradient button/link H72 */

a.button-style-9 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(320px, 100%);
    height: 66px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 24px;
    color: var(--CouplePurple);
    text-decoration: none;
    border-radius: 160px;
    transition: all .3s;
}

a.button-style-9.v2 {
    width: min(288px, 100%);
    margin: 30px auto 0 auto;
    align-self: center;
}

a.button-style-9:hover {
    background: var(--CouplePurple);
    color: #fff;
}

@media only screen and (min-width: 700px) {
    a.button-style-9 {
        height: 72px;
    }
    a.button-style-9.v2 {
        height: 66px;
        margin: auto;
    }
}


a.button-style-10 {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 768px;
    height: 66px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 18px;
    color: var(--CouplePurple);
    text-decoration: none;
    border-radius: 160px;
    transition: all .3s;
    margin: 0 auto;
    text-wrap: balance;
    text-align: center;
}

a.button-style-10:hover {
    background: var(--CouplePurple);
    color: #fff;
}

@media only screen and (min-width: 700px) {
    a.button-style-10 {
        font-size: 24px;
        height: 72px;
    }
}

a.button-style-11 {
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0 40px;
    height: 66px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 18px;
    color: var(--CouplePurple);
    text-decoration: none;
    border-radius: 160px;
    transition: all .3s;
    margin: 0 auto;
    text-wrap: balance;
    text-align: center;
}

a.button-style-11.white {
    background: white;
}

a.button-style-11.mt40 {
    margin-top: 40px;
}

a.button-style-11:hover {
    background: var(--CouplePurple);
    color: #fff;
}

@media only screen and (min-width: 700px) {
    a.button-style-11 {
        font-size: 24px;
        height: 72px;
    }
}

 /* END August 2025 */



 /* IRL 2025 */

.main-header-v3.v3 {
    background-image: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
}

body.grad-body-4.v2 {
        background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
}

body.irl-bg {
    background:  url("/img/irl-pattern.svg") bottom 30px right no-repeat;
    /* background-attachment: fixed;
    background-size: 984px auto; */
    position: relative;
    height: 100%;
}

 u.irl-underline-1 {
    position: relative;
    text-decoration: none;
    z-index: 1;
 }

  u.irl-underline-1::before {
    content: '';
    width: 107.3%; /* 497px */
    height: 40px;
    position: absolute;
    left: -15px;
    bottom: -23px;
    background: url("/img/irl-underline-1.svg") 0 0 no-repeat;
    background-size: 100% auto;
    z-index: -1;
  }

  .a13-img.v2 {
    align-content: center;
  }

.a13-img.v2 img:nth-of-type(1) {
      margin-left: unset;
      margin-top: 0;
      max-width: 100%;
  }

  @media only screen and (min-width: 992px) {
    .a13-img.v2 img:nth-of-type(1) {
        margin-left: -14%;
        max-width: 115%;
    }
}


@media only screen and (min-width: 1200px) {
    .a13-img.v2 img:nth-of-type(1) {
        margin-top: 0;
    }
}

@media only screen and (min-width: 1500px) {
    .a13-img.v2 img:nth-of-type(1) {
        /* margin-top: -70px; */
        margin-top: 0;
    }
}

.a12-t3.v2 {
    align-self: unset;
    display: grid;
    line-height: 1.2; /* 1.3; */
    justify-items: center;
    padding: 0 20px;
}

@media only screen and (min-width: 992px) {
    .a12-t3.v2 {
        justify-items: unset;
        padding: unset;
    }
}

.a12-t3.v2 > div:first-of-type,
.li-location > div:first-of-type {
    display: flex;
    align-items: center;
    gap: 10px;
}

.a12-t3.v2 .location,
.li-location .location {
    background-color: #EAEEF1;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 700;
    height: 26px;
    padding: 0 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--nunito);
    color: var(--CoupleText);
    white-space: nowrap;
}

button.a12-button.mb10-30 {
    margin-bottom: 10px;
} 

@media only screen and (min-width: 992px) {
    button.a12-button.mb10-30 {
        margin-bottom: 30px;
    } 
}

.a12-box.v3 {
    grid-template-rows: 1fr 60px 55px auto 83px 70px;
}

@media only screen and (min-width: 992px) {
    .a12-box.v3 {
        grid-template-rows: 50px 66px 28px 1fr;
    }
}

.event-banner.v2 {
    border-radius: 30px;
    border: 2px solid #F9C701;
    overflow: hidden;
}

.li-location {
    display: grid;
    gap: 10px;

}

.li-title {
    text-transform: uppercase;
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 36px;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%) text;
    margin: 0 0 5px 0;
}

@media only screen and (min-width: 600px) {
    .li-title {
        font-size: 48px;
        line-height: 1;
        margin-top: -7px;
    }
}

.li-title.v2 {
    margin-left: 13.33vw;
}

@media only screen and (min-width: 768px) {
    .li-title.v2 {
        margin-left: 50px;
        font-size: 36px;
    }
}

@media only screen and (min-width: 992px) {
    .li-title.v2 {
        margin-left: 0;
        font-size: 48px;
    }
}

@media only screen and (min-width: 1400px) {
    .inner-event-wrapper ul.v2 li {
        font-size: 20px;
        padding-top: 16px;
        padding-bottom: 16px;
        height: 61px;
    }

    .inner-event-wrapper ul.v2 li:last-of-type {
        height: unset;
    }
}

.inner-event-wrapper ul li i > img.w28 {
    width: 28px;
}

.inner-event-wrapper ul li i > img.w80p {
    width: 80%;
}

.steps-wrapper .steps-list.v2 h5 {
    font-size: 18px;
}

@media only screen and (min-width: 768px) {
    .steps-wrapper .steps-list.v2 h5 {
        text-transform: none;
        font-size: 20px;
    }
}

.steps-wrapper .steps-list.v2 .step-icon img {
    width: unset;
    max-width: unset;
}

.steps-wrapper .steps-list.v2 .step-icon img.w56 {
    width: 56px;
}

.steps-wrapper .steps-list.v2 .step-icon img.w63 {
    width: 63px;
}

.area-12.v3 {
    padding: 0 0 60px 0;
}

@media only screen and (min-width: 992px) {
    .steps-wrapper .steps-list .step-icon.v2 {
        left: 51.5%;
    }

        body .section-steps .container .steps-wrapper .steps-list .step-icon.v3 {
        bottom: 8px;
    }
}

.inner-event-wrapper ul li i.toTop {
    transform: none;
    /* top: 10px; */
    top: 24px;
}


.text-area {
    color: white;
    max-width: 100%;
    margin: 0 50px;
}

@media only screen and (min-width: 1400px) {
    .text-area {
        max-width: 1246px;
    margin: 0 auto;
    }
}

.text-area h3 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 20px;
    color: #F9C701;
    text-align: left;
    margin: 0 0 12px 0;
}

.text-area h3 + p {
    font-size: 16px;
    margin: 0 0 32px 0;
}

@media only screen and (min-width: 600px) {
    .text-area h3 + p {
        font-size: 20px;
        margin: 0 0 34px 0;
    }
}

.text-area h2 {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    display: block;
    margin-bottom: 30px;
}


@media only screen and (min-width: 992px) {
    .steps-wrapper h2.v2 {
        margin-bottom: 50px;
    }
}

.v3-nav-submenu li.line.v2 {
    height: calc(100% - 26px);
    top: 13px;
}

  /* END IRL 2025 */


  .inner-event-wrapper ul li:has(.li-location) {
      padding-top: 24px; 
  }

  @media only screen and (min-width: 768px) {
    .inner-event-wrapper ul li:has(.li-location) {
        padding-top: 18px;
    }
  }


 

  /* Account center */
  
@media only screen and (min-width: 992px) {
    /*html:has(.account-center) {
        height: 100%;
    }*/
     
    body:has(.account-center) .footer-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 20px;
        
    }
}

@media only screen and (min-width: 992px) {
    body:has(.account-center) {
        padding-bottom: 168px;
        /* padding-top: 80px; */
    }
}

@media only screen and (min-width: 1280px) {
    body:has(.account-center) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.account-center {
    width: 100%;
    margin: 52px auto 0 auto;
    padding: 0 13px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 83px;
}

@media only screen and (min-width: 530px) {
    .account-center {
        margin: 95px auto 83px auto;
        padding: 0 20px;
    }
}

@media only screen and (min-width: 930px) {
    .account-center {
        grid-template-columns: 46% minmax(0, 1fr);
    }
}

@media only screen and (min-width: 1280px) {
    .account-center {
        width: 1290px;
    }
}

.ac-account-info,
.ac-account-plan,
.ac-account-balances {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(100px);
    border-radius: 28px;
    padding: 27px 20px 36px 20px;
    display: grid;
    align-content: start;
    color: white;
    font-size: 16px;
}

@media only screen and (min-width: 530px) {
        .ac-account-info,
        .ac-account-plan,
        .ac-account-balances {
            font-size: 20px;
            padding: 40px 40px 36px 44px;
        }
}

.ac-account-info {
    gap: 40px;
}

.ac-account-plan:has(.button-style-9) {
    grid-template-rows: auto 1fr;
}

@media only screen and (min-width: 930px) {
    .ac-account-balances {
        grid-column: span 2;
    }
}

.ac-title {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 24px;
    color: var(--CoupleYellow);
     margin: 0 0 2px 0;
}

.ac-subtitle {
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 16px;
    color: var(--CoupleYellow);
    margin: 6px 0 24px 0;
}

@media only screen and (min-width: 530px) {
    .ac-subtitle {
        font-size: 20px;
    }
}

.ac-field {
    width: 100%;
    position: relative;
    height: 40px;
}

@media only screen and (min-width: 530px) {
    .ac-field {
    }
}

.ac-field input {
    border: 0;
    background: transparent;
    border-bottom: 1px solid white;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-family: var(--nunito);
    font-weight: 500;
    font-size: 16px;
    padding: 0 15px;
}

@media only screen and (min-width: 530px) {
    .ac-field input {
        font-weight: 400;
        font-size: 20px;
        padding: 0 22px;
    }
}

.ac-field input::placeholder {
    color: white;
}

.ac-field button {
    border: 0;
    width: 84px;
    height: 28px;
    border-radius: 61px;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 12px;
    position: absolute;
    right: 0;
    cursor: pointer;
    background-color: #F26142;
    color: #fff;
}

.ac-field button.validated {
    background-color: #2BC53D;
    pointer-events: none;
}

.ac-field button.reset {
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    color: var(--CouplePurple);
}

.ac-list {
    display: grid;
    gap: 25px;
    margin: 0 0 25px 0;
}

.ac-list li {
    padding: 0 0 0 18px;
    position: relative;
    margin: 0 0 0 10px;
}

.ac-list li::before {
    content: '';
    width: 7px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: var(--CoupleYellow);
    position: absolute;
    left: 0;
    top: 7px;
}

@media only screen and (min-width: 530px) {
    .ac-list li::before {
        top: 10px;
    }
}

.ac-details {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 7px;
    padding: 0 0 0 10px;
}

@media only screen and (min-width: 530px) {
    .ac-details {
        flex-direction: row;
        gap: unset;
        padding: 0;
    }
}

.ac-account-balances a {
    color: white;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
}

.ac-account-balances a:hover {
    text-decoration: none;
}

.ac-list-2 {
    display: grid;
    gap: 32px;
    margin: 22px 0 0 0;
}

@media only screen and (min-width: 1200px) {
    .ac-list-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


.ac-list-2 li {
    display: grid;
    grid-template-columns: 65px 1fr 78px;
    align-items: center;
    width: 100%;
}

@media only screen and (min-width: 530px) {
    .ac-list-2 li {
        grid-template-columns: 77px 240px 90px;
    }
}

@media only screen and (min-width: 1200px) {
    .ac-list-2 li {
        grid-template-columns: 77px 1fr 90px;
    }
}

.ac-list-2 i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 57px;
    height: 57px;
    aspect-ratio: 1/1;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    margin: 0 25px 0 0;
}

.ac-list-2 span.ac-no {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78px;
    height: 39px;
    border-radius: 52px;
    border: 1px solid white;
}

@media only screen and (min-width: 530px) {
    .ac-list-2 span.ac-no {
        width: 90px;
        height: 52px
    }
}

.acl2-txt {
    line-height: 1;
    display: grid;
    gap: 4px;
}

@media only screen and (min-width: 1200px) {
    .acl2-txt {
        display: unset;
    }
}

.acl2-txt b {
    font-weight: 500;
}

.acl2-txt span, 
.acl2-txt a {
    font-size: 12px;
    text-decoration: underline;
}

@media only screen and (min-width: 530px) {
    .acl2-txt span,
    .acl2-txt a {
        font-size: 14px;
    }
}

.ac-error {
    font-size: 3.02vw;
    position: absolute;
    transform: translateY(45px);
    left: 0;
    line-height: 1.3;
}

@media only screen and (min-width: 440px) {
    .ac-error {
        font-size: 14px;
        left: 15px;
    }
}

@media only screen and (min-width: 530px) {
    .ac-error {
        font-size: 14px;
        left: 22px;
    }
}