/*===================================================
Project: gymex - gym & fitness HTML website template
Auther: ERRAMIX
Version: 1.0
====================================================*/

@import url("css2.css");

/* start global classes */
:root {
  /* body bg color */
  --bodyColor: #ffffff;

  /* primary type color */
  --primary-color: #d70023;

  /* box color */
  --box-color: #f7f7f7;

  /* grey color */
  --grey: #575757;

  /* border radius */
  --border-radius: 10px;
}

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

body {
  font-family: "Outfit", sans-serif;
  color: var(--primary-color);
  background-color: var(--bodyColor);
  text-align: left;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

::selection {
  color: var(--white);
  background-color: var(--primary-color);
}

.grey-text {
  color: var(--grey) !important;
}

.primary-text {
  color: var(--primary-color) !important;
}

.b-radius {
  border-radius: var(--border-radius);
}

.heading-1,
.heading-2,
.heading-3,
.heading-4 {
  color: var(--primary-color);
  text-transform: capitalize;
  line-height: auto;
  font-weight: bold;
}

.heading-1 {
  font-size: 48px;
  line-height: normal;
}

.heading-2 {
  font-size: 36px;
}

.heading-3 {
  font-size: 24px;
}

.heading-4 {
  font-size: 20px;
}

.body-1 {
  font-size: 18px;
  font-weight: 400;
  color: var(--grey);
  font-family: "Outfit", sans-serif;
}

.body-2 {
  font-size: 16px;
  font-weight: 400;
  color: var(--grey);
  font-family: "Outfit", sans-serif;
}

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

input,
textarea {
  font-family: "Outfit", sans-serif !important;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-32 {
  gap: 32px;
}

.gap-64 {
  gap: 64px;
}

.bg-box {
  background-color: var(--box-color);
}

@media (max-width: 990px) {
  .heading-1 {
    font-size: 36px;
  }

  .heading-2 {
    font-size: 24px;
  }

  .heading-3 {
    font-size: 20px;
  }

  .heading-4 {
    font-size: 18px;
  }

  .body-1 {
    font-size: 16px;
  }

  .body-2 {
    font-size: 14px;
  }

  .gap-8 {
    gap: 4px;
  }

  .gap-16 {
    gap: 8px;
  }

  .gap-32 {
    gap: 16px;
  }

  .padding-32 {
    padding: 16px;
  }

  .padding-16 {
    padding: 8px;
  }

  .padding-8 {
    padding: 4px;
  }

  .icon-lg {
    font-size: 48px;
  }

  .icon-md {
    font-size: 32px;
  }

  .icon-sm {
    font-size: 26px;
  }

  .section {
    padding-block: 3rem;
  }
}

a {
  text-decoration: none;
  text-transform: capitalize;
}

.w-fit {
  width: fit-content;
}

.padding-32 {
  padding: 32px;
}

.padding-16 {
  padding: 16px;
}
.padding-14 {
  padding: 14px;
}

.padding-8 {
  padding: 8px;
}

.icon-lg {
  font-size: 48px;
}

.icon-md {
  font-size: 32px;
}

.icon-sm {
  font-size: 24px;
}

p {
  color: var(--grey);
  font-family: "Outfit", sans-serif;
}

.section {
  padding: 5.8rem 0;
}

input,
textarea {
  border: 0;
  outline: 0;
  color: var(--grey);
  background-color: var(--box-color);
  border-radius: var(--border-radius);
}

.code img{width:120px; height:120px;}

/* start buttons style */
.btn,
.btn-outline {
  background-color: var(--primary-color);
  color: var(--bodyColor);
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  align-items: center;
  text-align: center;
  letter-spacing: 0.5px;
  outline: none;
  font-weight: 600;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  z-index: 1;
  transition: color 300ms ease-in-out;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 0.5px solid var(--primary-color);
}

.btn:hover {
  color: var(--primary-color);
  border: 0.5px solid var(--primary-color);
}

.learn-more {
  text-transform: capitalize;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.learn-more i {
  font-size: 22px;
  margin-left: 8px;
}

.learn-more:hover {
  letter-spacing: 1px;
  transition: all 0.5s;
  color: var(--grey);
}

/* end main button style */

ul {
  list-style: none;
}

img {
  width: 100%;
  height: 100%;
}

/* end global classes */

/* ==== start  preloader style  ===== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bodyColor);
  z-index: 9999;
}

.spinner {
  position: absolute;
  top: 45%;
  left: 45%;
  border: 16px solid #e6e6e6;
  border-top: 16px solid var(--primary-color);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ==== end  preloader style  ===== */

/* ======== start scroll-to-top button style  =========== */

#progress {
  position: fixed;
  bottom: 20px;
  right: 10px;
  height: 70px;
  width: 70px;
  display: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 999;
}

#progress i {
  color: var(--grey);
  font-size: 20px;
}

#progress-value {
  display: block;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  border-radius: 50%;
  display: grid;
  background-color: var(--bodyColor);
  place-items: center;
  font-size: 35px;
  color: var(--primary-color);
}

/* ======== end scroll-to-top button style  =========== */

/*================== start navbar section ==================*/

.navbar-toggler,
.navbar-toggler:active,
.navbar-toggler:focus {
  border: none;
}

.header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  width: 100%;
  border-top: 3px solid;
}

.header .bg-box {
  background-color: #f5f5f596;
  backdrop-filter: blur(8px);
}

.breadcrumb {
  height: 300px;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.678);
  backdrop-filter: blur(8px);
  padding-block: 16px;
  top: 0;
  right: 0;
  z-index: 99999;
  width: 100%;
  padding:10px 0;
}

.navbar i {
  font-size: 20px;
  color: var(--grey);
}

.navbar>* {
  z-index: 999;
}

.navbar .logo {
  width: 18rem;
}
.navbar ul li{margin:0 20px;}

.navbar ul li a:active {
  background-color: transparent !important;
}

.navbar ul li a {
  font-size: 18px;
  font-weight: 500;
  color: var(--grey);
  font-family: "Outfit", sans-serif;
}

.navbar ul li a.active {
  color: var(--primary-color);
  font-weight: bold;
}

.navbar ul li a:hover,
.navbar ul li a.active {
  color: var(--primary-color) !important;
}

.navbar i {
  font-size: 24px;
  color: var(--grey);
  z-index: 999 !important;
}

/* 鼠标悬停触发下拉菜单 */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* 添加一些过渡效果 */
.dropdown-menu {
    margin-top: 0;
    transition: all 0.3s ease;
}

.top{background:#f7f7f7; border-top:5px solid;}
.new-top{width:100%;display:flex;align-items:center;justify-content:flex-end;padding:5px 0 5px;margin-bottom:0px;}
.new-top .input-group{margin-right:30px;width:200px;margin-left:10px;}
.new-top img{width:20px;}
.input-group .form-control{border:0;border-bottom:1px solid #a0a0a0;border-radius:0;padding:0; background:none;}
.input-group .btn-danger{border:0;color:#333;border-radius:0; margin-right:10px; background: none;}
.input-group .btn-danger:hover{background:#d92129;color:#fff;}
.logo10 .text:before{display:none;}
.logo10 .text{margin-left:0;padding-left:0;text-align:center;width:100%;}
.logo10 .text .t1 {justify-content: center;font-size: 18px; line-height: 30px; color: #666666; position: relative; display: flex;align-items: center;}
.logo10 .text .t1:before{content:"";width:15px;height:3px;background:#d92129;display:inline-block;margin-right:8px;}
.logo10 .text .t1:after{content:"";width:15px;height:3px;background:#d92129;display:inline-block;margin-left:8px;}

.category-card-wrap {
    margin-bottom: 20px;
    background: #f8f8f8;
    padding:10px;
}


.category-card-wrap h3{ height:50px; line-height:25px; overflow:hidden;}
.category-card-wrap h6{height:60px; line-height:20px; overflow:hidden; color:#666;margin: 0 !important; word-spacing: 6px; text-align: left;}

.category-card {
    position: relative;
    overflow: hidden;
}
.rectangle {
    position: absolute;
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity:0;
    background-color: rgba(215, 0, 35, 0.702);
    /*-webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    transform: skew(-35deg);*/
}

.fade-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*background-color: rgba(215, 0, 35, 0.502);*/
}

.category-card .card-content {
    position: relative;
    z-index: 3;
    text-align: left;
    opacity:0;
    position: absolute;
    left: 0;
    top: 0;
    padding: 30px 50px;
}

.category-card .cat-title {
    color: #fff;
    /*text-shadow: 1.5px 2.598px 0px rgba(0, 0, 0, 0.75);*/
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 10px;
    width:100%;

}

.category-card .cat-title > a {
    color: #fff;
}

.category-card .cat-list {
padding-left:0;
width: 100%;
}

.category-card .cat-list li {
    margin-bottom: 10px;
    position: relative;
}
/*.category-card .cat-list>li:nth-child(2) {
    width: 85%;
}
.category-card .cat-list>li:nth-child(3) {
    width: 60%;
}*/
.category-card .cat-list li::before {
    content: "\25A0";
    text-align: center;
    line-height: 22px;
    position: absolute;
    right: 100%;
    top: 0;
    transform: rotate(45deg);
    margin-right: 10px;
    color: #fff;
    font-size: 10px;
}

.category-card .cat-list li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.category-card .cat-list li a:hover,
.category-card .cat-list li a.active {
    text-decoration: underline;
}
img.bg-img {
    z-index: 0;
    object-fit: cover;
    height: auto;
    width: 100%;
}

.category-card:hover .rectangle{opacity:1}
.category-card:hover .card-content{opacity:1}

/*================== End navbar section ==================*/
.lunbotu{position:relative;width:100%;overflow:hidden; }
.lunbotu .swiper-slide a{display:block;width:100%}
.lunbotu .swiper-slide a>img{width:100%;}
.lunbotu .swiper-slide video{width:100%; height:100%;}
.oimg2{display:none}
.lunbotu .ob-img{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center}
.i-banner{position:absolute;left:50%;top:35%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.i-banner .box{text-align:center}
.i-banner .box .t1{color:#ffffff;font-size:50px;margin-bottom:20px;word-break:break-word;letter-spacing: 2px;}
.i-banner .box .t2{color:#ffffff;font-size:36px;word-break:break-word}
.i-banner .box .btn{text-align:left;padding:0}
.i-banner .box .btn span{display:inline-block;text-align:center;padding:0px 35px;font-family:"microsoft yahei";color:#ffffff;font-size:18px;background-color:#d42724;border-radius:30px;height:60px;line-height:60px;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.i-banner .box .btn span:hover{background-color:#000000}
.i-banner .box .btn span img{display:inline-block;vertical-align:middle;margin-left:10px}
.slide2{top:20%;}
.lunbotu .swiper-pagination{display:inline-block}
.lunbotu.swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet{margin:0 8px}
.lunbotu.swiper-container-horizontal>.swiper-pagination-bullets,.lunbotu .swiper-pagination-custom,.lunbotu .swiper-pagination-fraction{bottom:7%;left:0;width:100%}
.lunbotu .swiper-pagination-bullet{width:13px;height:13px;display:inline-block;border-radius:50%;background:none;opacity:1;background-color:#666;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.lunbotu .swiper-pagination-bullet-active{opacity:1;background-color:#d70023}
/*.lunbotu .swiper-button-next,.lunbotu .swiper-button-prev{position:absolute;top:50%;width:50px;height:50px;margin-top:-60px;z-index:10;cursor:pointer;background-size:100% 100%;-moz-background-size:100% 100%;-webkit-background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.lunbotu .swiper-button-prev,.lunbotu .swiper-container-rtl .swiper-button-next{background-image:url(../image/img1.png);left:0;right:auto}
.lunbotu .swiper-button-next,.lunbotu .swiper-container-rtl .swiper-button-prev{background-image:url(../image/img2.png);right:0;left:auto}
.lunbotu .swiper-button-next.swiper-button-disabled{opacity:1;background-image:url(../image/img2a.png)}
.lunbotu .swiper-button-prev.swiper-button-disabled{opacity:1;background-image:url(../image/img1a.png)}*/
.banner-video{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;overflow:hidden}
#fc{position:fixed;right:50px;top:30%;width:150px;display:flex;justify-content:center;flex-wrap:wrap;text-align:center;z-index:30}
#fc .bg{width:105px;height:100%;background:#f2f2f2;position:absolute;border-radius:50px;}
#fc .box1 img{width:auto;}
#fc .box1{display:block;width:100%;position:relative;z-index:10;margin-top:25px;margin-bottom:10px;}
#fc .box2{display:block;width:100%;position:relative;padding-left:15px;text-align:left; z-index:10;background:#000;font-size:14px;color:#fff; padding-top:3px;padding-bottom:3px; line-height:40px;margin-bottom:10px;border-radius:10px;}
#fc .box2.red{background:#c30c10;}
#fc .box2 a{color:#fff;}
#fc .box2 img{margin-right:3px; width:auto; height:auto;}
#fc .box3{display:flex;justify-content:center; width:66%;position:relative;z-index:10;margin-bottom:30px;margin-top:0px;}
#fc .box3 a{display:inline-block;}
#fc .box3 p{margin-bottom:0;}
#fc .box3 img{width:auto;}



/*================== start hero section ==================*/
.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero .heading-hero {
  font-size: 56px;
}

.pcate{background:#f7f7f7; padding:5%; display:table; width:100%;}
.pcate img{max-width:120px;}
.pcate h6{height:40px; line-height:20px;}
.pcate:hover{background:#e8e8e8;}

@media (max-width: 990px) {
  .hero .heading-hero {
    font-size: 40px;
  }
}

@media (max-width: 720px) {
  .hero .heading-1 {
    font-size: 30px;
  }
}

/*.hero img {
  width: 320px;
  height: auto;
}*/

.scroller {
  width: 100%;
}

.scroller__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.scroller[data-animated="true"] {
  overflow: hidden;
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 35s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

.shopping-cart {
  position: fixed;
  right: 0;
  top: 80px;
  display: none;
  width: 400px;
  background-color: var(--box-color);
  height: 90vh;
  z-index: 9999;
}

.show-cart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-mobile {
  visibility: hidden;
}

@media (max-width: 720px) {
  .shopping-cart {
    width: 100%;
  }
}

@media (max-width: 985px) {
  .cart-mobile {
    visibility: visible;
  }
  .cart-mobile img{width:27px; margin-top:-8px;}
}

.cart,
.cart-mobile {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--box-color);
  border: solid 0.4px #7f7d7d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart i,
.cart-mobile i {
  font-size: 22px;
  color: var(--primary-color);
  margin: 0;
  padding: 0;
}

.products-container {
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.shopping-cart .img {
  width: 80px;
  height: 80px;
}

.shopping-cart .img img {
  background-size: contain;
  border: #7f7d7d 0.5px solid;
  border-radius: var(--border-radius);
}

.shopping-cart h5 {
  font-size: 18px;
  font-weight: bold;
}

.shopping-cart .remove {
  background: none;
  border: none;
  color: #de0700;
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
  margin: 0;
}

.bestsellers .bg-box .category {
  position: absolute;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: bold;
  top: 20px;
  left: 0;
  padding: 8px;
  padding-left: 16px;
  background-color: var(--bodyColor);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.features .icon-box {
  width: 70px;
  height: 70px;
}

.product-container {
  height: 778px;
}

@media (max-width: 990px) {
  .product-container {
    height: auto !important;
  }
}

/*================== end hero section =====================*/

.about .row {
  height: 430px !important;
}

@media (max-width: 990px) {
  .about .row {
    height: auto !important;
  }
}

.about .bg-box {
  height: 100% !important;
}

.about .img {
  height: 100% !important;
}

.ctabg{background:url(../images/iqbg.jpg) no-repeat; background-size:cover;}
.cta .container {
  height: 400px;
  z-index: 1;
  border-radius: var(--border-radius);
}

.cta .container h2 {
  color: var(--white);
  z-index: 9;
}

/*============== Start testimonials section ==========*/

.testimonials .img {
  width: 60px;
  height: 60px;
}

.testimonials .bg-box {
  height: 320px;
  border-radius: var(--border-radius);
}

/*.testimonials .item{border:1px solid;}*/

.testimonials i {
  font-size: 22px;
  color: rgb(255, 200, 0);
}
.testimonials h3{height:60px; line-height:30px; overflow:hidden;}
.testimonials .data{position:absolute; top:10%; left:0px; width:60px; height:60px; background:var(--primary-color); color:#fff; text-align:center; font-size:20px; font-weight:bold;}

.store .categories {
  width: 100%;
  overflow-x: scroll;
}

.store .categories::-webkit-scrollbar {
  height: 6px;
  width: auto;
  color: #0a0a0a;
}

.store .categories::-webkit-scrollbar-thumb {
  background-color: var(--grey);
  width: auto;
  border-radius: 10px;
}

.store a {
  padding: 12px 24px;
  border-radius: var(--border-radius);
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--box-color);
}

.products-row .bg-box {
  height: 460px;
  border: 0.5px solid #c6c6c6;
}

.products-row .bg-box img {
  width: 100%;
  height: 260px;
}

@media (max-width: 780px) {
  .products-row .bg-box img {
    height: auto;
  }

  .products-row .bg-box {
    height: auto;
  }
}

.store a.active {
  background-color: var(--primary-color);
  color: var(--box-color);
}

/*============== End testimonials section ==========*/

/*============== start FAQ section ==========*/

.faq .btn {
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: transparent !important;
  border: none !important;
}

.rotate-icon {
  transition: transform 0.3s ease-in-out;
}

.rotate-icon.rotated {
  transform: rotate(180deg);
}

/*============== End FAQ section ==========*/

/*============== Start contact section ==========*/

.contact input,
.contact textarea {
  padding: 12px 18px;
  border-radius: var(--border-radius);
  background-color: var(--bodyColor);
  width: 100%;
  border: 1px solid #e8e8e8;
}

.contact {
  margin-top: 8rem;
}

.contact .icon {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius);
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact .icon i {
  font-size: 24px;
  color: var(--box-color);
}

.done-msg {
  color: var(--white);
  font-family: "Outfit", "sans serif";
}

.toast-success {
  background-color: #0d9700 !important;
  opacity: 1 !important;
}

.toast-error {
  background-color: #8b0500 !important;
  opacity: 1 !important;
}

.toast {
  border-radius: var(--border-radius) !important;
  color: var(--bodyColor) !important;
  font-family: "Outfit", sans-serif;
  box-shadow: none !important;
}

.contact-map {
  width: 100%;
  height: 300px;
  border-radius: var(--border-radius);
  margin-top: 2rem;
}

/*============== End contact section ==========*/

/* --------------------------------------
process step -1
---------------------------------------- */
.pq-process-step-1-list{
  padding-right: 30px;
  height: 625px;
    overflow-y: auto;
}

.pq-process-step.pq-style-1{
  padding: 30px;
  position: relative;
  background-color: var(--box-color);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: var(--transition);
}

.pq-process-step.pq-style-1 .pq-process-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.pq-process-step.pq-style-1 .pq-process-content{
  z-index: 2;
  position: relative;
}

.pq-process-step.pq-style-1 .pq-process-top .pq-process-title{
  font-size: 34px;
    line-height: 42px;
    color: var(--dark-color);
    transition: var(--transition);
}

.pq-process-step.pq-style-1.pq-active .pq-process-top .pq-process-title{
  color: var(--bodyColor);
}

.pq-process-step.pq-style-1 .pq-process-top .pq-process-number{
    font-size: 44px;
    line-height: 52px;
  color: var(--dark-color);
  transition: var(--transition);
}

.pq-process-step.pq-style-1.pq-active .pq-process-top .pq-process-number{
  color: var(--bodyColor);
}

.pq-process-step.pq-style-1 .pq-process-description{
  margin-bottom: 0;
  transition: var(--transition);
}

.pq-process-step.pq-style-1.pq-active .pq-process-description{
  color: var(--bodyColor);
}

.pq-process-step.pq-style-1 .pq-process-hover-img{
  width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;
    top: 0;
    transition: var(--transition);
  opacity: 0;
}

.pq-process-step.pq-style-1.pq-active .pq-process-hover-img{
  left: 0;
  opacity: 1;
}

.pq-process-step.pq-style-1 .pq-process-hover-img::before{
  content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color);
    opacity: 0.9;
}

.pq-process-step.pq-style-1 .pq-process-hover-img img{
  height:100%;
    width: 100%;
    object-fit: cover;
  border-radius: 10px;
}

.pq-process-step-1-list::-webkit-scrollbar{
    width: 8px;
    border-radius: 8px;
}

.pq-process-step-1-list::-webkit-scrollbar-track {
    background-color: var(--grey-color);
    border-radius: 8px
}

.pq-process-step-1-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 8px
}
.page-list{margin-bottom:20px;}
.page-list a{margin-right: 10px;}
/*================================================
service-inner
================================================*/
.pq-service-menu-container .pq-service-menu {
  padding: 0px;
  background-color: var(--grey-color);
  border-radius: 10px;
}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item a{
  margin-bottom: 15px;
  background-color: var(--bodyColor);
  color: var(--dark-color);
  padding: 20px;
  border-radius: 10px;
  transition: var(--transition);
  position: relative;
  display: block;
}
.pq-service-menu-container .pq-service-menu .pq-service-menu-item a.current-item{
  background-color: var(--primary-color);
  color: var(--bodyColor);
}
.pq-service-menu-container .pq-service-menu .pq-service-menu-item a.current-item .pq-ervice-menu-title{
  color: var(--bodyColor);

}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item a:hover {
  background-color: var(--primary-color);
}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item a:before{
  content: '\f054';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    right: 20px;
    left: auto;
    top: 24px;
    position: absolute;
    color: inherit;
    line-height: normal;
  transition: var(--transition);
}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item a:hover:before{
  color: var(--bodyColor);
}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item a .pq-ervice-menu-title{
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-transform: uppercase;
  transition: var(--transition);
}
.pq-service-menu-container .pq-service-menu .pq-service-menu-item:hover a .pq-ervice-menu-title{
  color: var(--bodyColor);
}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item a .pq-icon{
  color: var(--dark-color);
  font: 18px;
  transition: var(--transition);
}

.pq-service-menu-container .pq-service-menu .pq-service-menu-item:hover a .pq-icon{
  color: var(--bodyColor);
}

.pq-service-menu-call-img .pq-img{
  border-radius: 10px;

}

.pq-service-inner-img img{
  border-radius: 10px;
}

.pq-service-inner-title{
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 10px;
  margin-top: 30px;
}


/*======== blog left area start  ==========*/
.yblog_left {
    padding: 40px 0 40px;
}
.inner_yblog_form {
    position: relative;
    width: 100%;
    padding: 20px 0 20px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
}
.inner_yblog_form input {
    width: 80%;
    outline: none;
    height: 55px;
    border: 1px solid #efefef;
    margin-left: 10px;
    padding-left: 20px;
}
.inner_yblog_form button {
    position: absolute;
    display: inline-block;
    right: 0;
    outline: none;
    border: none;
    padding: 16px 20px 15px;
    margin-right: 13px;
    background-color: #ddddddfa;
}
.inner_yblog_form button i{
    font-size: 18px;
}
/* inner  left title css */
.inner_yblog_left_title {
    margin: 30px 0 30px;
    width: 100%;
    padding: 20px 20px 15px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
}
.inner_yblog_left_title h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
.inner_yblog_left_title a {
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
}
.inner_yblog_left_title a.bottom{
    border-bottom: none;
}
.inner_yblog_left_title a:hover{
    color: var(--hoverbg);
}
/* innr blog left style 2 css*/
.inner_yblgo_left_style2 a {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #dddddd;
    padding: 5px 0 5px;
    margin-top: 0;
}
.inner_yblgo_left_style2 a:hover{
    color: var(--bgcolor);
}
/* blog left inner css */
.inner_yblog_left_img{
    margin-bottom: 10px;
}
.inner_yblog_left_img img {
    width: 100%;
    margin: 12px 0 -0;
}
.yblog_left_inner {
    padding: 0 0;
    background: none;
    margin-bottom: 30px;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 5%);
}
.yblog_left_sub{
    padding: 25px 0 30px 15px;
}
.yblog_left_sub h2 a{
    width: 100%;
}
.yblog_left_sub h2 a:hover{
    color: var(--bgcolor);
}
.yblog_left_sub h4{ height:78px; line-height:26px; }
.yblog_left_text_sub {
    padding: 10px 0px 15px;
}
.yblog_left_text_sub span{
    color: var(--paracolor);
}
.yblog_left_text_sub span i{
    color: var(--bgcolor);
}
.yblog_left_sub p{
    font-size: 16px;
    font-weight: 400;
    width: 95%;
}
.yblog_left_sub >a {
    display: inline-block;
    margin: 15px 0 0;
    padding: 7px 25px;
    border: 1px solid #dddddd;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px;
    color: var(--paracolor);
    text-transform: capitalize;
}
.yblog_left_sub >a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.ycalender_inner h5 {
    background-color: var(--bgcolor);
    color: var(--whitec);
    padding: 20px 0 20px;
    font-size: 14px;
    line-height:26px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    margin: 0;
}
.ycalender_inner {
    padding: 20px 20px;
    width: 100%;
    color:var(--bodyColor);
    background-color: var(--primary-color);
}
.ycalender_inner th {
    text-align: center;
    border: 1px solid #dddddd;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
}
.ycalender_inner td {
    text-align: center;
    border: 1px solid #dddddd;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 400;
}
.speko_active{
    color: var(--whitec);
    background-color: var(--bgcolor);
}
.transko_active{
    color: var(--whitec);
    background-color: var(--bgcolor);
}
.speko_theme_widget .widget a {
    color: var(--pracolor);
}
.wp-calendar-nav span a {
    border: none;
    padding: 10px 0 0;
}
/*======== blog left area end  ==========*/
/*---------------------------------------------------------------------------------------------------------------手机站导航结束----------*/
.mobile-inner {width: 100%;  z-index: 9;margin-right: auto;margin-left: auto;position: relative;height: 50px;float: initial; margin-bottom: 20px;}
.mobile-inner-header {background-color: #e8e8e8;width: 100%;height: 50px;position: absolute;top: 0px;left: 0px;}
.mobile-inner-header h3 {float: left;color: #666;line-height: 50px;font-size: 16px;text-align: center; padding-left: 10px;}
.mobile-inner-header-icon {color: #666;height: 50px;font-size: 25px;text-align: center;float: right;width: 50px;position: relative;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s;}
.mobile-inner-header-icon span {position: absolute;left: calc((100% - 25px) / 2);top: calc((100% - 1px) / 2);width: 25px;height: 2px;background-color: #e6212d;}
.mobile-inner-header-icon span:nth-child(1) {transform: translateY(4px) rotate(0deg);}
.mobile-inner-header-icon-out span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outfirst;}
.mobile-inner-header-icon span:nth-child(2) {transform: translateY(-4px) rotate(0deg);}
.mobile-inner-header-icon-out span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outsecond;}
.mobile-inner-nav {background-color: #fafafa;width: 100%;position: absolute;top: 50px;left: 0px;padding-top: 30px;z-index: 999;padding-bottom: 30px;display: none;}
.mobile-inner-nav h3 a{color: #000; font-size: 20px; font-weight: bold;}
.mobile-inner-nav a {-webkit-animation-duration: 0.8s;animation-duration: 0.8s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: ReturnToNormal;animation-name: ReturnToNormal;}
.mobile-inner-nav a {display: inline-block;line-height: 40px;text-decoration: none;width: 90%;margin-left: 5%;color: #666;border-bottom: solid 1px #e8e8e8;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;font-weight: 300;}

.pc{display: block;}
.sp{display: none;}
@media(max-width: 768px){
  .pc{display: none;}
.sp{display: block;}
.text-column h4{margin-top: 10px;}
}

/*======== project information area start  ==========*/
.project_information_area {
    padding: 100px 0 85px;
}
.inner_project_information_img {
    margin-bottom: 20px;
}
.inner_project_information_img img{
    width: 100%;
    border: 1px solid #e8e8e8;
}
/* inner project right content css */
.inner_project_right_content h2{
    font-size: 24px;
}
.inner_project_right_content p span{
    font-size: 16px;
    color: var(--bgcolor);
    font-weight: 700;
}
/* inner project infomation icons css */
.inner_project_in_icon a{
    width: 48px;
    height: 48px;
    border: 1px solid #dddddd;
    display: inline-block;
    line-height: 46px;
    text-align: center;
    border-radius: 30px;
    background-color: var(--whitec);
    color: var(--bgcolor);
    font-size: 20px;
    margin-right: 4px;
}
.inner_project_in_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* inner project text area css */
.inner_project_text_area {
    margin-top: 25px;
}
.inner_project_text_area h2{
    font-size: 24px;
}
.inner_project_text_area h3{ font-weight:bold; }
.inner_project_text_area img{max-width:100%; width:auto;}
.inner_project_information_descrip {
    margin-bottom: 8px;
}
.inner_project_information_descrip h4{
    font-size: 16px;
}
.inner_project_information_descrip p{
    margin: 0;
}
/* inner project information description css */
.inner_project_infor_list{
    margin-bottom: 15px;
    padding: 0;
    list-style: none;
}
.inner_project_infor_list li{
    margin-bottom: 5px;
}
/* single portfolio */
.prots-contentg ul {
    display: inline-block;
    margin-bottom: 20px;
    padding-left: 0;
}
.prots-contentg ul li {
    padding-top: 15px;
    padding-bottom: 10px;
    list-style: none;
    border-bottom: 1px solid #ddd;
    width:100%;
    float:left;
}
.prots-contentg ul li b {
    font-size: 16px;
    font-weight: 600;
}
.prots-contentg ul li span.eright {
    font-weight: 400;
    font-size: 16px;
    margin-left: 5px;
}
.prots-contentg ul li span.erightel {
    font-weight: 600;
    font-size: 20px;
    margin-left: 5px;
    color:var(--bgcolor);
}
.twr_form_box img{width:auto;}
.inner_single_box_area{
    background-color: #f8f9fa;
    padding: 20px 20px 20px;
    margin-top:30px;
}
.inner_single_box_area p {
    margin-bottom: 5px;
}
.inner_single_page_content_area p{
    margin-top: 20px;
}
/*======== project information area end  ==========*/
/**service**/
.service-section1{ background:#fff; position: relative;}
.service-section1 .service-section1Wrapper{ width:100%; padding:80px 0;}
.service-section1 .service-section1-box{ margin:0 auto; overflow:hidden; background: #fff; text-align: center;}
.service-section1 .service-section1-box .title{text-align: center;}
.service-section1 .service-section1-box .title h3{font-size:26px; color:#333; font-weight: bold; line-height:42px;}
.service-section1 .service-section1-box .title h4{ font-size:20px; line-height:26px; color:#333; font-weight:500;text-transform:uppercase; margin-bottom: 30px;}
.service-section1 .service-section1-box .title h5{ font-size:16px; line-height:30px; color:#333;}
.service-section1 .service-section1-desc{ font-size:18px; line-height:40px; padding:50px 0 0; text-align: center; }
.service-section1 .service-section1-desc img{max-width: 100%;}


.service-section2{ background:#f1f1f1; position: relative;}
.service-section2 .service-section2Wrapper{ width:100%; padding:80px 0;}
.service-section2 .service-section2-box{  margin:0 auto; overflow:hidden; background: #fff; padding-bottom: 6%;}
.service-section2 .service-section2-box .title{text-align: center; margin-top:60px;}
.service-section2 .service-section2-box .title h3{ font-size:26px; font-weight: bold; line-height:42px;}
.service-section2 .service-section2-box .title h4{ font-size:20px; line-height:26px; color:#333; font-weight:500;text-transform:uppercase; margin-bottom: 30px;}
.service-section2 .service-section2-box .title h5{ font-size:16px; line-height:30px; color:#999;}
.service-section2 .service-section2-desc{ font-size:18px; line-height:40px; padding:70px 0 0; }
.service-section2 .service-section2-desc .service_left{width: 40%; float:left;}
.service-section2 .service-section2-desc .service_left img{max-width: 100%;}
.service-section2 .service-section2-desc .service_right{ width: 55%; float:right;}
.service-section2 .service-section2-desc .service_right img{max-width: 100%;}
.service-section2 .service-section2-desc .t01{ font-size:24px; font-weight:bold; color:#005aff; line-height:30px;}
.service-section2 .service-section2-desc .t02{ font-size:24px; font-weight:bold; color:#fff; text-transform:uppercase; line-height:30px; font-style:italic;}
.service-section2 .service-section2-desc .line{ width:43px; height:2px; background:#bdbdc2; margin:0 0 22px;}

/*======== apartment cities area end  ==========*/
.downlist{border:1px solid #e8e8e8;}
.downt01 { float:left; font-size:17px; height:80px; line-height:80px; padding-right:15px; color:#333333; background:url(../images/pdf2.png) no-repeat 10px center; background-size: 5%; padding-left:50px;  font-weight:bold;overflow: hidden;
    text-overflow: ellipsis;}
.downt02 { border-left:1px solid #E8E8E8;  float:left; height:100%; text-align:center;}
.downt02 a { font-size:17px; font-weight:bold; color:#333333; display:inline-block; background:url(../images/read.png) no-repeat left; padding-left:46px; line-height:80px;}
.downt02 a:hover { color:var(--primary-color);}
.downt03 { border-left:1px solid #E8E8E8;  float:left; height:100%; text-align:center;}
.downt03 a { font-size:17px; font-weight:bold; color:#333333;display:inline-block; background:url(../images/down2.png) no-repeat left; padding-left:44px; line-height:80px;}
.downt02 a:hover,.downt03 a:hover { color:var(--primary-color);}
/*======== about area end =======*/

/*============== start Footer section ==========*/

.footer {
  background-color: #111;
  /*background:url(../images/footerbg.jpg) left top no-repeat; background-size:cover;*/
  color: var(--bodyColor);
}

.footer p,
.footer a {
  color: rgba(255,255,255,0.85);
}

.footer h3 {
  color: var(--bodyColor);
}

.footer-link {
  font-size: 16px;
  color: var(--grey);
  font-family: "Outfit", sans-serif;
}

.footer a {
  font-size: 16px;
  font-family: "Outfit", sans-serif;
}

.copy {
  font-size: 14px;
  color: var(--bodyColor);
}

/*============== End Footer section ==========*/

.tab-container h3{ /* Effects only the h3 headings inside the tabs */
  font-size:147%;
  color:#EFDFB3;
}
/* `Containers
----------------------------------------------------------------------------------------------------*/

#container{ /* Use this to position the entire tab module */
  margin:0 auto; 
  width:480px; 
  margin-top:200%;
}

.tab-container {
  position: relative; /* It's important to keep this position relative and the absolute positions in this file the same */
  width: 100%; 
  z-index:0;
}

/* `Common Styles
----------------------------------------------------------------------------------------------------*/

/**tabs**/
.tabPanel ul{height:50px;border-bottom:1px solid #e8e8e8; padding:0; margin:0px;}
.tabPanel ul li{
  float:left;margin:0 2px 0 0;border:1px solid #e8e8e8;font-size:18px;height:49px;line-height:50px;width:30%;text-align:center;cursor:pointer;
  text-shadow:0 1px 0 #fff;
  border-radius:4px 4px 0 0;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background:#ddd;
  background:-moz-linear-gradient(top, #eee, #ddd);
  background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
  color:black;
}
.tabPanel .hit{
  border-bottom:1px solid #fff;cursor:pointer;color:var(--bgcolor); font-weight:bold; text-shadow:0 1px 0 #fff;
  background:#fff;
  background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));
  background:-moz-linear-gradient(top, #e1e1e1, #fff);
}
.pane{border:1px solid #e8e8e8;border-top:0;min-height:100px;background-color:#fff;display:none; padding:20px;}
.pane p{padding:15px 15px 0 10px;}
.pane h4{padding:15px 15px 0 10px;font-size:14px;font-weight:bold;}


@media(max-width:1680px) {
    #fc{position:fixed;right:10px;}
}
@media(max-width:1366px) {
  .navbar ul li {margin: 0 16px;}
  .code img { width: 100px; height: 100px;}
  .navbar i { font-size: 16px;}

}
@media (max-width: 1280px){
.navbar ul li {margin: 0 12px;}
}
@media (max-width: 1152px){
  .navbar ul li { margin: 0 2px;}
  .category-card{padding:10px;}
  .code img { width: 80px; height: 80px;}
  .category-card .cat-list li{margin-bottom:10px;}
  .category-card .cat-title{margin-bottom:10px;}
}
@media(max-width:768px) {
    #fc{display:none;}
    .new-top{display:none;}
    .newmen{width:100%;}
    .category-card{height:35vw;}
    .code img{width:120px; height:120px;}
    .downt01{border-bottom:1px solid #E8E8E8;}
    .downlist{margin-bottom:20px;}
    .downt02{border:0px;}
    .downt01{height:60px; line-height:60px;}
    .downt02 a,.downt03 a{line-height:60px;}
    .tabPanel ul{height:150px;}
    .tabPanel ul li{width:100%;}
    .pane{padding:5px;}
}
@media(max-width:640px) {
  .navbar .logo{width:10rem;}
  .logo10 .text .t1{font-size:14px;}
  .cart, .cart-mobile{width:38px; height:38px;}
  .cart-mobile img { width: 22px;}
  .section { padding: 4rem 0 2rem;}
  .category-card { height: 80vw;}
  .heading-1 { font-size: 26px;}
  .yblog_left{padding:0px;}
  .cbcode{ display:none; }
}