/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
  /* colors */
  --text-primary: #171a20;
  --text-secondary: rgba(0, 0, 0, 0.5);
  --base-transition: 0.4s all ease;

  /* font family */
  --font-primary: "Red Hat Display", sans-serif;
  --font-secondary: "Plus Jakarta Sans", sans-serif;

  /* font weights */
  --font--medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /* all text sizes */
  --text--base: 16px;
  --text-lg: 18px;
  --text--xl: 20px;
  --text-2xl: 24px;
  --text-4xl: 32px;
  --text-6xl: 48px;
  --text-9xl: 90px;
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1720px;
  }
}
/* laptop devices */
@media only screen and (min-width: 1201px) and (max-width: 1365px) {
}

/* large tablet devices */
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  /* note: Zh header section start */
  .fr-header {
    padding: 16px 0;
  }

  .fr-logo {
    max-width: 210px;
  }

  .fr-nav {
    gap: 24px;
  }
  .fr-contact-button a {
    padding: 8px 16px;
    font-size: 18px;
  }
}
/* medium tablet devices */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Note: font awesome about page OUR SECTION ICON COLOR */
  .icon_color {
    margin-top: 5px;
  }
  /* Note: common section title start */
  .common_section_title h2 {
    font-size: 40px;
  }
  .common_section_title p {
    font-size: var(--text-xl);
  }

  /* Note: Zh header start */
  .open--sidebar {
    display: block;
    font-size: 20px;
  }
  .nav_list_hidden {
    display: none;
  }

  .fr-header {
    padding: 16px 0;
  }

  .fr-logo {
    max-width: 200px;
  }

  /* Note: footer start */
  .fr-footer-logo {
    flex: 1;
    gap: 28px;
    padding-right: 20px;
  }
}

/* small tablet devices */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  /* Note: font awesome about page OUR SECTION ICON COLOR */
  .icon_color {
    margin-top: 5px;
  }
  /* Note: common section title start */
  .common_section_title h2 {
    font-size: var(--text-4xl);
  }
  .common_section_title p {
    font-size: var(--text-xl);
  }
  /* Note: Zh header start */
  .open--sidebar {
    display: block;
  }
  .nav_list_hidden {
    display: none;
  }
  .fr-header {
    padding: 16px 0;
  }

  .fr-logo {
    max-width: 186px;
  }

  /* Note: ZH footer start */
  .fr-social-icons {
    margin-top: 18px;
  }

  .fr-footer-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 50px 16px;
  }

  .fr-footer-links h4,
  .fr-footer-company h4,
  .fr-footer-contact h4 {
    padding-bottom: 12px;
  }

  .fr-footer-bottom {
    font-family: var(--font-secondary);
    font-size: 16px;
    padding: 12px 0;
  }
  /* Note: ZH footer end */
}
/* large mobile devices */
@media only screen and (min-width: 480px) and (max-width: 575px) {
  /* Note: common section title start */
  .common_section_title h2 {
    font-size: var(--text-2xl);
  }
  .common_section_title p {
    font-size: var(--text-xl);
  }
  .open--sidebar {
    display: block;
  }
  /* Note: Zh header start */
  .nav_list_hidden {
    display: none;
  }
  .fr-header {
    padding: 16px 0;
  }

  .fr-logo {
    max-width: 186px;
  }

  /* Note: ZH footer start */
  .fr-social-icons {
    margin-top: 18px;
  }

  .fr-footer-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 50px 16px;
  }

  .fr-footer-links h4,
  .fr-footer-company h4,
  .fr-footer-contact h4 {
    padding-bottom: 12px;
  }

  .fr-footer-bottom {
    font-family: var(--font-secondary);
    font-size: 16px;
    padding: 12px 0;
  }
  /* Note: ZH footer end */
}
/* mobile devices */
@media only screen and (min-width: 375px) and (max-width: 479px) {
  /* Note: font awesome about page OUR SECTION ICON COLOR */
  .icon_color {
    margin-top: 5px;
  }

  /* Note: common section title start */
  .common_section_title h2 {
    font-size: var(--text-2xl);
  }
  .common_section_title p {
    font-size: var(--text-xl);
  }

  .open--sidebar {
    display: block;
  }
  /* Note: Zh header start */
  .nav_list_hidden {
    display: none;
  }
  .fr-header {
    padding: 16px 0;
  }

  .fr-logo {
    max-width: 160px;
  }
  /* Note: Zh header end */

  /* Note: ZH footer start */
  .fr-social-icons {
    margin-top: 18px;
  }

  .fr-footer-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 50px 16px;
  }

  .fr-footer-links h4,
  .fr-footer-company h4,
  .fr-footer-contact h4 {
    padding-bottom: 12px;
  }

  .fr-footer-bottom {
    font-family: var(--font-secondary);
    font-size: 16px;
    padding: 12px 0;
  }
  /* Note: ZH footer end */
}
/* extra small devices */
@media only screen and (min-width: 320px) and (max-width: 374px) {
  /* Note: font awesome about page OUR SECTION ICON COLOR */
  .icon_color {
    margin-top: 5px;
  }

  /* Note: common section title start */
  .common_section_title h2 {
    font-size: var(--text-2xl);
  }
  .common_section_title p {
    font-size: var(--text-xl);
  }
  /* Note: common section title end */

  .open--sidebar {
    display: block;
  }
  /* Note: ZH header start */
  .nav_list_hidden {
    display: none;
  }

  .fr-header {
    padding: 16px 0;
  }

  .fr-logo {
    max-width: 145px;
  }
  /* Note: ZH header end */

  /* Note: ZH footer start */
  .fr-social-icons {
    margin-top: 18px;
  }

  .fr-footer-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 50px 16px;
  }

  .fr-footer-links h4,
  .fr-footer-company h4,
  .fr-footer-contact h4 {
    padding-bottom: 12px;
  }

  .fr-footer-bottom {
    font-size: 16px;
    padding: 12px 0;
  }
  /* Note: ZH footer end */
}