/*--------------------------------------------------------------
# landing-bigbanner Section
--------------------------------------------------------------*/
.link-Zone .row .col{
    padding-left:inherit;
    padding-right:inherit;
}
.landing-bigbanner {
    /*font-family: 'Puritan', sans-serif;*/
    background: url('../img/Background-Banner.jpg') top center no-repeat;
    background-size: contain;
    overflow: hidden;
    height: calc(calc(100vw / 1920) * 825);
    margin: auto;
    position: relative;
}

.landing-bigbanner .separator {
    position: absolute;
    bottom: 0;
    background:  url('../img/separator-banner.png') top center no-repeat;
    background-size: cover;
    overflow-x: hidden;
    width: 100%;
    
    height: calc(calc(100vw / 1920) * 8);
    max-height: 8px;
}

.landing-bigbanner .character {
    position: absolute;
    overflow: hidden;
    top: 0;
}

@media (min-width: 1920px) {
    .landing-bigbanner .character {
        bottom: 0;
        top: auto;
    }
}
.slider-square-image{
    width:300px;
    height:auto;
}
@media (max-width: 1200px) {
    .slider-square-image{
        width:150px;
        height:auto;
    }
}

@media (max-width: 650px) {
    .slider-square-image{
        width:150px;
        height:auto;
    }
}

@media (max-width: 450px) {
    .slider-square-image{
        width:100px;
        height:auto;
    }
}
.landing-bigbanner .character img {
    width: calc(calc(100vw / 1920) * 1331);
}

.landing-bigbanner .content {
    text-align: center;
    position: relative;
    background: linear-gradient(to bottom, #584FD3 0%, #301569 50%);
    width: calc(calc(100vw / 1920) * 731);
    max-width: 581px;
    border-radius: 25px;
    margin-left: auto;
    margin-right: 17rem;
    margin-top: 3rem;
    text-transform: uppercase;
    padding: 30px 30px 60px;
    box-shadow: 6px 6px 2px -2px rgba(43,38,146,0.8);
}

.landing-bigbanner .content .content-head {
    font-size: 1.9rem;
    font-weight:800;
    line-height: 1;
    /*font-family: 'Puritan', sans-serif;*/
    text-align: center;
    background: #FF004E;
    padding: 15px 0;
    border-radius: 10px;
    width: 90%;
    margin: 1rem auto 0;
    margin-bottom:1rem;
    text-shadow:1px 1px 1px #6F6F6F;
}

.landing-bigbanner .content .content-header {
    font-size: 4.4rem;
    font-weight:400;
    line-height: 1;
    /*font-family: 'Puritan', sans-serif;*/
    text-align: center;
}

.landing-bigbanner .content .content-slogan {
    font-weight:800;
    margin-bottom: 2rem;
}

.landing-bigbanner .content .content-slogan p {
    margin: 0;
    line-height: 1;
    color: #ffd200;
    font-weight:800;
}

.content-slogan p.slogan-big {
    font-size: 7rem;
    line-height: .9 !important;
}

.content-slogan p.slogan-med {
    font-size: 3.2rem;
    color:#28DDE4 !important;
}

.content-slogan p.slogan-sml {
    font-size: 3rem;
    color:#28DDE4 !important;
}

.landing-bigbanner .account-button .button {
    box-shadow: -1px 1px 1px 1px #FDD416;
    border-left:1px solid #EFA30B;
    border-right:1px solid #EFA30B;
    border-bottom:1px solid #EFA30B;
    font-weight:800;
    background: linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    border-radius:10px;
    color:#301569;
    background-size: cover;
    width: calc(calc(100vw / 1920) * 448);
    max-width: 448px;
    height: calc(calc(100vw / 1920) * 83);
    max-height: 83px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    /*font-family: 'Puritan', sans-serif;*/
    font-size: 2rem;
    line-height: 1;
    margin: auto;
}
.landing-bigbanner .account-button .button:hover{
    background:linear-gradient(to bottom, #15A8FC 0%, #0066E1 100%);
    box-shadow: -1px 1px 1px 1px #15A8FC;
    border-left: 1px solid #0066E1;
    border-right: 1px solid #0066E1;
    border-bottom: 1px solid #0066E1;
    background-size: contain;
    color:white;
}
.landing-bigbanner .floating-coins {
    position: absolute;
    right: 8rem;
    bottom: 10rem;
}

.landing-bigbanner .floating-coins img {
    animation: mover 3s infinite;
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}


@media (max-width: 1567px) {
    .landing-bigbanner .content .content-head {
        font-size: 1.5rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 4rem;
    }

    .content-slogan p.slogan-big {
        font-size: 7rem;
    }

    .content-slogan p.slogan-med {
        font-size: 4rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 2.5rem;
    }
}

@media (max-width: 1500px) {

    .landing-bigbanner .content {
        margin-right: 15rem;
    }

    .landing-bigbanner .content .content-head {
        margin-top: 0;
    }

    .landing-bigbanner .content .content-header {
        font-size: 3.5rem;
    }

    .content-slogan p.slogan-big {
        font-size: 6rem;
    }

    .content-slogan p.slogan-med {
        font-size: 3.5rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 2.25rem;
    }

    .landing-bigbanner .content {
        padding: 30px;
    }

    .landing-bigbanner .floating-coins img {
        width: 150px;
    }
}

@media (max-width: 1287px) {
    .landing-bigbanner .content {
        margin-right: 13rem;
    }

    .landing-bigbanner .content .content-head {
        margin-top: 0;
    }

    .content-slogan p.slogan-big {
        font-size: 5.5rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 3rem;
    }

    .content-slogan p.slogan-med {
        font-size: 3.25rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 2rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: 1.5rem;
    }

    .landing-bigbanner .floating-coins {
        right: 3rem;
        bottom: 5rem;
    }
}

@media (max-width: 1200px) {
    .landing-bigbanner .content {
        width: calc(calc(100vw / 1920) * 620);
    }

    .landing-bigbanner .content .content-head {
        font-size: 1rem;
    }

    .content-slogan p.slogan-big {
        font-size: 4rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 2.25rem;
        margin-top: .5rem;
    }

    .content-slogan p.slogan-med {
        font-size: 2.2rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.5rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: 1rem;
        width: calc(calc(100vw / 1920) * 400);
        height: calc(calc(100vw / 1920) * 74);
    }
}

@media (max-width: 1010px) {
    .landing-bigbanner .content {
        width: calc(calc(100vw / 1920) * 620);
        margin-right: 10rem;
        margin-top: 3.5rem;
    }

    .landing-bigbanner .content .content-head {
        font-size: .85rem;
        border-radius: 10px;
    }

    .content-slogan p.slogan-big {
        font-size: 3.5rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 2rem;
        margin-top: .5rem;
    }

    .landing-bigbanner .content .content-slogan {
        margin-bottom: 1rem;
    }

    .content-slogan p.slogan-med {
        font-size: 2rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.3rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: .85rem;
        width: calc(calc(100vw / 1920) * 350);
        height: calc(calc(100vw / 1920) * 65);
    }

    .landing-bigbanner .floating-coins {
        right: 4rem;
    }

    .landing-bigbanner .floating-coins img {
        height: 120px;
        width: auto;
    }
}

@media (max-width: 916px) {
    .landing-bigbanner .content {
        width: calc(calc(100vw / 1920) * 620);
        margin-right: 8rem;
        margin-top: 3.5rem;
    }

    .landing-bigbanner .content .content-head {
        font-size: .75rem;
        border-radius: 10px;
    }

    .content-slogan p.slogan-big {
        font-size: 3rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 1.65rem;
        margin-top: .5rem;
    }

    .landing-bigbanner .content .content-slogan {
        margin-bottom: 1rem;
    }

    .content-slogan p.slogan-med {
        font-size: 1.75rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.25rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: .75rem;
        width: calc(calc(100vw / 1920) * 350);
        height: calc(calc(100vw / 1920) * 65);
    }

    .landing-bigbanner .floating-coins {
        right: 4rem;
    }

    .landing-bigbanner .floating-coins img {
        height: 100px;
    }
}

@media (max-width: 850px) {
    .landing-bigbanner .content {
        padding: 20px;
    }
}

@media (max-width: 780px) {
    .landing-bigbanner {
        background-position: top right;
        height: calc(calc(100vw / 768) * 825);
        max-height: 825px;
        background-size: cover;
    }

    .landing-bigbanner .character {
        bottom: 0;
        top: revert;
        overflow: visible;
        width: 100%;
        display: flex; /* Use flexbox to center vertically */
        align-items: center; /* Center-align vertically */
        justify-content: center;
    }

    .landing-bigbanner .character img {
        width: 100%;
        left: 5em;
        position: relative;
    }

    .landing-bigbanner .separator {
        height: 8px;
        width: 1920px;
    }

    .landing-bigbanner .content {
        margin: 0 auto;
        width: 90%;
        padding: 0;
        max-width: none;
        top: -10rem;
    }

    .landing-bigbanner .content .content-head {
        font-size: 1rem;
        border-radius: 10px;
        padding: .5em 3em;
        width: fit-content;
    }

    .content-slogan p.slogan-big {
        font-size: 4.5rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 2.5rem;
        margin-top: .5rem;
    }

    .landing-bigbanner .content .content-slogan {
        margin-bottom: 1rem;
    }

    .content-slogan p.slogan-med {
        font-size: 1.5rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 3rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: 1.25rem;
        width: calc(calc(100vw / 768) * 250);
        height: calc(calc(100vw / 768) * 46);
    }

    .landing-bigbanner .floating-coins {
        right: 4rem;
    }

    .landing-bigbanner .floating-coins img {
        display: none;
    }
}

@media (max-width: 711px) {
    .landing-bigbanner .content .content-header {
        font-size: 2.25rem;
    }

    .content-slogan p.slogan-big {
        font-size: 4rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 2.5rem;
    }

    .landing-bigbanner .content {
        top: -8rem;
    }
}

@media (max-width: 633px) {
    .landing-bigbanner .content .content-header {
        font-size: 2rem;
    }

    .landing-bigbanner .content .content-slogan {
        margin-bottom: .5rem;
    }

    .content-slogan p.slogan-big {
        font-size: 3.25rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 2.15rem;
    }

    .landing-bigbanner .content {
        top: -8rem;
    }

    .landing-bigbanner .content .content-head {
        font-size: .9rem;
        padding: .5em 2.75em;
    }

    .landing-bigbanner .account-button .button {
        font-size: 1rem;
    }
}

@media (max-width: 572px) {
    .landing-bigbanner .content {
        top: -7rem;
    }
}

@media (max-width: 513px) {
    .landing-bigbanner .content .content-header {
        font-size: 1.5rem;
        margin-top: .25rem;
    }

    .content-slogan p.slogan-big {
        font-size: 2.75rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.8rem;
    }

    .landing-bigbanner .content .content-head {
        font-size: .75rem;
        border-radius: 7.5px;
    }

    .landing-bigbanner .account-button .button {
        font-size: .75rem;
        width: calc(calc(100vw / 768) * 220);
        height: calc(calc(100vw / 768) * 40);
    }

    .landing-bigbanner .content {
        top: -6rem;
    }
}

@media (max-width: 450px) {
    .landing-bigbanner .content .content-head {
        font-size: .75rem;
        padding: .35em 2.25em;
        border-radius: 6.5px;
    }

    .landing-bigbanner .content .content-header {
        font-size: 1.25rem;
    }

    .content-slogan p.slogan-big {
        font-size: 2.25rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.45rem;
    }

    .landing-bigbanner .character img {
        left: 2em;
    }

    .landing-bigbanner .content {
        top: -5rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: .75rem;
        width: calc(calc(100vw / 768) * 260);
        height: calc(calc(100vw / 768) * 48);
    }
}

@media (max-width: 385px) {
    .landing-bigbanner .content .content-head {
        font-size: .7rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: 1rem;
    }

    .content-slogan p.slogan-big {
        font-size: 2rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.3rem;
    }

    .landing-bigbanner .character img {
        width: 85%;
    }

    .landing-bigbanner .content {
        top: -3rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: .7rem;
    }
}

@media (max-width: 316px) {
    .landing-bigbanner .content .content-head {
        font-size: .6rem;
    }

    .landing-bigbanner .content .content-header {
        font-size: .85rem;
    }

    .content-slogan p.slogan-big {
        font-size: 1.5rem;
    }

    .content-slogan p.slogan-sml {
        font-size: 1.3rem;
    }

    .landing-bigbanner .character img {
        width: 85%;
    }

    .landing-bigbanner .content {
        top: -2rem;
    }

    .landing-bigbanner .account-button .button {
        font-size: .6rem;
    }

    .landing-bigbanner .content .content-slogan {
        margin-bottom: .15rem;
    }
}

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# landing-section1 Section
--------------------------------------------------------------*/
.landing-section1 {
    background:
    url(../img/main_section1/Glow.png) bottom center no-repeat;
    background-size: initial;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: auto;
    
    position: relative;
}

.landing-section1 .container {
    max-width: calc(calc(100vw / 1920) * 1800);
}

.landing-section1 header {
    /*font-family: 'Puritan', sans-serif;*/
    text-align: center;
    text-transform: uppercase;
    font-size: var(--headers-size);
    margin-top: 2rem;
    margin-bottom: 6rem;
}

.landing-section1 header span {
    color: var(--orange-color);
}

#game-categories-filters {
    margin: 0 auto 25px auto;
    list-style: none;
    text-align: center;
    border-radius: 50px;
    padding: 2px 15px;
    text-transform: uppercase;
}

#game-categories-filters li {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 8px 20px 10px 20px;
    font-size: 15px;
    line-height: 1;
    margin: 0 4px 25px 4px;
    transition: 0.3s;
    /*background: url(../img/main_section1/Button_dpurple.png) center center no-repeat;*/
    background-color:#291943;
    box-shadow: -1px 1px 1px 1px #352057;
    border-left: 1px solid #1B102C;
    border-right: 1px solid #1B102C;
    border-bottom: 1px solid #1B102C;
    border-radius:0.5rem;
    background-size: contain;
    width: calc(calc(100vw / 1920) * 289);
    max-width: 289px;
    height: calc(calc(100vw / 1920) * 77);
    max-height: 67px;
    /*font-family: 'Puritan', sans-serif;*/
}

#game-categories-filters li:hover,
#game-categories-filters li.filter-active {
    transition: 0.3s;
    /*background: url(../img/main_section1/Button_gold.png) center center no-repeat;*/
    background:linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    box-shadow: -1px 1px 1px 1px #FDD416;
    border-left: 1px solid #EFA30B;
    border-right: 1px solid #EFA30B;
    border-bottom: 1px solid #EFA30B;
    border-radius:0.5rem;
    background-size: contain;
    color: black;
}

#game-categories-filters li a,
#game-categories-filters li p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    font-size: 1.55rem;
}

.game-categories-container {
    position: relative;
    width: 60%;
    margin: auto;
    padding-bottom: 3em;
}

.game-categories-container .game-categories-wrap {
    text-align: center;
    width: fit-content;
}


.game-categories-wrap a > img {
    border-radius: 30px;
    transition: 0.25s all ease-in-out;
}

.game-categories-wrap a:hover > img {
    transform: scale(1.1);
}

.landing-section1 .more {
    text-align: center;
    text-transform: uppercase;
    /*font-family: 'Puritan', sans-serif;*/
    margin-bottom: 3em;
}

.landing-section1 .more a {
    /*background: url(../img/main_section1/Button_dpurple.png) center center no-repeat;*/
    background-color:#291943;
    box-shadow: -1px 1px 1px 1px #352057;
    border-left: 1px solid #1B102C;
    border-right: 1px solid #1B102C;
    border-bottom: 1px solid #1B102C;
    border-radius:0.5rem;
    background-size: contain;
    width: calc(calc(100vw / 1920) * 289);
    max-width: 289px;
    height: calc(calc(100vw / 1920) * 77);
    max-height: 67px;
    display: flex;
    align-items: center;
    margin: auto;
    font-size: 1.5rem;
}

.landing-section1 .more a:hover {
    /*background: url(../img/main_section1/Button_gold.png) center center no-repeat;*/
    background:linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    box-shadow: -1px 1px 1px 1px #FDD416;
    border-left: 1px solid #EFA30B;
    border-right: 1px solid #EFA30B;
    border-bottom: 1px solid #EFA30B;
    border-radius:0.5rem;
    background-size: contain;
    color: black;
}

.landing-section1 .more a span {
    margin: auto;
}

.landing-section1 .col-xl-10 {
    margin: auto;
}

@media (min-width: 2000px) {
    .landing-section1 .col-xl-10 {
        width: 70%;
    }
}

@media (max-width: 1600px) {
    .landing-section1 header {
        margin-bottom: 4rem;
    }

    .game-categories-container {
        width: 60%;
    }

    .landing-section1 .more a {
        font-size: 1.25rem;
    }
}

@media (max-width: 1400px) {
    .landing-section1 header {
        margin-bottom: 4rem;
    }

    .game-categories-container {
        width: 70%;
    }

    .landing-section1 .more a {
        font-size: 1rem;
    }
}

@media (max-width: 1200px) {
    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: 1rem;
    }

    #game-categories-filters {
        margin: 0 auto 15px auto;
    }

    .landing-section1 .more a {
        font-size: 1rem;
    }
}

@media (max-width: 901px) {
    .landing-section1 header {
        margin-bottom: 3rem;
    }

    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: .8rem;
    }

    #game-categories-filters {
        margin: 0 auto;
    }

    .game-categories-container {
        width: 75%;
    }

    .landing-section1 .more a {
        font-size: .8rem;
    }
}

@media (max-width: 780px) {
    br.mobile-break {
        display: block;
        content: "";
    }

    .landing-section1 header {
        line-height: 1.1;
        font-size: 2rem;
    }

    .landing-section1 .more a,
    #game-categories-filters li {
        width: calc(calc(100vw / 768) * 150);
        height: calc(calc(100vw / 768) * 40);
    }
    .landing-section1 .more a{
        width: calc(calc(100vw / 768) * 180);
    }
    
    #game-categories-filters li {
        margin: 0 0 15px;
    }

    .game-categories-item.col {
        width: fit-content;
    }

    .game-categories-item.col .game-categories-wrap a {
        height: fit-content;
        display: block;
    }

    .game-categories-container-mobile {
        height: 350px;
        overflow-x: auto;
        margin-top: 2rem;
        scrollbar-color: transparent;
    }

    #games-mobil {
        width: 100%;
        overflow: auto;
    }

    .game-categories-wrap a:hover > img {
        transform: scale(1);
    }

    .landing-section1 {
        background: ,
        url(../img/main_section1/Glow.png) bottom center no-repeat;
        background-size: initial;
    }

    .landing-section1 .more {
        margin: 3em 0;
    }
}

@media (max-width: 650px) {
    .game-categories-container-mobile {
        height: 250px;
        margin-top: .5rem;
    }

    .game-categories-item.col .game-categories-wrap a {
        width: 200px;
    }

    .landing-section1 .more {
        margin: 1.25em 0;
    }

    .landing-section1 .more a,
    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: 12px;
    }

    .landing-section1 .more a,
    #game-categories-filters li {
        width: calc(calc(100vw / 768) * 120);
        height: calc(calc(100vw / 768) * 40);
    }

    .landing-section1 header {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 550px) {
    .game-categories-container-mobile {
        height: 190px;
    }

    .game-categories-item.col .game-categories-wrap a {
        width: 150px;
    }

    .landing-section1 .more a,
    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: 12px;
    }

    .landing-section1 .more a,
    #game-categories-filters li {
        width: calc(calc(100vw / 768) * 150);
        height: calc(calc(100vw / 768) * 40);
    }
    
    .landing-section1 .more a{
        width: calc(calc(100vw / 768) * 180);
    }
    
    .landing-section1 header {
        font-size: 1.6rem;
    }
}

@media (max-width: 450px) {
    .game-categories-container-mobile {
        height: 160px;
    }

    .game-categories-item.col .game-categories-wrap a {
        width: 120px;
    }

    .landing-section1 .more a,
    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: 12px;
    }

    .landing-section1 header {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 350px) {
    .game-categories-container-mobile {
        height: 140px;
    }

    .game-categories-item.col .game-categories-wrap a {
        width: 100px;
    }

    .landing-section1 .more a,
    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: 12px;
    }

    .landing-section1 .more a,
    #game-categories-filters li {
        width: calc(calc(100vw / 768) * 170);
        height: calc(calc(100vw / 768) * 45);
    }

    #game-categories-filters li {
        margin: 0 0 10px;
    }

    .landing-section1 header {
        font-size: 1.1rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 300px) {
    .game-categories-container-mobile {
        height: 120px;
    }

    .game-categories-item.col .game-categories-wrap a {
        width: 80px;
    }

    .landing-section1 .more a,
    #game-categories-filters li a,
    #game-categories-filters li p {
        font-size: 12px;
    }

    .landing-section1 .more a,
    #game-categories-filters li {
        width: calc(calc(100vw / 768) * 170);
        height: calc(calc(100vw / 768) * 45);
    }

    #game-categories-filters li {
        margin: 0 0 10px;
    }

    .game-categories-wrap a > img {
        border-radius: 10px;
        transition: 0.25s all ease-in-out;
    }

    .landing-section1 header {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

/*--------------------------------------------------------------
# Social Section
--------------------------------------------------------------*/
.social {
    background: url(../img/main_section2/Background_Room_2.webp) top left no-repeat,
    url(../img/main_section2/Background_Room_1.webp) top right no-repeat,
    url(../img/main_section1/Glow.png) bottom center no-repeat;
    background-size: initial;
    overflow: hidden;
    height: fit-content;
    margin: auto;
    
    position: relative;
}

.social .container {
    max-width: calc(calc(100vw / 1920) * 1800);
}

.social header {
    /*font-family: 'Puritan', sans-serif;*/
    text-align: center;
    text-transform: uppercase;
    font-size: var(--headers-size);
    margin-top: 35px;
    margin-bottom: 60px;
}

.social header span {
    color: var(--orange-color);
}

.social .cards-container {
    max-width: calc(calc(100vw / 1920) * 1200);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-bottom: 5rem;
}

.social .card-element {
    background: var(--purple-color2);
    border-radius: 30px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.social .card-element .text-header {
    /*font-family: 'Puritan', sans-serif;*/
    text-transform: uppercase;
    width: 80%;
    font-size: 1.5rem;
    line-height: 1;
    margin: 2rem auto 1rem auto;
    flex: 1;
}

.social .card-element .text-content {
    flex: 1;
    line-height: 1;
    font-weight: bold;
    width: 80%;
    margin: auto;
}

.social .card-element .sign-up-content {
    text-transform: uppercase;
    font-weight: bold;
    padding: 1rem;
    border-top: 1px solid #44335d;
    margin-top: 2rem;
    height: calc(calc(100vw / 1920) * 75);
    max-height: 75px;
}

.social .card-element .texts{
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1925px) {
    .social .cards-container {
        max-width: calc(calc(100vw / 1920) * 1000);
    }
}

@media (min-width: 2200px) {
    .social .cards-container {
        max-width: calc(calc(100vw / 1920) * 900);
    }
}

@media (min-width: 2500px) {
    .social .cards-container {
        max-width: calc(calc(100vw / 1920) * 850);
    }
}


@media (max-width: 1600px) {
    .social .card-element .text-header {
        font-size: 1.25rem;
    }
}

@media (max-width: 1400px) {
    .social .card-element .text-header {
        font-size: 1.25rem;
    }

    .sign-up-content {
        margin-bottom: .5rem;
    }
}

@media (max-width: 1200px) {
    .social .card-element .text-header {
        font-size: 1rem;
    }

    .sign-up-content {
        margin-bottom: .75rem;
    }

    .social .card-element .text-content {
        font-size: .8rem;
    }

    .social .cards-container {
        max-width: calc(calc(100vw / 1920) * 1500);
    }
}

@media (max-width: 900px) {
    .social .card-element .text-header {
        font-size: 1rem;
    }

    .sign-up-content {
        margin-bottom: .75rem;
        font-size: .75rem;
    }

    .social .card-element .text-content {
        font-size: .8rem;
    }

    .social .cards-container {
        max-width: calc(calc(100vw / 1920) * 1800);
    }
}

.sign-up-content a {
    /*background: url(../img/main_section2/Button_small_gold.png) center center no-repeat;*/
    background:linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    box-shadow: -1px 1px 1px 1px #FDD416;
    border-left: 1px solid #EFA30B;
    border-right: 1px solid #EFA30B;
    border-bottom: 1px solid #EFA30B;
    border-radius:0.5rem;
    
    background-size: cover;
    width: calc(calc(100vw / 1920) * 169);
    max-width: 169px;
    height: calc(calc(100vw / 1920) * 45);
    max-height: 45px;
    color: black;
    display: flex;
    align-items: center;
    align-content: center;
    margin: auto;
    text-transform: uppercase;
    font-weight: bold;
}

.sign-up-content a span {
    margin: auto;
}

.sign-up-content a:hover {
    color: white;
    /*background: url(../img/main_section2/Button_small_blue.png) center center no-repeat;*/
    background:linear-gradient(to bottom, #15A8FC 0%, #0066E1 100%);
    box-shadow: -1px 1px 1px 1px #15A8FC;
    border-left: 1px solid #0066E1;
    border-right: 1px solid #0066E1;
    border-bottom: 1px solid #0066E1;
    
    background-size: cover;
}

.social .card-element .sign-up-content p {
    margin-bottom: 0;
    line-height: 1;
}

.social .no-purchase {
    display: flex;
    flex-direction: column;
    position: relative;
    width: fit-content;
    margin: auto;
}

.social .no-purchase img {
    width: 1200px;
    height: auto;
    margin: auto auto 3em auto;
}

.social .no-purchase-content {
    position: absolute;
    right: 0;
    text-align: center;
    padding-top: 7rem;
    margin-right: 3em;
}

.no-purchase-header {
    color: var(--orange-color2);
    font-size: 4em;
    text-transform: uppercase;
    line-height: 1;
    /*font-family: 'Puritan', sans-serif;*/
}

.no-purchase-desc {
    font-size: 1.5em;
    line-height: 1;
    /*font-family: 'Puritan', sans-serif;*/
    width: 80%;
    margin: auto;
}

.social .join-button {
    margin: 4em auto;
    width: fit-content;
    display: block;
    position: relative;
    bottom: 1.5em;

}

.social .join-button .button {
    margin: auto;
}

.social .join-button .button {
    /*background: url(../img/main_section3/Button_gold_normal.png) top left no-repeat;*/
    background:linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    box-shadow: -1px 1px 1px 1px #FDD416;
    border-left: 1px solid #EFA30B;
    border-right: 1px solid #EFA30B;
    border-bottom: 1px solid #EFA30B;
    border-radius:0.5rem;
    
    background-size: cover;
    max-width: calc(calc(100vw / 1920) * 393);;
    width: 393px;
    height: calc(calc(100vw / 1920) * 73);;
    max-height: 193px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    /*font-family: 'Puritan', sans-serif;*/
    font-size: 1.5rem;
    line-height: 1;
    color: black;
    animation: beat 1s infinite alternate;
}

@media (max-width: 1300px) {
    .social .no-purchase {
        width: 80%;
    }

    .no-purchase-header {
        font-size: 3em;
    }

    .no-purchase-desc {
        font-size: 1.25em;
    }

    .social .join-button {
        margin: 2em auto;
    }
}

@media (max-width: 1200px) {
    .social .no-purchase-content {
        padding-top: 5rem;
    }

    .no-purchase-desc {
        font-size: 1.2em;
    }

    .social .join-button .button {
        margin: 1em auto;
        font-size: 1.25rem;
    }
}

@media (max-width: 1100px) {
    .no-purchase-header {
        font-size: 2em;
    }

    .no-purchase-desc {
        font-size: 1.15em;
    }

    .social .join-button {
        margin: 2em auto;
    }
}

@media (max-width: 1001px) {
    .social .no-purchase {
        width: 95%;
    }

    .no-purchase-header {
        font-size: 2em;
    }

    .no-purchase-desc {
        font-size: 1.15em;
    }

    .social .join-button {
        margin: 2.5em auto;
    }

    .social .join-button .button {
        font-size: 1.15rem;
    }
}

@media (max-width: 850px) {
    .social .no-purchase {
        width: 100%;
    }

    .no-purchase-header {
        font-size: 1.75em;
    }

    .no-purchase-desc {
        font-size: 1.05em;
    }

    .social .join-button {
        margin: 2.5em auto;
    }

    .social .join-button .button {
        font-size: .85rem;
    }
}


@media (max-width: 780px) {
    .social header {
        line-height: 1.1;
    }
}

@media (max-width: 768px) {
    .social {
        background: url(../img/main_section2/Background_Room_2.webp) top left no-repeat,
        url(../img/main_section2/Background_Room_1.webp) top right no-repeat,
        url(../img/main_section1/Glow.png) bottom center no-repeat;
        background-size: initial;
        overflow: hidden;
        height: fit-content;
        margin: auto;
        
        position: relative;
    }

    .social .card-element {
        border-radius: 30px;
        flex-direction: row;
    }

    .social .card-element .image-header {
        text-align: left;
        width: fit-content;
    }

    .social .card-element .texts {
        width: 50%;
        display: flex;
        flex-direction: column;
        height: 80%;
    }

    .social .cards-container .col-sm-12 {
        margin-bottom: 2rem;
    }

    .social .card-element .sign-up-content {
        border: none;
    }

    .social .card-element .text-header {
        font-size: 1.25rem;
    }

    .social .card-element .text-content {
        font-size: 1rem;
        text-align: left;
    }

    .sign-up-content {
        font-size: 1rem;
    }

    .sign-up-content a {
        width: calc(calc(100vw / 768) * 169);
        max-width: 169px;
        height: calc(calc(100vw / 768) * 45);
        max-height: 45px;
    }

    .social .no-purchase-content {
        position: relative;
        margin: 0;
    }

    .no-purchase .img-fluid {
        max-width: none;
        left: -150px;
        position: relative;
    }

    .social .no-purchase img {
        margin: 0;
    }

    .no-purchase .no-purchase-content {
        width: 80%;
        padding: 0;
        margin: 0 auto;
    }

    .no-purchase-header {
        font-size: 4em;
    }

    .social .join-button {
        margin: 2.5em auto 0;
    }

    .social .join-button .button {
        margin: 0;
        max-width: calc(calc(100vw / 1200) * 393);
        width: 393px;
        height: calc(calc(100vw / 1200) * 73);
        max-height: 193px;
    }

    .social .card-element .img-fluid {
        height: 100%;
    }
}

.image-header1{
    display:block;   
}
.image-header2{
    display:none;   
}
@media (max-width: 476px) {
    .image-header1{
        display:none !important;
    }
    .image-header2{
        width:50%; background-position:top center;background-size: cover;display:block !important;
    }
    
}

@media (max-width: 676px) {
    .social .card-element .texts {
        width: 90%;
    }

    .social .card-element .text-header {
        margin: 1.5rem auto .75rem auto;
    }

    .social .card-element .sign-up-content {
        margin-top: 0;
    }

    .sign-up-content a {
        width: calc(calc(100vw / 768) * 150);
        height: calc(calc(100vw / 768) * 40);
    }

    .social .card-element .text-content {
        width: 90%;
    }

    .no-purchase-header {
        font-size: 3.5em;
    }
}

@media (max-width: 650px) {
    .social header {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .social .card-element .text-content {
        font-size: .85rem;
    }

    .sign-up-content {
        font-size: .85rem;
    }

    .sign-up-content a {
        width: calc(calc(100vw / 768) * 120);
        height: calc(calc(100vw / 768) * 32);
    }

    .social .no-purchase img {
        width: 1000px;
    }

    .no-purchase .img-fluid {
        left: -128px;
    }

    .no-purchase-header {
        font-size: 3.2em;
    }

    .no-purchase-desc {
        font-size: 1em;
    }
}

@media (max-width: 550px) {
    .social header {
        font-size: 1.4rem;
    }

    .social .card-element .text-header {
        font-size: 1rem;
    }

    .social .card-element .text-content {
        font-size: .75rem;
    }

    .sign-up-content {
        font-size: .8rem;
    }

    .social .no-purchase img {
        width: 800px;
    }

    .no-purchase .img-fluid {
        left: -105px;
    }

    .no-purchase-header {
        font-size: 2.75em;
    }

    .no-purchase-desc {
        font-size: .8em;
    }
}

@media (max-width: 490px) {
    .social header {
        font-size: 1.2rem;
    }

    .social .card-element .texts {
        width: 120%;
    }

    .no-purchase-header {
        font-size: 2.35em;
    }
}

@media (max-width: 450px) {
    .social header {
        font-size: 1.2rem;
    }

    .social .card-element .text-header {
        font-size: .8rem;
    }

    .social .card-element .text-content {
        font-size: .65rem;
    }

    .sign-up-content {
        font-size: .7rem;
    }

    .social .no-purchase img {
        width: 700px;
    }

    .no-purchase .img-fluid {
        left: -90px;
    }

    .no-purchase-header {
        font-size: 2.25em;
    }

    .no-purchase-desc {
        font-size: .7em;
    }
}

@media (max-width: 375px) {
    .social .card-element .text-header {
        font-size: 13px;
    }

    .social .card-element .text-content {
        font-size: 12px;
    }

    .sign-up-content {
        font-size: 12px;
    }

    .social .card-element {
        border-radius: 10px;
    }

    .social .no-purchase img {
        width: 600px;
    }

    .no-purchase .img-fluid {
        left: -80px;
    }

    .no-purchase-header {
        font-size: 2em;
    }

    .social .join-button .button {
        font-size: 14px;
    }
}

@media (max-width: 350px) {
    .social header {
        font-size: 1.1rem;
    }

    .social .card-element .texts {
        width: 100%;
    }

    .no-purchase-header {
        font-size: 1.8em;
    }

    .no-purchase-desc {
        font-size: 12px;
    }
}

@media (max-width: 300px) {
    .social header {
        font-size: 12px;
    }

    .social .no-purchase img {
        width: 500px;
    }

    .no-purchase .img-fluid {
        left: -70px;
    }

    .no-purchase-header {
        font-size: 1.2em;
    }
}

/*--------------------------------------------------------------
# Join Section
--------------------------------------------------------------*/
.join {
    text-align: center;
    margin: auto;
    
    overflow: hidden;
}

.join .container {
    padding-top: calc(calc(100vw / 1920) * 65);;
    max-width: calc(calc(100vw / 1920) * 1700);
}

.join .join-card-element {
    width: 80%;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.join .join-card-header {
    text-transform: uppercase;
    /*font-family: 'Puritan', sans-serif;*/
    font-size: 1.5rem;
    line-height: 1;
    flex: 1;
    padding: 2rem 0 1.5rem 0;
    text-align: left;
}

.join .join-card-body {
    flex: 1;
    line-height: 1;
    font-weight: bold;
    margin: auto;
    text-align: left;
}

.join .join-card-element .sign-up-content-join {
    text-transform: uppercase;
    font-weight: bold;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.join .join-card-element .sign-up-content-join a {
    color: var(--orange-color);
}

.join .join-card-element .sign-up-content-join a:hover {
    color: white;
}

.join .join-banner {
    background: url(../img/main_section3/banner-section3.jpg) top center no-repeat;
    background-size: contain;
    height: calc(calc(100vw / 1920) * 680);
    max-height: 623px;
    margin-top: 80px;
    display: flex;
    align-items: center;
    align-content: center;
}

.join .join-button {
    color: black;
    text-align: center;
    display: inline-block;
    margin: auto;
}

.join .join-button .button {
    /*background: url(../img/main_section3/Button_gold_normal.png) top left no-repeat;*/
    background:linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    box-shadow: -1px 1px 1px 1px #FDD416;
    border-left: 1px solid #EFA30B;
    border-right: 1px solid #EFA30B;
    border-bottom: 1px solid #EFA30B;
    border-radius:0.5rem;
    
    background-size: cover;
    max-width: calc(calc(100vw / 1920) * 393);;
    width: 393px;
    height: calc(calc(100vw / 1920) * 73);;
    max-height: 193px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    /*font-family: 'Puritan', sans-serif;*/
    font-size: 1.5rem;
    line-height: 1;
    color: black;
    animation: beat 1s infinite alternate;
}

.social .join-button .button:hover,
.join .join-button .button:hover {
    /*background: url(../img/main_section3/Button_gold_glow.png) top left no-repeat;*/
    
    background:linear-gradient(to bottom, #FDD416 0%, #E17400 100%);
    box-shadow: -1px 1px 25px 5px #FDD416;
    border-left: 1px solid #EFA30B;
    border-right: 1px solid #EFA30B;
    border-bottom: 1px solid #EFA30B;
    border-radius:0.5rem;
    
    background-size: cover;
    /*
    max-width: calc(calc(100vw / 1920) * 393);;
    width: 393px;
    height: calc(calc(100vw / 1920) * 73);;
    max-height: 193px;*/
}

@keyframes beat {
    to {
        transform: scale(1.05);
    }
}

@media (max-width: 1701px) {
    .join-card-icon {
        width: 90%;
        margin: auto;
    }

    .join .join-card-header {
        font-size: 1.25rem;
    }

    .join .join-button .button {
        font-size: 1.35rem;
    }
}

@media (max-width: 1370px) {
    .join-card-icon {
        width: 60%;
        margin: auto;
    }

    .join .join-card-header {
        font-size: 1.15rem;
    }

    .join .join-card-body {
        font-size: .9rem;
    }

    .join .join-card-element .sign-up-content-join {
        font-size: .9rem;
    }

    .join .join-button .button {
        font-size: 1.05rem;
    }
}

@media (max-width: 1100px) {
    .join .join-banner {
        margin-top: 60px;
    }

    .join .join-button .button {
        font-size: .9rem;
    }
}

@media (max-width: 801px) {
    .join .join-banner {
        margin-top: 40px;
    }

    .join .join-button .button {
        font-size: .8rem;
    }
}

@media (max-width: 768px) {
    .join .border-right {
        border-right: none;
        border-bottom: 2px solid #453461;
    }

    .join .join-card-element {
        flex-direction: row;
        margin: initial;
        width: 100%;
    }

    .join-card-icon {
        width: 60%;
        max-width: 192px;
        margin: auto;
    }

    .join .join-card-header {
        font-size: 1.5rem;
    }

    .join .join-card-body {
        font-size: 1rem;
        margin: 1rem 0 3rem;
        width:350px;
    }

    .join .join-card-element .sign-up-content-join {
        padding: 0;
        margin: 1rem 0 3rem;
        font-size: 1rem;
    }

    .join .join-banner {
        margin-top: 0;
        height: calc(calc(100vw / 1200) * 1200);
        max-height: 634px;
        background-size: auto;
    }

    .join .join-button {
        margin: 5% auto 0;
    }

    .join .join-button .button {
        max-width: calc(calc(100vw / 1200) * 393);
        width: 393px;
        height: calc(calc(100vw / 1200) * 73);
        max-height: 193px;
        font-size: 1.2rem;
    }
}

@media (max-width: 650px) {
    .join .join-banner {
        height: calc(calc(100vw / 700) * 1200);
    }
}

@media (max-width: 550px) {
    .hide550{
        display:none;
    }
    .join-card-icon {
        width: 100%;
    }

    .join .join-card-header {
        font-size: 1.15rem;
    }

    .join .join-card-body {
        font-size: 12px;
        width:280px;
    }

    .join .join-button .button {
        max-width: calc(calc(100vw / 1000) * 393);
        height: calc(calc(100vw / 1000) * 73);
        font-size: 1rem;
    }

    .join .join-button {
        margin: 50% auto 0;
    }

    .join .join-banner {
        background-position: -100px 0;
    }
}

@media (max-width: 450px) {
    .join-card-icon {
        width: 100%;
    }

    .join .join-card-header {
        font-size: 1rem;
        padding: 1rem 0 .5rem 0;
    }

    .join .join-card-body {
        font-size: 12px;
        margin: 1rem 0 1rem;
        width:250px;
    }

    .join .join-card-element .sign-up-content-join {
        margin: 1rem 0 1rem;
        font-size: 12px;
    }

    .join .join-banner {
        background-position: -150px 0;
    }
}

@media (max-width: 370px) {
    .join .join-banner {
        height: calc(calc(100vw / 600) * 1200);
        max-height: 650px;
    }

    .join .join-button .button {
        max-width: calc(calc(100vw / 600) * 393);
        height: calc(calc(100vw / 600) * 73);
    }

    .join .join-button {
        margin: 110% auto 0;
    }
}


/*--------------------------------------------------------------
# landing-main-last-section Section
--------------------------------------------------------------*/
.landing-main-last-section {
    overflow: hidden;
    margin: auto;
    
    position: relative;
}

.landing-main-last-section .container {
    max-width: calc(calc(100vw / 1920) * 1700);

}

.landing-main-last-section header {
    /*font-family: 'Puritan', sans-serif;*/
    text-align: center;
    text-transform: uppercase;
    font-size: var(--headers-size);
    margin-top: 35px;
}

.landing-main-last-section header span {
    color: var(--orange-color);
}

.landing-main-last-section .section-body {
    font-weight: bold;
    padding-top: 2rem;
    margin-bottom: 4em;
}

.section-body .small-container {
    width: 50%;
    line-height: 1.25;
    font-size: 1.5rem;
    margin: 2rem auto 4rem;
}

.section-body .text-orange {
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    width: 90%;
    /*font-family: 'Puritan', sans-serif;*/
    font-weight: initial;
    text-align: initial;
}

.section-body .big-container {
    width: 90%;
}

.section-body .big-container p {
    margin-bottom: 2rem;
    line-height: 1.25;
    font-size: 1.15rem;
}

.section-body .big-container {
    font-size: 3rem;
}

.section-body .row {
    position: relative;
}

.section-body .col-6 {
    text-align: justify;
}

.section-body .divider {
    height: 95%;
    margin: auto;
    position: absolute;
    width: 1px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
}

.move-r {
    margin-left: auto;
}


@media (max-width: 1500px) {
    .section-body .small-container {
        font-size: 1.15rem;
        margin: 0 auto 4rem;
    }

    .section-body .text-orange {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 1200px) {
    .landing-main-last-section .section-body {
        padding-top: 1rem;
    }

    .section-body .small-container {
        font-size: 1rem;
        margin: 0 auto 4rem;
        width: 60%;
    }

    .section-body .text-orange {
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
    }

    .section-body .big-container p {
        font-size: 1rem;
    }
}

@media (max-width: 1000px) {
    .section-body .small-container {
        width: 70%;
        margin: 0 auto 3rem;
    }

    .section-body .text-orange {
        font-size: 1.15rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 800px) {
    .section-body .text-orange {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .landing-main-last-section .divider {
        display: none;
    }

    .section-body .text-orange {
        font-size: 1.25rem;
    }

    .landing-main-last-section .section-body br {
        display: none;
    }

    .move-r {
        margin-left: initial;
    }

    .landing-main-last-section header {
        font-size: 1.8rem;
    }
}

@media (max-width: 650px) {
    .landing-main-last-section header {
        font-size: 1.7rem;
    }

    .section-body .text-orange {
        font-size: 12px;
    }

    .section-body .small-container,
    .section-body .big-container p {
        font-size: 12px;
    }
}

@media (max-width: 550px) {
    .landing-main-last-section header {
        font-size: 14px;
    }

    .section-body .text-orange {
        font-size: 12px;
    }

    .section-body .small-container,
    .section-body .big-container p {
        font-size: 12px;
    }
}

@media (max-width: 450px) {
    .landing-main-last-section header {
        font-size: 12px;
    }

    .section-body .text-orange {
        font-size: 12px;
    }

    .section-body .small-container,
    .section-body .big-container p {
        font-size: 12px;
    }

    .section-body .small-container {
        margin: 0 auto 2rem;
    }
}

@media (max-width: 350px) {
    .landing-main-last-section header {
        font-size: 12px;
    }

    .section-body .text-orange {
        font-size: 12px;
    }

    .section-body .small-container,
    .section-body .big-container p {
        font-size: 12px;
    }

    .section-body .small-container {
        margin: 0 auto 2rem;
    }
}

#modalOffer {
    background: #000d;
}

#modalOffer .modal-dialog {
    width: 392px;
}

#modalOffer .modal-content {
    background: url("../img/user/Banner-gradient.png") top center no-repeat #291943;
    background-size: contain;
    border-radius: 25px;
}

#modalOffer img.elf,
#modalOffer img.shine {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
}

#modalOffer img.shine {
    transform: translateY(-100%);
    width:90%;
}

#modalOffer img.elf {
    transform: translateY(-25%);
}

#modalOffer .modal-body .texts {
    text-align: center;
    margin-top: 16rem;
}

#modalOffer .modal-body .text-med,
#modalOffer .modal-body .text-big {
    text-transform: uppercase;
    /*font-family: 'Puritan', sans-serif;*/
    line-height: 1;
}

#modalOffer .modal-body .text-med {
    font-size: 2rem;

}

#modalOffer .modal-body .text-big {
    font-size: 3rem;
}

#modalOffer .modal-body .text-sml {
    /*font-family: 'Puritan', sans-serif;*/
    font-weight: bold;
}

#modalOffer .modal-body .sign-up {
    text-align: center;
    width: 90%;
    margin: 3rem auto auto;
    border: none;
    text-transform: uppercase;
}

#modalOffer .modal-body .sign-up .button {
    width: 100%;
    background: url("../img/user/Button-gold-01.png") center center no-repeat;
    background-size: contain;
    color: black;
    height: calc(calc(100vw / 1920) * 86);
    max-height: 86px;
    border: none;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment */
    text-align: center;
}

#modalOffer .modal-body .sign-up .button:hover {
    background: url("../img/user/Button-gold-02.png") center center no-repeat;
    background-size: contain;
    color: white;
}

@media (max-width: 1600px) {
    #modalOffer .modal-body .sign-up .button {
        height: calc(calc(100vw / 1600) * 86);
        max-height: 86px;
    }
}

@media (max-width: 1400px) {
    #modalOffer .modal-body .sign-up .button {
        height: calc(calc(100vw / 1400) * 86);
        max-height: 86px;
    }

    #modalOffer .modal-dialog {
        width: calc(calc(100vw / 1400) * 592);
    }

    #modalOffer .modal-body .text-med {
        font-size: 1.5rem;
    }

    #modalOffer .modal-body .text-big {
        font-size: 2.5rem;
    }
}

@media (max-width: 1000px) {
    #modalOffer .modal-body .text-med {
        font-size: 1.25rem;
    }

    #modalOffer .modal-body .text-big {
        font-size: 2rem;
    }

    #modalOffer .modal-body .text-sml {
        font-size: .9rem;
    }

    #modalOffer .modal-dialog {
        width: calc(calc(100vw / 1000) * 592);
    }

    #modalOffer .modal-body .sign-up .button {
        height: calc(calc(100vw / 1000) * 86);
    }

    #modalOffer .modal-body .sign-up {
        width: 100%;
        margin: 1rem auto auto;
    }
}

@media (max-width: 768px) {
    #modalOffer .modal-body .sign-up .button {
        height: calc(calc(100vw / 768) * 86);
    }
}

@media (max-width: 600px) {
    #modalOffer .modal-body .sign-up .button {
        height: calc(calc(100vw / 768) * 86);
    }

    #modalOffer .modal-body .texts {
        margin-top: 12rem;
    }

    #modalOffer .modal-body .text-med {
        font-size: 1rem;
    }

    #modalOffer .modal-body .text-big {
        font-size: 1.75rem;
    }

    #modalOffer .modal-body .text-sml {
        font-size: 12px;
    }
}

@media (max-width: 577px) {
    #modalOffer .modal-dialog {
        margin: auto;
    }
}





.modal-dialog {
    width: calc(calc(100vw / 1920) * 592);
    max-width: 592px;
    margin: 2em auto;
}

.modal-content {
    background: content-box;
    border: 0;
    width: fit-content;
}

.modal-header {
    border: none;
}

.modal-body:not(#modalOffer .modal-body) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(41, 25, 67, 1) 12%, rgba(41, 25, 67, 1) 60%, rgba(65, 24, 114, 1) 100%);
    width: fit-content;
    padding: 0;
    border-radius: 30px;
}

.btn-close {
    --bs-btn-close-opacity: 1;
    --bs-btn-close-bg: none;
    position: absolute;
    right: 2em;
    z-index: 1;
    top: 2em;
}

.btn-close:hover {
    opacity: 1;
}

.modal-body .carousel-slide img {
    width: 100%;
}

/* Carousel Container */
.carousel-container {
    display: flex;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 592px;
}

/* Carousel Slides */
.carousel-slide {
    flex: 0 0 100%;
    transition: transform 0.3s ease-in-out;
    width: fit-content;
}

/* Dots Indicator */
.dots {
    text-align: center;
    position: relative;
    top: -15px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #140827;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.dot.active {
    background-color: #751fc9;
}

.slider-arrow {
    position: absolute;
    top: 5.5rem;
    background-color: #291943;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 25px;
}

.slider-arrow:hover {
    transition: all .2s ease;
    transform: scale(1.1);
}

.slider-arrow.prev {
    left: -4rem;
}

.slider-arrow.next {
    right: -4rem;
}

.slider-arrow.prev img {
    transform: rotateY(180deg);
}

.form-holder {
    width: 70%;
    margin: 30px auto auto;
}

.form-holder.in {
    margin: 0 auto auto;
}

.form-holder .social-login {
    align-items: center;
    align-content: center;
    display: flex;
    position: relative;
    height: calc(calc(100vw / 1920) * 48);
    max-height: 48px;
    margin: 2em auto;
}

.form-holder .social-login2 {
    align-items: center;
    align-content: center;
    display: flex;
    position: relative;
    margin: 1em auto 0;
}

.social-login2 .social-login {
    margin: 1em auto 0;
    padding: 0;
}

.form-holder .btn-social-large,
.form-holder .btn-social {
    margin: auto;
    border: 0;
    background: url("../img/user/Boton_01.png");
    background-size: cover;
    width: 189px;
    height: 48px;
    position: absolute;
}

.form-holder .btn-social:hover {
    background: url("../img/user/Boton_02.png");
    background-size: cover;
}

.form-holder .btn-social-large {
    background: url("../img/user/Button_Large_01.png") center center no-repeat;
    width: 100%;
    background-size: contain;
}

.form-holder .btn-social-large:hover {
    background: url("../img/user/Button_Large_02.png") center center no-repeat;
    background-size: contain;
}

.form-holder .place-l {
    left: 15px;
}

.form-holder .place-r {
    right: 15px;
}

.form-holder .divider-login,
.form-holder .divider {
    text-align: center;
    width: 100%;
    border-bottom: 2px solid #412573;
    align-items: center;
    align-content: center;
    display: flex;
}

.form-holder .divider-login {
    margin-top: 2em;
}

.form-holder .divider-login p,
.form-holder .divider p {
    width: fit-content;
    background-color: #291943;
    margin: 0;
    transform: translateY(50%);
    margin-left: auto;
    margin-right: auto;
}

.form-holder .divider-login p {
    background-color: #341959;
}

.form-holder .sign-up-form {
    margin-top: 25px;
}

.form-holder .form-control {
    background-color: #140827;
    border: 2px solid #412573;
    border-radius: 7px;
}

.form-holder .form-control,
.form-holder .form-control::placeholder {
    color: white;
}

.form-holder .form-control:focus {
    box-shadow: 0 0 0 .2rem rgb(65, 37, 115);
}

.form-holder form .pass-clarification {
    color: #9cb1ff;
    margin: 0;
    position: absolute;
    font-size: .9rem;
}

.form-holder form .pass-forgot {
    color: #9cb1ff;
    margin: 0;
    font-size: .9rem;
    text-decoration: underline;
}

.form-holder form .pass-forgot:hover {
    color: #f4d404;
    text-decoration: none;
    margin: 0;
    font-size: .9rem;
}

#stateSelect {
    appearance: listbox;
}

.form-holder form button {
    width: 100%;
    height: 66px;
    color: black;
    background: url("../img/user/Button-gold-01.png") center center no-repeat;
    background-size: contain;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
}

.form-holder form button:hover {
    background: url("../img/user/Button-gold-02.png") center center no-repeat;
    background-size: contain;
}

.form-holder form .legal {
    color: #9cb1ff;
    margin: 0;
    font-size: .9rem;
    line-height: 1.1;
}

.form-holder form p a {
    color: #f4d404;
    text-decoration: underline;
}

.form-holder form p a:hover {
    color: #e0e0e0;
}

.col-12.no-top-margin {
    margin-top: calc(calc(100vw / 1920) * 12);
}

/* Hide the default checkbox input */
.custom-checkbox input {
    display: none;
}

/* Style the custom checkbox container */
.custom-checkbox .checkmark {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 2px solid #412573;
    background-color: #140827; /* Background color for unchecked state */
    border-radius: 3px;
    margin-right: 10px;
}

/* Style the image inside the checked checkbox */
.custom-checkbox input:checked + .checkmark img {
    display: block;
}

/* Hide the image by default */
.custom-checkbox .checkmark img {
    display: none;
}

/* Style the label text */
.custom-checkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.center-vertically {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    background-color: black; /* Change this to your desired background color */
    opacity: .9 !important; /* Change this to your desired opacity level */
}

@media (max-width: 1400px) {
    .modal-dialog {
        width: calc(calc(100vw / 1920) * 792);
        margin: 4rem auto 2em;
    }
}


@media (max-width: 1000px) {
    .modal-dialog {
        width: calc(calc(100vw / 1920) * 1200);
        margin: 6rem auto 2em;
    }

    .social-login2 .social-login {
        margin: 2.5rem auto 0;
    }

    .social-login2 {
        padding-bottom: 1.5rem;
    }
}


@media (max-width: 768px) {
    .btn-close {
        display: none;
    }

    .modal-dialog {
        width: calc(calc(100vw / 768) * 768);
    }

    .slider-arrow.next {
        right: -3em;
    }

    .slider-arrow.prev {
        left: -3em;
    }
}

@media (max-width: 700px) {
    .slider-arrow.next {
        right: -1.5em;
    }

    .slider-arrow.prev {
        left: -1.5em;
    }
}

@media (max-width: 650px) {
    .slider-arrow {
        display: none;
    }
}

@media (max-width: 650px) {
    .form-holder form .legal,
    .form-holder form .pass-clarification {
        font-size: 12px;
    }
}

@media (max-width: 450px) {
    .col-6{
        width: 100%;
    }

    .form-holder .place-r{
        right: inherit;
    }

    .form-holder .social-login{
        margin: 1.5rem 0;
        left: 15%;
    }

    .form-holder {
        margin: 0 auto auto;
    }
}

@media (max-width: 400px) {
    .modal-body {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 6%, rgba(41, 25, 67, 1) 6%, rgba(41, 25, 67, 1) 60%, rgba(65, 24, 114, 1) 100%);
    }
}

@media (max-width: 350px) {

    .form-holder .social-login{
        left: 7%;
    }
}
@media (max-width: 784px) {
    #landing-bigbanner .content {
        padding: 1rem;
        margin-top: 3rem;
    }
}

@media (max-width: 650px) {
    .join-banner{
        height:400px !important;
    }
    .join .join-button{
        margin-top:0% !important;
    }
}

@media (max-width: 440px) {
    .join-banner{
        height:300px !important;
    }
}

@media (max-width: 340px) {
    .join-banner{
        height:200px !important;
    }
}
.btn-close{position: absolute;right: 1.1rem;top: 1rem;background: url(../../../theme/templates/template10/img/popup-close-icon.svg) no-repeat center center / contain;width: 1.1rem;height: 1.2rem;opacity: 1;padding: 4px;}

.loginIconMobile{
    width: 1.4rem;
    height: 1.4rem;
}