/***********

/*
FONT FACE
************/
@font-face {
   font-family: 'Brandon Grotesque';
   src: url('../fonts/BrandonGrotesque-Medium.woff2') format('woff2'),
      url('../fonts/BrandonGrotesque-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brandon Grotesque';
   src: url('../fonts/BrandonGrotesque-Regular.woff2') format('woff2'),
      url('../fonts/BrandonGrotesque-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brandon Grotesque';
   src: url('../fonts/BrandonGrotesque-Black.woff2') format('woff2'),
      url('../fonts/BrandonGrotesque-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brandon Grotesque';
   src: url('../fonts/BrandonGrotesque-Bold.woff2') format('woff2'),
      url('../fonts/BrandonGrotesque-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Brandon Grotesque';
   src: url('../fonts/BrandonGrotesque-RegularItalic.woff2') format('woff2'),
      url('../fonts/BrandonGrotesque-RegularItalic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

/**********************************************************************/

/*
1. General
**********************************************************************/

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
   margin: 0;
   padding: 0;
   background-color: #ffffff;
   image-rendering: -webkit-optimize-contrast;
   scroll-behavior: smooth;
}

img {
   max-width: 100%;
}

.l-b-helper {
   display: block;
}

.custom-position {
   position: absolute;
   bottom: 60px;
   left: 0;
   right: 0;
}

/* SLIDER CUSTOM CSS */
.pf-slider-wrapper {
   overflow: visible;
}

.pf-slider-pagination {
   position: absolute;
   bottom: -30px;
}

.pf-slider-pagination.pagination-style-1 li {
   width: 13px !important;
   height: 13px !important;
   background-color: #C9C7D4 !important;
   border-radius: 50% !important;
}

.pf-slider-pagination li.active {
   width: 30px !important;
   height: 13px !important;
   background-color: #EA5735 !important;
   border-radius: 100px !important;
}

.pf-prev-nav.nav-style-1,
.pf-next-nav.nav-style-1 {
   display: none !important;
}

/* ACCORDION MOBILE STYLES*/

.accordion {
   display: none;
}

.accordion__item {
   margin: 5px auto;
}

.accordion__item .accordion__title {
   position: relative;
   display: block;
   padding: 20px;
   margin-bottom: 2px;
   color: #fff;
   font-size: 22px;
   text-decoration: none;
   background-color: #EA5735;
   border-radius: 50px;
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
   cursor: pointer;
}

.accordion__item .accordion-active {
   background-color: #fff;
   color: #000;
   border-radius: 0;
}

.accordion__item .accordion__rotate {
   transform: rotate(225deg);
}

.accordion__item .accordion__content {
   padding: 0;
   margin-bottom: 2px;
   display: none;
   background-color: transparent;
}

.accordion__item .accordion__content img {
   max-width: 100%;
   display: block;
}

.mobile-challenges-slides.brands,
.mobile-challenges-slides.shoppers {
   display: none;
}

.mobile-solutions-slides.brands,
.mobile-solutions-slides.shoppers {
   display: none;
}

.hero {
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   text-align: center;
   color: white;
   background-image: url('../images/hero-backgorund.png');
   background-color: #ea5735;
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   padding-top: 50px;
}

.show-mobile {
   display: none;
}

.hide-mobile {
   display: block;
}


.hero h1 {
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   font-size: 65px;
   color: #fff;
}

.hero h2 {
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   font-size: 50px;
   line-height: 58px;
   color: #fff;
}

.platform .laptop-wrapper-mobile {
   display: none;
}

.hero .next-section-button {
   position: absolute;
   bottom: 80px;
   left: calc(50% - 40px);
   right: calc(50% - 40px);
   width: 67px;
   height: 67px;
   background-color: #fff;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.next-section-button img {
   width: 30px;
}

.main-logo {
   width: 225px;
   cursor: pointer;
}

.main-navigation,
.platform-page-navigation {
   position: fixed;
   top: 0;
   width: 100%;
   padding: 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 700;
}

.main-navigation {
   background-color: rgba(255, 255, 255, 0.8);
   box-shadow: 0px 8px 16px #EA573536;
}

.platform-page-navigation {
   background-color: #fff;
   display: block;
   padding: 0;
}

.main-navigation.over-white .navigation-link a {
   color: #818099;
}

.main-navigation.over-white .navigation-link a.active-section {
   color: #ea5735;
}

.main-navigation.over-white .navigation-link .contact-us {
   border: 3px solid #EA5735;
   color: #EA5735;
}

.main-navigation.over-white .navigation-link .contact-us:hover {
   color: #fff;
   background-color: #EA5735;
}

.main-navigation.over-white.over-platform .navigation-link .contact-us {
   border: 3px solid #EA5735;
   color: #EA5735;
   background-color: transparent;
}

.main-navigation.over-white.over-platform .navigation-link .contact-us:hover {
   border: 3px solid transparent;
   color: #fff;
   background-color: #EA5735;
}

.main-navigation.over-white.over-platform .navigation-link a.active-section::after {
   background-color: #fff;
}

.navigation-link a {
   text-decoration: none;
   color: #fff;
   font-size: 26px;
   line-height: 50px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   position: relative;
   padding: 0 15px;
}

.navigation-link a.active-section {
   color: #ea5735;
}

.navigation-link a.active-section:after {
   content: '';
   background-color: #1C2E51;
   width: 20px;
   height: 4px;
   position: absolute;
   border-radius: 5px;
   left: 15px;
   bottom: 0
}

.navigation-link .contact-us {
   color: #EA5735;
   background-color: #fff;
   border-radius: 1000px;
   padding: 10px 25px;
   border: 3px solid transparent;
   transition: ease-in 0.2s;
}

.navigation-link .contact-us:hover {
   color: #fff;
   background-color: #1C2E51;
}

.platform-page-navigation .navigation-link a {
   color: #818099;
}

.platform-page-navigation .navigation-link .contact-us {
   border: 3px solid #EA5735;
   color: #EA5735;
   background-color: transparent;
}

.platform-page-navigation .navigation-link .contact-us:hover {
   border: 3px solid transparent;
   background-color: #EA5735;
   color: #fff;
}

.platform-page-navigation .navigation-link a.active-section {
   color: #ea5735;
}

.platform-page-navigation .navigation-link a.active-section::after {
   background-color: #1C2E51;
}

.platform-page-navigation .top-nav,
.bottom-nav {
   width: 100%;
}

.platform-page-navigation .top-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 30px;
   box-shadow: 0px 8px 16px #EA573536;
}

.bottom-nav {
   background-color: #EA5735;
   padding: 25px 30px;
}

.bottom-nav-items {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 55px;
}

.bottom-nav .nav-item {
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   font-size: 22px;
   color: #fff;
   line-height: 26px;
   cursor: pointer;
   padding: 20px 30px;
   text-align: center;
}

.bottom-nav .nav-item.active {
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   font-size: 22px;
   color: #1D1D1B;
   border-radius: 38px;
   background-color: #fff;
   padding: 20px 30px;
   line-height: 26px;
}

.mission {
   background-color: #fff;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   padding-top: 160px;
   padding-bottom: 120px;
   position: relative;
   width: 100%;
}

.mission h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   margin-bottom: 60px;
   color: #EA5735;
   text-align: center;
   z-index: 8;
}

.mission .main-info {
   color: #1D1D1B;
   font-size: 40px;
   line-height: 53px;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   text-align: center;
   width: 100%;
   margin-bottom: 95px;
   z-index: 8;
   max-width: 1060px;
}

.mission .logo-in-text {
   max-width: 206px;
}

.mission .info-icons {
   display: flex;
   justify-content: space-between;
   width: 100%;
   max-width: 1220px;
   align-items: flex-end;
   z-index: 8;
}

.mission .info-icon {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.mission .info-icon img {
   margin-bottom: 30px;
}

.mission .info-icon p {
   color: #1C2E51;
   font-size: 40px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   text-align: center;
}

.mission .left-line {
   max-width: 520px;
   position: absolute;
   top: 0;
   z-index: 4;
   left: 0;
}

.mission .right-line {
   max-width: 570px;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 4;
}

.story {
   background-color: rgba(255, 245, 235, 0.88);
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   padding-top: 160px;
   padding-bottom: 100px;
   position: relative;
   width: 100%;
}

.story .line-bgr {
   position: absolute;
   bottom: 0;
   z-index: 4;
}

.story h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   margin-bottom: 60px;
   color: #1C2E51;
   text-align: center;
   z-index: 8;
}

.story .main-info {
   color: #1D1D1B;
   font-size: 40px;
   line-height: 53px;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   text-align: center;
   width: 100%;
   z-index: 8;
   margin-bottom: 60px;
   max-width: 1060px;
}

.story .main-info.second {
   margin-bottom: 0;
}

.story .logo-in-text {
   max-width: 206px;
}

.story-images {
   width: 100%;
   max-width: 1210px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   z-index: 8;
   margin-bottom: 40px;
}

.story-images .image-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.story-images .image-container img {
   max-width: 90px;
   margin-bottom: 20px;
}

.story-images .image-container .story-image-text {
   color: #1D1D1B;
   font-size: 20px;
   line-height: 22px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
}

.story .arrow-right {
   transform-origin: center center;
   transform: rotate(-90deg);
   max-width: 30px;
   margin-top: 35px;
}

.challenges {
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 190px;
   padding-bottom: 100px;
   position: relative;
   width: 100%;
}

.top-left-grapfic {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 4;
   max-width: 510px;
}

.challenges .content-wrapper {
   width: 100%;
   max-width: 1090px;
   z-index: 8;
}

.challenges .slide-content {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.main-slider-container h3 {
   font-size: 36px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 42px;
   margin-bottom: 50px;
   color: #EA5735;
   text-align: left;
}

.content-wrapper .column-1 {
   margin-right: 50px;
   width: 100%;
   max-width: 435px;
}

.content-wrapper .column-2 {
   width: 100%;
   max-width: 515px;
}

.content-wrapper h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   margin-bottom: 50px;
   color: #EA5735;
   text-align: left;
}

.content-wrapper h2.blue-text {
   color: #1C2E51;
}

.content-wrapper .icon-text {
   margin-bottom: 65px;
   display: flex;
   justify-content: space-between;
   text-align: left;
   align-items: center;
}

.content-wrapper .icon-text img {
   max-width: 75px;
   margin-right: 25px;
}

.content-wrapper .text-info {
   color: #1D1D1B;
   font-size: 30px;
   line-height: 33px;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
}

.no-mb {
   margin-bottom: 0 !important;
}

.strange-dots {
   position: absolute;
   bottom: 40px;
}

.strange-dots .dot1 {
   width: 30px;
   height: 13px;
   background-color: #EA5735;
   border-radius: 100px;
   display: inline-block;
   margin-right: 3px;
}

.strange-dots .dot2 {
   width: 13px;
   height: 13px;
   background-color: #C9C7D4;
   border-radius: 50%;
   display: inline-block;
   margin-right: 3px;
}

.strange-dots .dot3 {
   width: 13px;
   height: 13px;
   background-color: #C9C7D4;
   border-radius: 50%;
   display: inline-block;
}

.platform {
   background-color: #1C2E51;
   display: flex;
   justify-content: flex-start;
   flex-direction: column;
   align-items: center;
   padding-top: 160px;
   padding-bottom: 120px;
   position: relative;
   width: 100%;
   min-height: 950px;
}

.platform h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   margin-bottom: 50px;
   color: #EA5735;
   text-align: center;
}

.platform .laptop-wrapper {
   background-image: url('../images/laptop.png');
   background-position: left bottom;
   background-repeat: no-repeat;
   background-size: 100%;
   width: 100%;
   max-width: 1283px;
   height: 100%;
   position: absolute;
   left: 120px;
   z-index: 5;
   bottom: -100px;
}

.platform .laptop-line {
   background-image: url('../images/laptop-dots.png');
   background-position: top left;
   background-repeat: no-repeat;
   background-size: 1310px;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 138px;
   z-index: 2;
   left: -15px;
}

.platform .line-text {
   font-size: 30px;
   line-height: 40px;
   color: #fff;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   text-align: left;
}

.line-text.pos-1 {
   position: absolute;
   top: 155px;
   left: 880px
}

.line-text.pos-2 {
   position: absolute;
   top: 275px;
   left: 1115px
}

.line-text.pos-3 {
   position: absolute;
   top: 378px;
   left: 1248px;
}

.line-text.pos-4 {
   position: absolute;
   top: 517px;
   left: 1323px;
}

.checkout-platform {
   position: absolute;
   z-index: 25;
   bottom: 120px;
}

.checkout-platform.platform-page {
   position: static;
   text-align: center;
}

.checkout-platform.platform-page a {
   display: inline-block;
}

.checkout-platform a {
   text-decoration: none;
   background-color: transparent;
   color: #EA5735;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   font-size: 26px;
   text-align: center;
   padding: 10px 70px;
   border: 3px solid #EA5735;
   display: block;
   border-radius: 1000px;
   transition: all 0.2s;
}

.checkout-platform a:hover {
   background-color: #EA5735;
   color: #fff;
}

.contact {
   width: 100%;
   background-color: #fff;
   padding-top: 135px;
   padding-bottom: 110px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   position: relative;
}

.bgr-line-top-right {
   position: absolute;
   top: 0;
   right: 0;
   width: 570px;
   z-index: 4;
}

.contact h2 {
   z-index: 8;
   text-align: center;
   color: #1C2E51;
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   margin-bottom: 60px;
}

.contact .form-wrapper {
   width: 100%;
   max-width: 1090px;
   z-index: 8;
}

.people .name {
   color: #1D1D1B;
   font-size: 20px;
   line-height: 28px;
   display: block;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
}

.people .role {
   color: #EA5735;
   font-size: 20px;
   line-height: 28px;
   display: block;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
}

.people .info {
   color: #1C2E51;
   font-size: 20px;
   line-height: 28px;
   display: block;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
}

.people .first,
.people .second {
   display: flex;
   align-items: center;
}

.people img {
   max-width: 220px;
}

.people {
   display: flex;
   justify-content: space-between;
}

.actual-form {
   margin-top: 40px;
}

.actual-form .input {
   color: #1D1D1B;
   font-size: 24px;
   line-height: 50px;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   border: 1px solid #FABC78;
   border-radius: 1000px;
   padding: 10px 25px;
}

input:focus, input:active, input:focus-visible, textarea:focus, textarea:active, textarea:focus-visible {
   border-color: #EA5735;
   outline: #EA5735 auto 1px;
}

.actual-form .input-row .input {
   width: 100%;
}

.actual-form .input-row.double .input {
   width: calc(50% - 10px);
}

.actual-form .input.textarea {
   border-radius: 20px;
   width: 100%;
}

.actual-form input::placeholder,
textarea::placeholder {
   color: #1D1D1B;
}

.input-row {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
}

.submit-button {
   color: #fff;
   padding: 15px 75px;
   background-color: #EA5735;
   border-radius: 1000px;
   border: none;
   font-size: 24px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   cursor: pointer;
}

.actual-form .action {
   display: flex;
   justify-content: center;
   margin-top: 25px;
}

.main-dashboard {
   background-color: #FFF4E8;
   width: 100%;
   padding: 55px 0 0 0;
}

.main-dashboard h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   padding-bottom: 60px;
   color: #1D1D1B;
   text-align: left;
}

.dashboard-content {
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

.dashboard-left {
   width: 500px;
   margin-right: 40px;
}

.dashboard-item {
   background-color: #FFFFFF;
   box-shadow: 0px 8px 16px #EA573536;
   padding: 20px 30px;
   border-radius: 19px;
}

.dashboard-item.inactive {
   background-color: transparent;
   box-shadow: none;
   padding: 20px 30px;
   border-radius: 0;
}

.dashboard-item.inactive h3 {
   color: #1C2E51;
   font-weight: normal;
}

.dashboard-item h3 {
   color: #EA5735;
   font-size: 43px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 51px;
   margin-bottom: 8px;
}

.dashboard-item-text {
   color: #1C2E51;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 21px;
}

.dashboard-right {
   width: 1250px;
   max-width: 100%;
}

.dashboard-presentation {
   box-shadow: -20px -20px 60px #EA573526;
   border-radius: 20px;
   text-align: center;
}

.dashboard-presentation img {
   max-width: 100%;
   border-radius: 20px;
}

.dashboard-presentation .applications,
.dashboard-presentation .risk,
.dashboard-presentation .inspections,
.dashboard-presentation .certificates,
.dashboard-presentation .notifications,
.dashboard-presentation .reports {
   display: none;
}

.inspections {
   background-color: #ffffff;
   width: 100%;
   padding: 55px 140px 0 140px;
}

.inspections h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   padding-bottom: 40px;
   color: #1D1D1B;
   text-align: left;
}

.inspections-items {
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.inspections-item:last-child {
   margin-right: 0;
}

.inspections-item {
   margin-right: 16px;
   border: 1px solid #DEDEDE;
   border-radius: 20px;
   padding: 20px 15px 25px 15px;
   width: 25%;
}

.inspections-item.active {
   border: 1px solid transparent;
   border-radius: 20px;
   background-color: #EA5735;
}

.inspections-item.active .inspections-item-text {
   color: #FFFFFF;
}

.inspections-item-text {
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   font-size: 35px;
   color: #1C2E51;
   line-height: 38px;
}

.tablets-with-text {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 0 0 60px;
}

.tablets-with-text .text-col {
   display: flex;
   flex-direction: column;
   width: calc(100% - 850px);
   align-items: flex-start;
}

.tablets-with-text .text-col p {
   color: #1D1D1B;
   font-size: 30px;
   line-height: 43px;
   font-family: Arial, Helvetica, sans-serif;
   margin-bottom: 20px;
}

.tablets-with-text .text-col a,
.tablets-with-text .text-col a:hover {
   text-decoration: none;
}

.tablets-with-text .text-col a {
   display: inline-flex;
   color: #EA5735;
   font-size: 26px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   background-color: transparent;
   border-radius: 1000px;
   padding: 10px 25px;
   transition: ease-in 0.2s;
}

.tablets-with-text .text-col a:hover {
   color: #fff;
   background-color: #1C2E51;
}

.tablets-with-text .image-col {
   width: 850px;
}

.tablets-with-text .image-col img {
   max-width: 100%;
}

.notifications {
   width: 100%;
   background-color: #1C2E51;
   padding: 55px 140px 80px 140px;
}

.notifications h2 {
   font-size: 60px;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   line-height: 64px;
   padding-bottom: 40px;
   color: #FFFFFF;
   text-align: left;
}

.notifications-items {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
}

.notification-item {
   width: 33.33%;
   max-width: 600px;
   margin-right: 17px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   border-radius: 20px;
}

.notification-item h3 {
   color: #FFFFFF;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   font-size: 46px;
   line-height: 53px;
   text-align: left;
   margin-bottom: 30px;
   margin-top: 20px;
}

.notification-item p {
   color: #FFFFFF;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-size: 20px;
   line-height: 30px;
   text-align: left;
   margin-bottom: 40px;
}

.notification-item img {
   border-radius: 20px;
}

.notification-item:last-child {
   margin-right: 0;
}

.mobile-menu-button {
   display: none;
}

.mobile-navigation-wrapper .navigation-link a:hover {
   color: #1C2E51;
   font-size: 24px;
   line-height: 28px;
   padding: 15px 0;
   display: block;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
   border-radius: 0;
   background-color: transparent;
}

.mobile-navigation-wrapper .navigation-link a.active-mobile-section {
   color: #EA5735;
}

.mobile-challenges-wrapper {
   display: none;
   position: relative;
}

@media screen and (min-width: 2200px) {
   .dashboard-content {
      justify-content: center;
   }
}

@media screen and (max-width: 1742px) {
   .story-bgr-line-right {
      width: 500px;
   }

   .l-b-helper.hide {
      display: inline-block;
   }

   .platform {
      min-height: 787px;
      padding-top: 95px;
   }

   .platform .laptop-wrapper {
      width: 1027px;
      left: 0;
   }

   .platform .laptop-line {
      background-size: 1048px;
      left: -100px;
      width: calc(100% + 100px);
   }

   .line-text.pos-1 {
      top: 105px;
      left: 700px;
   }

   .line-text.pos-2 {
      top: 209px;
      left: 884px;
   }

   .line-text.pos-3 {
      top: 301px;
      left: 977px;
   }

   .line-text.pos-4 {
      top: 410px;
      left: 1041px;
   }

   .platform .line-text {
      font-size: 26px;
      z-index: 10;
   }

   .checkout-platform {
      bottom: 40px;
   }

   .checkout-platform a {
      padding-left: 40px;
      padding-right: 40px;
   }
}

.story-bgr-line-right {
   position: absolute;
   right: 0;
   top: 47%;
   z-index: 4;
}

@media screen and (max-height: 665px) {
   .hero .next-section-button {
      bottom: 2px;
   }
}

@media screen and (max-width: 1560px) {
   .story-bgr-line-right {
      width: 400px;
   }
}

@media screen and (max-width: 1500px) {
   .mission {
      padding-top: 100px;
      padding-bottom: 80px;
   }

   .mission .left-line {
      max-width: 420px;
   }

   .mission .right-line {
      max-width: 370px;
   }

   .story {
      padding-top: 100px;
      padding-bottom: 50px;
   }

   .story-bgr-line-right {
      width: 325px;
   }

   .challenges {
      padding-top: 100px;
      padding-bottom: 80px;
   }

   .top-left-grapfic {
      max-width: 420px;
   }

   .contact {
      padding-bottom: 40px;
   }

   .bgr-line-top-right {
      width: 390px;
   }

   .bottom-nav .nav-item,
   .bottom-nav .nav-item.active {
      font-size: 18px;
   }

   .dashboard-right {
      width: 980px;
   }

   .dashboard-item h3 {
      font-size: 37px;
      line-height: 40px;
   }

   .inspections-item-text {
      font-size: 28px;
      line-height: 34px;
   }

   .tablets-with-text .text-col {
      width: calc(100% - 650px);
   }

   .tablets-with-text .text-col p {
      font-size: 28px;
      line-height: 36px;
   }

   .tablets-with-text .image-col {
      width: 680px;
   }

   .notification-item h3 {
      font-size: 36px;
      line-height: 44px;
   }
}

@media screen and (max-width: 1720px) {
   .bottom-nav-items {
      padding: 0;
   }

   .main-dashboard {
      padding: 55px 0 0 0;
   }

   .inspections {
      padding-left: 30px;
      padding-right: 30px;
   }

   .notifications {
      padding-left: 30px;
      padding-right: 30px;
   }

   .contact.platformpage {
      padding-top: 80px;
      padding-bottom: 40px;
   }
}


/* MOBILE STYLES */

.mobile-navigation-wrapper {
   position: fixed;
   top: 0;
   right: -200px;
   z-index: 800;
   background-color: #fff;
   border-radius: 20px 0 0 20px;
   padding: 20px;
   width: 200px;
}

.mobile-navigation-wrapper.opened {
   box-shadow: 0px 8px 16px #EA573536;
}

.mobile-navigation-wrapper .navigation-link a {
   color: #1C2E51;
   font-size: 24px;
   line-height: 28px;
   padding: 15px 0;
   display: block;
   font-family: 'Brandon Grotesque';
   font-weight: bold;
}

@media screen and (max-width: 1280px) {
   .main-navigation {
      background-color: rgba(255, 255, 255, 0.8);
      padding: 15px 30px;
      box-shadow: 0px 8px 16px #EA573536;
   }

   .platform-page-navigation {
      background-color: rgba(255, 255, 255, 1);
   }

   .platform-page-navigation .top-nav {
      padding: 15px 30px;
   }

   .main-logo {
      width: 190px;
   }

   .main-logo img {
      display: block;
   }

   .main-navigation .navigation-link,
   .platform-page-navigation .navigation-link {
      display: none;
   }

   #white-logo {
      display: none;
   }

   .mobile-menu-button {
      display: block;
      width: 40px;
      height: 40px;
      position: fixed;
      background-color: transparent;
      top: 10px;
      z-index: 850;
      right: 30px;
      cursor: pointer;
      transition: ease-in 0.2s;
   }

   .mobile-menu-button.button-active {
      right: 10px;
   }

   .mobile-menu-button.button-active .menu-line {
      transform-origin: center center;
      transform: rotate(45deg);
      top: 19px;
      left: 4px;
      width: 70%;
   }

   .mobile-menu-button.button-active .menu-line:last-child {
      transform-origin: center center;
      transform: rotate(-45deg);
      top: 19px;
      left: 4px;
      width: 70%;
   }

   .mobile-menu-button.button-active .menu-line:nth-child(2) {
      display: none;
   }

   .mobile-menu-button.button-active .menu-line:nth-child(2) {
      display: none;
   }

   .mobile-menu-button .menu-line {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #1C2E51;
      position: absolute;
      top: 8px;
      transition: ease-in 0.3s;
   }

   .mobile-menu-button .menu-line:nth-child(2) {
      top: 18px
   }

   .mobile-menu-button .menu-line:nth-child(3) {
      top: 29px
   }

   .bottom-nav {
      padding: 10px 30px;
   }

   .hero h1 {
      font-size: 52px;
   }

   .hero h2 {
      font-size: 40px;
      line-height: 44px;
   }

   .mission h2 {
      font-size: 48px;
      line-height: 54px;
   }

   .mission .main-info {
      font-size: 32px;
      line-height: 44px;
   }

   .mission .info-icons {
      max-width: 90%;
   }

   .mission .info-icon p {
      font-size: 32px;
   }

   .story h2 {
      font-size: 48px;
      line-height: 54px;
   }

   .story .main-info {
      font-size: 32px;
      line-height: 44px;
   }

   .content-wrapper h2 {
      font-size: 48px;
      line-height: 54px;
   }

   .main-slider-container h3 {
      font-size: 30px;
   }

   .content-wrapper .text-info {
      font-size: 24px;
      line-height: 30px;
   }

   .platform h2 {
      font-size: 48px;
      line-height: 54px;
   }

   .contact h2 {
      font-size: 48px;
      line-height: 54px;
   }

   .bottom-nav .nav-item,
   .bottom-nav .nav-item.active {
      font-size: 16px;
   }

   .main-dashboard h2,
   .inspections h2,
   .notifications h2 {
      font-size: 48px;
      line-height: 54px;
   }

   .dashboard-item h3 {
      font-size: 30px;
      line-height: 34px;
   }

   .inspections-item-text {
      font-size: 24px;
      line-height: 30px;
   }

   .tablets-with-text .text-col p {
      font-size: 22px;
      line-height: 34px;
   }

   .notification-item h3 {
      font-size: 30px;
      line-height: 38px;
   }

   .notification-item p {
      font-size: 18px;
      line-height: 28px;
   }

   .hero .next-section-button {
      width: 46px;
      height: 46px;
      left: calc(50% - 23px);
      right: calc(50% - 23px);
   }

   .platform .laptop-wrapper {
      width: 760px;
      bottom: -50px;
   }

   .platform .laptop-line {
      background-size: 900px;
      left: -145px;
      width: calc(100% + 145px);
      top: 100px;
   }

   .platform {
      min-height: 658px;
   }

   .platform .line-text {
      font-size: 22px;
      line-height: 26px;
   }

   .line-text.pos-1 {
      top: 120px;
      left: 600px;
   }

   .line-text.pos-2 {
      top: 185px;
      left: 750px;
   }

   .line-text.pos-3 {
      top: 265px;
      left: 840px;
   }

   .line-text.pos-4 {
      top: 365px;
      left: 900px;
   }

   .checkout-platform a {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 22px;
   }

   .submit-button {
      padding: 15px 40px;
      font-size: 22px;
   }

   .tablets-with-text .text-col a {
      font-size: 22px;
   }

   .bgr-line-top-right {
      width: 275px;
   }

   .bottom-nav .nav-item.active,
   .bottom-nav .nav-item {
      padding-left: 10px;
      padding-right: 10px;
   }
}

@media screen and (max-width: 1024px) {
   .dashboard-content {
      padding-left: 10px;
      padding-right: 10px;
   }

   .mission,
   .story,
   .challenges,
   .contact,
   .inspections,
   .notifications {
      padding-left: 20px;
      padding-right: 20px;
   }
}

@media screen and (max-width: 1023px) {
   .dashboard-right {
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 30px;
   }

   .bottom-nav {
      display: none;
   }

   .dashboard-presentation {
      display: none;
   }

   .accordion {
      display: block;
   }

   .platform {
      min-height: auto;
   }

   .platform .laptop-line {
      background: none;
      position: static;
      height: auto;
      width: auto;
      margin-left: 10px;
   }

   .platform .laptop-wrapper-mobile {
      display: block;
      width: 510px;
      order: 3;
   }

   .platform .laptop-wrapper-mobile img {
      display: block;
      max-width: 100%;
   }

   .platform .laptop-wrapper {
      display: none;
   }

   .checkout-platform {
      position: static;
      margin-bottom: 30px;
   }

   .line-text.pos-1,
   .line-text.pos-2,
   .line-text.pos-3,
   .line-text.pos-4 {
      position: static;
   }

   .platform {
      padding-top: 60px;
      padding-bottom: 0;
      display: flex;
      flex-direction: column;
   }

   .platform .line-text {
      margin-bottom: 25px;
      display: flex;
      align-items: center;
   }

   .platform .line-text::before {
      content: '';
      display: inline-block;
      width: 15px;
      height: 15px;
      background-color: #fff;
      border: 6px solid #EA5735;
      border-radius: 50%;
      margin-right: 10px;
      flex: none;
   }

   .platform .line-text span {
      display: inline;
   }

   .mission,
   .story {
      padding-top: 60px;
      padding-bottom: 30px;
   }

   .mission h2,
   .story h2 {
      margin-bottom: 30px;
   }

   .mission .main-info {
      margin-bottom: 40px;
   }

   .mission .info-icon p {
      font-size: 22px;
   }

   .challenges {
      padding-top: 60px;
   }

   .contact {
      padding-top: 60px;
   }

   .notifications-items {
      flex-wrap: wrap;
      justify-content: center;
   }

   .notification-item {
      width: 320px;
   }

   .show-mobile {
      display: block;
   }

   .hide-mobile {
      display: none;
   }

   .story-images {
      width: 320px;
      flex-wrap: wrap;
   }

   .text-mobile-flex {
      width: calc(100% - 325px);
   }

   .story .main-info {
      margin-bottom: 20px;
   }

   .mobile-flex-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .bgr-line-top-right {
      display: none;
   }

   .story-images .image-container {
      margin-bottom: 10px;
   }
}

@media screen and (max-width: 767px) {
   .main-navigation {
      padding: 10px 20px;
   }

   .mobile-menu-button {
      top: 3px;
      right: 20px;
   }

   .hero h1 {
      font-size: 40px;
   }

   .hero h2 {
      font-size: 32px;
      line-height: 34px;
   }

   .mission h2,
   .story h2,
   .content-wrapper h2,
   .platform h2,
   .contact h2,
   .main-dashboard h2,
   .inspections h2,
   .notifications h2 {
      font-size: 40px;
      line-height: 44px;
   }

   .content-wrapper h2,
   .platform h2,
   .contact h2,
   .notifications h2 {
      margin-bottom: 30px;
   }

   .main-slider-container h3 {
      font-size: 28px;
      margin-bottom: 30px;
   }

   .notifications h2 {
      padding-bottom: 0;
   }

   .notifications {
      padding-bottom: 30px;
   }

   .mission .main-info {
      font-size: 24px;
      line-height: 38px;
   }

   .mission .left-line {
      max-width: 220px;
   }

   .mission .right-line {
      max-width: 250px;
   }

   .mission .info-icon p {
      font-size: 18px;
   }

   .mission .logo-in-text {
      max-width: 150px;
   }

   .story .main-info {
      font-size: 24px;
      line-height: 38px;
   }

   .story-bgr-line-right {
      width: 240px;
   }

   .top-left-grapfic {
      width: 220px;
   }

   .content-wrapper .text-info {
      font-size: 20px;
      line-height: 28px;
   }

   .people {
      flex-wrap: wrap;
   }

   .platform-page-navigation .top-nav {
      padding: 10px 20px;
   }

   .contact.platformpage {
      padding-top: 50px;
      padding-bottom: 30px;
   }

   .notifications-items {
      flex-direction: column;
      align-items: center;
   }

   .notification-item h3 {
      font-size: 26px;
      line-height: 34px;
      margin-bottom: 20px;
   }

   .notification-item p {
      font-size: 16px;
      line-height: 26px;
      margin-bottom: 20px;
   }
}

@media screen and (max-width: 600px) {
   .pf-slider-inner, .pf-slider-slide {
      min-height: 70px !important;
   }


   .content-wrapper .icon-text {
      min-height: 72px !important;
   }

   .content-wrapper .icon-text img {
      max-width: 60px;
   }

   .hero h1 {
      font-size: 32px;
   }

   .hero h2 {
      font-size: 24px;
      line-height: 30px;
   }

   .mission h2,
   .story h2,
   .content-wrapper h2,
   .platform h2,
   .contact h2,
   .main-dashboard h2,
   .inspections h2,
   .notifications h2 {
      font-size: 32px;
      line-height: 40px;
   }

   .content-wrapper h2,
   .platform h2,
   .contact h2,
   .notifications h2 {
      margin-bottom: 20px;
   }

   .main-slider-container h3 {
      font-size: 22px;
      margin-bottom: 20px;
   }

   .mission .main-info {
      font-size: 20px;
      line-height: 28px;
   }

   .mission .info-icons {
      flex-wrap: wrap;
      max-width: 300px;
   }

   .mission .info-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 140px;
      margin-right: 10px;
      margin-bottom: 10px;
   }

   .mission .info-icon p {
      font-size: 16px;
   }

   .mobile-flex-container {
      flex-wrap: wrap;
   }

   .text-mobile-flex {
      width: 100%;
   }

   .story-images {
      width: 280px;
      margin: 0 auto 40px auto;
  }

   .story .main-info {
      font-size: 20px;
      line-height: 30px;
   }

   .story .main-info.second {
      margin-bottom: 30px;
   }

   .platform {
      padding-left: 20px;
      padding-right: 20px;
   }

   .platform .line-text {
      font-size: 20px;
   }

   .platform .laptop-wrapper-mobile {
      width: 280px;
   }

   .people img {
      max-width: 140px;
   }

   .actual-form .input {
      font-size: 20px;
   }

   .main-slider-container {
      display: none !important;
   }

   .mobile-challenges-wrapper {
      display: block;
   }

   .mobile-challenges-wrapper .headings {
      display: flex;
      width: 100%;
      justify-content: space-between;
   }

   .mobile-challenges-wrapper .headings h3 {
      font-family: 'Brandon Grotesque';
      font-weight: bold;
      line-height: 26px;
      margin-bottom: 25px;
      color: #EA5735;
      text-align: center;
      font-size: 21px;
      margin-left: 10px;
      margin-right: 10px;
      cursor: pointer;
      opacity: 0.7;
   }

   .mobile-challenges-wrapper .headings h3.active {
      opacity: 1;
   }

   .content-wrapper h2 {
      text-align: center;
   }

   .content-wrapper .icon-text {
      justify-content: flex-start;
      margin-bottom: 100px;
   }

   .mobile-challenges-slides {
      margin-bottom: 45px;
   }

   .l-b-helper {
      display: inline-block;
   }

   .platform .line-text {
      display: flex;
      text-align: left;
   }

   .platform .line-text::before {
      vertical-align: text-bottom;
   }

   .accordion__item .accordion__title {
      font-size: 18px;
      padding: 15px;
      text-align: center;
   }
}

@media screen and (max-width: 480px) {
   .content-wrapper .text-info {
      line-height: 22px;
   }

   .people .name {
      font-size: 18px;
   }

   .people .info {
      font-size: 18px;
   }

   .actual-form .input-row.double {
      flex-wrap: wrap;
   }

   .actual-form .input-row.double .input {
      width: 100%;
   }

   .actual-form .input-row.double .input:first-child {
      margin-bottom: 20px;
   }

   .hero {
      padding-left: 20px;
      padding-right: 20px;
   }

   .accordion__item .accordion__title {
      font-size: 16px;
   }
}

@media screen and (max-width: 374px) {
   .mission .info-icons {
      width: 260px;
   }

   .mission .info-icon {
      width: 120px;
   }

   .mobile-challenges-wrapper .headings h3 {
      font-size: 16px;
   }

   .hero h2 {
      font-size: 21px;
      line-height: 30px;
   }

   .mission h2,
   .story h2,
   .content-wrapper h2,
   .platform h2,
   .contact h2,
   .main-dashboard h2,
   .inspections h2,
   .notifications h2 {
      font-size: 28px;
      margin-bottom: 25px;
      line-height: 32px;
   }

   .story .logo-in-text {
      max-width: 150px;
   }

   .story-images .image-container .story-image-text {
      font-size: 18px;
   }

   .mission .main-info {
      font-size: 18px;
      line-height: 26px;
   }

   .story .main-info {
      font-size: 18px;
      line-height: 26px;
   }

   .content-wrapper .text-info {
      font-size: 18px;
   }

   .platform .line-text {
      font-size: 18px;
   }

   .people .first,
   .people .second {
      flex-direction: column;
   }

   .people .texts {
      text-align: center;
   }

   .custom-position {
      bottom: 80px;
   }
}

.success-message {
   color: #1C2E51;
   font-size: 24px;
   line-height: 28px;
   font-family: 'Brandon Grotesque';
   font-weight: normal;
   text-align: center;
   margin-top: 50px;
   display: none;
}