:root {
    --main: #000;
    --hero: #97E2FF;
    --g-blue: #289CE1;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

@font-face {
    font-family: Raleway;
    src: url(../assets/fonts/Raleway-VariableFont_wght.ttf);
}

@font-face {
    font-family: OpenSans;
    src: url(../assets/fonts/OpenSans-Regular.ttf);
}

@font-face {
    font-family: OpenSansBold;
    src: url(../assets/fonts/OpenSans-SemiBold.ttf);
}


body {
    margin: 0;
    background-color: #ffffff;
    font-size: 1rem;
    color: #18264c;
    font-family: OpenSans;
}

#main-block {
    font-family: 'Raleway', sans-serif;
    font-weight:400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
	font-weight:600;
}

h1 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.25rem;
}

.p0{
	padding:0px;
}

.pl0{
	padding-left:0px;
}

.icon-menu-line {
    width: 26px;
    height: 2px;
    background: #ffffff;
    display: block;
    margin: 5px 0;
}

.custom-line {
    width: 100px;
    height: 0.2rem;
}

.who-text{
    max-width: 600px;
    margin: 0 auto;
}

.profit_text{
	max-width: 600px;
    margin: 0 auto;
	margin-bottom: 35px;
}

.custom-line.line-white {
    background-color: #fff;
}

.custom-line.line-purple {
    background-color: #D84AD0;
}

.custom-line.line-blue {
    background-color: #289CE1;
}

.text-blue {
    color: #289CE1;
}

.header_list{
	color:#3e74ff;
    max-width: 400px;
    font-size: 24px;
    margin-top: 25px;
}

.custom-line.line-orange {
    background-color: #F4AB00;
}

.custom-line.line-center {
    margin: 2rem auto;
}

.navbar-light .navbar-toggler {
    border: none;
}

.page-section {
    padding: 10px 0 10px;
    overflow: hidden;
}

.navbar {
	width: 100%;
}

.subtitle{
	padding: 0 !important;
    color: #3e74ff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 4px;
}

#header-section {
    font-family: Avenir-Book;
}


#contact-section{
    background-color: #ffffff;
}


#contact-section{
    padding-bottom: 40px;
}

#footer-section{
    background-color:#ecf4ff;
}

#basic-section,
#header-section,
#profit-section,
#cards-section,
#who-section {
    background: #ffffff;
    overflow: visible;
}

.hidex {
    width: 100%;
    overflow-x: hidden
}

#basic-section p{
    margin-top: 2rem;
    text-indent: 2rem;
}

#basic-section p.no-indent{
    text-indent: 0;
}

.text-underline {
    text-decoration: underline;
}

span.text-weight {
    font-weight: 600;
}

#who-section p {
    padding: 2rem;
}

#cards-section img,
#who-section img{
    width: 100%;
    max-width: 900px;
}

.modal-content {
    border-radius: 15px;
    font-size: 0.75rem;
}

#contactForm input ,
#contactForm textarea {
    height: 48px;
    border-radius: 4px;
    border: solid #ced4da;
    background: #ffffff;
}

#header-section img.masthead-avatar {
    position: absolute;
    top: 65px;
}

.btn.btn-contact-submit {
    color: #fff;
    border-width: 3px;
    border-color: #fff;
    border-radius: 10px;
    font-size: 1rem;
    padding: 12px 70px;
    font-weight: 400;
    text-transform: uppercase;
}

.btn.btn-contact-submit:hover {
    background-color: #fff;
    color: #FC5457;
}

#cards-section .card {
    background-color: transparent;
    border: none;
    padding-top: 25px;
}

#footer-section {
    padding-bottom: 0px;
    padding-top: 25px;
    font-size: 1rem;
    text-align: center;
    color: slategrey;
    margin-top: 100px;
}


#footer-section a{
    color: slategrey;
}


#footer-section #socials a {
    padding: 15px;
}

#footer-section #socials img {
    max-width:25px;
}

#stick-btn{
    position: absolute;
    z-index: 1020;
    margin-top: -165px;
}

#stick-login{
    position: relative;
    z-index: 1020;
	float: right;
    font-family: OpenSans;
}

#stick-btn.center{
    left: 50%;
    transform: translate(-50%, 0);
}


.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
    z-index: 1020;
}

.btn.btn-contact {
    color: #fff;
    border-width: 2px;
    border-radius: 4px;
    text-transform: uppercase;
    width: 250px;
    background-color: #2c41ab;
    border-color: #2c41ab;
}

.btn.btn-login {
    color: #fff;
    border-width: 2px;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: #3e74ff;
    border-color: #3e74ff;
}

#profit-section {
    min-height: 180px;
}

#profit-section .btn.btn-contact {
    width: 400px;
    border-width: 4px;
    border-radius: 8px;
    font-size: 2rem;
    margin-top: 20px;
}

.btn.btn-contact:hover {
    background-color: transparent;
    color: #2c41ab;
	font-weight: 700;
}

.btn.btn-login:hover {
    background-color: white;
    color: #3e74ff;
}

#navbar-main .navbar-brand img {
    width: 220px;
}

.overlay-content .overlay-line {
    width: 110px;
    height: 1px;
    border: solid 1px #fff;
    display: block;
}

#navbar-main a{
    letter-spacing: 1.2px;
}


#header-section {
    overflow: hidden;
    position: relative;
}

/*POPUP*/
.popup-container{
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    height:100%; 
    background:#00000022; 
    align-items: center; 
    justify-content: center;
    z-index: 1200;
    display: none;
}

.popup{
    background-color: white;
    border-radius: 40px;
    text-align: center;
    max-width: 750px;
}

.popup-left{
    background: #1b2649;
    color:white;
    border-radius: 40px 0 0 40px;
    text-shadow: 2px 2px 4px #000000;
    position: relative;
}

.popup-div-0 h2{
    margin: 3vh 0 0 0;
}

.popup-logo{
    margin: auto;
    max-width: 90px;
}

.popup-right{
    padding: 6vh 2.5vw;
    position: relative;
}

.div-close{
    position: absolute;
    right: 4vh;
    top: 2vh;
}

#close1:hover{
    cursor:pointer;
    opacity: 0.8;
}

#close2:hover{
    cursor:pointer;
    opacity: 0.8;
}

.popup-div-2{
    margin: 5vh 0;
}

.popup-btn-1{
    display: block;
    background: #4c74f5;
    color: white !important;
    font-weight: 600;
    padding: 1.5vh 0;
    margin: 1vh auto;
    width: 70%;
    border-radius: 200px;
    font-size: 14px;
}

.popup-btn-1:hover{
    cursor:pointer;
    opacity:0.8;
}

.popup-btn-2{
    display: block;
    background: #92a5cc;
    color: white !important;
    font-weight: 600;
    padding: 1.5vh 0;
    margin: 1vh auto;
    width: 70%;
    border-radius: 200px;
    font-size: 14px;
}

.popup-btn-2:hover{
    cursor:pointer;
    opacity:0.8;
}

.popup-text-1{
    text-align: start;
    color: #4c74f5;
    font-size: 18px;
    margin: 0 0 5vh 0;
}

.popup-div-1{
    text-align: start;
}

.popup-div-1 p{
    font-size: 14px;
    font-weight: 500;
}

.popup-text-2{
    font-size:14px;
    color:#1b2649;
    font-weight: 600;
    margin: 0;
}

@media (max-width:798px){

    .popup{
        background-color: white;
        border-radius: 30px;
        text-align: center;
        max-width: 340px;
    }

    .popup-right{
        padding: 4vh 4.5vw;
        position: relative;
    }

    .popup-left{
        border-radius: 30px 30px 0 0;
        padding: 2vh 0;
    }

    .popup-text-1{
        font-size: 16px;
        margin: 0 0 3vh 0;
    }

    .popup-div-2{
        margin: 3vh 0;
    }

    .popup-text-2{
        font-size:13px;
    }

    .popup-div-1 p{
        font-size: 13px;
        font-weight: 500;
    }

    .popup-btn-1{
        font-size: 13px;
    }

    .popup-btn-2{
        font-size: 13px;
    }

}

@media (max-width: 420px){
	h1{
		font-size:2rem;
		margin: 35px 0px 10px 0px;
		text-align: center;
	}
	.header_list{
		font-size:20px;
		text-align: center;
		margin-top: 30px;
		font-family: 'Raleway', sans-serif;
	}
}

@media (max-width: 575px) {

    #profit-section .btn.btn-contact {
        width: 250px;
        font-size: 1rem;
    }

    .mobile-illustration {
        right: -80px;
        bottom: 0;
        background-image: url(../assets/img/mobile_illustration_scene.svg);
        background-repeat: no-repeat;
        background-position: 0 0;
        position: absolute;
        float: right;
        width: 285px;
        height: 170px;
        background-size: cover;
    }

    .mobile-illustration2 {
        right: -80px;
        top: 0;
        background-image: url(../assets/img/mobile_illustration_scene.svg);
        background-position: 0px -170px;
        background-repeat: no-repeat;
        position: absolute;
        width: 285px;
        height: 248px;
        background-size: cover;
    }

    .overlay-content .overlay-line {
        width: 69px;
    }

    .custom-line {
        width: 60px;
        height: 0.1rem;

    }
	
	.custom-line.line-center{
		margin: 0 auto;
		margin-top: 100px;
		
	}
	
	#who-section p {
    padding: 0rem 2rem 2rem 2rem;
}


    #cards-section .card .custom-line {
        margin-top: 0;
    }


    #navbar-main .navbar-brand img {
        width: 130px;
    }

    #header-section img.mobile-head-img {
        position: absolute;
        right: -100px;
        bottom: -80px;
    }

    #trust-section .masthead-avatar,
    #profit-section .masthead-avatar {
        width: 100px;
        margin: 0;
    }

    #contact-section,
    #trust-section,
    #header-section,
    #profit-section{
        padding: 10px 15px;
    }
    #stick-btn{
        margin-top: -25px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    #profit-section h1,
    #trust-section h1 {
        font-size: 24px;
        margin: 24px 0;
    }

    .btn.btn-contact {
        margin: 40px auto;
    }
}

@media (min-width: 576px) {
    #main-block{
            margin: 90px 0;
    }

    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (max-width: 767px) {
	
	#header-section img.masthead-avatarmob {
        width:100%;
    }
	
    #contactForm {
        margin-bottom: 30px;
    }

    #footer-section #socials img {
        width: 32px;
    }

    #footer-section #footer-logo {
        width: 110px;
    }

    .card-block h3 {
        margin-bottom: 20px;
    }

    .btn.btn-contact-submit {
        width: 100%;
    }

    #contactForm textarea {
        height: 96px;
    }
    #header-section ul {
        padding-inline-start: 20px;
        margin-bottom: 20px;
    }

    #header-section img.masthead-avatar {
        width: 600px;
    }

    .btn.btn-contact {
        font-size: 1rem;
        padding: 16px 40px;
    }
}


@media (min-width: 768px) {

    body {
        font-size: 1.25rem;
    }


    h3 {
        font-size: 1.5rem;
    }
	
	#header-section img.masthead-avatarmob {
        display:none;
    }

    #contactForm {
        margin-bottom: 70px;
    }

    #profit-section h1,
    #trust-section h1 {
        margin: 50px 0;
    }

    #header-section .header-text {
        margin-top: 50px;
    }

    #footer-section #cpr {
        text-align: left;
    }

    #footer-section #socials {
        text-align: right;
    }

    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .btn.btn-contact {
        font-size: 1.2rem;
        padding: 16px 24px;
    }

    #cards-section .card-block h3{
        margin-bottom: 20px;
    }
	
	.navbar-expand-md {
		justify-content: space-between !important;
	}
}

@media (max-width: 991px) {
    #profit-section img {
        margin-top: 0;
    }

    #trust-section img {
        margin-top: 130px;
    }

    #trust-section h1,
    #profit-section h1 {
        font-size: 40px;
    }

    #trust-section,
    #profit-section {
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    #header-section img.masthead-avatar {
        display:none;
    }
}
@media (min-width: 576px) and (max-width: 1249px) {
    #header-section img.masthead-avatar {
        margin-left: 50%;
    }
}
@media (min-width: 1250px) {
    #header-section img.masthead-avatar {
        right: 65px;
		max-width: 830px;
    }
}

@media (min-width: 1265px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1230px;
    }
    #header-section {
        min-height: 680px;
    }
	h1{
		font-size:3.2rem;
	}
	#header-section img.masthead-avatar {
		right:0px;
		max-width:740px;
	}
}


@media (min-width: 1025px) and (max-width: 1264px) {
	#stick-btn{
		margin-top:-80px;
	}
	#header-section img.masthead-avatar{
		right: 0px;
		max-width: 680px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
    #stick-btn {
		margin-top:-90px;
	}
	#header-section img.masthead-avatar {
		margin-left: 40%;
		max-width: 650px;
	}
}

@media (min-width: 580px) and (max-width: 767px) {
	#header-section img.masthead-avatar{
		display:none;
	}
	.header_list{
		max-width:767px;
		text-align:center;
		font-size:35px;
		font-family: 'Raleway', sans-serif;
		
	}
	.pl0{
		max-width: 240px;
	}
	h1{
		margin: 35px 0px 10px 0px;
		text-align: center;
	}
}

@media (min-width: 540px) and (max-width: 720px) {
    h1{
		margin: 35px 0px 10px 0px;
		text-align: center;
	}
	.header_list{
		font-size: 25px;
		text-align: center;
		margin-top: 30px;
		font-family: 'Raleway', sans-serif;
		max-width: 720px;
	}
}

@media (min-width: 422px) and (max-width: 539px) {
	h1{
		margin: 35px 0px 10px 0px;
		text-align: center;
		
	}
	
		.header_list{
		font-size: 25px;
		text-align: center;
		margin-top: 30px;
		font-family: 'Raleway', sans-serif;
		max-width: 720px;
	}
	
}


.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background: linear-gradient(135deg, #51D7FF, #6C4FD0);
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    padding: 0 50px;
    top: 20%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 0; /* 0 top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 0;
    right: 20px;
}

.overlay-content .overlay-link {
    padding: 20px 0;
    text-align: left;
    font-size: 32px;
    color: #fff;
}

.overlay-content .btn.btn-contact {
    padding: 10px 30px;
    border-color: #fff;
    margin: 20px 0;
    width: max-content;
    font-size: 1rem;
}

.overlay-content .btn.btn-contact:hover {
    background-color: #fff;
    color: #51D7FF;
}

#supply,
#supply .bootstrap-tagsinput .tag,
#demand,
#demand .bootstrap-tagsinput .tag{
    color: #000;
}

.label-info{
    background-color: #97E2FF;
    padding: 5px;
    border-radius: 3px;
}

#supply .bootstrap-tagsinput,
#demand .bootstrap-tagsinput{
    width: 100%;
    padding: 8px;
}

.is-sticky{
    background-color: #1591fe;
    color: #fff;
    padding: 1em;
    text-align: center;
}


@supports (position: sticky) {
    .is-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}