/* =========================================================
   TARJOUSSIVU / LEGACY LANDING PAGE
   Clean base stylesheet

   Page-specific components can still add their own CSS
   inside the HTML when necessary.
   ========================================================= */


/* =========================================================
   1. FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* =========================================================
   2. BASE
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    max-width: 1500px;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;

    background-color: #ffffff;
    background-size: cover;
}

body.step_1 {
    background-size: cover;
    background-repeat: no-repeat;
}

img {
    max-width: 100%;
}

a {
    color: #000000;
}

.hidden {
    display: none !important;
}


/* =========================================================
   3. MAIN LAYOUT
   ========================================================= */

.container {
    flex: 0 0 90% !important;
    max-width: 90% !important;
    text-align: center !important;
}

#header-container {
    margin-bottom: 37px;
}

.item_container {
    margin: 0;
}


/* =========================================================
   4. HERO CONTENT
   ========================================================= */

.giftcards {
    font-family: "azo-sans-uber", sans-serif;
    font-size: 50px;
    font-weight: 700;
    font-style: normal;

    line-height: 1;
    text-align: left;

    padding: 20px 40px;

    color: #ffffff;
    border-radius: 25px;
}

.SubHeading {
    font-family: "azo-sans-web", sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
}

.SubHeading2 {
    font-family: "azo-sans-web", sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
}


/* =========================================================
   5. FORM
   ========================================================= */

form.path_form {
    padding: 40px;

    text-align: left;

    background: #ffffff;

    border-radius: 7px;

    box-shadow: 0 0 20px rgba(211, 211, 211, 0.41);
}

#step_1 form.path_form {
    display: block;
}

.form-group {
    margin-bottom: 5px;
}

label {
    display: inline-block;

    max-width: 100%;

    margin-bottom: 5px;

    font-size: 18px;
    font-weight: 700;

    color: #000000;
}

#step_1 label {
    color: #000000;
}

#item_4_label {
    display: none !important;
}

#item_2_label,
#item_3_label,
#item_6_label {
    padding-top: 10px;
}


/* =========================================================
   6. FORM FIELDS
   ========================================================= */

.form-control {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 50px;

    padding: 0.375rem 0.75rem;

    font-size: 1rem;
    line-height: 1;

    color: #495057;

    background-color: #ffffff;
    background-clip: padding-box;

    border: 2px solid #5fca80;
    border-radius: 0.25rem;

    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}


/* First name + last name on same row */

#item_2_container,
#item_3_container {
    display: inline-block;

    width: 45%;

    margin-left: 0;
    margin-right: 5%;

    vertical-align: top;
}

#item_3_container {
    width: 48%;
    margin-right: 0;
}

#item_2_container .col,
#item_3_container .col {
    width: 100%;
}


/* Gender container */

#item_4_container {
    float: left;
    clear: both;

    width: 100%;

    padding-left: 20px;
}


/* =========================================================
   7. CONSENT CHECKBOX
   ========================================================= */

#item_190_container {
    clear: both;
}

#item_190_container .form-check {
    display: flex !important;
    align-items: flex-start;

    position: relative;

    width: 100%;

    padding-left: 0;
}

#answer_12042 {
    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    margin-top: 6px;
    margin-right: 14px;
  margin-left:0;

    cursor: pointer;
}

#item_190_container .form-check-label {
    flex: 1;

    padding: 0;
    margin: 0;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;

    color: #000000;
}

p.optin-text {
    margin: 0;
    padding: 0;
margin-left:60px;
    font-weight: 400;
}


/* =========================================================
   8. VALIDATION
   ========================================================= */

.error,
label.error {
    color: red;
}

label.error {
    font-size: 0.8em;
}


/* =========================================================
   9. PRIMARY CTA
   ========================================================= */

.btn-primary {
    width: 100%;

    margin-top: 20px;
    padding: 2%;

    font-size: 34px;

    color: #ffffff;

    background-color: #5fca80;
    border-color: #5fca80;

    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff;

    background-color: #348237;
    border-color: #348237;
}


/* Mobile hero CTA */

.nupp {
    width: 100%;

    padding: 10px;

    font-size: 20px;
    font-weight: 900;

    color: #ffffff;

    background-color: #5eca80;

    border: 0;
    border-radius: 25px;

    cursor: pointer;
}


/* =========================================================
   10. TEXT-LIKE BUTTONS / LINKS
   ========================================================= */

button.linkstyle,
.linkstyle {
    display: inline;

    padding: 0;
    margin: 0;

    color: darkblue !important;

    background: none;
    border: none;

    font: inherit;

    text-decoration: underline;

    cursor: pointer;
}

#footer-container .linkstyle {
    color: #ffffff !important;
}


/* =========================================================
   11. SECONDARY / MODAL BUTTONS
   ========================================================= */

.btn-secondary {
    color: #000000;

    background-color: #ffffff;

    border-color: #5fca80;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #ffffff;

    background-color: #348237;

    border-color: #348237;
}

.modal-dialog {
    max-width: 700px;
}

.modal-dialog.modal-lg {
    max-width: 900px;
}

.modal-body {
    text-align: left;
}

.modal-body h5,
.modal-body h6 {
    color: #000000;
}

.modal-body p {
    line-height: 1.5;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

#footer-container {
    margin-top: 50px;

    color: #ffffff;

    background-color: rgba(0, 0, 0, 0.5);

    text-align: center;
    line-height: 1.3;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#footer-container h6 {
    line-height: 1.4;
}

.footerlink {
    color: lightcyan;
}


/* =========================================================
   13. MOBILE
   ========================================================= */

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

    html,
    body {
        font-size: 14px;
    }


    /* Main layout */

    .container {
        width: 100%;
        max-width: 100% !important;

        padding-right: 15px;
        padding-left: 15px;

        margin-right: auto;
        margin-left: auto;

        flex: 0 0 100% !important;
    }


    /* Form */

    form.path_form,
    #step_1 form.path_form {
        width: 100%;

        padding: 15px;

        text-align: left;

        background: #ffffff;

        border-radius: 7px;
    }


    /* First + last name stack */

    #item_2_container,
    #item_3_container {
        display: block;

        width: 100%;

        margin-right: 0;
    }


    #item_4_container {
        padding-left: 0;
    }


    /* CTA */

    .btn-primary {
        padding: 4%;

        font-size: 24px;
    }


    /* Consent */

    #answer_12042 {
        width: 50px;
        height: 50px;

        margin-right: 10px;
    }

    #item_190_container .form-check-label {
        font-size: 12px;
    }
  #item_190_container p{
margin-left: 60px; !important
}
    /* Modal */

    .modal-dialog,
    .modal-dialog.modal-lg {
        max-width: 100%;

        margin: 10px;
    }


    /* Hero */

    .giftcards {
        padding: 10px;

        font-size: 38px;
    }


    /* Footer */

    #footer-container h6 {
        font-size: 11px;
    }
}


/* =========================================================
   14. DESKTOP ONLY
   ========================================================= */

@media screen and (min-width: 780px) {

    .nupp {
        display: none;
    }
}


/* =========================================================
   15. SMALL PHONES
   ========================================================= */

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

    h2 {
        font-size: 1.5rem;
    }

    .giftcards {
        font-size: 32px;
    }

}

/* Hide dynamic content from step 2 onwards */
body.step_2 .dynamic-content,
body.step_3 .dynamic-content,
body.step_4 .dynamic-content,
body.step_5 .dynamic-content,
body.step_6 .dynamic-content,
body.step_7 .dynamic-content,
body.step_8 .dynamic-content,
body.step_9 .dynamic-content {
    display: none !important;
}

/* Center content on step 2 and later */
body.step_2 #body,
body.step_3 #body,
body.step_4 #body,
body.step_5 #body,
body.step_6 #body,
body.step_7 #body,
body.step_8 #body,
body.step_9 #body {
    text-align: center !important;
}

body.step_2 #left-container,
body.step_2 #right-container,
body.step_3 #left-container,
body.step_3 #right-container,
body.step_4 #left-container,
body.step_4 #right-container,
body.step_5 #left-container,
body.step_5 #right-container,
body.step_6 #left-container,
body.step_6 #right-container,
body.step_7 #left-container,
body.step_7 #right-container,
body.step_8 #left-container,
body.step_8 #right-container,
body.step_9 #left-container,
body.step_9 #right-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body.step_2 form.path_form,
body.step_3 form.path_form,
body.step_4 form.path_form,
body.step_5 form.path_form,
body.step_6 form.path_form,
body.step_7 form.path_form,
body.step_8 form.path_form,
body.step_9 form.path_form {
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}