/*
 Theme Name:   Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/
/* general */
@font-face {
    font-family: Fira Sans;
    src: url(fonts/FiraSans-Regular.ttf) format('truetype'); 
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html{scroll-behavior: smooth;}
.container{max-width: 800px !important;}

/* hero-section */
.hero-section{position: relative;}
.hero-section:before{content: ''; position: absolute; background: url(img/hero-before.png) no-repeat; 
    top: 0; left: 0; width: 40%; height: 100%; background-size: cover; z-index: -3;
    background-position: right;
    opacity: 0;
    animation: fade-up 1000ms ease-in-out 2000ms forwards;
}
.hero-section:after{content: ''; background: url(img/hero-after.png) no-repeat;
    position: absolute;
    left: 0; bottom: 0; 
    width: 209.017px;
    height: 397px;
    background-size: contain;
    background-position: top left;}
.hero-container{position: relative; padding-top: 40px; padding-bottom: 40px;background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 23.44%, #FFF 70.31%, rgba(255, 255, 255, 0.00) 100%);}

.partners{
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E2E2E2;}
.partners > div{gap: 40px;}
.hero-title{
    color: #000;
    margin-right: auto;
    font-family: Fira Sans;
    font-size: 76px;
    font-style: normal;
    font-weight: 700;
    line-height: 96.688%; /* 73.483px */
    letter-spacing: -0.38px;}
.hero-sub-heading{
    font-weight: 400;
    line-height: 103.688%;
}
a.sub-heading{color: #FFF;
    font-family: Fira Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 96.688%; /* 23.205px */
    letter-spacing: -0.12px;
    border-radius: 1px;
    /* padding: 15px 25px; */
    margin-top: 40px;
    margin-bottom: 40px;
    background: #2389C2;
    outline: 20px solid #2389C2;}
a.sub-heading:active, a.sub-heading:hover{color: #FFF; text-decoration: none;}


.prize-container{
    right: 25px;
    top: 120px;
    height: max-content;
    width: 25%;
    position: fixed;
    z-index: 1;
}

.prize-content{
    margin-top: 43px;
    padding: 35px;
    border-radius: 17.016px 17.016px 0px 17.016px;
    background: #F3FBFF;
    position: relative;
    padding-top: 120px;
}
.prize-content::before{
    content: '';
    position: absolute;
    background: url(img/gift-pack.png) center no-repeat;
    top: 20px;
    left: 70px;
    width: 65px;
    height: 66px;
    background-size: contain; 
    z-index: 1;
}
.prize-content::after{
    content: '3x';
    background: #F3FBFF;
    width: 124.168px;
    height: 124.168px;
    position: absolute;
    top: 0;
    left: -60px;
    border-radius: 50%;
    color: #000;
    font-family: Fira Sans;
    font-size: 55px;
    font-style: normal;
    font-weight: 500;
    line-height: 219%;
    text-align: center;
}
.prize-content p{
    color: #3D3D3D;
    font-family: Fira Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 157.188%;
}
.prize-content ul{
    padding-left: 20px;
}
.prize-content ul li{
    color: #3D3D3D;
    font-family: Fira Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 181.188%;
}
@keyframes fade-up {
    1%{
        opacity: 0;
    } 
    25%{
        opacity: 0.25;
    } 
    50%{
        opacity: 0.5;
    } 
    75%{
        opacity: 0.75;
    } 
    100%{
        opacity: 1;
    }

}
.hero-desc,ul.desc-points li{color: #3D3D3D;
font-family: Fira Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 173.188%; 
position: relative; padding-bottom: 20px;
padding-top: 10px;}
.hero-desc:last-child{padding-bottom: 120px;}
.hero-desc:last-child:before{
    content: 'Ispuni anketu';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    color: #E53045;
    text-align: center;
    font-family: Fira Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 181.188%;
}
.hero-desc:last-child:after{content: ''; position: absolute; 
    background: url(img/down-arrow.png) center no-repeat;
    left: 0;
    right: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto; height: 60px;
    width: 12px; background-size: 100%;}

.hero-desc a,.hero-desc a:hover,.hero-desc a:active{
    color: #2389c2;
    text-decoration: none;
	font-weight: 700;
}
ul.desc-points{ list-style: none !important;}
ul.desc-points li{font-weight: 600;}
ul.desc-points li::before {
    content: "\2022";  
    color: #E3132B; 
    font-weight: bold; 
    display: inline-block; 
    width: 1em; 
    margin-left: -1em; 
  }
/* quiz section */
.quiz-section{position: relative;
    background: #DEF3FD; padding-bottom: 65px; min-height: 800px;}

/* quiz form */
.fluentform *{ font-family: Fira Sans !important;}
.ff-step-container {
    position: relative;
    max-width: 500px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.ff-step-body{counter-reset: count;}
.fluentform-step{position: relative;counter-increment: count 1;}
.fluentform-step:before{
    content: counter(count, decimal) '. ';
     color: #2389C2;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;}
.ff-el-progress-status{display: none;}
.ff-el-input--label {
    width: 100%;
    text-align: center;
    margin-bottom: 10px !important;
}
.contact-section .ff-el-input--label{text-align: left;
    margin-bottom: unset !important;}
.ff-el-input--label label {
    margin-bottom: 20px !important;}
.ff-el-form-check.ff-el-form-check- label{
    padding: 10px 23px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 1);
    background: #FFF;
    color: #000;
    margin-bottom: 12px !important; width: 100%;}
.ff-el-form-check.ff-el-form-check- label input{display: none;}
.ff-el-form-check.ff-el-form-check- input[type='radio']:after{content: unset !important;}
.fluentform .ff-el-tooltip > svg{display: none;}
.fluentform .ff-el-tooltip:after{content: attr(data-content);color: #2389C2;font-size: 14px;}
.ff-el-progress {
    position: absolute;
    margin-top: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px !important;
    background-color: #FFF !important;
}
.ff-el-progress-bar {
    background-color: #2389C2 !important;
}

.fluentform a, .fluentform a:hover, .fluentform a:active {
    color: inherit;
    text-decoration: underline;
}
.ff-name-field-wrapper .ff-t-container {
    flex-direction: column;
}
.ff-default .ff-el-input--label label{color: #2389C2 !important;
font-size: 26px !important;
font-weight: 600 !important;}
.ff_item_selected label.ff-el-form-check-label:not(.ff-el-tc.ff_item_selected label.ff-el-form-check-label) {
    background: #F3FBFF;
}
.ff-el-group input[type=checkbox]:after{background-color: #FFF !important; border-radius: unset !important; border-color: #FFF !important;}
.ff-el-group input[type=checkbox]:checked:after{background-color: #2389C2 !important;  border-radius: unset !important; border-color: #2389C2 !important;}
.terms-n-cond-container label {
    color: black;
}
.step-nav:not(.show-nav-btns .step-nav){display: none;}
.show-nav-btns .step-nav .ff-btn-prev{display: none;}
.fluentform  button{width: 100%;}
.ff-message-success {
    border: unset;
    margin-top: 100px;
    box-shadow: unset;
}
/* habits */
.habits-section{padding-top: 100px; padding-bottom: 60px; position: relative;}
.habits-section:before{content: ''; background: url(img/habit-before.png) no-repeat; position: absolute; top: 40px; left: 0; background-size: contain; height: 600px; width: 600px; z-index: -1;}
.habits-section:after{content: ''; background: url(img/walking-icon.png) no-repeat; position: absolute; top: 500px; left: 80px; background-size: contain; height: 250px; width: 140px;}
.habits-section .container{
    gap: 40px;
}
.habits-section h2{
    color: #151515;
    font-family: Fira Sans;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.25px;
}
.habits{gap: 40px;}
.habit-img{
    background: #F3FBFF; 
    border: 2px solid #DEF3FD;
    border-radius: 50%;
    width: 115.966px;
    height: 115.966px;
    position: relative;
}
.habit-img:before{
    content: '';
    background: url(img/empty-glass.png) no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;
    width: 35px;
    height: 44px;
}
.walking-img:before{background-image: url(img/walking-icon.png);
    width: 32px;
    height: 49px;}
.food-img:before{background-image: url(img/food.png);width: 70.659px;
    height: 70.888px;}
.habits-section ul li{
    color: #040404;
    font-family: Fira Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 181.188%;
}
.habits-section img{
    margin-left: auto;
    display: block;
    position: relative;
}
.habits-section .img-container{position: relative;}
.habits-section .img-container:before{
    content: '';
    background: url(img/empty-glass.png) no-repeat;
    background-size: contain;
    left: 10px;
    bottom: 100px;
    position: absolute;
    width: 222px;
    height: 279px;
    z-index: 1;
}
/* footer */
.footer-section{
    background: #F3FBFF;
    padding-top: 80px;
    padding-bottom: 120px;
}
.footer-section p, .footer-section a{
    color: #3D3D3D;
    text-align: center;
    font-family: Fira Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 173.188%;
    text-decoration: none;
}
.footer-section a:hover, .footer-section a:active{
    text-decoration: underline;
    color: #3D3D3D;

}
/* laptop */
@media screen and (max-width: 1540px) {
    .container{max-width: 655px !important;}
    a.sub-heading{font-size: 23px;}
    .prize-content p, .prize-content ul li{font-size: 15px;}
    
    .habits-section .img-container:before{width: 142px;
        height: 179px;}
}

/* tablet */
@media screen and (max-width: 1024px) {
	.hero-section:after{    width: 110.017px;
        height: 254px;}

    .partners{justify-content: flex-end; width: 100%;}
    .hero-title{font-size: 55px;}
    .prize-container{position: unset; margin-top: 20px; width: unset;
        margin-bottom: 50px;}
    .hero-prize-container{padding: 20px;}
    .quiz-prize .hero-prize{margin-bottom: unset;}
    .quiz-prize .hero-prize::before {
        top: 0;
        bottom: unset;
        width: 178px;
        height: 212px;
    }
    .quiz-prize .bg-circle::after{
        bottom: unset;
        left: unset;
        top: -120px;
		right: -53px;
		width: 150px;
		height: 150px;
		border-radius: 150px;}
    .bg-circle{position: relative;}
    .bg-circle::after {
        top: 0px;
        bottom: unset;
        left: unset;
        right: -102px;
    }
	.quiz-questions {
		margin-top: 80px;
	}
    /* habits */
    .habits-section .img-container:before{width: 142px;
        height: 179px;}
    .habits-section:before,.habits-section:after{content: none; }
    
}
/* mobile */

@media screen and (max-width: 767px) {
    .hero-section {background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, #FFF 16%);}
    .hero-section:before {content: unset;}
    .hero-container:before {
        top: 281px;
        left: -69px;
        width: 200px;
        height: 200px;
        border-radius: 200px;}
    .hero-section:after{width: 86.017px;
        height: 198px;}
    .hero-title{font-size: 45px; padding: 15px 10px;}
    .hero-prize-container{margin-top: 20px;}
    .hero-prize{font-size: 22px;}
    .prize-content::after{left: 0; right: 0; top: -57px; margin-left: auto; margin-right: auto;}
    .hero-desc{font-size: 18px; text-align: left;}

     .quiz-section{min-height: 550px;}
    .quiz-questions{margin-top: 20px;}
    .quiz-prize .hero-prize-container {margin-top: unset; width: 180px;}
    .prize-container{margin-bottom: 40px; margin-top: 20px;}
    /* habits */
    .habits {gap: 10px;}
    .habits-section .img-container:before{width: 79px;
        height: 87px;}
}