@import "colors";
@import "dropdowns";
@import "monster_style";
@import "common";

html {
}

body {
  max-width: 100%;
  background: #F4F6FA;

  & > div.row {
    margin: 0;
  }
}

#lang-menu-dropdown li a {
  padding: 0 !important;
}

.navbar {
  background: #1E50D2;
  color: #fff;
  border-bottom: 1px solid #466EE6;
}

h2, .heading-text {
  font-weight: bold;
  font-size: 40px;
  line-height: 52px;
  text-align: center;

}

//noinspection CssUnknownTarget
.bg {

  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 240px;
  margin-top: -1px;

  &.blue-bot {
    background: linear-gradient(to bottom right, #1E50D2 0  calc(~'50% - 1px'), #F4F6FA calc(~'50% + 1px') 100%);
    position: absolute;

  }

  &.blue-top {
    background: linear-gradient(to bottom right, #F4F6FA 0 calc(~'50% - 1px'), #1E50D2 calc(~'50% + 1px') 100%);
    position: absolute;

  }

  &.white-bot {
    background: linear-gradient(to bottom right, #fff 0  calc(~'50% - 1px'), #F4F6FA calc(~'50% + 1px') 100%);
  }

  &.white-top {
    background: linear-gradient(to bottom right, #F4F6FA0  calc(~'50% - 1px'), #Fff calc(~'50% + 1px') 100%);

  }

  &.transparent-gray {
    background: linear-gradient(to bottom right, #F4F6FA 0 calc(~'50% - 1px'), transparent calc(~'50% + 1px') 100%);
    position: relative;
  }

}

img {
  max-width: 100%;
}

img.bg {
  display: block;
  position: absolute;
  width: 100%;
  height: unset;
  z-index: -1;

}

#heading-section {
  //min-height: 40vh;
  background-color: #1E50D2;
  padding: 80px 0 0 0;

  h1 {
    color: #FFFFFF;
    text-align: left;

    font-weight: bold;
    font-size: 42px;
    line-height: 52px;
  }

  h2 {
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 34px;
    text-align: left;
    color: #A0D2FA;
  }

  img {
    margin-left: -130px;
    max-width: 50vw;
  }

  h3 {
    position: relative;
    color: #FFF;
    .heading-text();
  }
}

#choose-us {

  h3 {
    position: relative;
    color: #FFF;
    .heading-text();
  }

  .l-card {
    padding: 50px 15px;
    min-height: 360px;
    width: 290px;

    span.value-text {
      display: block;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      font-weight: 600;

      color: #1E283C;
    }

    span.label-text {
      display: block;
      font-size: 16px;
      line-height: 23px;
      text-align: center;

      color: #788296;

    }
  }
}

#features {
  padding: 80px 0 0 0;
  background: #F4F6FA;;

  h3 {
    color: #283246;
    .heading-text();
  }

  .feature-line {
    margin-bottom: 40px;

    h3 {
      font-weight: bold;
      font-size: 20px;
      line-height: 30px;

      color: #1E283C;
    }

    span.label-text {
      .heading-text();
      font-size: 16px;
      line-height: 23px;
      font-weight: normal;
      color: #788296;
    }
  }
}

#trust {
  height: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  h3 {
    .heading-text();
    color: #fff;
  }

  .reason {
    height: 270px;
    border: 2px solid #4682E6;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 40px 20px;

    span.header-text {
      .heading-text();
      display: block;
      font-weight: 900;
      font-size: 60px;
      line-height: normal;

      color: #A0D2FA;


    }

    span.sub-text {
      .heading-text();
      display: block;
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;
      color: #FFF;

    }
  }

}

#plans {
    background: #F4F6FA;

    .plans-row .col-auto {
        padding: 0 7.5px
    }

    .plan {
        margin-top: calc(-1140px / 5);
        width: 550px;
        padding: 40px;

        h3.header-text {
            font-family: Roboto;
            font-style: normal;
            font-weight: bold;
            font-size: 42px;
            line-height: 59px;
            text-align: center;
            color: #1E283C;
        }

        .price {
            padding: 0;
            font-style: normal;
            font-weight: bold;
            font-size: 50px;
            line-height: 90px;
            letter-spacing: -0.03em;
            text-align: center;
            color: #004ad4;
        }

        .oldprice {
            padding: 0;
            font-style: normal;
            letter-spacing: -0.03em;
            text-align: center;
            color: #D3D3D3;
            font-weight: lighter;
            font-size: 30px;
            line-height: 75px;
            vertical-align: middle;
        }

        .oldprice:after {
            content: '';
            display: block;
            position: absolute;
            width: 36%;
            left: 0%;
            right: 0;
            height: 1px;
            background-color: #c42e2e;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-transform: rotate(-15deg);
            -ms-transform: rotate(-15deg);
            transform: rotate(-15deg);
        }

        #question-mark-1,
        #question-mark-2,
        #question-mark-3,
        #question-mark-4,
        #question-mark-5{
            position: absolute;
            top: 10px;
            cursor: pointer;
            right: 10px;
        }

        small {
            font-style: normal;
            font-weight: bold;
            font-size: 28px;
            line-height: normal;
            color: #A0AABE;
        }

        .price-per-one {
            border-top: 1px solid #F0F2F5;
            border-bottom: 1px solid #F0F2F5;
            padding: 30px 0;
        }

        span.sub-text {
            font-style: normal;
            font-size: 24px;
            line-height: 30px;
            color: #1E283C;
            margin: 0;
            font-weight: 700;

            span {
                color: #3C6EF0;
            }
        }
    }
}

#guarantee {
  background: #fff;

  span.label-text {
    display: block;

    font-size: 22px;
    line-height: 34px;
    text-align: center;

    color: #283246;
  }
}

#faq {
  h3 {
    .heading-text()
  }

  padding: 50px 0 0 0;
}

#mobile-navbar-expanded {
  position: fixed;
  display: none;

  justify-content: center;
  align-items: center;
  z-index: 2020;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .show {
    display: block
  }

  .show {
    display: block
  }

  .btn {
    margin: 10px 0;

    font-size: 16px;
    line-height: 60px;
    text-align: center;
    width: 200px;
  }

}

#footer {
  //noinspection CssUnknownTarget
  background: url("/img/landing/bg-sq.png");
  top: 10px;
  //height: 920px;
  position: relative;
  display: flex;
  flex-direction: column;

  & > div:not(.bg) {
    padding: 10vh 10px;

    h2 {
      color: #fff;
    }
  }

  & > footer {
    flex: 0 0 auto;
    width: auto;
    max-height: 100%;

    ul {
      margin: 0;
      display: flex;
      flex-direction: row;

      li {
        list-style: none;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 100px;
        text-align: right;
        margin: 0 15px;
        color: #FFf;

        a {
          color: #fff
        }
      }
    }
  }

  ul {
    padding-inline-start: 0;
  }
}

.l-card {

  background: #FFF;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  cursor: pointer;

  &:hover,
  &.hover {
    transform: scale(1.05);
    box-shadow: 10px 10px 20px 3px rgba(0, 0, 0, 0.15);
  }
}

.accordion-item {
  background: #FFF;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px 30px 0 30px;
  margin-bottom: 20px;
  cursor: pointer;

  & > .row {
    margin-bottom: 20px;
  }

  header {
    font-size: 20px;
    line-height: 26px;

    color: #1E283C;

  }


  img {
    width: 14px;
    cursor: pointer;
  }

  .accordion-content {
    height: 0;
    overflow: hidden;

    p {
      padding-right: 40px;

      font-size: 16px;
      line-height: 23px;

      color: #788296;
    }
  }
}


.btn:not(.no-cm) {
  &.btn-lg {
    line-height: 60px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 0 2rem;
    color: #FFF;
  }

  &.btn-green {
    background: #14BE82;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    color: white;
  }

  &.outline-green {
    background: transparent;
    color: #14BE82;
    border: 1px solid #14BE82;
    border-radius: 5px;

    padding: 0;
    min-width: 230px;

    font-weight: bold;
    font-size: 20px;
    line-height: 60px;
    text-align: center;

    &:hover {
      background: #14BE82;
      color: #fff;
    }
  }
}

.popover {
  background: #FFFFFF;
  border: none;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  max-width: 490px;

  .popover-body {
    padding: 20px;

  }

  h6 {
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;

    color: #1E283C;

  }
}

#lang-dropper {
  cursor: pointer;
}

.btn.btn-lg.btn-green:hover {
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.25);

}

@media (max-width: 768px) {

  @import "landing_mobile";

}

@media (min-width: 768px) and (max-width: 991.98px) {
  @import "landing_tablet";
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  #heading-text-container {
    margin-right: 30px;
  }
}

.beta-mark {
  display: inline-block;
  margin-left: 2px;
  padding-left: 5px;
  padding-right: 6px;
  border-radius: 4px;
  background: #CDE7FF;
  font-weight: 900;
  font-size: 15px;
  line-height: 21px;
  color: #2864DC;
  vertical-align: text-bottom;
}