.banner{
    margin-top: 170px;
}

.what-we.done .wrapper {
    background-color: white;
    padding: 16px;

}

.dedication{
    margin-top: 100px;
}

.our-services{
    margin-top: 100px;
}

.action{
    margin-top: 100px;
}

.installation{
    margin-top: 100px;
}

.contact {
    margin-top: 100px;
}

.action{
    margin-top: 250px;
}

body {
    font-family: 'Archivo', sans-serif;
    background-color: #F7F8FC;
}

h1 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px;
}

h2 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 64px;
font-style: normal;
font-weight: 500;
line-height: 76.8px; /* 120% */
}

h3 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 57.6px; /* 120% */
}

h4 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */
}

h5 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 33.6px; /* 140% */
}

h6 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.banner p {
 color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.promo h4 {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.promo p {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.flexibility h4 {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 44.8px; /* 140% */
}

.flexibility p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.what-we-do p{
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.what-we-done {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.what-we-done a {
color: var(--primary-default, #2B67E8);
text-align: right;
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration: none;
}

.what-we-done .wrapper p {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22.4px; /* 140% */
}

.what-we-done .wrapper p span {
 color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.4px; /* 140% */
}

.what-we-done .wrapper h5 {
 color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 33.6px; /* 140% */
}

.partnerji p {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.footer p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.footer ul li a {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration: none;
}

.dedication h1 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px; /* 110% */
}

.expert h3 {
 color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 62.4px; /* 130% */
}

.expert p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 33.6px; /* 140% */
}

.expert p span {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 33.6px;
}

.people h4 {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */
}

.people p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.standards h3 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 57.6px; /* 120% */
margin-bottom: 25px;
}

.standards h4 {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */        
}

.standards p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 33.6px; /* 140% */
}

.standards p span {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 33.6px;
}

.our-services h1 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px; /* 110% */
}

.services span {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 33.6px; /* 140% */
}

.services h4 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 64px;
font-style: normal;
font-weight: 500;
line-height: 76.8px; /* 120% */
}

.services p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.action h1 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px; /* 110% */
}

.action p {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.filter ul li a {
color: var(--primary-default, #2B67E8);
text-align: right;
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration: none;
}

.service-filter p {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 22.4px; /* 140% */
}

.service-filter span {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.4px; /* 140% */    
}

.service-filter h5 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 33.6px; /* 140% */
}

.installation h1 {
color: var(--primary-dark, #2E3843);
text-align: center;
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px; /* 110% */    
}

.project-info h4 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */    
}

.project-info p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */    
}

.project-info span {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 33.6px; /* 140% */
}

.project-info .what p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */    
}

.next-in-line h3 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 57.6px; /* 120% */    
}

.next-in-line p {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 22.4px; /* 140% */    
}

.next-in-line span {
color: var(--text-light, #8E99AC);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.4px; /* 140% */    
}

.list-group-item {
    border: none
}

.list-group-item .fw-bold {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 33.6px; /* 140% */
}

.list-group-item p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}

.team h1 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px; /* 110% */
}

.who-are-we h2 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 64px;
font-style: normal;
font-weight: 500;
line-height: 76.8px; /* 120% */
}

.who-are-we p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */    
}

.why-us h2 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 64px;
font-style: normal;
font-weight: 500;
line-height: 76.8px; /* 120% */
}
    
.why-us p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */    
}

.why-us h5 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 33.6px; /* 140% */
}

.open-positions h2 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 64px;
font-style: normal;
font-weight: 500;
line-height: 76.8px; /* 120% */    
}

.open-positions h5 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */    
}

.title-job h1 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 80px;
font-style: normal;
font-weight: 700;
line-height: 88px; /* 110% */   
}

.job span {
color: var(--primary-default, #2B67E8);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.job h4 {
color: var(--primary-dark, #2E3843);
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */
}

.job p {
color: var(--text-default, #697487);
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.navbar-nav .nav-item .nav-link{
    color: #2E3843;
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.navbar-nav .nav-item .nav-link.active{
    color: #2B67E8;
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.navbar-nav .nav-item .nav-link:hover{
    color: #2B67E8;
    font-family: Archivo;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.navbar-nav .nav-item{
    margin-right: 30px;
}

.navbar-nav .nav-item .nav-link{
    margin-top: 5px;
}


.navbar .navbar-nav .nav-item .special-link{
    padding: 12px 24px 12px 24px;
    border-radius: 100px;
border: 1px solid var(--primary-light, #F7F8FC);
background: #DCE7FE;
color: #2B67E8;
margin-top:0px;
}

.navbar .navbar-nav .nav-item .special-link span {
    margin-right: 10px;
  }

.navbar .navbar-nav .nav-item .special-link img {
    margin-right: 12px;
  }

  .navbar{
    padding-top: 12px;
    padding-bottom: 12px;
    background: #F7F8FC;
  }

  #topBar{
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F0EEEE;
    background-color: #F7F8FC;
  }
  #topBar li a{
    color: #2E3843;
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
 }

 #topBar .languages{
    /*border-radius: 100px;
border: 1px solid var(--natural-grey, #A2A9B3);
padding: 12px;
*/
margin-right: 20px;
 }

 #topBar .dropdown-toggle::after{
    display: none;
 }

 .promo{
    margin-top: 54px;
 }

 .promo .promo-video{
    width: 60%; margin-right: 20px
 }

 .promo .promo-video .video-container{
    max-height: 390px; 
    height: 100%; 
    overflow: hidden;
 }

 .promo .gettouch{
    max-width: 270px; width: 100%; margin-right: 20px;
    text-align: center;
 }

 .promo .gettouch .bg-wrapper{
    padding: 40px 32px;
    background: #dce7fe; 
    min-height: 390px;
    position: relative;
 }

 .promo .gettouch .bg-wrapper a{
    position: absolute;
    bottom: 20px;
    right: 20px;
 }

 .flexibility{
    margin-top: 150px;
 }

 .mt-70{
    margin-top: 70px;
 }

 .flexibility img{
    margin-bottom: 20px;
 }

 .flexibility h4{
    margin-bottom: 20px;
 }

 .what-we-do{
    margin-top: 150px;
 }

 .what-we-do .service{
    margin-bottom: 15px;
 }

 .what-we-do .service .bg-img{
    height: 100%;
    max-height: 333px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 24px;
    position: relative;
    min-height: 333px;
 }



 .what-we-do .service .bg-img .showmore{
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    width: calc(100% - 48px);
 }

 .what-we-do .service .bg-img .showmore .name{
    float: left;
    max-width: calc(100% - 80px);
 }
 .what-we-do .service .bg-img .showmore a{
  
    font-family: Archivo;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: 30.8px;
color: #FFF;
text-decoration: none;


 }
 
 .what-we-do .service .bg-img .showmore .btn-more{
    float: right;
 }

 .what-we-do .service .bg-img .showmore i{
    float: right;
    background: url('../img/icons/arrow-cirle-right.svg');
    width: 60px;
    height: 60px;
 }

 .what-we-do .service .bg-img .showmore:hover i{
    background: url('../img/icons/arrow-cirle-right-blue.svg');
    width: 60px;
    height: 60px;
 }

 .call-to-action{
    margin-top: 150px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 410px;
 }


 .call-to-action h6{
    margin-top: 100px;

    color: #FFF;
/* Body/20 */
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
 }

 .call-to-action h4{
    color: #FFF;
/* Title/H4 */
font-family: Archivo;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 44.8px; /* 140% */
 }

 .belogic-btn{
    border-radius: 100px;
border: 1px solid #F7F8FC;
background: #DCE7FE;

color: #2B67E8;
text-align: right;
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;

padding: 16px 32px;
text-decoration: none;
 }


 .belogic-blue-btn{
    border-radius: 100px;
border: 1px solid #2B67E8;
background: #2B67E8;

color: #fff;
text-align: right;
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;

padding: 16px 32px;
text-decoration: none;
 }

 .call-to-action a{
    float: left;
    margin-top: 28px;
 }

 .what-we-done {
    margin-top: 150px;
 }

 .what-we-done .wrapper{
    padding: 12px;
    background: #fff;
    min-height: 320px;
 }

 .what-we-done .wrapper p{
    margin-top: 10px;
    padding-bottom: 0px;
    margin-bottom: 0px;
 }

 .what-we-done .wrapper h5{
    margin-top: 5px;
    font-size: 21px;
 }

 .partners{
    margin-top: 150px;
 }

 .partners .wrapper-1{
    background: #DCE7FE;
    padding: 20px;
 }

 footer{
    border-top: 1px solid #DCE7FE;
    padding-top: 98px;
 }

 footer .logop p{

    color: #697487;
/* Body/20 */
font-family: Archivo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
margin-top: 15px;
 }


 footer ul{
    padding-left: 0px;
    list-style-type: none;
 }

 footer h5{
    color: #2E3843;
font-family: Archivo;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 33.6px; /* 140% */
margin-bottom: 25px;
 }

 footer li a{
    color: #697487;
font-family: Archivo;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
 }

 footer li {
    margin-bottom: 10px;
 }

 footer .copyw{
    border-top: 1px solid #DCE7FE;
    padding-top: 10px;

    
 }

 footer .copyw p{
    color:#697487;
    font-family: Archivo;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
 }

 .navbar-toggler:focus{
    box-shadow: none;
 }

 .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  
  .dedication{
    margin-top: 170px;
  }

  .be-logic{
    margin-top: 100px;
  }

.expert{
    margin-top: 150px;
}

.people{
    margin-top: 150px;
}

.people img{
    margin-bottom: 20px;
}

.standards{
    margin-top: 150px;
}

.our-services{
    margin-top: 200px;
}

.services{
    margin-top: 150px;
}

.contact{
    margin-top: 200px;
}

.list-group-item{
    background: transparent;
}


.contact h1{
    font-size: 70px;
}


/**
CHECKBOX
*/
.container-check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    color:  #2E3843;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;   
    padding-top: 3px;
}
  
  /* Hide the browser's default checkbox */
  .container-check input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    
    /* Create a custom checkbox */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: transparent;
      border: 1px solid #70707066;
      border-radius: 3px;

    }
    
    /* On mouse-over, add a grey background color */
    .container-check:hover input ~ .checkmark {
      background-color: #fff;
      border-radius: 3px;
border: 1px solid #DADADA;
    }
  
    .container-check:hover input ~ .checkmark:after {
      left: 9px;
      top: 5px;
      width: 5px;
      height: 10px;
      border: solid #2B67E8;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    /* When the checkbox is checked, add a blue background */
    .container-check input:checked ~ .checkmark {
        background-color: #fff;
        border-radius: 3px;
  border: 1px solid #DADADA;
    }
    
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    /* Show the checkmark when checked */
    .container-check input:checked ~ .checkmark:after {
      display: block;
    }
    
    /* Style the checkmark/indicator */
    .container-check .checkmark:after {
      left: 9px;
      top: 5px;
      width: 5px;
      height: 10px;
      border: solid #2B67E8;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  
    /*END CHECK*/
  
    .form-control{
        border-radius: 16px;
border: 1px solid #F7F8FC;
background: #fff;
padding: 22px 18px;
    }

    .contact .bg-wrapper{
        background: #DCE7FE;
        padding: 80px;
    }

 @media (max-width: 61.24em){
 .display-mobile-none {
   display: none !important;
 }
}

 @media (max-width: 767px){
    
    h1 {
        color: var(--primary-dark, #2E3843);
        font-family: Archivo;
        font-size: 50px;
        font-style: normal;
        font-weight: 700;
        line-height: 60px;
        }
        
        h2 {
        color: var(--primary-dark, #2E3843);
        font-family: Archivo;
        font-size: 42px;
        font-style: normal;
        font-weight: 500;
        line-height: 76.8px; /* 120% */
        }
        
        h3 {
        color: var(--primary-dark, #2E3843);
        font-family: Archivo;
        font-size: 38px;
        font-style: normal;
        font-weight: 700;
        line-height: 57.6px; /* 120% */
        }
        
        h4 {
        color: var(--primary-dark, #2E3843);
        font-family: Archivo;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 44.8px; /* 140% */
        }
        
        h5 {
        color: var(--primary-dark, #2E3843);
        font-family: Archivo;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 33.6px; /* 140% */
        }
        
        h6 {
        color: var(--primary-dark, #2E3843);
        font-family: Archivo;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px; /* 140% */
        }

  }
  

  .service-filter p{
      min-height: 60px;
  }