/**
* Site Name: 三智数科
* Site URL: http://zhiyi.iipcloud.com
* Updated: Jun 28 2024 with Bootstrap v5.3.3
* Author: 智衣团队
* License: None
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
:root {
  /* Fonts */
  --default-font: "Noto Sans SC", "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Noto Sans SC", "Nunito", sans-serif;
  --nav-font:     "Noto Sans SC", "Inter", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color 0 - This color is applied to the background of the entire website as well as individual sections. */
  --background-color-0: #ffffff;

  /* Background Color 1 - This color is applied to the background of the entire website as well as individual sections. */
  --background-color-1: #f8f9fa;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #3d4348;
  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #3e5055;

  /* Paragraph Color - This color is used for paragraph, description, and text. */

  --paragraph-color: #6c757d;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #2C3F95;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #313336;

  --nav-background-color: #ffffff;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #2C3F95;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #f8f9fa;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #2C3F95;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #77b6ca;
}

/* Smooth scroll */
:root {
  /*scroll-behavior: smooth;*/
}

/* Heights */
:root {
  --header-desktop-height: 80px;
  --header-mobile-height: 55px;

  /*--navmenu-mobile-height: 49px;*/

  /*--hero-bg-originHeight: 900px;*/
  /*--hero-desktop-bottom: 120px;*/

  --hero-desktop-height: calc(80vh - var(--header-desktop-height));
  --hero-mobile-landscape-height: calc(100vh - var(--header-mobile-height));
  --hero-mobile-portrait-height: calc(75vh - var(--header-mobile-height));
}

:root {
  --container-min-width: 280px;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color-0);
  font-family: var(--default-font);
}

a {
  color: var(--default-color);
  text-decoration: none;
  /*transition: 0.3s;*/
}

a:hover {
  color: var(--accent-color);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

p {
  color: var(--paragraph-color);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  display: block;
  color: var(--nav-color);
  background-color: var(--nav-background-color);
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 30%);
}

.mobile-nav-active .header {
}

.scrolled .header {
  /*box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 30%);*/
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/

.navbar {
  padding: 18px 0;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo {
  /*line-height: 1;*/
}

.navbar .logo img {
  height: 40px;
  width: auto;
  max-width: 220px;
  /*margin: 0 0 0 10px;*/
}

.navbar .navmenu {
  margin: 0 0 0 auto;
}

.navbar .btn-getstarted {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 16px;
  padding: 10px 28px;
  border-radius: 10px;
  margin: 0 0 0 50px;
  font-weight: bolder;
  transition:
    background-color: 0.3s,
    margin 0s;
}

.navbar .btn-getstarted:hover,
.btn-getstarted:focus {
  background-color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* Desktop Navbar */
@media (min-width: 1200px) {
  .navmenu ul {
    display: flex;
    margin: 0;
    list-style: none;
  }

  .navmenu li {
    margin: 0 20px;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
    /*transition: 0.3s;*/
  }

  .navmenu a.active,
  .navmenu a:hover {
    color: var(--accent-color);
  }

  .navmenu i {
    display: none;
  }
}

/* Mobile Navbar */

/* Tablet, Laptop ... */
@media (max-width: 1199px) {

  .navbar {
    /**
     * NOTE:
     * Navbar Dropdown Animation
     * -------------------------
     * Using for mobile navbar dropdown animaiton. While .navmenu
     * ul block dropping to 0px, the height of the .navmenu are
     * also dropping which the height of the navbar will follow.
     * So the height of navbar should not be static that we can
     * see navbar block changging with it's back ground color.
     */
     min-height: var(--header-mobile-height);
     padding: 18px 50px;
  }

  .logo {
    order: 1;
  }

  .btn-getstarted {
    margin: 0 50px 0 auto !important;
    order: 2;
  }

  .mobile-nav-active .btn-getstarted {
    margin: 0 78px 0 auto !important;
  }

  .navmenu {
    order: 3;
    margin: 0 !important;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0 0 auto 0;
  }

  .navmenu ul {
    /*display: block;*/
    background-color: var(--background-color-1);
    list-style: none;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 8px 8px color-mix(in srgb, var(--default-color), transparent 80%);

    max-height: 0px;
    max-width: 0px;
    padding: 0;

    /**
      * NOTE:
      * Navbar Dropdown Animation
      * -------------------------
      * Which properties can create animation?
      * Use "transition: 1s;" and DevlopTools Animation to see that.
      */
    transition:
      padding 0.3s,
      max-height 0s,
      max-width 0s;
  }

  .mobile-nav-active .navmenu>ul {
    max-height: 100%;
    max-width: 100%;

    /*padding: 50px 0px;*/
    margin-top: var(--header-desktop-height);
    padding-bottom: 30px;
  }

  .navmenu a {
    display: block;
    padding: 20px 30px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-inline: 10vw;
    border-bottom: 1px solid #dee2e6;
  }

  .navmenu li:last-child a {
    border-bottom: 0;
  }

  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
  }

  .mobile-nav-active .mobile-nav-toggle {
    position: absolute;
    font-size: 32px;
    top: 20px;
    right: 50px;
  }

}


/* Mobile */
@media (max-width: 999px) and (max-height: 640px),
(max-width: 640px) and (max-height: 999px) {

  .navbar {
    padding: 8px 24px;
  }

  .logo img {
    max-height: 24px;
  }

  .btn-getstarted {
    margin: 0 16px 0 auto !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 4px 12px !important;
    border-radius: 5px !important;
  }

  .mobile-nav-active .btn-getstarted {
    margin: 0 44px 0 auto !important;
  }

  .mobile-nav-toggle {
    font-size: 26px;
  }

  .mobile-nav-active .mobile-nav-toggle {
    font-size: 28px;
    top: 6px;
    right: 24px;
  }

  .mobile-nav-active .navmenu>ul {
    margin-top: var(--header-mobile-height);
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section {
  color: var(--default-color);
  background-color: var(--background-color-0);
  padding: 80px 0;
  overflow: clip;
  scroll-margin-top: 50px;
}

@media (max-width: 640px) {
  section, .section {
    /*scroll-margin-top: 30px;*/
  }
}

.section-title h2 {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 50px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 70px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  /*margin-bottom: 0;*/
}

@media (max-width: 999px) and (max-height: 640px),
(max-width: 640px) and (max-height: 999px){
  .section-title h2 {
    font-size: 28px;
  }

  .section-title h2:after {
    width: 50px;
    height: 4px;
    border-radius: 2px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding-block: var(--header-desktop-height) 0;
}

.hero .hero-bg img {
  position: absolute;
  display: block;
  object-fit: cover;
  height: var(--hero-desktop-height);
  width: 100%;
  z-index: 1;
}

.hero .container {
  height: var(--hero-desktop-height);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.hero .hero-title {
  position: relative;
  margin: 0 0 3vh;
  text-align: center;
  z-index: 2;
}

.hero .hero-title h1 {
  color: var(--contrast-color);
  font-size: 65px;
  font-weight: bolder;
}

.hero .hero-title p {
  margin-top: 16px;
  color: var(--contrast-color);
  font-size: 40px;
  font-weight: 300;
}

.hero .hero-qr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 2vh 0 0;
  justify-content: center;
  z-index: 2;
}

.hero .hero-qr img {
  margin: 0 30px 0 0;
  object-fit: cover;
  height: 140px;
  width: auto;
  border-radius: 50%;
  border: 8px solid #ffffff3f;
}

.hero .hero-qr div {
    width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.hero .hero-qr .p1 {
  color: var(--contrast-color);
  margin: 0;
  font-weight: bolder;
  font-size: 26px;
}

.hero .hero-qr .p2 {
  margin: 6px 0 0;
  color: var(--accent-color);
  background: var(--contrast-color);
  padding: 2px 18px 4px;
  border-radius: 6px;
  font-size: 20px;
}

/* Mobile Hero */
@media (max-width: 999px) and (max-height: 640px),
(max-width: 640px) and (max-height: 999px){
  .hero {
    padding-top: var(--header-mobile-height);
  }

  .hero .hero-bg img {
    height: var(--hero-mobile-landscape-height);
  }

  .hero .container {
    height: var(--hero-mobile-landscape-height);
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero .hero-title h1 {
    color: var(--contrast-color);
    font-size: calc(2px + 5vw);
    font-weight: bolder;
  }

  .hero .hero-title p {
    margin-top: 2px;
    color: var(--contrast-color);
    font-size: 18px;
    font-weight: 300;
  }

  .hero .hero-qr img {
    margin: 0;
    border: 5px solid #ffffff3f;
    height: 100px;
  }

  .hero .hero-qr div {
    width: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero .hero-qr .p1 {
    margin: 4px 0 0;
    font-weight: bold;
    font-size: 18px;
  }

  .hero .hero-qr .p2 {
    margin: 4px 0 0;
    padding: 2px 8px 4px;
    border-radius: 4px;
    font-size: 16px;
  }
}
/* For mobile portrait */
@media (max-width: 640px) and (max-height: 999px){
  .hero .hero-bg img {
    height: var(--hero-mobile-portrait-height);
  }

  .hero .container {
    height: var(--hero-mobile-portrait-height);
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/

.features {
  padding-block: 10px;
}

.features .container {
  /**
   * NOTE:
   * Flex Box
   * --------
   * flex-grow = ( ([width of parent container]
   *               - [sum of child container flex-basis])
   *                / [sum of child container flex-grow] )
   *             * [the flex-grow of itself]
   * width = flex-basis + flex-grow
   */
  display: flex;
  flex-wrap: wrap;

  overflow: hidden;
}

.features .container>div {
  flex: 1;
  min-width: var(--container-min-width);

  flex-wrap: nowrap;
  display: flex;
  margin: 10px 20px;
  padding: 20px;
  border: 0;
  border-radius: 10px;
  box-shadow: 3px 3px 10px color-mix(in srgb, var(--accent-color), transparent 90%);

}

.features .container>div:hover {
  box-shadow: 3px 3px 10px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.features .container>div .feature-icon {
  min-width: 100px;
  transition: 0.3s;
}

.features .container>div .feature-icon:hover {
  transform: scale(1.1);
}

.features .container>div .feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  overflow: visible;
}

.about .container {
  display: flex;
  flex-direction: column;
}


/* introduction */
.introduction {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.introduction>div {
  flex: 1;
  margin: 20px;
}

@media (max-width: 1199px) {
  .introduction>div {
    max-width: fit-content !important;
  }
}

.introduction .intro-text {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  min-width: var(--container-min-width);
}

.introduction ul {
  padding-left: 0px;
}

.introduction ul li {
  list-style: none;
  font-size: 18px;
}

.introduction ul li img {
  height: 24px;
  width: auto;
  margin-bottom: 5px;
}

.introduction ul li span {
  margin: auto 18px auto 25px;
  color: var(--accent-color);
  font-weight: 800;
}

.introduction .bit-news {
  display: block;
  padding: 10px 0;
  margin-top: 20px;
  text-align: center;
  font-weight: bolder;
  color: var(--contrast-color) !important;
  background-color: var(--accent-color);
  border-radius: 10px;
}

@media (max-width: 640px) {
  .introduction ul li span {
    margin: auto 8px auto 12px;
    font-size: 16px;
  }
  .introduction ul li {
    font-size: 16px;
  }
}

.introduction .intro-img {
  max-width: 50%;
  min-width: var(--container-min-width);
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.introduction .intro-img div {
  flex: 1;
}

.introduction .intro-img div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.introduction .intro-img img {
  /*display: flex;*/
  /*width: 100%;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}

.introduction .intro-img img:hover {
  transform: scale(1.1) !important;
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Awards Section
--------------------------------------------------------------*/
.awards>div:nth-child(2){
  display: flex;
  flex-direction: column;
  gap: 6vw;
}

.awards .inventions img {
  width: 100%;
  object-fit: cover;
}

.awards .certificates {
  display: flex;
  gap: 2vw;
}

.awards .certificates div {
  flex: 1;
}

.awards .certificates img {
  width: 100%;
  transition: 0.3s;
}

.awards .certificates .cert-img-first:hover {
  transform: translate(+10vw, 0) scale(2);
}

.awards .certificates .cert-img-last:hover {
  transform: translate(-10vw, 0) scale(2);
}

.awards .certificates img:hover {
  transform: scale(2);
  /*box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 30%);*/
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
}

.testimonials .testimonial-item {
  padding: 30px;
  margin: 120px 30px 50px 30px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 10px;
  box-shadow: 3px 3px 10px color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: 0.3s;
}

.testimonials .testimonial-item .testimonial-img {
  position: relative;
  width: 140px;
  transform: translate(0, calc(-50% - 30px));
  margin-bottom: -80px;
}

.testimonials .testimonial-item h3 {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: bolder;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 16px;
  font-weight: bold;
  color: var(--default-color);
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-slide {
  opacity: 0.3;
}

.testimonials .swiper-slide-next {
  opacity: 1 !important;
  transform: scale(1.12);
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

/*--------------------------------------------------------------
# News Section
--------------------------------------------------------------*/
.news {
  background-color: var(--background-color-1);
}

.news>div:nth-child(2) {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

.news>div:nth-child(2)>div {
  min-width: 320px;
}

.news .news-media {
  flex: 1;
}

.news video {
  height: 100%;
  width: 100%;
  object-fit: fill;
  border-radius: 10px;
}

.news .news-lists {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.news .news-lists div {
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6;
}

.news p {
  font-size: 14px;
  margin-block: 0;
  color: var(--paragraph-color);
}

.news a {
  font-size: 20px;
  /*font-weight: bold;*/
}

/*--------------------------------------------------------------
# Solutions Section
--------------------------------------------------------------*/
.solutions .container:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.solutions .solutions-text {
  flex: 4;
  display: flex;
  min-width: 400px;
}

.solutions .solutions-img {
  flex: 6;
  min-width: 500px;
}

@media (max-width: 640px) {
  .solutions .solutions-text {
    min-width: fit-content;
  }

  .solutions .solutions-img {
    min-width: fit-content;
  }
}

.solutions-img .tab-pane img {
  border-radius: 15px;
  width: 100%;
  box-shadow: 5px 5px 10px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.solutions-text .nav-tabs {
  border: 0;
}

.solutions-text .nav-item {
  width: 100%;
  margin-bottom: 15px;
}

.solutions-text .nav-item:last-child {
  margin-bottom: 0;
}

.solutions-text .nav-link {
  color: var(--heading-color);
  border: 0;
  padding: 30px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
  cursor: pointer;
}

.solutions-text .nav-link:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.solutions-text .nav-link.active {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.solutions-text .nav-link img {
  max-width: 60px;
}

.solutions-text .nav-link div {
  margin-left: 30px;
}

.solutions-text .nav-link h3 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  transition: 0.3s;
}

.solutions-text .nav-link p {
  font-size: 16px;
  margin: 0;
}

/*--------------------------------------------------------------
# Advantages Section
--------------------------------------------------------------*/
.advantages .advantages-text {
  display: flex;
  justify-content: center;
  margin: -30px 0 30px 0;
  cursor: pointer;
}

.advantages .advantages-text .nav-tabs {
  border: 0;
}

.advantages-text .nav-tabs .nav-item .nav-link {
  color: var(--default-color);
  border: 2px solid var(--accent-color);
  border-radius: 18px;
  margin: 0 -14px;
  padding: 4px 35px;
}

@media (max-width: 640px) {
  .advantages-text .nav-tabs .nav-item .nav-link {
    margin: 0 -12px;
    padding: 4px 24px;
    font-size: 12px;
  }
}

.advantages-text .nav-tabs .nav-item .nav-link:hover,
.advantages-text .nav-tabs .nav-item .nav-link.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.advantages-img .tab-content div img {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 1000px;
  width: 100%;
}

.advantages .advantages-bye {
  display: flex;
  justify-content: center;
  margin: 30px 2vw 0;
}

.advantages .advantages-bye img {
  max-width: 1200px;
}

@media (max-width: 999px) {
  .advantages .advantages-bye img {
    max-width: 100%;
  }
}

/*--------------------------------------------------------------
# Partners Section
--------------------------------------------------------------*/
.partners {
  background-color: var(--background-color-1);
}

.partners .partners-logo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2vw;
}

@media (max-width: 999px) {
  .partners .partners-logo {
    grid-template-columns: repeat(3, 1fr);
  }
}


/*--------------------------------------------------------------
# Cases Sections
--------------------------------------------------------------*/
.cases>div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.cases .cases-items {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background-color-1);
  border-radius: 10px;
  box-shadow: 3px 3px 15px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.cases-items div {
  min-width: 320px;
  margin: 30px;
  flex: 1;
}

.cases-items div h3 {
  font-weight: bolder;
}

.cases-items div p {
  color: var(--default-color);
}
@media (max-width: 640px) {
  .cases-items div {
    min-width: fit-content;
  }
}

.cases-items div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/*--------------------------------------------------------------
# Global footer
--------------------------------------------------------------*/
.footer {
  background-color: var(--accent-color);
  height: 280px;
}

.footer .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container .contact {
  flex: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10vw;
}

.contact .contact-text {
  font-size: 18px;
  color: var(--contrast-color);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact .contact-text div {
  flex: 1;
}

.contact .contact-qr {
  display: flex;
}

.contact .contact-qr div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 20px;
  align-items: center;
}

.contact .contact-qr p {
  margin: 5px 0px;
  color: var(--contrast-color);
  font-size: 14px;
}

.contact .contact-qr img {
  width: 100px;
}

.contact .contact-qr div:nth-child(2) img {
  border-radius: 50%;
}

.container .copyright {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--contrast-color), transparent 70%);
}

.container .copyright p {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  font-size: 13px;
  margin: 0;
}

@media (max-width: 779px) {
  .footer {
    height: 360px;
  }

  .container .contact {
    gap: 0;
  }

  .contact .contact-text {
    gap: 10px;
  }

  .contact .contact-text div {
    font-size: 12px;
    /*margin: 0;*/
  }

  .contact .contact-qr img {
    width: 85px;
  }

  .container .copyright p {
    font-size: 10px;
  }
}

/*--------------------------------------------------------------
# Float block
--------------------------------------------------------------*/
.float-block {
  position: fixed;
  right: 0;
  bottom: 30vh;
  z-index: 3;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.float-block .float-popup {
  border-radius: 10px;
}

.float-block .float-popup>div {
  display: flex;
  flex-direction: column;
}

.float-block .float-popup img {
  height: 120px;
}

#pop-wechat {
  display: none;
  border-radius: 10px;
}

#pop-wechat.active {
  display: block;
}

#pop-phone {
  display: none;
  margin-top: 90px;
  background-color: var(--accent-color);
  padding: 20px;
  border-radius: 10px;
}

#pop-phone.active {
  display: block;
}

#pop-phone p,
#pop-phone h5 {
  color: var(--contrast-color);
  margin: 0;
}

.float-block .float-fixed>div,
.float-block .float-fixed>a {
  color: var(--contrast-color);
  font-size: 14px;
  background-color: var(--accent-color);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.float-block .float-fixed div:nth-child(1) {
  border-top-left-radius: 10px;
}

.float-block .float-fixed a {
  border-bottom-left-radius: 10px;
}

.float-block .float-fixed>div:hover,
.float-block .float-fixed>a:hover {
  background-color: #0a58ca;
}

.float-block .float-fixed img {
  height: 40px;
}

@media (max-width: 999px) {
  .float-block {
    display: none;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  background-color: var(--background-color-0);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}