@charset "UTF-8";
/*
Theme Name: Ashnah Monitor Template
Theme URI: https://example.com
Description: A description about the theme
Author: Md. Shariul Islam
Author URI: https://www.shariul.com
Version: 1.0
Tags: responsive, columns, custom menu, etc.
*/
/*

Font sizes (px):- 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

Spacing system (px):- 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160

*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 60%;
  }
}
@media only screen and (max-width: 62.5em) {
  html {
    font-size: 58%;
  }
}
@media only screen and (max-width: 50em) {
  html {
    font-size: 56%;
  }
}
@media only screen and (max-width: 37.5em) {
  html {
    font-size: 54%;
  }
}

body {
  box-sizing: border-box;
}

@font-face {
  font-family: "Lato";
  src: url("./webfonts/Lato-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("./webfonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url("./webfonts/Lato-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url("./webfonts/Lato-Light.ttf") format("truetype");
  font-weight: lighter;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("./webfonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: lighter;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url("./webfonts/Lato-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  color: #212529;
  font-family: "Lato", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", sans-serif;
}

.heading-1 {
  font-size: 5.2rem;
  line-height: 1.2;
  letter-spacing: -1px;
}

.heading-2 {
  font-size: 3.6rem;
}

.heading-3 {
  font-size: 2.4rem;
}

.heading-4 {
  font-size: 2rem;
}

.text--center {
  text-align: center;
}

.m-12 {
  margin: 1.2rem;
}

.mx-12 {
  margin-right: 1.2rem;
  margin-left: 1.2rem;
}

.my-12 {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.mt-12 {
  margin-top: 1.2rem;
}

.mr-12 {
  margin-right: 1.2rem;
}

.mb-12 {
  margin-bottom: 1.2rem;
}

.ml-12 {
  margin-left: 1.2rem;
}

.p-12 {
  padding: 1.2rem;
}

.px-12 {
  padding-right: 1.2rem;
  padding-left: 1.2rem;
}

.py-12 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.pt-12 {
  padding-top: 1.2rem;
}

.pr-12 {
  padding-right: 1.2rem;
}

.pb-12 {
  padding-bottom: 1.2rem;
}

.pl-12 {
  padding-left: 1.2rem;
}

.m-16 {
  margin: 1.6rem;
}

.mx-16 {
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}

.my-16 {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

.mt-16 {
  margin-top: 1.6rem;
}

.mr-16 {
  margin-right: 1.6rem;
}

.mb-16 {
  margin-bottom: 1.6rem;
}

.ml-16 {
  margin-left: 1.6rem;
}

.p-16 {
  padding: 1.6rem;
}

.px-16 {
  padding-right: 1.6rem;
  padding-left: 1.6rem;
}

.py-16 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.pt-16 {
  padding-top: 1.6rem;
}

.pr-16 {
  padding-right: 1.6rem;
}

.pb-16 {
  padding-bottom: 1.6rem;
}

.pl-16 {
  padding-left: 1.6rem;
}

.m-24 {
  margin: 2.4rem;
}

.mx-24 {
  margin-right: 2.4rem;
  margin-left: 2.4rem;
}

.my-24 {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

.mt-24 {
  margin-top: 2.4rem;
}

.mr-24 {
  margin-right: 2.4rem;
}

.mb-24 {
  margin-bottom: 2.4rem;
}

.ml-24 {
  margin-left: 2.4rem;
}

.p-24 {
  padding: 2.4rem;
}

.px-24 {
  padding-right: 2.4rem;
  padding-left: 2.4rem;
}

.py-24 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.pt-24 {
  padding-top: 2.4rem;
}

.pr-24 {
  padding-right: 2.4rem;
}

.pb-24 {
  padding-bottom: 2.4rem;
}

.pl-24 {
  padding-left: 2.4rem;
}

.m-32 {
  margin: 3.2rem;
}

.mx-32 {
  margin-right: 3.2rem;
  margin-left: 3.2rem;
}

.my-32 {
  margin-top: 3.2rem;
  margin-bottom: 3.2rem;
}

.mt-32 {
  margin-top: 3.2rem;
}

.mr-32 {
  margin-right: 3.2rem;
}

.mb-32 {
  margin-bottom: 3.2rem;
}

.ml-32 {
  margin-left: 3.2rem;
}

.p-32 {
  padding: 3.2rem;
}

.px-32 {
  padding-right: 3.2rem;
  padding-left: 3.2rem;
}

.py-32 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.pt-32 {
  padding-top: 3.2rem;
}

.pr-32 {
  padding-right: 3.2rem;
}

.pb-32 {
  padding-bottom: 3.2rem;
}

.pl-32 {
  padding-left: 3.2rem;
}

.m-48 {
  margin: 4.8rem;
}

.mx-48 {
  margin-right: 4.8rem;
  margin-left: 4.8rem;
}

.my-48 {
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
}

.mt-48 {
  margin-top: 4.8rem;
}

.mr-48 {
  margin-right: 4.8rem;
}

.mb-48 {
  margin-bottom: 4.8rem;
}

.ml-48 {
  margin-left: 4.8rem;
}

.p-48 {
  padding: 4.8rem;
}

.px-48 {
  padding-right: 4.8rem;
  padding-left: 4.8rem;
}

.py-48 {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

.pt-48 {
  padding-top: 4.8rem;
}

.pr-48 {
  padding-right: 4.8rem;
}

.pb-48 {
  padding-bottom: 4.8rem;
}

.pl-48 {
  padding-left: 4.8rem;
}

.container {
  max-width: 132rem;
  margin-left: auto;
  margin-right: auto;
}

.row-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.row-flex:not(:last-child) {
  margin-bottom: 6.4rem;
}
@media only screen and (max-width: 50em) {
  .row-flex:not(:last-child) {
    margin-bottom: calc(6.4rem - 3.2rem);
  }
}
@media only screen and (max-width: 90em) {
  .row-flex {
    padding: 0 2.4rem;
  }
}
@media only screen and (max-width: 50em) {
  .row-flex {
    justify-content: center;
  }
}
.row-flex .col-1-2 {
  width: calc(1 * 96% / 2);
}
.row-flex .col-1-3 {
  width: calc(1 * 96% / 3);
}
.row-flex .col-2-3 {
  width: calc(2 * 96% / 3);
}
.row-flex .col-1-4 {
  width: calc(1 * 96% / 4);
}
.row-flex .col-2-4 {
  width: calc(2 * 96% / 4);
}
.row-flex .col-3-4 {
  width: calc(3 * 96% / 4);
}
@media only screen and (max-width: 62.5em) {
  .row-flex [class*=col-] {
    width: calc(1 * 96% / 2);
    margin-bottom: calc(6.4rem - 4.8rem);
  }
}
@media only screen and (max-width: 50em) {
  .row-flex [class*=col-] {
    width: 100%;
  }
}
@media only screen and (max-width: 90em) {
  .row-flex .col--dash {
    width: 100%;
    margin-bottom: 3.2rem;
  }
}

.navbar {
  width: 100%;
  background: #f8f9fa;
  color: #212529;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.navbar__nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 82.5em) {
  .navbar__nav {
    padding: 0 2.4rem;
  }
}
.navbar__logo {
  max-height: 4.4rem;
  margin: 1.2rem 0;
}
.navbar__logo-img {
  display: inline-block;
  height: 100%;
}
.navbar__list {
  display: flex;
  list-style: none;
  list-style-position: inside;
}
@media only screen and (max-width: 50em) {
  .navbar__list {
    flex-flow: column nowrap;
    width: 100%;
    background: #f1f3f5;
    position: absolute;
    top: 100%;
    right: 0;
    opacity: 0;
    transform-origin: top center;
    transform: scaleY(0);
    transition: all 0.2s linear;
  }
}
.navbar__list--sub {
  height: 0;
  min-width: 20rem;
  position: absolute;
  flex-direction: column;
  right: 0;
  top: 100%;
  background-color: #f1f3f5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transform-origin: top;
  transform: scaleY(0);
  transition: all 0.2s linear;
}
@media only screen and (max-width: 50em) {
  .navbar__list--sub {
    z-index: 100;
    width: 100%;
  }
}
.navbar__item {
  position: relative;
}
@media only screen and (max-width: 50em) {
  .navbar__item {
    padding: 0.8rem 2.4rem;
  }
}
.navbar__link, .navbar__link:link, .navbar__link:visited {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0.8rem 2.4rem;
  border: none;
  outline: 2px dashed transparent;
  color: inherit;
  font-size: 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s linear;
}
@media only screen and (max-width: 50em) {
  .navbar__link, .navbar__link:link, .navbar__link:visited {
    width: 100%;
  }
}
.navbar__link:hover, .navbar__link:link:hover, .navbar__link:visited:hover {
  background: #1c7ed6;
  color: #f8f9fa;
}
.navbar__link:active, .navbar__link:focus, .navbar__link:link:active, .navbar__link:link:focus, .navbar__link:visited:active, .navbar__link:visited:focus {
  background: #f8f9fa;
  outline: 2px dashed #f8f9fa;
  color: #212529;
}
.navbar__checkbox {
  display: none;
}
.navbar__checkbox:checked ~ .navbar__list--sub {
  height: initial;
  transform: scaleY(1);
  opacity: 1;
}
.navbar__label-img {
  display: inline-block;
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 1.2rem;
  font-size: 1.8rem;
}
.navbar__label::after {
  content: "❯";
  transform: rotate(90deg);
  font-size: 1.2rem;
  transition: all 0.2s linear;
}
.navbar__checkbox:checked ~ .navbar__label::after {
  transform: rotate(-90deg);
}
.navbar__mobile-only {
  display: none;
}
@media only screen and (max-width: 50em) {
  .navbar__mobile-only {
    display: block;
  }
}
.navbar__toggle {
  align-self: center;
  display: none;
  height: 5rem;
  width: 5rem;
  margin: 1.2rem 0;
  background: #339af0;
  border-radius: 0.8rem;
  cursor: pointer;
}
@media only screen and (max-width: 50em) {
  .navbar__toggle {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (max-width: 50em) {
  .navbar__toggle--open {
    opacity: 1;
    transform: scaleY(1);
  }
}
.navbar__toggle-icon {
  display: block;
  position: relative;
}
.navbar__toggle-icon, .navbar__toggle-icon::before, .navbar__toggle-icon::after {
  width: 3rem;
  height: 2px;
  background-color: #f8f9fa;
  display: inline-block;
}
.navbar__toggle-icon::before, .navbar__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.2s linear;
}
.navbar__toggle-icon::before {
  top: -0.8rem;
}
.navbar__toggle-icon::after {
  top: 0.8rem;
}
.navbar__toggle--open + .navbar__toggle .navbar__toggle-icon {
  background-color: transparent;
}
.navbar__toggle--open + .navbar__toggle .navbar__toggle-icon::before {
  top: 0;
  transform: rotate(135deg);
}
.navbar__toggle--open + .navbar__toggle .navbar__toggle-icon::after {
  top: 0;
  transform: rotate(-135deg);
}
.navbar__text {
  text-align: center;
  padding: 0.8rem 2.4rem;
  margin-top: 3.2rem;
  color: #495057;
}

.header__content {
  padding: 6.4rem 0;
}
@media only screen and (max-width: 50em) {
  .header__content {
    order: 2;
    text-align: center;
  }
}
.header__title {
  margin-bottom: 0.8rem;
}
.header__title-span {
  color: #339af0;
}
.header__text {
  margin-bottom: 2.4rem;
}
.header__list {
  display: flex;
  list-style-type: none;
  list-style-position: inside;
  margin-bottom: 1.6rem;
}
@media only screen and (max-width: 50em) {
  .header__list {
    justify-content: center;
  }
}
.header__item {
  margin-right: 1.6rem;
}
.header__item-icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
  background-color: #a5d8ff;
  border-radius: 50%;
}
.header__btn-box {
  margin-bottom: 2.4rem;
}
.header__right {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 50em) {
  .header__right {
    display: block;
  }
}
@media only screen and (max-width: 50em) {
  .header__img-box {
    text-align: center;
  }
}
.header__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 50em) {
  .header__img {
    max-width: 400px;
  }
}
.header__platform .fab {
  font-size: 2.4rem;
  margin: 0 0.8rem;
}

.footer {
  background-color: #495057;
  color: #f8f9fa;
}
@media only screen and (max-width: 82.5em) {
  .footer {
    padding: 0 2.4rem;
  }
}
.footer__content {
  padding: 6.4rem 0;
}
@media only screen and (max-width: 50em) {
  .footer__right-col {
    text-align: center;
  }
}
.footer__left-col {
  text-align: right;
}
@media only screen and (max-width: 50em) {
  .footer__left-col {
    text-align: center;
  }
}
.footer__title {
  margin-bottom: 0.8rem;
  font-weight: normal;
}
.footer__logo-box {
  width: 6.4rem;
  height: 6.4rem;
  margin-bottom: 1.2rem;
}
@media only screen and (max-width: 50em) {
  .footer__logo-box {
    margin-left: auto;
    margin-right: auto;
  }
}
.footer__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer__list {
  list-style-type: none;
  list-style-position: inside;
}
.footer__link, .footer__link:link {
  color: #e9ecef;
  padding: 0.8rem 0;
  transition: all 0.2s linear;
}
.footer__link:hover {
  transform: scale(1.03);
}
.footer__copyright {
  background-color: #343a40;
  padding: 1.6rem 0;
}

.btn, .btn:link, .btn:visited {
  display: inline-block;
  border: none;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s linear;
  outline: 2px dashed transparent;
}
.btn:hover {
  color: #3bc9db;
}
.btn:active, .btn:focus {
  outline: 2px dashed #212529;
  outline-offset: 2px;
}
.btn--light {
  color: #f8f9fa;
}
.btn--primary, .btn--primary:link, .btn--primary:visited {
  padding: 0.8rem 2.4rem;
  background-color: #339af0;
  color: #f8f9fa;
}
.btn--primary:hover {
  background-color: #a5d8ff;
  color: #212529;
}
.btn--secondary, .btn--secondary:link, .btn--secondary:visited {
  padding: 0.8rem 2.4rem;
  background-color: #3bc9db;
  color: #f8f9fa;
}
.btn--secondary:hover {
  background-color: #339af0;
}
.btn--link, .btn--link:link, .btn--link:visited {
  color: #339af0;
}
.btn--pagination, .btn--pagination:link, .btn--pagination:visited {
  min-height: 3.6rem;
  min-width: 3.6rem;
  padding-top: 4px;
  border-radius: 50%;
  background-color: #3bc9db;
  color: #f8f9fa;
}
.btn--disabled {
  pointer-events: none;
  color: #868e96;
}
.btn--danger, .btn--danger:link, .btn--danger:visited {
  padding: 0.8rem 2.4rem;
  background-color: #ff6b6b;
  color: #f8f9fa;
}
.btn--danger:hover {
  background-color: rgba(255, 107, 107, 0.8);
  color: #212529;
}
.btn--sm, .btn--sm:link, .btn--sm:visited {
  font-size: 1.4rem;
  padding: 0.4rem 1.2rem;
}
.btn--md, .btn--md:link, .btn--md:visited {
  font-size: 1.8rem;
  padding: 1.2rem 3.2rem;
}
.btn--lg, .btn--lg:link, .btn--lg:visited {
  font-size: 1.8rem;
  padding: 1.6rem 4.8rem;
}
.btn--box > *:not(:last-child) {
  margin-right: 1.2rem;
}

.cards {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.cards-2 {
  width: calc(96% / 2);
  margin: 0 calc((100% - 96%) / 4) 4.8rem;
}
.cards-3 {
  width: calc(96% / 3);
  margin: 0 calc((100% - 96%) / 6) 4.8rem;
}
.cards-4 {
  width: calc(96% / 4);
  margin: 0 calc((100% - 96%) / 8) 4.8rem;
}
.cards-5 {
  width: calc(96% / 5);
  margin: 0 calc((100% - 96%) / 10) 4.8rem;
}
@media only screen and (max-width: 75em) {
  .cards-2, .cards-3, .cards-4, .cards-5 {
    width: calc(96% / 2);
    margin: 0 calc((100% - 96%) / 4) 4.8rem;
  }
}
@media only screen and (max-width: 50em) {
  .cards-2, .cards-3, .cards-4, .cards-5 {
    width: calc(96% / 1);
    margin: 0 calc((100% - 96%) / 2) 4.8rem;
  }
}

.dashcard {
  padding: 3.2rem;
  background-color: #ffffff;
  border-radius: 0.8rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.dashcard__stat {
  font-size: 3.6rem;
  font-weight: bold;
  color: #343a40;
}
@media only screen and (max-width: 50em) {
  .dashcard__stat {
    text-align: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .dashcard__stat {
    text-align: initial;
  }
}
.dashcard__text {
  color: #868e96;
  font-size: 2rem;
}
@media only screen and (max-width: 50em) {
  .dashcard__text {
    text-align: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .dashcard__text {
    text-align: initial;
  }
}
.dashcard--sm {
  padding: 0.8rem 2.4rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f8f9fa;
}
.table-list {
  border-collapse: collapse;
}
.table-list__row td {
  padding-right: 2.4rem;
}
.table__caption {
  text-align: left;
  padding: 1.6rem 0;
  font-size: 3rem;
}
.table__row > * {
  padding: 0.8rem 2.4rem;
}
.table__row th {
  text-align: left;
}
.table__row td {
  max-width: 15ch;
}
.table__row:nth-of-type(odd) {
  background-color: #f1f3f5;
}
.table__row--top:nth-of-type(1) {
  background-color: #495057;
  color: #f8f9fa;
  text-transform: uppercase;
}
.table__img-box {
  width: 5.2rem;
  height: 5.2rem;
  overflow: hidden;
}
.table__img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.table td a {
  margin: 0.4rem;
}
@media only screen and (max-width: 82.5em) {
  .table th {
    display: none;
  }
  .table td {
    display: block;
    max-width: 100%;
    font-size: 1.8rem;
  }
  .table td:first-child {
    margin-top: 2.4rem;
  }
  .table td:last-child {
    margin-bottom: 2.4rem;
  }
  .table td::before {
    content: attr(data-cell);
    font-weight: 700;
  }
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.form--inline {
  flex-wrap: nowrap;
}
.form--filter {
  justify-content: center;
  background-color: #e9ecef;
  padding: 1.6rem;
}
.form__group {
  flex-basis: 100%;
}
.form__group--1-2 {
  flex-basis: calc(50% - 1.6rem / 2);
}
@media only screen and (max-width: 50em) {
  .form__group--1-2 {
    flex-basis: 100%;
  }
}
.form__input, .form__textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 2.4rem;
  background-color: #dee2e6;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  transition: all 0.2s linear;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.form__input:focus, .form__textarea:focus {
  border-bottom: 2px solid #339af0;
  outline: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.form__input:focus:required:invalid, .form__textarea:focus:required:invalid {
  border-bottom: 2px solid #ff6b6b;
}
.form__input::-webkit-input-placeholder, .form__textarea::-webkit-input-placeholder {
  color: #212529;
  text-transform: capitalize;
  opacity: 0.6;
}
.form__label {
  display: block;
  margin-bottom: 1.2rem;
  font-size: inherit;
  transition: all 0.2s linear;
}
.form__textarea {
  display: block;
  width: 100%;
  height: 10rem;
}
.form__radio {
  display: inline-block;
  margin-right: 2rem;
  margin: 1.6rem 2rem 1.6rem 0;
}
.form__radio-input {
  display: none;
}
.form__radio-label {
  display: flex;
  align-items: center;
  padding-left: 3.2rem;
  font-size: inherit;
  cursor: pointer;
  position: relative;
}
.form__radio-btn {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 2px solid #339af0;
  border-radius: 50%;
  position: absolute;
  left: 0;
}
.form__radio-btn::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: #339af0;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s linear;
}
.form__checkbox {
  display: inline-block;
  margin-right: 2rem;
  margin-bottom: 1.6rem;
}
.form__checkbox-input {
  display: none;
}
.form__checkbox-label {
  display: flex;
  align-items: center;
  padding-left: 3.2rem;
  font-size: inherit;
  cursor: pointer;
  position: relative;
}
.form__checkbox-btn {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: #f8f9fa;
  border: 0.5px solid #f1f3f5;
  border-radius: 4px;
  position: absolute;
  left: 0;
}
.form__checkbox-btn::after {
  content: "✔";
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: bold;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s linear;
}
.form__radio-input:checked ~ .form__radio-label .form__radio-btn::after, .form__checkbox-input:checked ~ .form__checkbox-label .form__checkbox-btn::after {
  opacity: 1;
}
.form__select {
  position: relative;
  display: inline-block;
}
.form__select-menu, .form__select-icon {
  border: 2px solid transparent;
  transition: all 0.2s linear;
}
.form__select-menu {
  padding: 0.4rem 1.2rem;
  padding-right: 3.2rem;
  background: #f8f9fa;
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.form__select-icon {
  width: 1.6rem;
  height: calc(100% - 2px * 2);
  padding: 0.8rem 2.4rem;
  background: #f1f3f5;
  border: none;
  border-radius: 0 4px 4px 0;
  position: absolute;
  top: 2px;
  right: 2px;
  pointer-events: none;
}
.form__select-icon::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border: calc(1.6rem / 2) solid transparent;
  border-top-color: currentColor;
  position: absolute;
  top: calc(50% + 1.6rem / 4);
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s linear;
}
.form__select-option {
  color: inherit;
}
.form__select-option[value=""][disabled] {
  display: none;
}
.form__select-menu:hover + .form__select-icon::after {
  border-top-color: #339af0;
}
.form__select-menu:focus {
  border: 2px solid #339af0;
  outline: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.form__select-menu:required:invalid {
  border: 2px solid #ff6b6b;
}
.form__file-input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.form__file-input::file-selector-button {
  background-color: #3bc9db;
  color: #f8f9fa;
  padding: 0.8rem 2.4rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.form__helper-text {
  margin-right: 1.6rem;
}
.form__btn {
  text-wrap: nowrap;
}
.form .error__form {
  color: #ff6b6b;
  margin: 1.6rem 0;
}

.testimonials__author {
  display: flex;
}
.testimonials__img-box {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  overflow: hidden;
}
.testimonials__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pricing {
  width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6.4rem 1.6rem;
  background-color: #f8f9fa;
}
.pricing:hover {
  background-color: #f1f3f5;
}
.pricing--featured {
  border-top: 4px solid #339af0;
  transform: scale(1.03);
}
.pricing__icon-box {
  margin-bottom: 1.2rem;
}
.pricing__icon {
  font-size: 4.4rem;
  color: #495057;
}
.pricing__title {
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
}
.pricing__price {
  font-weight: bold;
  font-size: 4.4rem;
  color: #339af0;
}
.pricing__per {
  margin-bottom: 2.4rem;
  font-weight: bold;
  font-size: 1.4rem;
}
.pricing__list {
  list-style-type: none;
  list-style-position: inside;
  align-self: stretch;
  margin-bottom: 1.6rem;
}
.pricing__item {
  text-align: center;
  padding: 1.2rem 0;
  border-bottom: 2px solid #e9ecef;
}
.pricing__btn {
  margin-top: auto;
}

.main {
  min-height: 90vh;
}

section {
  padding: 6.4rem 2.4rem;
}

.section-about {
  background-color: #f8f9fa;
}

.section-features {
  background-color: #f8f9fa;
}

.section-pricing__title {
  text-align: center;
  margin-bottom: 6.4rem;
}
.section-pricing__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.8rem;
}

.section-testimonials {
  background-color: #f8f9fa;
}

.about__img-box {
  padding: 0 1.6rem;
}
.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__card-icon {
  margin-bottom: 1.2rem;
  font-size: 3rem;
  color: #339af0;
}
.process__content {
  padding: 8rem 0;
}
@media only screen and (max-width: 50em) {
  .process__content {
    order: 2;
  }
}
.process__num {
  font-size: 6.2rem;
  color: #dee2e6;
}
.process__text {
  max-width: 30rem;
}
.process__img-box {
  padding: 2.4rem 1.6rem;
}
.process__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature__cards {
  justify-content: center;
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding: 4.8rem 2.4rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-radius: 0.4rem;
}
.feature__icon-box .fas {
  width: 8rem;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #a5d8ff;
  color: #339af0;
  font-size: 3.6rem;
  margin-bottom: 2.4rem;
}
.feature__title {
  margin-bottom: 1.6rem;
  text-align: center;
}
.feature__text {
  text-align: center;
}

.testimonials__text {
  background-color: #a5d8ff;
  padding: 3.2rem;
  margin-bottom: 2.4rem;
  position: relative;
}
.testimonials__text::before {
  content: "❝";
  display: block;
  font-size: 6.2rem;
  color: #f8f9fa;
  line-height: 0.6;
  transform: translateX(-1.6rem);
}
.testimonials__text::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  border: calc(2.4rem / 2) solid transparent;
  border-top-color: #a5d8ff;
  position: absolute;
  top: 100%;
  left: 10%;
}
.testimonials__author {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.testimonials__name {
  font-size: 1.8rem;
}
.testimonials__profession {
  font-size: 1.4rem;
  color: #495057;
}

.faq {
  max-width: 70%;
  margin: 0 auto;
}
@media only screen and (max-width: 82.5em) {
  .faq {
    max-width: 80%;
  }
}
@media only screen and (max-width: 50em) {
  .faq {
    max-width: 90%;
  }
}
@media only screen and (max-width: 37.5em) {
  .faq {
    max-width: 100%;
  }
}
.faq__list {
  list-style-type: none;
}
.faq__item {
  margin-bottom: 1.6rem;
}
.faq__question {
  --after-rotation: 90deg;
  padding: 1.6rem 2.4rem;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s linear;
}
.faq__question:hover {
  background-color: #e9ecef;
}
.faq__question::after {
  transform: rotate(var(--after-rotation));
  content: "❯";
  font-size: 1.6rem;
  margin-left: auto;
  color: #339af0;
}
.faq__num {
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #339af0;
  background-color: #f1f3f5;
  margin-right: 1.6rem;
  border-radius: 50%;
}
.faq__answer {
  height: 0;
  background-color: #f1f3f5;
  transform: scaleY(0);
  transform-origin: top;
}
.faq__show {
  height: initial;
  padding: 1.6rem 4.8rem;
  transform: scaleY(1);
}
.faq__icon-rotate {
  --after-rotation: 0deg;
}

.contact {
  background-color: #f1f3f5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-radius: 0.8rem;
}
@media only screen and (max-width: 90em) {
  .contact {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }
}
.contact__sidebar {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border-left: 4px solid #dee2e6;
}
@media only screen and (max-width: 50em) {
  .contact__sidebar {
    display: none;
  }
}
.contact__img-box {
  width: 60%;
  margin-bottom: 3.2rem;
  border-radius: 50%;
  overflow: hidden;
}
.contact__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legal {
  padding: 4.8rem 0;
}
@media only screen and (max-width: 90em) {
  .legal {
    padding: 4.8rem 2.4rem;
  }
}
.legal__title-2 {
  margin-bottom: 2.4rem;
}
.legal__title-3 {
  margin-bottom: 1.6rem;
}
.legal__title-4 {
  margin-bottom: 1.2rem;
}
.legal__text {
  margin-bottom: 0.4rem;
  font-size: 1.8rem;
  color: #495057;
}
.legal__list {
  list-style-position: inside;
  margin-bottom: 1.6rem;
}
.legal__ol {
  list-style-position: inside;
  margin-bottom: 1.6rem;
}