@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Ubuntu:wght@700&display=swap');

.participation .join-stage-header .text:first-child {
    font-family: "brevia", sans-serif !important;
font-weight: 800 !important;
font-style: normal;
color: #374168 !important;
font-size: 2em;

}
.participation .join-stage-header .text:last-child{
    font-family: "reklame-script", sans-serif !important;
font-weight: 400 !important;
font-style: normal;
    color: #111 !important;
font-size:16px !important;
}
.container.d-flex.flex-column{
flex-grow:0 !important;
}

#sec_56e632 {
    min-height: 10px !important;
}


/**FORM - Change Button Color**/
.button-custom-style {
    color: #FFF;
    font-family: 'Poppins', sans-serif !important;
font-style: normal;
    border-radius:0px !important;
    background: #c30a18 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none !important;
    font-size: 1.0em !important;
    font-family: "ff-scala-sans-pro", sans-serif !important;
font-weight: 700!important;
font-style: normal;
    letter-spacing: 0.1em!important;
    background-color: none !important;
    background: #f4a87e !important;
    border: none !important;
    font-size: 1.2em !important;
    /*height: inherit;*/
    line-height: 1;
    -moz-border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    border-radius: 50px !important;
    -moz-transition: all ease-out 0.25s;
    -webkit-transition: all ease-out 0.25s;
    transition: all 0.5s;
}

.participation .form-control {
    border: 1px solid #d7d7d8;
    padding: 9px 15px;
    height: auto;
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
    font-size: var(--normal-text)!important;
    border: solid 1px var(--normal-color-opacity-20);
    background-color: #ffffff1c;
    color: var(--normal-color);
    min-width: 226px;
    min-height: 40px;
    max-height: 50px;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0px !important;
}

.container-fluid {
    font-family: var(--referral-count-font);
    padding: 0;
    border-radius: 0px !important;
}

.container-fluid .has-border {
    padding: 20px 30px;
    border-radius: 15px;
    border: solid 1px #f4a87e;
    background-color: #fff;
}
.container-fluid .shopify-counter {
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
    font-size: 48px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
}

.referral-bubble-description {
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
}

#sec_9ad5c3 .logo-container img {
    max-height: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    width: 100px !important;
}

.logo-container {
    padding-bottom: 30px !important;
}

#sec_9ad5c3 {
    min-height: 600px !important;
    background-position: center 15% !important;
}

#embedFormContainer-sec_9ad5c3 {
    margin-top: 30px !important;
}

/*YOUR COUPONS Section - Change
BG Color & Heading Color*/
#sec_548f58{
    background-color: #f4a87e !important;
}

h1.heading{
    color:white !important;
}


/* COUPON */

#sec_aa2b75 {
    background: #f4a87e !important;
}

#sec_aa2b75 .heading {
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
}

#sec_aa2b75 p{
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
}

/* REWARD */
#sec_08531e .subheading {
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
}

.container-fluid, .no-coupons {
    font-family: "ff-scala-sans-pro", sans-serif  !important;
font-weight: 400  !important;
font-style: normal;
}

div.milestone .referrals-bubble {
    border: 3px solid #004b23 !important;
    color: #004b23 !important;
    background-color: #f8f6f6 !important;
}

div.milestone .progress-line, div.milestone .progress-line-right, div.milestone .progress-line-left {
    background-color: #f8f6f6 !important;
}

div.milestone .progress-line-left.completed>div {
    background-color: #004b23 !important;
}

/**To change the Progress Line
& Milestone Number colors
go to Sections > Milestone >
Primary Color**/ /