.planifico-container {
    padding: 35px 75px 0px 75px;
}

.main-header {
  column-gap: 136px;
  height: calc(100vh - 190px);
  max-height: 950px;
}

.main-header .left h1 {
  margin-bottom: 10px;
  margin-top: 0;
}

.main-header .left p {
  font: normal normal normal 35px/40px Lato;
}

.main-header .right {
  position: relative;
  width: 100%;
  height: 100%;
}

.blue_shade {
  position: absolute;
  top: -6%;
  left: 1%;
  z-index: 0;
  width: 800px;
  height: 600px;
}

.main-header .right img:nth-of-type(1) {
  position: absolute;
  z-index: 1;
  max-width: 900px;
  max-height: 660px;
  height: 100%;
}

.bottom-row .play-stores {
  width: 50%;
}

.bottom-row .play-stores a {
  column-gap: 10px;
  width: 200px;
}

.bottom-row .play-stores a img {
  width: 100%;
}

.bottom-row p {
  font: normal normal normal 15px/30px Lato;
}

.planifico-text p {
  font: normal normal normal 24px/30px Lato;
}

.schedule .right img {
  width: 100%;
  height: 381px;
  border-radius: 15px;
}

.transition img {
  width: 100%;
  height: 100%;
}

.mobile-application img {
  height: 500px;
  object-fit: contain;
}

 .free-trial img {
  width: 600px;
  height: 500px;
}

.suite-logique {
  height: 621px;
  column-gap: 15px;
}

.suite-logique .left {
  background: #F0F0F0 0% 0% no-repeat padding-box;
  border-radius: 20px;
  padding: 10px 80px;
  height: 100%;
}

.suite-logique .left p {
  font: normal normal normal 20px/30px Lato;
}

.suite-logique .right {
  padding: 10px 10px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  height: 100%;
  border-radius: 15px;
}

.suite-logique .right .preference p {
  font: normal normal normal 40px/50px Lato;
  margin-top: 90px;
}

.suite-logique .right span {
  display: block;
  text-align: center;
  font: normal normal normal 12px/50px Lato;
  color: #000000;
  opacity: 0.38;
}

.benefits {
  flex-wrap: wrap;
  row-gap: 130px;
}

.benefit {
  flex-basis: 26%;
  column-gap: 20px;
  display: flex;
  grid-template-columns: auto auto;
}

.benefit .icon img{
  width: 66px;
  height: 66px;
}

.benefit .icon{
  width: 66px;
  height: 66px;
}

.benefit .info {
  display: flex;
  flex-direction: column;
  row-gap: 9px;
}

.benefit .info h3 {
  font: normal normal 600 20px/24px Lato;
  margin: 0;
}

.benefit .info p {
  font: normal normal normal 15px/18px Lato;
  letter-spacing: 0px;
  color: #646464;
  margin: 0;
}

.mobile-application {
  margin-top: 150px;
}

.mobile-application img {
  width: 100%;
}

.mobile-application p {
  font: normal normal normal 27px/30px Lato;
}

.free-trial {
  column-gap: 60px;
}

.free-trial .versions {
  column-gap: 9px;
}

.free-trial .versions div img {
  width: 100%;
  height: 46px;
}

.free-trial .right {
  height: 619px;
  background-image: url('/img/planifico/free_trial_2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 15px;
}

@media screen and (min-width: 1920px) {
  .main-header .right img {
    top: 11%;
    left: 12%;
  }
}

@media screen and (max-width: 1400px) {
  .main-header .left p {
    font: normal normal normal 15px/20px Lato;
  }
}

@media screen and (min-width: 300px) and (max-width: 991px)  {
  .planifico-container {
    padding: 0px 15px !important;
    margin: auto !important;
  }

  .main-header {
    flex-direction: column;
    width: 100%;
    height: 600px;
  }

  .main-header .left {
    flex: none;
  }

  .main-header .left h1 {
    font: normal normal bold 80px/80px Lato;
  }

  .main-header .left p {
    font: normal normal normal 20px/32px Lato;
  }

  .main-header .right {
    width: 100%;
    height: 300px;
    flex: unset;
  }

  .main-header .right img {
    width: 100%;
    height: 100%;
  }

  .grid-separation, .grid-equal {
    display: flex !important;
    flex-direction: column !important;
  }

  .bottom-row {
    flex-direction: column;
  }

  .bottom-row .play-stores {
    width: unset !important;
  }

  .schedule {
    margin-top: 50px;
  }

  .planifico-text h2 {
    font: normal normal bold 30px/30px Lato;
    text-align: left;
  }

  .planifico-text p {
    font: normal normal normal 20px/40px Lato;
  }

  .transition h2 {
    font: normal normal bold 28px/30px Lato;
    text-align: center;
  }

  .transition p {
    text-align: center;
  }

  .suite-logique {
    width: 100%;
    height: 100%;
  }

  .suite-logique .left {
    padding: 30px;
  }

  .suite-logique .left p {
    margin-bottom: 0;
  }

  .suite-logique .right .preference p {
    font: normal normal normal 25px/45px Lato;
  }

  .middle-header {
    font: normal normal bold 30px/30px Lato;
    margin-top: 55px;
  }

  .mobile-application {
    margin-top: 30px;
  }

  .benefits {
    display: flex;
    flex-direction: column;
    row-gap: 50px;
    margin-top: 50px;
  }

  .free-trial {
    margin-top: 20px;
  }

  .free-trial .right {
    width: 100%;
    height: 200px;
    border-radius: 20px;
  }

  .free-trial .versions {
    margin-bottom: 30px;
  }
}