h1, .intro.blog.blog-article h1 { font: normal normal bold 88px/94px League Spartan;}
h2                              { font: normal normal bold 56px/67px League Spartan;}
.intro.blog.blog-article     h2 { font: normal normal bold 44px/55px League Spartan;}
h3, .intro.blog.blog-article h3 { font: normal normal bold 32px/35px League Spartan;}
h4                              { font: normal normal normal 28px/42px Public Sans;}
.intro.blog.blog-article     h4 { font: normal normal bold 26px/40px League Spartan;}
h5, .intro.blog.blog-article h5 { font: normal normal bold 20px/22px League Spartan;}
h6, .intro.blog.blog-article h6 { font: normal normal bold 20px/22px League Spartan; color: #343A40; }


.intro.blog.blog-article h2 { margin-top: 30px; margin-bottom: 10px; }
.intro.blog.blog-article h3 { margin-top: 30px; margin-bottom: 10px; }
.intro.blog.blog-article h4 { margin-top: 30px; margin-bottom: 10px; }
.intro.blog.blog-article h5 { margin-top: 30px; margin-bottom: 10px; }
.intro.blog.blog-article h6 { margin-top: 30px; margin-bottom: 10px; }


.second-block h4 { font: normal normal bold 20px/22px League Spartan;}
.third-block  h4, .intro.blog .card-body h4 { font: normal normal bold 20px/22px League Spartan; margin-top: unset;}

.spacer {
    height: 35px;
}

.plain-link, .plain-link:hover {
    display: block;
    color: inherit;
    text-decoration: none;
    font: inherit;
}

.navbar .container-fluid {
    margin-left: calc(8vw);
    margin-right: calc(8vw);
}

.btn.btn-default {
    width: 256px;
    height: 54px;
    border-radius: 50px;
    background: black;
    color: white;
}

.btn.btn-default:hover {
    background: #00c2a6;
}

.intro {
    background: #cdfff3;
/* background-image: url("../files/design_1.svg"); */
    background-size: cover;
    background-position: center;
    height: 100vh;
    min-height: 850px;
    margin-top: -50px;  
}

.intro .mask {
    min-height: 850px;
}

.intro.blog.blog-article .mask {
    position: unset;
    margin-bottom: -5px;
}

/*.intro.blog, .intro.blog .mask {
    min-height: calc(max(100vh, 1050px));
}*/

.intro.blog.blog-article {
    height: unset;
    margin-top: -55px;
}

.intro h2 { font: normal normal normal 28px/42px Public Sans;}
.intro h3 { font: normal normal normal 28px/42px Public Sans;}
.intro p  { font: normal normal normal 28px/42px Public Sans;}
.intro p.fs-16 { font: normal normal normal 16px/24px Public Sans;}

.intro.blog h2 { font: normal normal bold 56px/67px League Spartan;}

.intro.blog.blog-article p, .intro.blog.blog-article li { font: normal normal normal 18px/26px Public Sans;}
.intro.blog.blog-article .fs-19 { font: normal normal normal 19px/27px Public Sans;}

.intro.usecase {
    background-color: #ffffff;
    background-position: center;
}

.intro.blog {
    background-color: #ffffff;
    background-position: center;
    min-height: 950px;
}

.intro.blog .mask {
    min-height: 950px;
}

.intro .row {
    margin-left:  calc(8vw) !important;
    margin-right: calc(8vw) !important;
    margin-top: calc(20vh) !important;
}

.intro.blog.blog-article .row {
    width: 1384px; /*1450 - 2*66*/
    margin-left: auto !important;
    margin-right: auto !important;
}

.intro .card-row {
  margin-left:  unset !important;
  margin-right: unset !important;
  margin-top:   unset !important;
  margin-bottom:62px !important;
  width: 100%;
}


.navbar-brand img {
  height: 48px;
}



.line-desktop {display: block;}
.line-mobile  {display: none;}

.mask h2 {
    margin-top: 45px;
    margin-bottom: 45px;
}

.mask h3 {
    margin-top: 55px;
    margin-bottom: 55px;
}


.first-block {
  background: #004AAD;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 80vh;
}
.first-block .mask {
  position: unset;
}
.first-block .row {
  height: 100%;
}

.second-block {
  background: #f4fbff;
  color: #000000;
}

.second-block .mask {
  position: unset;
}

.usecase-text { padding: 1rem; }
.second-block .usecase-text h1 { font: normal normal bold 56px/67px League Spartan; margin-top: 3rem; margin-bottom: 3rem;}
.second-block .usecase-text h2 { font: normal normal bold 32px/35px League Spartan; margin-top: 3rem; margin-bottom: 3rem;}
.second-block .usecase-text h3 { font: normal normal bold 28px/30px League Spartan; margin-top: 3rem; margin-bottom: 3rem;}
.second-block .usecase-text p  { font-size: 18px;}

.second-block .usecase-text ul {
  list-style: none;
  padding-left: 0;
}

.second-block .usecase-text ul li {
  position: relative;
  padding-left: 1.8em;
  font-size: 18px;
  margin-bottom: 10px;
}

.second-block .usecase-text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px; /* Zde upravíš výšku podle potřeby */
  width: 24px;
  height: 24px;
  background: url('ikona.svg') no-repeat center center;
  background-size: contain;
}

/*
.second-block .row.main-row {
  margin-top: calc(6vh) !important;
  margin-bottom: calc(6vh) !important;
  vertical-align: middle;
  height: 100%;
}
*/

.second-block .content-left {
  margin-left: calc(17.5vw);
  margin-right: calc(3vw);
}

.second-block .content-right {
  text-align: left;
  margin-right: calc(17.5vw);
}
.second-block .content-right, .content-left img {
  width: calc(30vw);
}

.third-block {
  background: #ebfffa;
  color: #000000;
}

.third-block .mask {
  position: unset;
}

.third-block .row {
/*   margin-top: calc(3vw) !important; */
/*   margin-bottom: calc(2vh) !important; */
  vertical-align: middle;
  height: 100%;
  text-align: center;
}

.third-block .col-md-6.cards {
    height: 176px;
    display: flex !important;
}

.third-block .col-md-6.cards:nth-child(odd) {
  padding-right: 3rem !important;
  justify-content: flex-end !important;
}

.third-block .col-md-6.cards:nth-child(even) {
  padding-left: 3rem !important;
  justify-content: flex-start !important;
}


.third-block .col-md-4.cards {
  height: 216px;
  display: flex !important;
  justify-content: center !important;
}


.fourth-block {
  background: #EFEEEE;
}
.fourth-block .mask {
  position: unset;
}
.fourth-block .row {
  margin-top: calc(6vh) !important;
  margin-bottom: calc(6vh) !important;
  vertical-align: middle;
  height: 100%;
  text-align: center;
}

.contacts-block {
  background: #004AAD;
}
.contacts-block .mask {
  position: unset;
}
.contacts-block .row {
  margin-top: calc(6vh) !important;
  margin-bottom: calc(6vh) !important;
  vertical-align: middle;
  height: 100%;
  text-align: center;
}

.footer-block {
  background: #000000;
}
.footer-block .mask {
  position: unset;
}
.footer-block .row {
  margin-top: calc(6vh) !important;
  margin-bottom: calc(6vh) !important;
  vertical-align: middle;
  height: 100%;
  text-align: center;
  width: 100%;
  max-width: 1000px;
  color: #ffffff;
}

.card-row {
  width: 1450px;
}

.team-row {
  width: calc(50vw);
}

.blue-text {
  color: #004AAD;
}

.dark-text {
  color: #343A40;
}

.lightgrey-background {
  background-color: #f4fbff;
}

.grey-background {
  background-color: #f5f5f5;
}

.toothpaste-background {
  background-color: #cdfff3;
}

.fs-16-icon { font-size: 16px;}
.fs-30-icon { font-size: 30px;}
.fs-42-icon { font-size: 42px;}
.fs-72-icon { font-size: 72px;}

.fs-28 { font: normal normal normal 28px/42px Public Sans;}
.fs-19 { font: normal normal normal 19px/24px Public Sans;}
.fs-16 { font: normal normal normal 16px/24px Public Sans;}

.orange-arrows-bottom-right {
  background-image: url('arrows-2.png');
  background-repeat: no-repeat;
  background-position: 96% 90%;
  background-size: auto 18px;
}

.orange-arrows-bottom-left {
  background-image: url('arrows-2.png');
  background-repeat: no-repeat;
  background-position: 2% 100%;
  background-size: auto 12px;
}

.blue-arrows-top-right {
  background-image: url('arrows-3.png');
  background-repeat: no-repeat; 
  background-position: 100% 0%;
  background-size: auto 12px;
}

.colored-arrows-top-right {
  background-image: url('arrows-1.png');
  background-repeat: no-repeat;
  background-position: 73% 100%;
  background-size: auto 12px;
}

.colored-arrows-top-left {
  background-image: url('arrows.png');
  background-repeat: no-repeat;
  background-position: 27.5% 0%;
  background-size: auto 12px;
}


.card-circle {
    width:  101px;
    height: 101px;
    border-radius: 101px;
    margin-top: 50px;
/*   margin-left: -9px; */
    margin-left: -50px;
    z-index: 2;
}

.card-circle.team.left {
    width:  300px;
    height: 300px;
    border-radius: 150px;
    margin-top: 30px;
    margin-left: calc(10% - 150px);
    z-index: 2;
}
.card-circle.team.right {
    width:  300px;
    height: 300px;
    border-radius: 150px;
    margin-top: 30px;
    margin-left: calc(90% - 150px);
    z-index: 2;
}

.card-circle.team.left img, .card-circle.team.right img {
    width: 100%; 
    height: auto; 
    object-fit: contain;
    border-radius: 150px;
}


.card-circle.top-right {
    width:  82px;
    height: 82px;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    top: -38px;
    right: -38px;
}

.card-circle.top-left {
    width:  82px;
    height: 82px;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    top: -38px;
    left: -38px;
}

.card-circle.bottom-right {
    width:  82px;
    height: 82px;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    bottom: -38px;
    right: -38px;
}

.card-circle.bottom-left {
    width:  82px;
    height: 82px;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    bottom: -38px;
    left: -38px;
}

.card-circle.top-right img {
    width: 100%;
    transform: rotate(225deg);
}
.card-circle.top-left img {
    width: 100%;
    transform: rotate(225deg);
}
.card-circle.bottom-right img {
    width: 100%;
    transform: rotate(315deg);
}
.card-circle.bottom-left img {
    width: 100%;
    transform: rotate(315deg);
}

.card-square {
    width:  550px;
    height: 100%;
/*     margin-left: 41.5px !important; */
/*     margin-right: 10px !important; */
    transform: translate(0px, -179px);
}

.card-square.wwwu {
    width:  90%;
    height: 90%;
    transform: translate(0px, 0px);
}


.card-square.positions {
    width:  100%;
    height: 100%;
    transform: translate(0px, 0px);
    background-color: #f5f5f5;
}

/*.card-square.positions h2 {
    
}*/


.intro.blog .card-square {
    width:  100%;
}

/*.third-block .card-square {
    margin-left: 41.5px !important;
    margin-right: 10px !important;
}*/

.col-md-6.cards .card.card-square {
    height: 176px;
    transform: translate(0px, -139.5px);
}

.col-md-6.team {
    height: 340px; 
    margin-bottom: 3rem;
}

.card.card-square.team.left {
    height: 246px;
    transform: translate(0px, -274px);
    margin-left: 10% !important;
    margin-right: unset !important;
    width: 90%;
}

.card.card-square.team.right {
    height: 246px;
    transform: translate(0px, -274px);
    margin-left: unset !important;
    margin-right: unset !important;
    width: 90%;
}


.card-square.standalone {
    transform: translate(0px, 0px);
}

.intro.blog .card-square.standalone {
    transform: translate(0px, 0px);
    margin: auto !important;
}
.col-md-4 .card-square {
  width:  396px;
  height: 256px;
}

.col-md-4 .card-square.positions  {
  width:  100%;
  height: 100%;
}

.col-md-4 .card-square.reference {
  height: 396px;
  width:  396px;
  margin: auto !important;
  border-radius: 20px;
  transform: translate(0px, 0px);
}


.col-md-3 .card-square {
  width:  316px;
  height: 256px;
  margin: auto !important;
  background-color: #f5f5f5;
}

.col-md-3.bug:hover .card-square, .col-md-3.bug.active .card-square {
    background: #cdfff3;
}

.col-md-3.bug:hover .card-circle, .col-md-3.bug.active .card-circle {
    background: #f5f5f5;
}

.col-md-4.bug:hover .card-square, .col-md-4.bug.active .card-square {
    background: #cdfff3;
}

.col-md-4.bug:hover .card-circle, .col-md-4.bug.active .card-circle {
    background: #f5f5f5;
}

.col-md-4.bug h2, .col-md-4.bug p {
    margin-left: 0px;
}

.col-md-4.bug .card-square {
    height: 206px;
}

.col-md-4.bug .card-square.blog {
    height: 326px;
}

/*
.card-square {
  width: calc(15vw);
  height: calc(12vw);
  border-radius: 19px;
  z-index: 1;
  margin-top: calc(-3.75vw) !important;
  margin-bottom: calc(3vw) !important;
}
*/

.card-circle.top-right .card-body {
    padding: 15px;
}
.card-circle.top-left .card-body {
    padding: 15px;
}
.card-circle.bottom-right .card-body {
    padding: 15px;
}
.card-circle.bottom-left .card-body {
    padding: 15px;
}

.card-body h2 { font: normal normal bold 20px/22px League Spartan; }

.card-body p, .card-wrapper .card-body h4 {
  margin-left: 50px;
  text-align: left;
}

.card-square.positions .card-body p {
  margin-left: unset;
}

.intro.blog .card-body p {
    margin-left: unset;
}

.card-body.left p {
  text-align: left;
}
.card-body.justify p {
  text-align: justify;
}

.card-square h2 {
    text-align: left;
    margin-left: 50px;
    margin-bottom: calc(1.6vh) !important;
}

.card-square h4 {
    text-align: left;
    margin-bottom: calc(1.6vh) !important;
}

.card-wrapper .card-square h4 {
    text-align: left;
    margin-left: 50px;
    margin-bottom: calc(1.6vh) !important;
}



.card-square.team h4 {
    margin-left: 130px;
}

.card-square.team.right h4 {
    text-align: right;
    margin-right: 130px;
}

.card-square.team p {
    text-align: justify;
    margin-left: 150px;
}

.card-square.team .fs-16.text-start {
    text-align: justify;
    margin-left: 145px;
}

.card-square.team.right p {
    margin-right: 150px;
    margin-left: unset;
}

.card-square.team.right .fs-16.text-end {
    margin-right: 145px;
    margin-left: unset;
}

.col-md-3 .card-body p, 
.col-md-4 .reference .card-body p, 
.col-md-3 .card-body h4, 
.col-md-4 .reference .card-body h4 {
  margin-left: unset;
}

.col-md-4 .reference .card-body img {
  width: 72px;
  height: auto;
}

.card-square-team {
  width: calc(26.7vh);
  height: calc(26.7vh);
  border-radius: 19px;
  z-index: 0;
  margin-bottom: 28px !important;
  margin-top: calc(-26.7vh) !important;
  max-width: 300px;
}

.card-noodle {
  width: 856px;
  height: 40px;
  border-radius: 19px;
  z-index: 1;
}

.photo-team {
  width: calc(26.7vh);
  z-index: 1;
  max-width: 300px;
}

.navbar-default {
  box-shadow: none;
}

.col-md-3.logo img {
  max-height: 260px;
  max-width: 260px;
  margin: auto;
}

@media screen and (max-width: 1650px) {
    h1, .intro.blog.blog-article h1 { font: normal normal bold 61px/66px League Spartan;}
    h2 { font: normal normal bold 39px/47px League Spartan;}
    h3 { font: normal normal bold 26px/29px League Spartan;}
    h4 { font: normal normal normal 23px/33px Public Sans;}
    h5 { font: normal normal bold 18px/21px League Spartan;}
    h6 { font: normal normal bold 16px/18px League Spartan; color: #343A40; }

    
/*.intro.blog.blog-article     h4 { font: normal normal bold 26px/40px League Spartan;}
h5, .intro.blog.blog-article h5 { font: normal normal bold 20px/22px League Spartan;}
h6, .intro.blog.blog-article h6 { font: normal normal bold 20px/22px League Spartan; color: #343A40; }*/

    
    
    .intro h2 { font-size: 24px; line-height: 36px; }
    .intro.blog.blog-article h2 { font-size: 37px; line-height: 47px; }
    .intro.blog.blog-article h3 { font-size: 27px; line-height: 30px; }
    .intro p  { font-size: 24px; line-height: 36px; }
    
    .fs-28 { font: normal normal normal 23px/33px Public Sans;}
    .fs-19 { font: normal normal normal 18px/17px Public Sans;}
    .fs-16, .intro .card-body .fs-16 { font: normal normal normal 13px/20px Public Sans;}
  
    .fs-72-icon { font-size: 51px;}
    .fs-30-icon { font-size: 25px;}

    .intro.blog.blog-article .row {
        width: 1308px; /*1400 - 92*/
    }
    
    .card-row {
        width: 1400px;
    }
    
    .second-block .content-left {
      margin-left: calc(12vw);
      margin-right: 0;
    }

    .second-block .content-right, .content-left img {
      width: calc(37vw);
    }
    
    .team-row {
        width: calc(70vw);
    }

    .card-circle {
        width:  calc(6.5vw);
        height: calc(6.5vw);
        border-radius: calc(3.25vw);
    }

    .card-square {
        width: 480px;
        height: 186px;
        border-radius: 19px;
        z-index: 1;
        transform: translate(0px, -138.5px);
    }

    .intro.blog .card-square {
        width: 100%;
        height: 166px;
        border-radius: 19px;
        z-index: 1;
        transform: translate(0px, -138.5px);
    }

    
    .col-md-4 .card-square.reference {
      height: 356px;
      width:  346px;
    }
    
    .col-md-4 .card-square {
      width:  354px;
      height: 216px;
      transform: translate(0px, -150px);
    }
    
    .col-md-4.bug .card-square {
        transform: unset;
        margin: auto auto 50px auto !important; /* top right bottom left */
    }
    
    .col-md-3 .card-square {
      height: 196px;
    }


    /*
    .card-square h5 {
        margin-top: calc(3vw) !important;
        margin-bottom: calc(2vh) !important;
        
    }*/
    
    .card-square-team {
        width: calc(33vh);
        height: calc(33vh);
        margin-top: calc(-33vh) !important;
    }
    
    .photo-team {
        width: calc(33vh);
    }
    
    
    .card.card-square.team.left {
        height: 206px;
        transform: translate(0px, -230px);
        margin-left: 10% !important;
        margin-right: unset !important;
        width: 90%;
    }

    .card.card-square.team.right {
        height: 206px;
        transform: translate(0px, -230px);
        margin-left: unset !important;
        margin-right: unset !important;
        width: 90%;
    }

    .card-square.team h4 {
        margin-left: 130px;
    }
    
    .card-square.team p {
        margin-left: 150px;
    }
    
    .card-circle.team.left {
        width:  250px;
        height: 250px;
        border-radius: 125px;
        margin-left: calc(10% - 100px);
    }
    
    .card-circle.team.right {
        width:  250px;
        height: 250px;
        border-radius: 125px;
        margin-right: calc(10% - 125px);
    }
    
    .card-noodle {
      width: 641px;
      height: 33px;
      border-radius: 19px;
      z-index: 1;
    }
    
    .orange-arrows-bottom-left {
      background-image: url('arrows-2.png');
      background-repeat: no-repeat;
      background-position: 3.4% 100%;
      background-size: auto 12px;
    }
}


@media screen and (max-width: 1450px) {
    h1 { font: normal normal bold 61px/66px League Spartan;} 
    h2 { font: normal normal bold 39px/46px League Spartan;} 
    h3 { font: normal normal bold 26px/29px League Spartan;} 
    h4 { font: normal normal normal 20px/28px Public Sans;}
    h5 { font: normal normal bold 18px/21px League Spartan;}
    h6 { font: normal normal bold 16px/18px League Spartan; color: #343A40; }
  
    .intro.blog.blog-article h1 { font: normal normal bold 55px/60px League Spartan;}
    .intro.blog.blog-article h2 { font: normal normal bold 36px/42px League Spartan;}
    .intro.blog.blog-article h3 { font: normal normal bold 26px/29px League Spartan;}
    .intro.blog.blog-article h4 { font: normal normal bold 22px/28px League Spartan;}

  
    .fs-28 { font: normal normal normal 20px/28px Public Sans;} 
    .fs-19 { font: normal normal normal 18px/20px Public Sans;}
    .fs-16 { font: normal normal normal 13px/20px Public Sans;}
  
    .fs-72-icon { font-size: 51px;} 
    .fs-30-icon { font-size: 21px;}
    
    
    .intro.blog.blog-article .row {
        width: 1162px; /*1220 - 58*/
    }
    
    .second-block .content-left {
      margin: auto;
      padding-left: 50px;
    }

    .second-block .content-right, .content-left img, .content-right img {
      width: 100%;
      padding-right: 50px;
    }
    
    .second-block .col-md-3 {
        width: 50%;
        margin-bottom: 3rem !important;
    }
    
    .card-row {
        width: 1220px;
    }

    .team-row {
        width: calc(80vw);
    }

    .card-circle {
        width:  calc(7vw);
        height: calc(7vw);
        border-radius: calc(3.5vw);
    }
    
    .card-square p, .card-wrapper .card-square h4 {
      margin-left: 34px;
    }
    
    .card.card-square.team.left {
        height: 226px;
        transform: translate(0px, -240px);
    }

    .card.card-square.team.right {
        height: 226px;
        transform: translate(0px, -240px);
    }
    
    .col-md-4 .card-square {
      width: 327px;
    }
    
    .col-md-3 .card-square {
      width: 268px;
    }
    
    .col-md-4 .card-square.reference {
      height: 356px;
      width: 336px;
    }
    
    .col-md-4.bug .card-circle.bottom-right {
        left: unset;
        top: unset;
        right: -38px;
        bottom: -38px;
    }
  
    .col-md-4.bug .card-circle.bottom-right img {
        transform: rotate(315deg);
    }
  
    .col-md-4.bug .card-circle.top-right {
        left: unset;
        top: -38px;
        right: -38px;
        bottom: unset;
    }
  
    .col-md-4.bug .card-circle.top-right img {
        transform: rotate(225deg);
    }
    
    .orange-arrows-bottom-left {
      background-position: 3.6% 100%;
    }
    
    .colored-arrows-top-right {
      background-position: 85% 100%;
    }
    
    
    .col-md-3 .card-square {
      width: 512px;
      height: 136px;
    }
    .col-md-3.bug:nth-child(odd) {
        margin-top: -150px;
        width: 50%;
    }

    .col-md-3.bug:nth-child(even) {
        margin-top: 150px;
        width: 50%;
    }
    
    .col-md-3.bug:nth-child(even) .card-body h4 {
        text-align: right;
    }
    
    .card-circle.bottom-right {
        left: -32px;
        top: -32px;
        right: unset;
        bottom: unset;
    }
    
    .intro.blog .card-circle.bottom-right {
        left: unset;
        top:  unset;
        right: -32px;
        bottom: -32px;
    }
    
    .card-circle.bottom-right img {
        transform: rotate(135deg);
    }
}

@media screen and (max-width: 1220px) {
    h1 {font: normal normal bold 60px/66px League Spartan;}
    h2 {font: normal normal bold 36px/44px League Spartan;}
    h4 {font: normal normal normal 20px/30px Public Sans;}
    
    .intro.blog.blog-article h1 { font: normal normal bold 52px/56px League Spartan;}
    .intro.blog.blog-article h2 { font: normal normal bold 33px/40px League Spartan;}
    .intro.blog.blog-article h3 { font: normal normal bold 27px/32px League Spartan;}
    .intro.blog.blog-article h4 { font: normal normal bold 21px/30px League Spartan;}
    
    .intro.blog.blog-article p, .intro.blog.blog-article li { font: normal normal normal 16px/24px Public Sans;}
    .intro.blog.blog-article .fs-19 { font: normal normal normal 18px/26px Public Sans;}
    
    .fs-28 { font: normal normal normal 20px/30px Public Sans; }
    
    .fs-42-icon { font-size: 36px;}

    
    .intro.blog.blog-article .row {
        width: calc(100vw - 129px); /*1400 - 92*/
    }
    
    .card-row {
        width: calc(100vw);
    }

    .team-row {
        width: calc(90vw);
    }

    .card-circle {
        width:  80px;
        height: 80px;
        border-radius: 40px;
        margin-left: -40px;
    }
    
    .card-square {
        width: 386px;
        height: 206px;
    }
    
    .col-md-4 .card-square {
      width:  278px;
      height: 246px;
      transform: translate(0px, -165px);
    }
    
    .card-square p, .card-wrapper .card-square h4 {
      margin-left: 30px;
    }
    
    .col-md-4 .card-square.reference {
      height: 336px;
      width: 296px;
    }
    
    .col-md-4.bug .card-square.blog {
        height: 366px;
    }
    
    .col-md-6.team {
        width: 65%;
    }
    
    .fs-16.text-center.ps-5.pe-5.pt-3 {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }
    
    .col-md-3 .card-square {
        width: 446px;
        height: 156px;
    }

@media screen and (max-width: 1030px) {
    .intro {
        min-height: 900px;
    } 
    
    .intro .mask {
        min-height: 915px;
        top: -60px;
    }

    .intro.blog {
        min-height: 1150px;
        margin-top: -53px;
        margin-bottom: -3px;
    }

    .intro.blog .mask {
        min-height: 1150px;
    }
    
    .second-block .content-left {
        text-align: justify;
        margin: auto;
        padding-left: 50px;
        padding-right: 50px;
    }

    .second-block .content-left img {
        display: flex !important;
        justify-content: center !important;
        padding-left: 50px;
        padding-right: 50px;
    }
  
    .second-block .content-right {
        text-align: justify;
        margin: auto;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 50px;
    }
  
    .second-block .content-right img {
        display: flex !important;
        justify-content: center !important;
        padding-left: 50px;
        padding-right: 50px;
    }
  
    .third-block .col-md-6.cards {
        width: 100%;
    }
  
    .third-block .col-md-4.cards {
        height: 146px;
        width: 100%;
    }

    .card-square {
        width: 436px;
        height: 182px;
    }
  
    .col-md-6.cards .card.card-square {
        height: 156px;
        transform: translate(0px, -118.5px);
    }
  
    .col-md-6.team {
        width: 85%;
    }
    
    .col-md-4 .card-square {
        width:  578px;
        height: 156px;
        transform: translate(0px, -113px);
    }
    
    .col-md-4 .card-square.reference {
        height: 386px;
        width: 286px;
    }
    
    .col-md-4.bug .card-square.blog {
        height: 236px;
    }
    
    .col-md-4.bug {
        width: 100%;
    }
  
    .col-md-4.bug .card-square {
        width:  494px;
        height: 146px;
        transform: unset;
        margin: auto auto 50px auto !important; /* top right bottom left */
    }

    .col-md-4.bug .card-circle.bottom-right {
        left: unset;
        top: unset;
        width:  72px;
        height: 72px;
        right: -33px;
        bottom: -33px;
    }
  
    .col-md-4.bug .card-circle.bottom-right img {
        transform: rotate(315deg);
    }
  
    .col-md-4.bug .card-circle.top-right {
        right: unset;
        bottom: unset;
        width:  72px;
        height: 72px;
        left: -33px;
        top: -33px;
    }
  
    .col-md-4.bug .card-circle.top-right img {
        transform: rotate(135deg);
    }
  
    .col-md-4.bug:nth-child(even) .card-body h4 {
        text-align: right;
    }
  
    .col-md-3 .card-square {
        width: 356px;
        height: 156px;
    }
    
    .col-md-3 .card-square.standalone {
        width: 356px;
        height: 186px;
    }  
    
    .fs-16.text-center.ps-5.pe-5.pt-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
  
}

@media screen and (max-width: 768px) {
    h1, .second-block .usecase-text h1 { font: normal normal bold 32px/35px League Spartan;}
    h2, .second-block .usecase-text h2 { font: normal normal bold 26px/29px League Spartan;}
    h3, .second-block .usecase-text h3 { font: normal normal bold 26px/29px League Spartan;}
    h4 { font: normal normal normal 16px/24px Public Sans;}
    h5 { font: normal normal bold 17px/18px League Spartan;}
    h6 { font: normal normal bold 20px/22px League Spartan; color: #343A40; }

    .intro.blog.blog-article h1 { font-size: 32px; line-height: 35px; }
    .intro.blog h2, .intro.blog.blog-article h2 { font-size: 26px; line-height: 29px; }
    .intro.blog.blog-article h3 { font-size: 23px; line-height: 26px; }
    .intro.blog.blog-article p, .intro.blog.blog-article li  { font-size: 16px; line-height: 20px; }
  
    .fs-28 { font: normal normal normal 15px/20px Public Sans;}
    .fs-19 { font: normal normal normal 16px/20px Public Sans;}
    .fs-16 { font: normal normal normal 13px/20px Public Sans;}

/*   .fs-16-icon { font-size: 16px;} */
  .fs-30-icon { font-size: 18px;}
  .fs-72-icon { font-size: 49px;}

  
  
  .navbar-brand img {
    height: 38px;
  }
  
    .navbar .container-fluid {
        margin-left: calc(1vw);
        margin-right: calc(1vw);
    }
    
    .navbar-nav.d-flex.flex-row.order-lg-last.me-2 {
        margin: unset !important;
    }
  
    .intro {
        min-height: 800px;
        
    }
    
    .intro .mask {
        min-height: 800px;
        top: 0px;
    }
    
    .intro.blog {
        margin-top: -52px;
        margin-bottom: -1px;
        min-height: 800px;
    }

    .intro.blog .mask {
        min-height: 800px;
    }
    
    
    
    .intro p, .intro h2 { font: normal normal normal 16px/24px Public Sans;}
  
    .intro .row {
        margin-left:  12px !important;
        margin-right: 12px !important;
        margin-top: 96px !important;
    }

    .intro.blog.blog-article .row {
        width: 100%; /*1400 - 92*/
    }
  
  /*.first-block {
    background-image: url("DYNAM-first-block-mobile.webp");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: auto 300px;
    height: 390px;
  }*/

  .second-block .col-md-3 {
    width: 100%;
  }
  .second-block .content-left  img,
  .second-block .content-right img
  {
    padding-left:  0px;
    padding-right: 0px;
  }

  .first-block .col-lg-5 {
    width: 70%;
    margin-left: 22px;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .third-block .col-md-6.cards:nth-child(odd),
  .third-block .col-md-6.cards:nth-child(even)
  {
    padding-right: 0 !important;
    padding-left: 0 !important;
    justify-content: center !important;
  }
  
    .third-block .col-md-4.cards {
        height: 246px;
        width: 100%;
    }

    
    .card-circle.team.left {
        width: 150px;
        height: 150px;
        border-radius: 75px;
        margin: auto;
    }
    
    .card-circle.team.right {
        width: 150px;
        height: 150px;
        border-radius: 75px;
        margin: auto;
    }
    
    .card-square {
        width: 296px;
        height: 246px;
        transform: translate(0px, -160.5px);
    }

    .col-md-6.cards .card.card-square {
        height: 186px;
        transform: translate(0px, -132.5px);
    }
    
    .col-md-6.team {
        height: 385px;
    }
    
    .col-md-6.team:nth-child(odd) {
        margin-bottom: 3rem !important;
    }
    
    .col-md-4 .card-square {
        width:  294px;
        height: 256px;
        transform: translate(0px, -164px);
    }

    .col-md-4.bug .card-square.blog {
        height: 366px;
    }
    
    .col-md-4.bug .card-square {
        width:  294px;
        height: 216px;
    }

  
    .col-md-3 .card-square.reference {
        height: 316px;
        width: 336px;
    }
    
     .card.card-square.team.left, .card.card-square.team.right  {
        height: 320px;
        transform: translate(0px, -75px);
        width: 100%;
        margin: auto !important;
    }
    
    .card-square.team h4, .card-square.team.right h4 {
        margin-left: unset;
        margin-right: unset;
        margin-top: 75px;
        text-align: center;
    }
    
    .card-square.team p, .card-square.team.right p, .card-square.team.right .fs-16.text-end, .card-square.team.left .fs-16.text-start {
        margin-left: unset;
        margin-right: unset;
        text-align: center !important;
    }
  
  
    .col-md-3.bug:nth-child(odd) {
        margin-top: unset;
        width: 100% !important;
        margin-left: -16px;
    }
    .col-md-3.bug:nth-child(even) {
        margin-top: unset;
        width: 100%;
        margin-left: 16px;
    }
  
    .col-md-3 .card-square {
        width: 296px;
        height: 180px;
    }
  
    .col-md-3.bug:nth-child(even) .card-body h4 {
        text-align: right;
    }
  
    .footer-block .fs-16 {
        font: normal normal normal 10px/16px Public Sans;
    }
  
    .line-desktop {display: none;}
    .line-mobile  {display: block;}
    
    .third-block .col-md-4 {
        width: 100%;
    }

    .team-row {
        width: calc(90vw);
    }
  
  .d-flex.align-items-end.justify-content-end.me-5.text-white {
    margin: 0 !important;
  }
  
  .card-circle.bottom-right {
    width:  82px;
    height: 82px;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    top: -27px;
    left: -27px;
    /*bottom: unset;*/
    /*right: unset;*/
  }
  
  .card-circle.bottom-right img {
    transform: rotate(135deg);
  }
}