/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Fonts Styles */
/* 1. LEMONMILK - SemiBold */
@font-face {
    font-family: 'LEMONMILK';
    src: url('../../fonts/LEMONMILK-Medium.woff2') format('woff2'),
        url('../../fonts/LEMONMILK-Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* 2. LEMONMILK - Bold */
@font-face {
    font-family: 'LEMONMILK';
    src: url('../../fonts/LEMONMILK-Bold.woff2') format('woff2'),
        url('../../fonts/LEMONMILK-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* 3. Poppins - SemiBold */
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* 4. Poppins - Bold */
    @font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../../fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* 5. Myriad Pro - Regular */
    @font-face {
    font-family: 'Myriad Pro';
    src: url('../../fonts/MyriadPro-Regular.woff2') format('woff2'),
        url('../../fonts/MyriadPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* General Styles */
body {
    --fontLEMONMILK: 'LEMONMILK', Tahoma, Arial, Helvetica, sans-serif;
    --fontPoppins: 'Poppins', Tahoma, Arial, Helvetica, sans-serif;
    --fontMyriad: 'Myriad Pro', Tahoma, Arial, Helvetica, sans-serif;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-primary-color: #ffd683;
    --font-highlighted-color: #FFFFFF;
    --cta-bg-color: #ffdb83;
    --font-cta-color: #6d4000;
    --font-footer-color: #d6cefe;
    --body-bg-color: #160341;
    font-family: var(--fontMyriad);
    font-size: calc(16px + (32 - 16) * ((100vw - 375px) / (750 - 375)));
    background-color: var(--body-bg-color);
    color: var(--font-primary-color);
}

a {
    text-decoration: none;

}

.wrapper {
    margin: 0 1.5625em;
}

.highlighted {
    color: var(--font-highlighted-color);
    font-weight: var(--font-weight-bold);
}

.font-family-popins {
    font-family: var(--fontPoppins);
}

.cta a {
    display: inline-block;
    margin: 1.2em 0;
    padding: 0.4333333333333333em 0.8em;
    font-size: 1.875em;
    font-family: var(--fontPoppins);
    font-weight: var(--font-weight-bold);
    color: var(--font-cta-color);
    background-color: var(--cta-bg-color);
    line-height: 1;
    border-radius: 1em;
    box-shadow: 0 0.133333333333333em #d07100;
    transition: all .3s ease-in-out;
}

.cta a:hover {
    background-color: #ffcc4f;
}

/* Background Styles */
.combo-lp {
    background: url(../../img/backgrounds/combo-mobile-background.webp) no-repeat;
    background-size: cover;
    background-position: top center;
}

/* Offer Section Styles */
.offer {
    padding-top: 2.5em;
    text-align: center;
}

.logo {
    width: 20.3125em;
}

.offer-container {
    margin-top: 1.7em;
}

h1 {
    font-size: 2.625em;
    line-height: 1.1;
    font-family: var(--fontLEMONMILK);
    font-weight: var(--font-weight-bold);
}

.offer-container h1 .font-family-popins {
    font-weight: var(--font-weight-semibold);
}

.size63 {
    font-size: 1.5em;
}

.curency-sign {
    font-family: var(--fontPoppins);
    font-weight: var(--font-weight-bold);
    font-size: 1.1333333em;
}

.offer-container h2 {
    font-size: 2em;
    font-family: var(--fontPoppins);
    font-weight: var(--font-weight-semibold);
    color: var(--font-highlighted-color);
    line-height: 0.8;
    text-transform: uppercase;
}

/* Bonuses section Styles */
.bonuses {
    margin-top: 20.2em;
    text-align: center;
}

.bonuses h2 {
    font-size: 1.5em;
    font-family: var(--fontPoppins);
    font-weight: var(--font-weight-semibold);
}

.bonuses h2:last-of-type {
    width: 90%;
    margin: 0 auto;
}

.bonuses-container {
    padding: 1em 0 0;
}

.bonus-container {
    margin-bottom: 0.4761904761904762em;
    font-size: 2.625em;
    font-family: var(--fontPoppins);
    font-weight: var(--font-weight-semibold);
}

.bonus-container:last-child {
    margin-bottom: 0;
}

.bonus-container h3 {
    font-family: var(--fontLEMONMILK);
    color: var(--font-highlighted-color);
}

.bonus-container h3 + p {
    font-size: 0.7380952380em;
    line-height: 1.1;
}

.promo-code {
    display: inline-block;
    min-width: 4.285714285714286em;
    margin-top: 0.238095238095em;
    padding: 0.285714285em;
    color: var(--font-highlighted-color);
    background-color: rgb(23, 19, 72, 0.5);
    line-height: 0.75em;
    text-transform: uppercase;
    border-radius: 1em;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid var(--font-primary-color);
}

.copied-successful {
    color: var(--font-cta-color) !important;
    background-color: var(--cta-bg-color) !important;
}

/* Payment methods styles */
.payment-methods-container {
    display: flex;
    margin-top: 1.5em;
    padding-bottom: 1em;
    flex-wrap: wrap;
    gap: 0.375em;
    justify-content: space-between;
}

.payment-method-holder {
    height: 1.5em;
    display: flex;
    padding: 0.3125em 0.375em;
    border: 1px solid #b8aefa;
    border-radius: 0.375em;
    box-sizing: border-box;
}

.payment-method-holder img {
    height: 100%;
}

/* Footer styles */
footer {
    margin-bottom: 1em;
    padding-top: 1em;
    font-family: var(--fontMyriad);
    color: var(--font-footer-color);
}

.legal-icons {
    display: flex;
    margin-bottom: 0.625em;
    justify-content: center;
    gap: 0.875em;
}

.legal-icons img {
    width: 1.5625em;
}

footer p {
    margin-bottom: 0.6em;
    font-size: 0.5625em;
    text-align: center;
    line-height: 1.6;
}

footer p:last-child {
    text-align: justify;
    text-align-last: justify;
}

/* Hindi styles */
.hi .offer-container h2 {
    margin-top: 0.3em;
}

.hi footer p {
    font-size: 0.5em;
}

/* Desktop styles */
@media (min-width: 1280px) {
    /* General styles */
    body {
        font-size: calc(17.333333px + (26 - 17.333333) * ((100vw - 1280px) / (1920 - 1280)));
    }

    .wrapper {
        margin: 0 4.615384615384615em;
    }

    .cta {
        text-align: center;
    }

    .cta a {
        margin: 0.5em 0 0.35em;
        font-size: 1.7307692307692em;
    }

    /* Background Styles */
    .combo-lp {
        background: url(../../img/backgrounds/combo-desktop-background.webp) no-repeat;
        background-size: cover;
        background-position: 0% 50%;
    }

    /* Offer section styles */
    .offer {
        padding-top: 2.615384615384615em;
        text-align: left;
    }

    .logo {
        width: 12.30769230769231em;
    }

    .offer-container {
        margin-top: 1.8em;
    }

    h1 {
        width: 30%;
        font-size: 2.5em;
        line-height: 1.1;
    }

    .size63 {
        font-size: 1.230769230769231em;
    }

    .offer-container h2 {
        font-size: 2.5em;
    }

    /* Bonuses section styles */
    .bonuses {
        margin-top: 1.5em;
        text-align: unset;
    }

    .bonuses-container {
        display: flex;
        padding: 1.3em 0 0;
        justify-content: space-between;
    }

    .bonus-container {
        width: 30%;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        font-size: 1em;
    }

    .bonus-container > div {
        width: 45%;
    }

    .bonus-container:last-child {
        width: 35%;
    }

    .bonus-container:nth-child(3) > div {
        width: 54%;
    }

    .bonus-container:nth-child(3) > div > p {
        width: 80%;
    }

    .bonus-container h3 {
        font-size: 1.730769230em;
    }

    .bonus-container h3 + p {
        font-size: 1.538461538461em;
    }

    .promo-code {
        margin-top: 0;
        margin-left: 0.1em;
        font-size: 2.03846153em;
        min-width: 4.716981132075472em;
    }

    .bonus-container:nth-child(3) .promo-code {
        margin-left: 0;
    }

    .bonuses h2:last-of-type {
        text-align: center;
    }

    /* Payment methods styles */
    .payment-methods-container {
        margin-top: 1em;
        padding-bottom: 0.6538461538461538em;
    }

    .payment-method-holder {
        height: 1.923076923076923em;
    }

    /* Footer styles */
    footer {
        margin-bottom: 0.7692307692307692em;
        padding-top: 0.6538461538461538em;
    }

    .legal-icons {
        margin-bottom: 0.4230769230769231em;
        gap: 0.4230769230769231em;
    }

    .legal-icons img {
        width: 1.195em;
    }

    footer p {
        margin-bottom: 0.1153846153846154em;
    }

    footer p:last-child {
        text-align-last: center;
    }

    /* Hindi styles */
    .hi .cta a {
        margin: 0.5em 0;
    }
}