@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.summary {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.title {
  text-align: center;
  margin: 6rem 0;
}

.trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;

  &_title {
    margin-bottom: 3rem;
    text-align: center;
  }

  &_list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    @include on-desktop {
      flex-direction: row;
    }
    @include on-mobile {
      flex-direction: column;
    }

    &_item {
      height: 240px;
      @include on-desktop {
        width: calc(100% / 3 - 1rem * (3 - 1));
      }
      @include on-mobile {
        width: 100%;
        &:not(:last-child) {
          margin-bottom: 2rem;
        }
      }
    }
  }
}

.opinion {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;

  &_title {
    text-align: center;
  }

  &_list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 3rem;
    @include on-desktop {
      flex-direction: row;
    }
    @include on-mobile {
      flex-direction: column;
      padding: 0 1rem;
    }
    &_item {
      background: $white;
      border-radius: $radius;
      box-shadow: $shadow-normal;
      //flex: 1;
      margin: .5rem;
      padding: 2rem !important;
      height: 100%;
      width: 100%;
      min-height: 360px;
      font-size: 16px;
      &_quote {
        //height: 10rem;
        font-size: 10rem;
        margin-top: -4rem;
        margin-left: -1rem;
        position: absolute;
        color: rgb(229,216,234);
      }
      &_title {
        margin: {
          top: 1.75rem;
          bottom: 2.75rem;
        }
      }
    }
  }
  &_description {
    margin: 2.5rem auto;
    text-align: center;
    font-size: 18px;
  }
  &_action {
    display: flex;
    @include on-desktop {
      flex-direction: row;
    }
    @include on-mobile {
      flex-direction: column;
    }
    &_button {
      @include on-desktop {
        margin: 0 2rem;
      }
      @include on-mobile {
        margin: 1rem 0;
      }
      text-align: center;
      a {
        width: 160px;
        height: 56px;
      }
      &_green {
        transform: none;
        color: white;
        background-color: #4FC172;
        border: none;
        &:hover, &:active, &:focus {
          color: white;
          border: none;
        }
      }
      &_blue {
        transform: none;
        color: white;
        background-color: #3A40E1;
        border: none;
        &:hover, &:active, &:focus {
          color: white;
          border: none;
        }
      }
      p {
        //position: absolute;
        margin-top: .5rem;
        //font-size: 14px;
        //color: #666;
        @include p2();
      }
    }
  }
}

.conference {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;
  &_title {
  }
  &_description {
    margin-top: 22px;
    font-size: 24px;
  }
  &_datetime {
    margin-top: 14px;
    font-size: 18px;
  }
  &_table {
    margin-top: 58px;
    width: 100%;
    font-size: 16px;
    thead {
      background-color: #172D72;
      th {
        color: white;
        border: none;
      }
    }
    td {
      padding: {
        top: 14px;
        bottom: 14px;
      }
    }
  }
  &_action {
    margin-top: 74px;
  }
}

.cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;

  &_title {
    margin-bottom: 3rem;
  }
}

.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;

  a {
    &:hover {
      color: #fff;
    }
  }

  &_title {
    margin-bottom: 3rem;
    text-align: center;
  }

  &_list {
    display: flex;
    justify-content: space-around;
    width: 100%;
    @include on-desktop {
      flex-direction: row;
    }
    @include on-mobile {
      flex-direction: column;
    }
    &_item {
      display: block;
      height: 240px;
      @include on-desktop {
        width: calc(100% / 3 - 1rem * (3 - 1));
      }
      @include on-mobile {
        width: 100%;
        &:not(:last-child) {
          margin-bottom: 2rem;
        }
      }
    }
  }
}

.contact {
  &_body {
    padding: 3rem 0;

    &_title {
      @include h2();
      color: $white;
    }

    &_content {
      @include h5($light);
      color: $white;
      margin-top: 1rem;
    }
  }

  a:hover {
    color: $red;
  }

  &_button {
    font-weight: 600;
  }

  @include on-mobile {
    &_body {
      flex-direction: column;
      padding: 3rem 2rem !important;

      &_title {
        text-align: center;
      }
    }
    &_button {
      margin-top: 1rem;
    }
  }
}