@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap');

/*--  defaults  --*/
:root {
    --font-family-body: 'Inter', sans-serif;
    --font-family-heading: 'Sora', sans-serif;
    --font-family-lottery: 'Roboto Condensed', sans-serif;

    --primary-color: #09233D;

    --button-cta-color: #278AC2;
    --button-cta-color--hover: #64b4e2;

    --button-submit-color: #4DD6AE;
    --button-submit-color--hover: #63E6BE;

    --secondary-color: #1C7ED6;

    --high-contrast-color: #131416;
    --md-contrast-color: #5F636E;
    --md-contrast-color--2: #869DB2;
    --low-contrast-color: #BABDC6;

    --border-color: #EBECEF;
    --border-color--light: rgba(255, 255, 255, 0.25);

    --background-color: #FFF;

    --neutral-color: #FFF;
    --neutral-color--1: #EFF0F2;
    --neutral-color--2: rgba(235, 236, 239, 0.8);
    --neutral-color--3: #DCDEE3;
    --neutral-color--4: #F4F5F7;
    --neutral-color--5: #F8F8FC;

    --neutral-dark-color: #232429;
}



/*--  reset css  --*/
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 150%;
    color: var(--md-contrast-color);
    background-color: var(--background-color);
    overflow-x: hidden;
    position: relative;
    counter-reset: x;
    scroll-behavior: smooth;
}

body.pop-up {
    overflow: hidden;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: .3s;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
    position: relative;
}

ul,
ol {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

ol[type="A"] {
    list-style: upper-alpha;
}

p:not(:last-child) {
    margin: 0 0 16px 0;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--high-contrast-color);
    margin-bottom: 12px;
}

h1 {
    font-size: 2em;
    line-height: 130%;
}

h2 {
    font-size: 1.25em;
    line-height: 125%;
}

h3 {
    font-size: 1.125em;
}


@media screen and (max-width:991px) {
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.125em;
    }

    h3 {
        font-size: 1em;
    }
}


/*  */
.area-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}



/*--  Header  --*/
/*  */
header .top {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

header .responsible-gaming {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 12px;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    color: var(--md-contrast-color);
}

header .responsible-gaming img {
    height: 20px;
    width: 20px;
}

header .logo img {
    height: 24px;
    width: auto;
}


/*  */
header .bottom .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}


header ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header ul a {
    font-family: var(--font-family-heading);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0 8px;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--high-contrast-color);
}

header ul a:hover {
    color: var(--secondary-color);
}

header ul a img {
    height: 16px;
}


@media screen and (max-width:767px) {
    header .top {
        padding: 8px 0;
    }

    header .bottom .wrapper {
        padding: 12px 0;
    }
}



/*--  Footer  --*/
footer {
    background: #000000;
    color: var(--neutral-color--2);
    font-size: 14px;
}

footer>div>div {
    padding: 32px 0;
}


/*  */
footer>div>.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--border-color--light);
}

footer .logo img {
    height: 28px;
    width: auto;
}


/*  */
footer .menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}

footer .menu ul a {
    font-family: var(--font-family-heading);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-color);
}

footer .menu ul a:hover {
    text-decoration: underline;
}

footer .menu ul a img {
    height: 16px;
}


/*  */
footer>div>.middle {
    border-bottom: 2px solid var(--border-color--light);
}

footer .disclaimer {
    margin-bottom: 40px;
}

footer .icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

footer .icons img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

footer .icons>div:nth-child(3) img {
    height: 16px;
}


/*  */
footer>div>.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer>div>.bottom ul a img {
    height: 24px;
    width: 24px;
}


@media screen and (max-width:991px) {
    footer>div>.top {
        flex-direction: column;
        gap: 12px 0;

    }

    footer .bottom {
        flex-direction: column;
        align-items: center;
        gap: 16px 0;
    }

    footer .copyright {
        text-align: center;
    }
}



/*--  Hero  --*/
section.hero {
    background: center/cover;
    padding: 56px 0;
    color: var(--neutral-color--2);
}

section.hero .introduction .title h1 {
    color: var(--neutral-color);
    margin-bottom: 4px;
}

section.hero .introduction .content p:not(:last-child) {
    margin-bottom: 4px;
}

@media screen and (max-width: 991px) {
    section.hero {
        padding: 48px 0;
    }
}

@media screen and (max-width: 767px) {
    section.hero {
        padding: 40px 0;
    }
}



/*--  Advertisers  --*/
section.advertisers {
    margin: 40px 0 56px 0;
}


/*  */
section.advertisers .introduction {
    margin-bottom: 24px;
}

section.advertisers .introduction .title {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0 12px;
}

section.advertisers .introduction .title>* {
    margin-bottom: 0;
}


/*  */
section.advertisers .cards>div:nth-child(n+2) {
    margin-top: 24px;
}


@media screen and (max-width: 1199px) {
    section.advertisers .introduction {
        margin-bottom: 12px;
    }

    section.advertisers .introduction .title img {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    section.advertisers {
        margin: 32px 0 48px 0;
    }
}

@media screen and (max-width: 767px) {
    section.advertisers {
        margin: 24px 0 40px 0;
    }
}



/*--  Responsible Gaming  --*/
section.responsible-gaming {
    margin: 56px 0;
}

section.responsible-gaming .introduction {
    margin-bottom: 24px;
}


@media screen and (max-width: 1199px) {
    section.responsible-gaming .introduction {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 991px) {
    section.responsible-gaming {
        margin: 48px 0;
    }
}

@media screen and (max-width: 767px) {
    section.responsible-gaming {
        margin: 40px 0;
    }
}



/*--  Payment Methods  --*/
section.payment-methods {
    margin: 56px 0;
}


@media screen and (max-width: 991px) {
    section.payment-methods {
        margin: 48px 0;
    }
}

@media screen and (max-width: 767px) {
    section.payment-methods {
        margin: 40px 0;
    }
}



/*--  Content Block  --*/
section.block-content .sidebar {
    height: 100%;
    padding: 40px 0;
}

section.block-content .sidebar .cards {
    position: sticky;
    top: 32px;
}

section.block-content .sidebar .cards>div:nth-child(n+2) {
    margin-top: 24px;
}


/*  */
section.block-content .content-block {
    margin: 40px 0;
}

section.block-content .content-block:first-child {
    margin-top: 0 !important;
}

section.block-content .content-block ul li {
    position: relative;
    padding-left: 15px;
}

section.block-content ul li~li {
    margin-top: 10px;
}

section.block-content ul li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background: var(--primary-color);
}

section.block-content .content-block ol {
    padding-left: 15px;
}

section.block-content .content-block ol li {
    padding-left: 5px;
}


@media screen and (max-width: 1199px) {
    section.block-content .sidebar {
        padding: 0 0 40px 0;
    }
}

@media screen and (max-width: 767px) {
    section.block-content .sidebar {
        padding: 0 0 32px 0;
    }

    /*  */
    section.block-content .content-block {
        margin: 32px 0;
    }
}



/*--  Index Template  --*/
body.index-template section.hero {
    text-align: center;
}

body.index-template section.content {
    margin: 40px 0;
}


@media screen and (max-width: 767px) {
    body.index-template section.content {
        margin: 32px 0;
    }
}



/*--  404 Template  --*/
body.template-404 section.hero .introduction .title h1 {
    margin-bottom: 12px;
    text-align: center !important;
}

body.template-404 section.hero .introduction p {
    text-align: center !important;
}

body.template-404 section.hero .introduction p a:hover {
    text-decoration: underline;
}


@media screen and (max-width: 991px) {
    body.template-404 section.hero .introduction p {
        text-align: justify !important;
    }
}


/*--  Lotetries  --*/
section.lotteries {
    margin: 40px 0 56px 0;
}

section.lotteries .cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

@media screen and (max-width: 991px) {
    section.lotteries {
        margin: 32px 0 48px 0;
    }

    section.lotteries .cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    section.lotteries {
        margin: 24px 0 40px 0;
    }

    section.lotteries .cards {
        grid-template-columns: 1fr;
    }
}



/*--  Lottery Card  --*/
.lottery {
    position: relative;
    background: var(--neutral-color);
    border-radius: 8px;
}

.lottery .logo>div {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
}

.lottery .logo img {
    height: 20px;
    aspect-ratio: 1;
}

.lottery .logo span {
    display: block;
    font-family: var(--font-family-lottery);
    font-size: 1.25em;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}



/*--  Lottery - vertical  medium card  --*/
.lottery.vertical.medium.card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}

.lottery.vertical.medium.card .information,
.lottery.vertical.medium.card .prefix {
    font-size: 0.875em;
    font-weight: 500;
}

/* logo */
.lottery.vertical.medium.card .logo>div {
    justify-content: flex-end;
}

.lottery.vertical.medium.card .logo img {
    height: 28px;
}

.lottery.vertical.medium.card .logo span {
    font-size: 1.5em;
}

/* prize */
.lottery.vertical.medium.card .prize {
    margin: 24px 0;
}

.lottery.vertical.medium.card .prize .prefix {
    margin-bottom: 4px;
}

.lottery.vertical.medium.card .prize .value {
    font-size: 1.5em;
    font-weight: 700;
}

/* information */
.lottery.vertical.medium.card .information {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lottery.vertical.medium.card .information .identifier .value,
.lottery.vertical.medium.card .information .date {
    color: var(--high-contrast-color);
    font-weight: 600;
}

/* results */
.lottery.vertical.medium.card .results {
    flex: 1;
    margin: 24px 0;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.lottery.vertical.medium.card .results .prefix {
    margin-bottom: 8px;
}

.lottery.vertical.medium.card .result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.lottery.vertical.medium.card .result .number {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    height: 40px;
    aspect-ratio: 1;
    background: var(--neutral-color--1);
    font-size: 0.875em;
    font-weight: 800;
    color: var(--high-contrast-color);
}

/* button */
.lottery.vertical.medium.card .button>a {
    font-family: var(--font-family-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    gap: 0 8px;
    border-radius: 4px;
    font-size: 0.875em;
    font-weight: 500;
    line-height: 150%;
    color: var(--neutral-color);
    background: var(--button-cta-color);
    z-index: 2;
}

.lottery.vertical.medium.card .button>a:hover {
    box-shadow: 0 0 12px var(--button-cta-color--hover);
}



/*--  About  --*/
section.about {
    margin: 56px 0;
}

section.about .lottery-games {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    gap: 12px 24px;
    margin: 32px 0;
}

section.about .features {
    margin: 32px 0 40px 0;
}

section.about .features>div {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0 24px;
    margin: 32px 0;
}

section.about .features>div img {
    height: 40px;
    width: 40px;
}

section.about .features>div span {
    display: block;
    color: var(--high-contrast-color);
    font-size: 0.875em;
    font-weight: 700;
    text-transform: uppercase;
}

@media screen and (max-width: 991px) {
    section.about {
        margin: 48px 0;
    }

    section.about .lottery-games {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    section.about {
        margin: 40px 0;
    }

    section.about .lottery-games {
        grid-template-columns: 1fr;
    }
}


/*--  Lottery - horizontal  small card  --*/
.lottery.horizontal.small.card .logo {
    border-radius: 8px;
    padding: 18px 0;
    color: var(--neutral-color);
}



/*--  advertiser-geographical-aera  --*/
.advertiser-geographical-area {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--neutral-color);
}


/* rank */
.advertiser-geographical-area .rank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #AAA9B0;
    color: #FFF;
}

.advertiser-geographical-area .rank span {
    display: block;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}


/* tag */
.advertiser-geographical-area .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: fit-content;
    padding: 0 8px;
    border-radius: 2px;
    color: var(--neutral-color);
    background: var(--secondary-color);
}

.advertiser-geographical-area .tag span {
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 120%;
}


/* logo */
.advertiser-geographical-area .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    height: 64px;
    aspect-ratio: 1;
    border-radius: 8px;
}

.advertiser-geographical-area .logo img {
    height: 100%;
    width: 100%;
}


/* name */
.advertiser-geographical-area .name {
    font-weight: 600;
    line-height: 130%;
    color: var(--high-contrast-color);
}


/* rating */
.advertiser-geographical-area .rating {
    display: flex;
    align-items: center;
    gap: 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.advertiser-geographical-area .rating img {
    height: 20px;
    aspect-ratio: 1;
}


/* bonus */
.advertiser-geographical-area .bonus .string {
    font-weight: 700;
    line-height: 135%;
    color: var(--high-contrast-color);
}


/* code */
.advertiser-geographical-area .code {
    position: relative;
    z-index: 2;
}

.advertiser-geographical-area .code img {
    height: 12px;
    width: 12px;
}

.advertiser-geographical-area .code>div.title div,
.advertiser-geographical-area .code>div.success div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0 8px;
    height: 32px;
    padding: 0 8px;

    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 120%;
    color: var(--button-cta-color);

    border-radius: 4px;
    border: 1px dashed var(--button-cta-color);
    background: var(--neutral-color);
}

.advertiser-geographical-area .code .title div {
    transition: .3s ease;
    cursor: pointer;
}

.advertiser-geographical-area .code .title div:hover {
    color: var(--button-cta-color--hover);
    border-color: var(--button-cta-color--hover);
}

.advertiser-geographical-area .code .success {
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s ease;
    width: 100%;
}

.advertiser-geographical-area .code .success:not(.active) {
    opacity: 0;
    visibility: hidden;
}


/* donation */
.advertiser-geographical-area .donation>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    height: 40px;
    padding: 0 24px;
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 100%;
    color: var(--neutral-color);
    border-radius: 4px;
    background: var(--button-cta-color);
    z-index: 2;
}

.advertiser-geographical-area .donation>a:hover {
    background: var(--button-cta-color--hover);
}


/* payment methods */
.advertiser-geographical-area .payment-methods {
    gap: 0 8px;
}

.advertiser-geographical-area .payment-methods .icons>div,
.advertiser-geographical-area .payment-methods .icons,
.advertiser-geographical-area .payment-methods {
    display: flex;
    align-items: center;
}

.advertiser-geographical-area .payment-methods .prefix {
    font-size: 0.75em;
    font-weight: 500;
    line-height: 120%;
}

.advertiser-geographical-area .payment-methods .icons {
    z-index: 1;
}

.advertiser-geographical-area .payment-methods .icons>div {
    justify-content: center;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    padding: 3.75px;
}

.advertiser-geographical-area .payment-methods .icons>div:nth-child(n+2) {
    margin-left: -3.75px;
}

.advertiser-geographical-area .payment-methods .icons>div.extra {
    font-size: 0.625em;
    color: var(--neutral-color);
    background: var(--secondary-color);
    margin-left: -2.75px;
}

.advertiser-geographical-area .payment-methods .icons>div img {
    height: 100%;
    aspect-ratio: 1;
}


/* t&c */
.advertiser-geographical-area .tc-excerpt {
    padding: 12px 1rem;
    font-size: 0.75rem;
    line-height: 125%;
    color: var(--high-contrast-color);
    background: var(--neutral-color--3);
}


@media screen and (max-width: 1199px) {
    .advertiser-geographical-area .rank {
        height: 24px;
    }

    .advertiser-geographical-area .tc-excerpt {
        font-size: 0.625rem;
    }
}


/*--  horizontal  card  --*/
.advertiser-geographical-area.horizontal.card {
    background: var(--neutral-color);
}

.advertiser-geographical-area.horizontal.card>.top {
    display: grid;
    grid-template-columns: 350px 1fr 240px;
    padding: 0 24px 0 16px;
    align-items: center;
}

.advertiser-geographical-area.horizontal.card>.top .left {
    display: grid;
    align-items: center;
    grid-template-columns: 32px 64px 1fr;
    gap: 0 1rem;
}

.advertiser-geographical-area.horizontal.card>.top .middle {
    padding-left: 3rem;
    position: relative;
    border-left: 1px solid var(--border-color);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.advertiser-geographical-area.horizontal.card>.top .middle .icon {
    position: absolute;
    top: calc(50% - 24px);
    left: -24px;
}


/* code */
.advertiser-geographical-area.horizontal.card .code {
    width: fit-content;
    margin-top: 4px;
}


/* payment-methods */
.advertiser-geographical-area.horizontal.card .payment-methods {
    margin-top: 16px;
}


@media screen and (min-width: 1200px) {
    .advertiser-geographical-area.horizontal.card .bonus .string {
        max-width: 320px;
    }
}

@media screen and (max-width: 1199px) {
    .advertiser-geographical-area.horizontal.card>.top {
        display: block;
        padding: 20px 1rem;
    }

    .advertiser-geographical-area.horizontal.card>.top .middle {
        padding-left: 0;
        border-left: none;
        min-height: unset;
        display: block;
    }

    .advertiser-geographical-area.horizontal.card>.top .middle .icon {
        display: none;
    }

    .advertiser-geographical-area.horizontal.card>.top .left {
        grid-template-columns: 24px 44px 1fr;
    }

    .advertiser-geographical-area.horizontal.card>.top .left .info {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto;
        gap: 0 1rem;
    }


    /* tag */
    .advertiser-geographical-area.horizontal.card .tag {
        margin-bottom: 6px;
    }


    /* bonus */
    .advertiser-geographical-area.horizontal.card .bonus {
        text-align: center;
        padding: 16px;
        margin: 16px 0;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }


    /* code */
    .advertiser-geographical-area.horizontal.card .code {
        width: 100%;
        margin-top: 8px;
    }

    /* logo */
    .advertiser-geographical-area.horizontal.card .logo {
        height: 44px;
    }


    /* rating */
    .advertiser-geographical-area.horizontal.card .rating {
        flex-direction: column;
        gap: 8px 0;
    }
}



/*--  vertical  card  --*/
.advertiser-geographical-area.vertical.card {
    background: var(--neutral-color);
}

.advertiser-geographical-area.vertical.card>.top {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    padding: 20px 24px;
    border-radius: 8px 8px 0 0;
}

.advertiser-geographical-area.vertical.card>.top .info {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
}

.advertiser-geographical-area.vertical.card>.middle {
    padding: 0 24px;
}


/* tag */
.advertiser-geographical-area.vertical.card .tag {
    height: 22px;
    padding: 0 6px;
    border-radius: 80px;
    background: var(--neutral-color);
    margin-bottom: 8px;
}


/* logo */
.advertiser-geographical-area.vertical.card .logo {
    height: 48px;
    border: 2px solid var(--neutral-color);
}


/* name */
.advertiser-geographical-area.vertical.card .name {
    line-height: 100%;
    color: var(--neutral-color);
}


/* rating */
.advertiser-geographical-area.vertical.card .rating {
    flex-direction: column;
    gap: 8px 0;
    font-weight: 500;
    color: var(--neutral-color);
}

.advertiser-geographical-area.vertical.card .rating img {
    filter: brightness(0) invert(1);
}


/* bonus */
.advertiser-geographical-area.vertical.card .bonus {
    text-align: center;
    padding: 16px;
    margin: 16px 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}


/* code */
.advertiser-geographical-area.vertical.card .code {
    margin-top: 8px;
}


/* payment-methods */
.advertiser-geographical-area.vertical.card .payment-methods {
    margin: 24px 0;
}



/*--  pop-ups  --*/
#offers-pop-up,
#push-notifications-pop-up,
#cookie-policy-pop-up {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.20);
    z-index: 10000;
    transition: .3s ease;
}

body:not(.offers-pop-up) #offers-pop-up,
body:not(.push-notifications-pop-up) #push-notifications-pop-up,
body:not(.cookie-policy-pop-up) #cookie-policy-pop-up {
    opacity: 0;
    visibility: hidden;
}



/*--  offers  --*/
#offers-pop-up {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

#offers-pop-up>div {
    width: 100%;
}

#offers-pop-up>div>div>.top {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 36px;
}


/*  */
#offers-pop-up>div>div>.top .title>* {
    color: var(--neutral-color);
}

#offers-pop-up>div>div>.top .content {
    color: var(--neutral-color);
    opacity: 0.9;
}


/*  */
#offers-pop-up>div>div>.top .close {
    cursor: pointer;
    height: 36px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}


/*  */
#offers-pop-up .cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 32px;
    margin-top: 32px;
}


@media screen and (min-width: 1200px) {
    #offers-pop-up>div>div>.top .close:hover {
        background: var(--neutral-color);
    }

    #offers-pop-up>div>div>.top .close:hover img {
        filter: brightness(0);
    }
}

@media screen and (max-width: 1199px) {
    body:not(.offers-pop-up) #offers-pop-up {
        transform: translateY(100%);
    }

    #offers-pop-up {
        align-items: flex-end;
    }

    #offers-pop-up>div {
        border-radius: 24px 24px 0px 0px;
        background: var(--high-contrast-color);
        padding-bottom: 32px;
    }

    #offers-pop-up>div>div>.top {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }


    #offers-pop-up>div>div>.top .close {
        position: relative;
        height: 4px;
        width: 100%;
        border-radius: unset;
        padding: 24px 0;
        background: transparent;
    }

    #offers-pop-up>div>div>.top .close::after {
        position: absolute;
        content: '';
        top: calc(50% - 2px);
        left: 25%;
        height: 4px;
        width: 50%;
        background: #FFF;
        border-radius: 80px;
    }

    #offers-pop-up>div>div>.top .close img {
        display: none;
    }

    #offers-pop-up .cards {
        overflow: scroll;
        grid-template-columns: 320px 320px 320px;
        gap: 0 16px;
        margin-top: 24px;
    }


    /*  */
    #offers-pop-up .advertiser-geographical-area {
        border-color: var(--border-dark-color);
        background: var(--neutral-dark-color);
    }


    #offers-pop-up .advertiser-geographical-area.vertical.card .bonus {
        border-color: var(--border-dark-color);
    }

    #offers-pop-up .advertiser-geographical-area .bonus .string {
        color: var(--neutral-color);
    }


    #offers-pop-up .advertiser-geographical-area .code>div.title div,
    #offers-pop-up .advertiser-geographical-area .code>div.success div {
        color: var(--button-submit-color);
        border-color: var(--button-submit-color);
        background: var(--neutral-dark-color);
    }


    #offers-pop-up .advertiser-geographical-area .donation>a {
        color: var(--high-contrast-color);
        background: var(--button-submit-color);
    }

    #offers-pop-up .advertiser-geographical-area .donation>a:hover {
        background: var(--button-submit-color--hover);
    }


    #offers-pop-up .advertiser-geographical-area .payment-methods .prefix {
        color: var(--neutral-color--2);
    }


    #offers-pop-up .advertiser-geographical-area .tc-excerpt {
        color: var(--neutral-color--2);
        background: var(--border-dark-color);
    }
}

@media screen and (max-width: 575px) {
    #offers-pop-up>div>div>.top .close::after {
        left: calc(50% - 100px);
        width: 200px;
        background: #FFF;
    }
}



/*--  Cookie Policy  --*/
#cookie-policy-pop-up {
    >div {
        padding: 2rem 0;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--neutral-color);
        z-index: 4;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .left {
        display: flex;
        align-items: center;
        font-size: 0.875em;
        line-height: 145%;
        color: var(--md-contrast-color--medium);
        gap: 0 24px;

        .content {
            max-width: 456px;
        }

        strong {
            font-family: var(--font-family-heading);
            font-weight: 600;
            color: var(--high-contrast-color);
        }
    }

    .icon {
        width: 48px;
        flex: 0 0 48px;
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 4px;
        background: var(--neutral-color--3);

        img {
            display: block;
            height: 32px;
            width: 32px;
        }
    }

    p:not(:last-child) {
        margin-bottom: 4px;
    }

    .right {
        display: flex;
        gap: 0 32px;

        >div {
            display: flex;
            align-items: center;
            height: 48px;
            border-radius: 6px;
            font-weight: 600;
            transition: .3s;
            cursor: pointer;
        }

        >div.cancel {
            color: var(--button-submit-color);
            background: var(--neutral-color);
            padding: 0 24px;

            &:hover {
                color: var(--button-submit-color--hover);
            }
        }

        >div.submit {
            background: var(--button-submit-color);
            padding: 0 20px;
            color: var(--neutral-color);

            &:hover {
                background: var(--button-submit-color--hover);
            }
        }
    }


    @media screen and (min-width: 992px) {
        .right>div span.responsiveness {
            display: none;
        }
    }

    @media screen and (max-width: 991px) {
        >div {
            border-radius: 24px 24px 0 0;
        }

        .wrapper {
            display: block;
        }

        .icon {
            display: none;
        }

        .left .content {
            max-width: unset;
        }

        p:not(:last-child) {
            margin-bottom: 8px;
        }

        .right {
            gap: 8px;
            padding-top: 18px;
            flex-direction: row-reverse;

            >div {
                flex: 1;
                padding: 0;
                justify-content: center;
                text-align: center;
                border-radius: 8px;
            }

            >div.cancel {
                color: var(--button-submit-color--hover);
            }

            >div span:not(.responsiveness) {
                display: none;
            }
        }
    }
}



/*--  Push Notification  --*/
#push-notifications-pop-up {
    >div {
        position: absolute;
        top: 2rem;
        left: 0;
        width: 100%;
    }

    .wrapper {
        padding: 2rem;
        width: fit-content;
        background: var(--neutral-color);
        z-index: 4;
    }

    .content {
        font-size: 0.875em;
        line-height: 145%;
        color: var(--md-contrast-color--medium);
        max-width: 456px;

        strong {
            font-family: var(--font-family-heading);
            font-weight: 600;
            color: var(--high-contrast-color);
        }
    }

    p:not(:last-child) {
        margin-bottom: 4px;
    }

    .right {
        display: flex;
        gap: 8px;
        padding-top: 32px;

        >div {
            flex: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            border-radius: 6px;
            font-weight: 600;
            text-align: center;
            transition: .3s;
            cursor: pointer;
        }

        >div.cancel {
            color: var(--button-submit-color);
            background: var(--neutral-color);
            padding: 0 24px;
        }

        >.cancel:hover {
            color: var(--button-submit-color--hover);
        }

        >div.submit {
            background: var(--button-submit-color);
            padding: 0 20px;
            color: var(--neutral-color);
        }

        >div.submit:hover {
            background: var(--button-submit-color--hover);
        }
    }


    @media screen and (min-width: 992px) {
        .right>div span.responsiveness {
            display: none;
        }
    }

    @media screen and (max-width: 991px) {
        >div {
            top: unset;
            bottom: 0;
            background: var(--neutral-color);
            z-index: 4;
            border-radius: 24px 24px 0px 0px;
        }

        .wrapper {
            width: 100%;
            background: transparent;
            padding: 2rem 0;
        }

        p:not(:last-child) {
            margin-bottom: 8px;
        }

        .content {
            max-width: unset;
        }

        .right {
            padding-top: 18px;
            flex-direction: row-reverse;
        }

        .right>div {
            border-radius: 8px;
        }

        .right>div span:not(.responsiveness) {
            display: none;
        }
    }

    @media screen and (max-width: 479px) {
        .right>div {
            flex: unset;
        }

        .right>div.submit {
            flex: 1;
        }
    }
}



/*--  Show More/Less  --*/
.show-more-less-content .show-more-content,
.show-more-less-content .show-less-content {
    display: none;
}

.show-more-less-content .show-more-content .title,
.show-more-less-content .show-less-content .title {
    margin-bottom: 0 !important;
    display: flex;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    align-items: center;
    cursor: pointer;
    color: var(--neutral-color);
}

.show-more-less-content .show-more-content .title img,
.show-more-less-content .show-less-content .title img {
    padding: 0;
    width: auto;
    height: 24px;
    filter: brightness(0) invert(1);
    margin: 0 0 0 7px;
    transform: rotate(90deg);
    transition: .3s ease;
}

.show-more-less-content .show-less-content .title img {
    transform: rotate(-90deg);
}

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

    .show-more-less-content .show-more-content,
    .show-more-less-content .show-less-content {
        display: block;
    }

    .show-more-less-content .hide {
        height: 0;
        opacity: 0;
        display: none;
    }
}



/*-- Limits Table  --*/
.limits.table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 18px;
    border: unset;
}

.limits.table~.limits.table {
    margin-top: 32px;
}

.limits.table tr:nth-child(odd) td {
    background: var(--neutral-color);
}

.limits.table thead th {
    background: var(--background-color) !important;
}

.limits.table th {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75em;
    text-transform: uppercase;
    color: var(--high-contrast-color);
    text-align: left;
    padding: 10px 0;
}

.limits.table tbody td {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.limits.table td {
    padding: 14px 0;
    background: var(--background-color);
}

.limits.table th:last-child,
.limits.table td:last-child {
    padding-right: 20px;
}

.limits.table th:first-child,
.limits.table td:first-child {
    padding-left: 20px;
}

.limits.table td:first-child>* {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.limits.table td .title a {
    font-weight: 600;
    font-size: 0.875em;
    line-height: 18px;
    color: var(--md-contrast-color);
}

.limits.table td .title a:hover {
    color: var(--primary-color);
}

.limits.table .logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.limits.table .logo .area-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.limits.table .logo img {
    width: auto;
    height: 20px;
}


@media (min-width: 768px) {

    .limits.table .minimum,
    .limits.table .maximum {
        text-align: center;
    }
}

@media (max-width:991px) {
    .limits.table {
        display: table;
        overflow: unset;
    }
}

@media (max-width: 767px) {

    .limits.table,
    .limits.table thead,
    .limits.table tbody {
        display: block;
    }

    .limits.table {
        overflow: auto;
    }

    .limits.table th {
        padding: 8px 14px;
    }

    .limits.table td {
        padding: 12px 14px;
    }

    .limits.table tr>*:first-child {
        border-right: 1px solid var(--border-color);
        min-width: 100px;
        flex: 1;
        position: sticky;
        left: 0;
    }

    .limits.table th:first-child,
    .limits.table td:first-child {
        padding-left: 14px !important;
    }

    .limits.table td:first-child span {
        display: none;
    }

    .limits.table th:nth-child(n+2),
    .limits.table td:nth-child(n+2) {
        white-space: break-spaces;
        width: 130px;
        flex: 0 0 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .limits.table tr {
        display: flex;
    }

    .limits.table .wrapper .title {
        display: none !important;
    }

    .limits.table .logo {
        margin: 0 auto;
        width: 2rem;
        height: 2rem;
    }

    .limits.table .logo img {
        width: 18px;
        height: 18px;
    }
}



/*-- Home - Subscription  --*/

/*--  Hero  --*/
.homepage-subscription-template {
    main>.background-image {
        background: center / cover;
    }

    section.hero {
        padding-bottom: 0 !important;

        .title {
            h1 {
                font-size: 1em;
                font-weight: 600;
                line-height: 1;
            }

            span {
                display: block;
            }

            span.small {
                font-size: 20px;
                line-height: 125%;
            }

            span.large {
                font-size: 56px;
                color: var(--neutral-color);
                margin-top: 12px;
            }
        }
    }


    @media screen and (min-width: 1200px) {
        section.hero {
            .introduction {
                max-width: 556px;
            }

            .title {
                span.large {
                    font-size: 64px;
                }
            }
        }
    }

    @media screen and (max-width: 991px) {
        section.hero {
            .title {
                span.small {
                    font-size: 1.25em;
                }

                span.large {
                    font-size: 3.5em;
                }
            }
        }
    }

    @media screen and (max-width: 767px) {
        section.hero {
            .title {
                span.small {
                    font-size: 1em;
                }

                span.large {
                    font-size: 3em;
                }
            }
        }
    }

    @media screen and (max-width: 360px) {
        section.hero {
            .title {
                span.large {
                    font-size: 2.75em;
                }
            }
        }
    }
}



/*-- Phone Subscription  --*/
.homepage-subscription-template {
    section.subscription {
        padding: 80px 0;
        margin-bottom: 56px;

        .title>* {
            font-family: var(--font-family-heading);
            font-weight: 600;
            font-size: 1em;
            color: var(--neutral-color);
            display: block;
            margin-bottom: 20px;
        }
    }


    @media screen and (min-width: 1200px) {
        section.subscription {
            >div>div {
                max-width: 556px;
            }
        }
    }

    @media screen and (max-width: 1199px) {
        section.subscription {
            padding-bottom: 64px;
        }
    }

    @media screen and (max-width: 991px) {
        section.subscription {
            padding-bottom: 48px;
            margin-bottom: 48px;
        }
    }

    /* @media screen and (max-width: 991px) {
        section.subscription {
            padding-top: 32px;
            padding-bottom: 48px;
            margin-bottom: 48px;
        }
    }

    @media screen and (max-width: 767px) {
        section.subscription {
            padding-top: 24px;
            padding-bottom: 40px;
            margin-bottom: 40px;
        }
    } */
    
    /*--  form  --*/
    section.subscription form {
        .field-group {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0 32px;
            padding: 4px 4px 4px 25px;
            border-radius: 8px;
            background: var(--neutral-color);
    
            &:focus-within {
                border: 2px solid var(--secondary-color);
            }
        }
    
        .field,
        .input {
            height: 100%;
    
            &.hide {
                opacity: 0;
            }
        }
    
        .field.email {
            display: flex;
            justify-content: center;
    
            input {
                display: block;
                height: 100%;
                width: 100%;
                background: transparent;
                border: none;
                font-size: 16px;
                font-weight: 500;
                color: var(--md-contrast-color);
    
                &::placeholder {
                    color: var(--md-contrast-color);
                }
    
                &:-webkit-autofill {
                    background: transparent;
                    border: none;
                }
            }
        }
    
        .field.submit {
            input {
                height: 44px;
                padding: 0 24px;
                border-radius: 4px;
                background: var(--button-cta-color);
                font-size: 16px;
                font-weight: 700;
                color: var(--neutral-dark-color);
                transition: .3s ease;
                cursor: pointer;
                border: 0px;
    
                &:hover {
                    background: var(--button-cta-color--hover);
                }
            }
        }
    
    
        &:has(.field.email.has-error) {
            .field-group {
                color: var(--error-color);
                border-color: var(--error-color);
            }
    
            .field.email {
                .error {
                    font-size: 12px;
                    font-weight: 500;
                    color: inherit;
                    line-height: 16px;
                    position: absolute;
                    bottom: -25px;
                    left: 0px;
                }
            }
        }
    
        &:has(.success span) {
            .field.email {
                .success {
                    margin: 0 !important;
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 100%;
                    width: 100%;
                    padding: 24px 25px;
                    border-radius: 200px;
                    background-color: #FFF;
    
                    span {
                        color: var(--secondary-color);
                        font-weight: 500;
                    }
    
                    img {
                        height: 32px;
                        aspect-ratio: 1;
                    }
                }
            }
        }
    
    
        /* @media screen and (max-width: 1199px) {
            .field-group {
                padding: 8px 8px 8px 24px;
            }
        } */
    }

    div:is(.form.phone, .form.email) {
        .success {
            display: flex;
            align-items: center;
            gap: 0 8px;
    
            img {
                height: 20px;
                width: 20px;
            }
        }
    
    
        @media screen and (min-width: 1200px) {
            input[type=submit]:is(.responsiveness) {
                display: none;
            }
        }
    
        @media screen and (max-width: 1199px) {
            input[type=submit]:not(.responsiveness) {
                display: none;
            }
        }
    }
}



/*-- Phone Subscription  --*/
#form-phone-subscription input[type=text],
#form-phone-subscription input[type=tel],
#form-email-subscription input[type=email] {
    font-size: 1em;
    font-weight: 500;
    line-height: 145%;
    color: var(--md-contrast-color);
    cursor: pointer;
    height: 48px;
    width: 100%;
    border-radius: 6px;
    border: none;
    background: var(--neutral-color);
    backdrop-filter: blur(8px);
    padding: 10px 16px;
    transition: .3s ease;
}

#form-phone-subscription input[type=text]::placeholder,
#form-phone-subscription input[type=tel]::placeholder,
#form-email-subscription input[type=email]::placeholder {
    font-weight: 500;
    color: var(--md-contrast-color--2);
}

#form-phone-subscription input[type=text]:hover,
#form-phone-subscription input[type=tel]:hover,
#form-email-subscription input[type=email]:hover {
    background: var(--neutral-color--5);
    backdrop-filter: unset;
}

#form-phone-subscription input[type=text]:focus,
#form-phone-subscription input[type=tel]:focus,
#form-email-subscription input[type=email]:focus {
    background: var(--neutral-color);
    backdrop-filter: unset;
}


/*  */
#form-contact input[type=button],
#form-phone-subscription input[type=button],
#form-phone-subscription input[type=submit],
#form-email-subscription input[type=button],
#form-email-subscription input[type=submit] {
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    line-height: 100%;
    color: var(--high-contrast-color);
    background: transparent;
    border: none;
}

#form-phone-subscription input[type=submit],
#form-email-subscription input[type=submit] {
    cursor: pointer;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--button-cta-color);
    color: #FFF;
    padding: 0 24px;
    transition: .3s ease;
}

#form-phone-subscription input[type=submit]:hover,
#form-email-subscription input[type=submit]:hover {
    background: var(--button-cta-color--hover);
}


/*  */
/* #form-phone-subscription .field:nth-child(n+2),
#form-email-subscription .field:nth-child(n+2) {
    margin-top: 24px;
} */

#form-contact .field .error span,
#form-contact .field .success span,
#form-phone-subscription .field .error span,
#form-phone-subscription .field .success span,
#form-email-subscription .field .error span,
#form-email-subscription .field .success span {
    display: block;
    font-weight: 500;
    /* color: var(--neutral-color); */
    line-height: 1;
}

#form-contact .field .error span,
#form-phone-subscription .field .error span,
#form-email-subscription .field .error span {
    font-size: 14px;
    color: #FFF;
}


/*  */
#form-phone-subscription .field.phone,
#form-email-subscription .field.email {
    position: relative;
}

#form-phone-subscription .field.phone .label,
#form-email-subscription .field.email .label {
    position: absolute;
    top: 0;
    left: 0;
    height: 48px;
    width: fit-content;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--neutral-color--5);
    border-radius: 8px 0 0 8px;
    z-index: 1;
}

#form-phone-subscription .field.phone input {
    padding-left: calc(16px + 48px);
}


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

    #form-phone-subscription input[type=text],
    #form-phone-subscription input[type=tel],
    #form-phone-subscription input[type=submit],
    #form-phone-subscription .field.phone .label,
    #form-email-subscription input[type=text],
    #form-email-subscription input[type=submit],
    #form-email-subscription .field.email .label {
        height: 48px;
    }
}


div:is(#form-phone-subscription, #form-email-subscription) {
    div:is(.error) {
        margin-top: 6px;
    }

    .success {
        display: flex;
        align-items: center;
        gap: 0 8px;
        margin-top: 0;

        img {
            height: 20px;
            width: 20px;
        }
    }


    @media screen and (min-width: 1200px) {
        input[type=submit]:is(.responsiveness) {
            display: none;
        }
    }

    @media screen and (max-width: 1199px) {
        input[type=submit]:not(.responsiveness) {
            display: none;
        }
    }
}



/*-- Home - Social Reviews  --*/
.homepage-social-reviews-template {
    header {
        @media (max-width: 991px) {
            .wrapper {
                flex-wrap: nowrap;
                flex-direction: column;
                gap: 8px;
                align-items: center;
            }

            .logo {
                display: block;
                margin: 0;
                padding: 0;
                border: none;
            }
        }
    }


    /*--  Hero  --*/
    section.hero {
        .introduction {
            text-align: center !important;
            margin-bottom: 54px;

            .title>* {
                color: var(--high-contrast-color);
                margin-bottom: 8px;
            }

            .content {
                color: var(--md-contrast-color);
            }
        }

        .buttons>a,
        .buttons {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .buttons a {
            height: 48px;
            padding: 0 24px;
            font-family: var(--font-family-heading);
            font-size: 14px;
            font-weight: 600;
            color: var(--neutral-color);
            background: var(--button-cta-color);
            border-radius: 6px;
            transition: .3s ease;

            &:hover {
                background: var(--button-cta-color--hover);
            }
        }


        @media (min-width: 576px) {
            .container {
                max-width: 526px !important;
            }
        }
    }
}



/*-- Home - Product V2  --*/
.homepage-product-v2-template {
    @media screen and (min-width: 1400px) {
        .container {
            max-width: 1290px;
        }
    }


    header {
        padding: 24px 0;

        .logo img {
            height: 32px;
            width: auto;
        }

        @media screen and (max-width: 1199px) {
            .menu {
                display: none;
            }

            .logo {
                border: none;
                margin: 0;
                padding: 0;
            }
        }
    }

    section.hero {
        padding-bottom: 200px;

        .introduction {
            margin-bottom: 88px;

            .title>* {
                display: block;
                font-size: 40px;
                font-weight: 700;
                line-height: 120%;
                margin-bottom: 16px;
                color: #FFF;
            }

            .content {
                color: rgba(255, 255, 255, 0.85);
            }
        }

        .benefits {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
        }

        .benefit {
            display: grid;
            gap: 24px 0;
            padding-top: 32px;
            border-top: 2px solid rgba(255, 255, 255, 0.10);

            .icon {
                height: 24px;
                width: 24px;
            }
        }


        @media screen and (min-width: 992px) {
            .introduction {
                max-width: 592px;
            }
        }

        @media screen and (max-width: 1199px) {
            padding-bottom: 115px;
        }

        @media screen and (max-width: 991px) {
            .introduction {
                margin-bottom: 56px;

                .title>* {
                    font-size: 32px;
                }
            }

            .benefits {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .benefit {
                padding-top: 24px;
            }
        }
    }

    section.advertisers {
        margin: 0;
        padding: 0;
        margin-top: -150px;


        @media screen and (max-width: 1199px) {
            margin-top: -80px;
        }
    }

    /*  */
    .advertiser-geographical-area.horizontal.card {
        >.top {
            padding: 32px;
            grid-template-columns: 2fr 1fr auto;
            gap: 0 64px;

            >.left {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                >.bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    padding-top: 20px;
                    border-top: 1px solid #DEE2E6;
                    margin-top: 16px;

                    .title {
                        color: var(--high-contrast-color);
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 115%;
                    }
                }
            }

            >.middle {
                padding: 0;
                margin: 0;
                border: none;
            }
        }

        .brand {
            margin-bottom: 24px;
            display: grid;
            align-items: center;
            grid-template-columns: 40px 64px auto;
            gap: 0 24px;

            .details {
                .name {
                    color: var(--high-contrast-color);
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 120%;
                    margin-bottom: 16px;
                }

                .ranking {
                    display: flex;
                    align-items: center;
                    gap: 0 4px;

                    >div {
                        display: flex;
                        align-items: center;
                        height: 24px;
                        padding: 8px;
                        border-radius: 24px;
                    }

                    .number {
                        color: #FFF;
                        text-align: center;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 115%;
                    }

                    .tag {
                        margin-bottom: 0;
                        background: #FFF;
                        border: 1px solid #DEE2E6;
                        color: #63636E;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 115%;
                    }
                }
            }
        }

        .content {
            color: #343A40;
            font-size: 16px;
            font-weight: 400;
            line-height: 150%;

            .title {
                color: var(--high-contrast-color);
                font-weight: 600;
            }
        }

        .logo {
            height: 64px;
            width: 64px;
        }

        .rank {
            position: static;
            height: 40px;
            width: 40px;
            border-radius: 200px;
            border: 1px solid #DEE2E6;
        }


        /*  */
        .benefits {
            display: flex;
            flex-direction: column;
            gap: 8px 0;
        }

        .benefit>div {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 0 12px;

            img {
                display: block;
                height: 20px;
                width: 20px;
            }

            span {
                display: block;
                color: #343A40;
                font-size: 14px;
                font-weight: 500;
                line-height: 145%;
            }
        }


        /*  */
        :is(.site, .button) a {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .3s ease;
            z-index: 1;
        }

        .button a {
            gap: 0 16px;
            height: 48px;
            padding: 0 24px;
            background: var(--button-cta-color);
            color: #FFF;
            font-weight: 700;
            border-radius: 8px;

            &:hover {
                background: var(--button-cta-color--hover);
            }
        }

        .site a {
            gap: 0 8px;
            padding: 12px 0;
            color: var(--button-cta-color);
            margin-top: 4px;
            font-size: 14px;
            font-weight: 600;

            &:hover {
                color: var(--button-cta-color--hover);
            }
        }

        .app img {
            display: block;
            height: 16px;
            width: 16px;
        }


        @media screen and (max-width: 1199px) {
            >.top {
                padding: 16px;

                >.middle {
                    margin: 24px 0;
                }

                >.left {
                    >.top {
                        width: 100%;
                    }
                }
            }

            .brand {
                position: relative;
                gap: 0 16px;
                grid-template-columns: 64px auto;
            }

            .rank {
                position: absolute;
                top: -12px;
                left: -12px;
                width: 24px;
                height: 24px;
                border: 1px solid #DEE2E6;
            }

            .site a {
                width: fit-content;
                margin: 8px auto 0 auto;
            }
        }
    }


    section.block-content {
        padding: 120px 0;

        .container>.row {
            display: grid;
            grid-template-columns: 1fr 384px;
            gap: 0 136px;

            >div {
                width: auto !important;
                max-width: unset;
            }
        }

        .sidebar {
            padding: 0;
            height: fit-content;

            .image {
                position: relative;
            }

            .tag {
                position: absolute;
                bottom: 88px;
                left: -40px;

                >div {
                    display: flex;
                    align-items: center;
                    flex-direction: row-reverse;
                    justify-content: flex-end;
                    gap: 0 8px;
                    height: 32px;
                    padding: 0 16px 0 8px;
                    border-radius: 200px;
                    background: #FFF;
                    box-shadow: -8px 8px 64px 0px rgba(0, 0, 0, 0.08);
                    font-size: 14px;
                    font-weight: 600;
                    color: #63636E;
                    line-height: 115%;
                }
            }
        }

        .features {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 24px 40px;
            margin-top: 40px;
            padding-top: 24px;
            border-top: 1px solid #DEE2E6;
        }

        .feature>div {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 0 12px;
            color: var(--high-contrast-color);
            font-weight: 500;
        }


        @media screen and (max-width: 1199px) {
            padding: 64px 0;

            .container>.row {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .sidebar {
                display: flex;
                justify-content: center;

                .image>img {
                    display: block;
                    height: 400px;
                    width: auto;
                }

                .tag {
                    bottom: 24px;
                    left: -16px;
                }
            }

            .features {
                gap: 24px;
            }
        }
    }


    section.subscription {
        .wrapper {
            position: relative;
            padding: 48px;
            margin-bottom: 80px;
            display: flex;
            flex-direction: column;
            gap: 64px 0;
            border-radius: 16px;
            overflow: hidden;

            >div:is(.top, .bottom) {
                position: relative;
                z-index: 1;
            }

            >.bottom {
                display: grid;
                align-items: center;
                grid-template-columns: auto 492px;
                gap: 0 136px;
            }
        }

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: center/cover;
        }

        .tag {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            width: fit-content;
            border-radius: 200px;
            padding: 0 16px;
            background: #3008A6;
            color: #FFF;
            font-size: 14px;
            font-weight: 600;
            line-height: 115%;
        }

        .introduction {
            .title>* {
                display: block;
                color: #FFF;
                font-size: 32px;
                font-weight: 700;
                line-height: 125%;
                margin-bottom: 4px;
            }

            .content {
                color: rgba(255, 255, 255, 0.8);
                font-size: 16px;
                font-weight: 500;
                line-height: 150%;
            }
        }


        /*  */
        div:is(#form-phone-subscription, #form-email-subscription) form {
            div:is(.success, .error) {
                margin-top: 12px;
            }

            .field-group {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0 8px;
                height: 64px;
                padding: 8px;
                border-radius: 8px;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: #F8F9FA;

                &:hover {
                    border-color: var(--primary-color);
                }
            }

            .label {
                border: none;
                top: 0;
                left: 0;
                padding: 0;
                left: 16px;
                background: transparent;
            }

            .field,
            .input {
                height: 100%;

            }

            .field.email {
                width: 100%;

                input {
                    display: block;
                    height: 100%;
                    width: 100%;
                    background: transparent;
                    border: none;
                    font-size: 16px;
                    font-weight: 500;
                    color: var(--md-contrast-color);
                    padding: 12px 8px 8px 50px;

                    &::placeholder {
                        color: #868E96;
                    }

                    &:-webkit-autofill {
                        background: transparent;
                        border: none;
                    }
                }
            }

            .field.submit {
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 8px;
                padding: 0 24px;
                background: var(--button-cta-color);

                input {
                    height: 100%;
                    border-radius: 0;
                    border: none;
                    background: transparent;
                    font-size: 16px;
                    font-weight: 700;
                    color: #FFF;
                    transition: .3s ease;

                    &:hover {
                        box-shadow: none;
                    }
                }

                &:hover {
                    background: var(--button-cta-color--hover);
                }
            }


            @media screen and (max-width: 1199px) {
                .field-group {
                    padding: 0;
                    margin: 0;
                    border: 0;
                    flex-direction: column;
                    gap: 14px 0;
                    height: fit-content;
                    background: transparent;
                }

                .field.email {
                    input {
                        height: 48px;
                        background: #FFF;
                    }
                }

                .field.submit {
                    height: 48px;
                    width: 100%;
                }
            }
        }


        @media screen and (min-width: 1200px) {
            .background-image.responsiveness {
                display: none;
            }
        }

        @media screen and (max-width: 1199px) {
            .background-image:not(.responsiveness) {
                display: none;
            }

            .wrapper {
                padding: 48px 24px 24px 24px;
                gap: 24px 0;
                margin-bottom: 64px;

                >.bottom {
                    display: block;
                }
            }

            .introduction {
                margin-bottom: 56px;

                .title>* {
                    font-size: 24px;
                    line-height: 135%;
                    margin-bottom: 4px;
                }
            }
        }
    }
}


/*--  Hero BG + Subscription  --*/
body:is(.homepage-product-v2-template, .contact-template, .index-template, .faqs-template) {
    section.hero:has(div.background-image) {
        position: relative;

        .container {
            position: relative;
            z-index: 1;
        }

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: center/cover;
        }

        .introduction .title>div:has(img) {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 0 24px;

            >* {
                margin-bottom: 0;
            }
        }

        @media screen and (min-width: 992px) {
            .background-image.responsiveness {
                display: none;
            }
        }

        @media screen and (max-width: 991px) {
            .background-image:not(.responsiveness) {
                display: none;
            }
        }
    }


    /*  */
    section.subscription {
        .wrapper {
            position: relative;
            padding: 48px;
            margin-bottom: 80px;
            display: flex;
            flex-direction: column;
            gap: 64px 0;
            border-radius: 16px;
            overflow: hidden;

            >div:is(.top, .bottom) {
                position: relative;
                z-index: 1;
            }

            >.bottom {
                display: grid;
                align-items: center;
                grid-template-columns: auto 492px;
                gap: 0 136px;
            }
        }

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: center/cover;
        }

        .tag {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            width: fit-content;
            border-radius: 200px;
            padding: 0 16px;
            background: #3008A6;
            color: #FFF;
            font-size: 14px;
            font-weight: 600;
            line-height: 115%;
        }

        .introduction {
            .title>* {
                display: block;
                color: #FFF;
                font-size: 32px;
                font-weight: 700;
                line-height: 125%;
                margin-bottom: 4px;
            }

            .content {
                color: rgba(255, 255, 255, 0.8);
                font-size: 16px;
                font-weight: 500;
                line-height: 150%;
            }
        }


        /*  */
        div:is(#form-phone-subscription, #form-email-subscription) form {
            div:is(.success, .error) {
                margin-top: 12px;
            }

            .field-group {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0 8px;
                height: 64px;
                padding: 8px;
                border-radius: 8px;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: #F8F9FA;

                &:hover {
                    border-color: var(--primary-color);
                }
            }

            .label {
                border: none;
                top: 0;
                left: 0;
                padding: 0;
                left: 16px;
                background: transparent;
            }

            .field,
            .input {
                height: 100%;

            }

            .field.email {
                width: 100%;

                input {
                    display: block;
                    height: 100%;
                    width: 100%;
                    background: transparent;
                    border: none;
                    font-size: 16px;
                    font-weight: 500;
                    color: var(--md-contrast-color);
                    padding: 12px 8px 8px 50px;

                    &::placeholder {
                        color: #868E96;
                    }

                    &:-webkit-autofill {
                        background: transparent;
                        border: none;
                    }
                }
            }

            .field.submit {
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                border-radius: 8px;
                padding: 0 24px;
                background: var(--button-cta-color);

                input {
                    height: 100%;
                    border-radius: 0;
                    padding: 0;
                    border: none;
                    background: transparent;
                    font-size: 16px;
                    font-weight: 700;
                    color: #FFF;
                    transition: .3s ease;

                    &:hover {
                        box-shadow: none;
                    }
                }

                &:hover {
                    background: var(--button-cta-color--hover);
                }
            }


            @media screen and (max-width: 1199px) {
                .field-group {
                    padding: 0;
                    margin: 0;
                    border: 0;
                    flex-direction: column;
                    gap: 14px 0;
                    height: fit-content;
                    background: transparent;
                }

                .field.email {
                    input {
                        height: 48px;
                        background: #FFF;
                    }
                }

                .field.submit {
                    height: 48px;
                    width: 100%;
                }
            }
        }


        @media screen and (min-width: 1200px) {
            .background-image.responsiveness {
                display: none;
            }
        }

        @media screen and (max-width: 1199px) {
            .background-image:not(.responsiveness) {
                display: none;
            }

            .wrapper {
                padding: 48px 24px 24px 24px;
                gap: 24px 0;
                margin-bottom: 64px;

                >.bottom {
                    display: block;
                }
            }

            .introduction {
                margin-bottom: 56px;

                .title>* {
                    font-size: 24px;
                    line-height: 135%;
                    margin-bottom: 4px;
                }
            }
        }
    }
}


/*--  form  --*/
.loading .form {
    position: relative;
}

.loading .loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
    opacity: 0.6;
}

.loading .loader::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
}


input[type=checkbox] {
    height: 16px;
    width: 16px;
    aspect-ratio: 1;
    appearance: none;
    border-radius: 3px;
    background: var(--neutral-color);
    border: 1px solid #868E96;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type=checkbox]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transition: .3s;
    opacity: 0;
}

input[type=checkbox]::after {
    content: '';
    position: relative;
    width: 8px;
    height: 5px;
    border: solid #FFF;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    margin-top: -2px;
    transition: .3s;
    opacity: 0;
}

input[type=checkbox]:hover {
    border-color: var(--primary-color);
}

input[type=checkbox]:checked {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

input[type=checkbox]:hover::after,
input[type=checkbox]:checked::before,
input[type=checkbox]:checked::after {
    opacity: 1;
}


@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


.contact-template {
    section.content {
        padding: 80px 0 112px 0;

        .container>.wrapper {
            display: grid;
            gap: 64px;
        }

        .contact-container {
            .introduction {
                .title>* {
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 135%;
                    margin-bottom: 8px;
                }
            }

            #form-contact form {
                >.top {
                    display: grid;
                    gap: 24px;
                    margin: 32px 0 24px 0;
                }

                >.bottom {
                    display: grid;
                    gap: 24px 80px;
                    margin-top: 32px;
                }

                .label {
                    margin-bottom: 12px;
                    color: #495057;
                    font-weight: 500;
                }

                textarea,
                input[type=text],
                input[type=email] {
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 150%;
                    color: var(--md-contrast-color);
                    cursor: pointer;
                    height: 48px;
                    width: 100%;
                    border-radius: 8px;
                    border: 1px solid transparent;
                    background: #F8F9FA;
                    backdrop-filter: blur(8px);
                    padding: 12px 16px;
                    transition: .3s ease;

                    &::placeholder {
                        color: #868E96;
                    }

                    &:focus {
                        border-color: var(--primary-color);
                    }
                }

                .field {
                    .error span {
                        font-size: 12px;
                        margin-top: 6px;
                        color: #cf6666;
                    }

                    &.terms {
                        display: grid;
                        grid-template-columns: 16px auto;
                        gap: 0 16px;

                        .label {
                            margin-bottom: 0;
                        }

                        .content {
                            color: var(--high-contrast-color);
                        }

                        .error {
                            grid-column: 1 / -1;
                        }

                        input[type=checkbox] {
                            margin-top: 4px;
                        }
                    }

                    &.submit {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                        height: 56px;
                        padding: 0 16px;
                        border-radius: 8px;
                        background: var(--button-cta-color);

                        input {
                            font-weight: 700;
                            color: var(--neutral-color);
                        }

                        &:hover {
                            background: var(--button-cta-color--hover);
                        }
                    }
                }

                textarea {
                    min-height: 100px;
                }
            }
        }

        .company-details-container {
            .introduction>* {
                font-size: 20px;
                font-weight: 600;
                color: var(--high-contrast-color);
                margin-bottom: 24px;
            }

            .company-details>div {
                display: grid;
                grid-template-columns: 20px 1fr;
                gap: 0 16px;
                padding: 24px 0;
                border-top: 1px solid #DEE2E6;

                .icon img {
                    display: block;
                    height: 20px;
                    width: 20px;
                    position: relative;
                    top: 1px;
                }

                .info {
                    .title {
                        color: var(--high-contrast-color);
                        font-weight: 600;
                    }
                }
            }
        }


        @media screen and (min-width: 1200px) {
            .container>.wrapper {
                grid-template-columns: 1fr 372px;
            }

            .contact-container {
                #form-contact form {
                    >.top {
                        grid-template-columns: repeat(2, 1fr);
                    }

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

        @media screen and (max-width: 1199px) {
            padding: 40px 0 64px 0;


            .company-details-container {
                .company-details>div {}
            }
        }
    }
}

.faqs-template {
    section.faqs {
        padding: 80px 0 112px 0;

        .container>.wrapper {
            display: grid;
            gap: 40px 88px;

            >.intro-container {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .intro-container {
            >.introduction {
                .title>* {
                    margin-bottom: 8px;
                    font-size: 20px;
                    font-weight: 600;
                }

                p:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .contact {
            .introduction .title>div {
                display: flex;
                align-items: center;
                flex-direction: row-reverse;
                justify-content: flex-end;
                gap: 0 8px;
                margin-bottom: 16px;

                >* {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 0;
                }
            }

            .button a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 48px;
                padding: 0 12px 0 24px;
                border-radius: 8px;
                border: 1px solid var(--border-color);
                font-weight: 700;
                color: var(--primary-color);


                &:hover {
                    border-color: var(--primary-color);
                }
            }
        }

        .faq-card {
            border-radius: 8px;
            border: 1px solid var(--border-color);

            &:nth-child(n+2) {
                margin-top: 16px;
            }

            .question {
                display: grid;
                align-items: center;
                padding: 16px 24px;
                gap: 0 16px;
                grid-template-columns: 1fr auto;
                cursor: pointer;

                >* {
                    margin-bottom: 0 !important;
                }
            }

            .answer {
                padding: 12px 24px;
                border-top: 1px solid var(--border-color);
            }

            &.close .answer {
                height: 0;
                visibility: hidden;
                padding: 0;
                margin: 0;
            }

            .toggle {
                height: 20px;
                aspect-ratio: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                img {
                    height: 100%;
                    width: 100%;
                }
            }

            &.open {
                .toggle img {
                    transform: rotate(-180deg);
                }
            }
        }

        @media screen and (min-width: 1200px) {
            .container>.wrapper {
                grid-template-columns: 376px 1fr;
            }

            .contact.responsiveness {
                display: none;
            }
        }

        @media screen and (max-width: 1199px) {
            padding: 40px 0 64px 0;

            .contact.desktop {
                display: none;
            }

        }
    }
}



/*--  widgets  --*/
.widget-content-navigation {
    color: #333;
    font-size: 16px;
    line-height: 145%;
    font-weight: 600;
    color: #73777D;

    ul {
        list-style: none;
    }

    li {
        border-left: 2px solid rgba(115, 119, 125, 0.3);
        padding: 16px 0px 16px 24px;
        display: flex;
        align-items: center;
    
        &:hover,
        &.active {
            border-left: 2px solid #0d3330;
        }
    }

    a {
        margin-right: -24px;
        border-right: 2px solid transparent;
        padding-right: 24px;
        display: block;

        &:hover {
            color: #0d3330;
        }
    }

    .active a {
        font-weight: 600;
        color: #0d3330;
    }
}