@import "_variables";
@import "_fonts";

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

*:focus,
*:hover {
  outline: none;
  text-decoration: none;
}

body {
  box-sizing: border-box;
  font-family: $font-family-hk;
  font-weight: 400;
  background: $color-white;
  padding-top: 98px;
  font-size: 14px;

  @media screen and (max-width:768px) {
    padding-top: 74px;
  }
}

a {
  text-decoration: none;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: $color-text-light;
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: $color-text-light;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: $color-text-light;
}

::-webkit-scrollbar {
  display: none;
}

h1,
h2,
h3,
h4 {
  line-height: 1.5;
  color: $color-text-dark;
  ;
}

h1 {
  font-size: 40px;

  @media screen and (max-width:768px) {
    font-size: 24px;
  }
}

h2 {
  font-size: 36px;

  @media screen and (max-width:768px) {
    font-size: 24px;
  }
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

p {
  line-height: 1.5;
  color: $color-text-light;
  font-weight: 400;
}

.relative {
  position: relative;
}

.section {

  // All section propertioes
  &.dark-blue {
    background: $color-secondary;
  }
}

// Footer Form Commmon
.footer-form {
  .form-group {
    position: relative;

    .form-label {
      color: $color-blue;
      margin-bottom: 0;
      font-size: 16px;
      font-weight: 500;
      font-family: $font-family-sora;
    }

    .form-control {
      background-color: transparent;
      border: none;
      border-bottom: 1px solid $color-grey;
      border-radius: 0;
      font-size: 16px;
      font-weight: 500;
      font-family: $font-family-hk;
      padding: 12px 54px 12px 0;
      color: $color-text-white;

      &::placeholder {
        color: $color-grey;
      }

      &:focus {
        box-shadow: none;
      }

      &.is-invalid {
        // display: none;
        background-position: right calc(1.975em + 0.1875rem) center;
      }

      &.is-valid {
        background-position: right calc(1.975em + 0.1875rem) center;
      }
    }
  }
}

// Form Search
.form-blog {
  .form-group {
    position: relative;

    .btn {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 8px;
      margin: auto 0;
    }

    .form-control {
      padding: 8px 8px 8px 42px;
      border-radius: 98px;
      border: solid 1px $color-grey;
      color: $color-secondary;
      font-size: 16px;
      font-weight: 500;

      &:focus {
        box-shadow: none;
      }

      &::placeholder {
        color: $color-grey;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

.view-more-wrap {
  text-align: center;

  span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    font-family: $font-family-sora;
    color: $color-primary;
    margin: 40px 0 16px 0;

    @media screen and (max-width:768px) {
      margin: 56px 0 16px 0;
    }
  }

  .btn {
    display: inline-block;
  }
}

.modal-backdrop.show {
  background: $secondary-color;
  opacity: 0.75;
}