* { font-family: 'product_sansregular', sans-serif; color: #0f1825; }
p { margin: 0 !important; padding: 0 !important; }
a { text-decoration: none !important;}
.header { width: 100vw; height: 100%; background-image: url("../img/bg-heading.webp"); background-position: 0 0; background-size: cover; background-repeat: no-repeat; opacity: 1; }

/* NAVBAR */
.header .navtop { padding: 20px 0px; position: relative; z-index: 1; }
.header .navtop .container { display: flex; align-items: center;}

.header .navtop .logo { width: 56px; height: 56px; margin-right: 20px; }
.header .navtop .logo img { width: 100%; border-radius: 0px; }

@media only screen and (max-width:899px) {
    .header .navtop { padding-top: 30px; }
    .header .navtop .container { padding: 0px 20px; }
}

.header .navtop .title span { font-family: 'product_sansbold'; font-size: 22px; color: #336699;}
.header .navtop .title p.sub { color: #0f182572; font-size: 17px; margin-top: -2px; }

@media only screen and (max-width:899px) {
    .header .navtop .title span { font-size: 17px; }
    .header .navtop .title p.sub { font-size: 13px; }
}

.header .navtop .nav { margin-left: auto; }
.header .navtop .nav ul { padding: 0; margin: 0; }
.header .navtop .nav ul a li { color:#214263 !important; }
.header .navtop .nav ul a li { font-size: 20px; display: inline-block; padding: 10px 30px; }
.header .navtop .nav ul a li.active { border:2px solid #21426346; border-radius: 10px; color: #214263 !important; }
.header .navtop .nav ul a li:last-child { color: #98ccff; }
.header .navtop .nav ul a li:hover { cursor:pointer; color: 172537; opacity: 0.7; }

.header .navtop .toggle { display: none; }

@media only screen and (max-width:899px) {
    .header .navtop .nav { display: none; }
    .header .navtop .toggle { display: block; position: absolute; right: 20px; }
    .header .navtop .toggle img { width: 22px; border-radius: 0; }


    .header .navtop .nav { position: absolute; background:#fff; padding: 20px; width: 90%; top: 70px; border-radius: 10px; }
    .header .navtop .nav ul a li { display: block; padding: 10px; }
    .header .navtop .nav ul a li.active { border: none; color: #98ccff !important;}
}


.header h1 { font-family: 'product_sansbold'; color:#214263; font-size: 6.8rem; line-height: 1.02; font-weight: 700; text-align: center; letter-spacing: -1.4px; margin-bottom: 20px; } 
.header p { color: #0f182572; text-align: center; font-size: 28px; }
.header img { width: 100%; border-radius: 15px; }
.header .padding-intern { padding: 100px 0px; }

.header .primary-button { border:none; font-size:20px; display: block; padding: 24px 48px; border-radius: 10px; background: #336699; color: #fff; font-weight: 600; margin: 0 auto; margin-top: 50px; }
.header .primary-button img { margin-left: 10px; width:20px; filter: invert(100%) sepia(0%) saturate(15%) hue-rotate(209deg) brightness(102%) contrast(106%); }
.header .primary-button:hover { cursor: pointer; background: #4279b1; }

@media only screen and (max-width:899px) {
    .header h1 { font-size: 3rem; }
    .header h1 br { display: none; }
    .header p { font-size: 20px; }
    .header img { width: 95%; margin: 0 auto; display: block; }

    .header .padding-intern { padding: 40px 0px; }
    .header .primary-button { padding: 17px 25px; margin-top: 20px; width: 95%; }
    .header .primary-button img { display: inline-block;}

}



.content-why { width: 100%; height: 100%; background: #16304a; padding: 20% 0px 170px 0px; margin-top: -200px; }
.content-why span { display: block; color: rgba(255,255,255,0.7); text-align: center; font-size: 16px; letter-spacing: 2px; margin-bottom: 20px; text-transform: uppercase; }

@media only screen and (max-width:899px) {
    .content-why { margin-top: -50px; padding: 20% 0px 80px 0px; }
    .content-why span { margin-top: 20px; font-size: 13px; }
}

.content-why .row.logos { margin-bottom: 10%; }
.content-why .row.logos img { width: 60%; margin: 0 auto; display: block; }

@media only screen and (max-width:899px) {
    .content-why .row.logos .col-3 { width: 50%; margin-bottom: 30px; }
}

.content-why .row.whyme { top: 50px; }
.content-why .row.whyme h2 { color: #98ccff; padding: 0; font-size: 20px; margin-top: 30px; letter-spacing: 3px; }
.content-why .row.whyme p { font-size: 65px; color: #fff; font-weight: bold; line-height: 65px; }
.content-why .row.whyme img { width: 70%; margin: 0 auto; display: block; }

@media only screen and (max-width:899px) {
    .content-why .row.whyme  { padding: 0px 24px; }
    .content-why .row.whyme p { font-size: 42px; line-height: 50px; }
    .content-why .row.whyme h2 { font-size: 14px; }
}


.content-why .row.whyme p.description { font-size: 18px; color: #fff; line-height: 28px; }

.content-why .row.whyme .sticky { position: sticky; top: 0px; z-index: 1; padding: 0px; }
.content-why .row.whyme .sticky .mask-top { position:absolute; z-index:-1; top:-40px; background: rgba(15,24,37,1); background: linear-gradient(180deg, rgba(15,24,37,0) 0%, rgb(22 47 74) 100%); width: 50%; height: 100px; }
.content-why .row.whyme .sticky .mask-bottom { position:absolute; z-index:-1; bottom:-70px; background: rgba(15,24,37,1); background: linear-gradient(0deg, rgba(15,24,37,0) 0%, rgb(22 47 74) 100%); width: 50%; height: 100px; }

.content-why .row.whyme .sticky ul { margin: 0; padding: 0; margin-left: -13px; margin-top: 30px; }
.content-why .row.whyme .sticky ul li { cursor:pointer; color: rgba(255,255,255,0.6); font-size: 18px; display: inline-block; background: #1c3a5b; padding: 15px 40px; width: 200px; text-align: center; border-radius: 50px; margin-right: 12px; font-family: 'product_sansbold'; }
.content-why .row.whyme .sticky ul li:hover { background: #98ccff; color:#fff; -moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s; }

@media only screen and (max-width:899px) {
    .content-why .row.whyme .sticky .mask-top { width: 100%; height: 110px; }
    .content-why .row.whyme .sticky .mask-bottom { width: 100%; height: 110px; bottom: -97px; }
    .content-why .row.whyme .sticky ul { margin: 0 auto; display: block; margin-top: 40px; }
    .content-why .row.whyme .sticky ul li { font-size: 13px; width: auto; padding: 10px 23.5px; margin-right: 0px; }
    .content-why .row.whyme .sticky ul li:last-child { margin-right: 0px; }
}

.content-why .row.whyme .info1 { display: flex; align-items: center; position: relative; padding: 20% 0px 0px 0px; }
.content-why .row.whyme .info1 .first { width: 50%; }
.content-why .row.whyme .info1 .first h2.small { color:#fff; font-size: 15px; letter-spacing: 3px; margin-bottom: 20px; display: block; position: relative; padding-left: 40px; text-transform: uppercase; }
.content-why .row.whyme .info1 .first h2.small:before { content: ''; width: 25px; height: 1px; background: rgba(255,255,255,0.5); display: block; position: absolute; top: 9px; left: 0; z-index: 0;}
.content-why .row.whyme .info1 .first small { color: rgba(255,255,255,0.6); font-size: 22px; margin-top: 20px; display: block; padding-right: 10%; }
.content-why .row.whyme .info1 .first img.hideDesktop { display: none; }

@media only screen and (max-width:899px) {
    .content-why .row.whyme .info1 { display: block; }
    .content-why .row.whyme .info1 .first { width: 100%; }
    .content-why .row.whyme .info1 .first img.hideDesktop { display: block; width: 95%; margin: 20px auto; }
    .content-why .row.whyme .info1 .first h2.small { font-size: 14px; padding-left: 0px;}
    .content-why .row.whyme .info1 .first h2.small:before { top: 6px; display: none;}
    .content-why .row.whyme .info1 .first p { font-size: 35px; line-height: 40px; }
    .content-why .row.whyme .info1 .first p br { display: none; }
    .content-why .row.whyme .info1 .first small { padding: 0; font-size: 20px; }
    .content-why .row.whyme .info1 .first .primary-button { width: 100%; padding: 17px 25px !important; }
}

.content-why .row.whyme .info1 .first .primary-button { border:none; font-size:20px; display: block; padding: 24px 48px; border-radius: 10px; background: #fff; color: #0f1825; font-weight: 600; margin-top: 30px; }
.content-why .row.whyme .info1 .first .primary-button img { margin-left: 10px; width:20px; filter: invert(9%) sepia(20%) saturate(1159%) hue-rotate(175deg) brightness(95%) contrast(99%); display: inline-block; }
.content-why .row.whyme .info1 .first .primary-button:hover { cursor: pointer; background: #fff; opacity: 0.7; -moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s; }

.content-why .row.whyme .info1 .second { width: 50%; }
.content-why .row.whyme .info1 .second img { width: 90%; margin: 0 auto; display: block; border-radius: 10px;}

@media only screen and (max-width:899px) {
    .content-why .row.whyme .info1 .second img.hideMobile { display: none; }
}

/* HOW IT WORK */
.how-it-work { padding: 100px 0px 100px 0px; }
.how-it-work span { color:#98ccff; font-size: 17px; letter-spacing: 3px; margin-bottom: 20px; display: block; position: relative; text-align: center; text-transform: uppercase; }
.how-it-work h2 { text-align: center; font-size: 70px; font-family: 'product_sansbold'; line-height: 70px; color:#214263; }

.how-it-work .row .col-4 { margin-top: 100px; }
.how-it-work .row img { width: 40px; margin: 0 auto; display: block; margin-bottom: 25px; }
.how-it-work .row img.fast { width: 31px; }
.how-it-work .row img.infinite { width: 61px; }

.how-it-work .row h3 { font-family: 'product_sansbold'; text-align: center; font-size: 28px; color:#214263; }
.how-it-work .row p { color: #0f182572; font-size: 18px; text-align: center; padding: 0px 30px !important; }

@media only screen and (max-width:899px) {
    .how-it-work { padding: 80px 0px 70px 0px; }
    .how-it-work span { font-size: 14px; }
    .how-it-work h2 { font-size: 35px; line-height: 35px; }

    .how-it-work .row .col-4 { width: 100%; margin-top: 70px; }
    .how-it-work .row .col-4 p { font-size: 20px; }
}

.projects { padding: 100px 0px 100px 0px; width: 100vw; height: 100%; background-image: url("../img/bg-heading.webp"); background-position: 0 0; background-size: cover; background-repeat: no-repeat; opacity: 1; }
.projects span { color:#98ccff; font-size: 17px; letter-spacing: 3px; margin-bottom: 20px; display: block; position: relative; text-align: center; text-transform: uppercase; }
.projects h2 { text-align: center; font-size: 70px; font-family: 'product_sansbold'; line-height: 70px; margin-bottom: 100px; color:#214263; }

@media only screen and (max-width:899px) {
    .projects { padding: 80px 10px 100px 10px; }
    .projects span { font-size: 14px; }
    .projects h2 { font-size: 35px; line-height: 35px; }
}

.projects .project-info { display: flex; align-items: center; background: #fff; margin-bottom: 100px; border-radius: 10px;}
.projects .project-info:last-child { margin-bottom: 0;}
.projects .project-info div.first { padding: 70px; width: 50%; }
.projects .project-info div.second { width: 50%;}
.projects .project-info div.second img { width: 100%; border-radius: 0px 10px 10px 0px; }

.projects .project-info span { text-align: left; color:#98ccff; font-size: 15px; letter-spacing: 3px; margin-bottom: 0px; display: block; position: relative; text-transform: uppercase; }
.projects .project-info h2 { text-align: left; margin-top:20px; margin-bottom: 15px; font-size: 60px; line-height: 65px; font-family: 'product_sansbold'; }
.projects .project-info p { color: #0f182572; font-size: 22px; margin-bottom: 30px !important; }
.projects .project-info a { text-decoration: none; }

@media only screen and (max-width:899px) {
    .projects .project-info { display: block; margin-bottom: 40px; }

    .projects .project-info div.first { padding: 20px 20px 0px 20px; width:100%; margin-bottom: 10px; }
    .projects .project-info div.second { width:100%; }
    .projects .project-info div.second img { width: 100%; border-radius: 10px; }

    .projects .project-info span { font-size: 14px; }
    .projects .project-info h2 { font-size: 32px; line-height: 30px; }
    .projects .project-info p { font-size: 20px; }
    
    .projects .project-info img { width: 100%; }
}

.projects .project-info .primary-button { border:none; font-size:20px; display: block; padding: 20px 48px; border-radius: 10px; background: #336699; color: #fff; font-weight: 600; }
.projects .project-info .primary-button img { margin-left: 10px; width:14px; filter: invert(100%) sepia(0%) saturate(15%) hue-rotate(209deg) brightness(102%) contrast(106%); }
.projects .project-info .primary-button:hover { cursor: pointer; background: #4279b1; }

@media only screen and (max-width:899px) {
    .projects .project-info .primary-button { padding: 17px 25px; width: 100%; display: none; }
}


.steps { width: 100%;  background: #16304a; padding: 100px 0px 170px 0px; }
.steps span { color: #98ccff; padding: 0; font-size: 20px; margin-top: 30px; letter-spacing: 3px; text-transform: uppercase; }
.steps h2 { font-size: 65px; color: #fff; font-weight: bold; line-height: 65px; margin-top: 15px; }

.steps .scroll-infinite { width: 83.8%; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; margin-left: auto; margin-top: 70px; }
.steps .scroll-infinite .col { border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px; margin-right: 35px; display: inline-block; width: 36%; vertical-align: top; }
.steps .scroll-infinite .col small { color: #98ccff; font-size: 50px; }
.steps .scroll-infinite .col h3 { color: #fff; font-size: 30px;  }
.steps .scroll-infinite .col p { color: rgba(255,255,255,0.4); font-size: 18px; margin-bottom: 10px !important; white-space:initial; }

@media only screen and (max-width:899px) {
    .steps { padding: 80px 10px 100px 10px; }
    .steps .col-8 { width: 100%; }
    .steps .col-4 { width: 100%; }
    .steps .col-4 .primary-button { padding: 17px 25px; width: 100%; margin-top: 20px; }

    .steps span { font-size: 14px; }
    .steps h2 { font-size: 35px; line-height: 35px; }
    
    .steps .scroll-infinite { width: 96%; }
    .steps .scroll-infinite .col { width: 80%;}
    
    .steps .scroll-infinite { margin-left: 15px; }
    .steps .scroll-infinite .col h3 { color: #fff; font-size: 25px; white-space: break-spaces; }
    .steps .scroll-infinite .col p { font-size: 15px; }
}

@media only screen and (max-width:1376px) {
    .steps .scroll-infinite { width: 90%; }
}

@media only screen and (max-width:1440px) {
    .steps .scroll-infinite { width: 95%; }
}

@media only screen and (max-width:1680px) {
    .steps .scroll-infinite { width: 88.5%; }
}


.steps .primary-button { border:none; font-size:20px; display: block; padding: 24px 48px; border-radius: 10px; background: #fff; color: #0f1825; font-weight: 600;  margin-left: auto; }
.steps .primary-button img { margin-left: 10px; width:20px; filter: invert(9%) sepia(20%) saturate(1159%) hue-rotate(175deg) brightness(95%) contrast(99%); display: inline-block; }
.steps .primary-button:hover { cursor: pointer; background: rgba(255,255,255,0.7); opacity: 0.7; -moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s; }