/*----------------------------------------------------

1. Global Area 
2.header
3.slider
4.service
5.about
6.project
7.work-process
8.counter
9.team
10.testimonial
11.appointment-video
12.blog
13.before-after
14.skill
15.price
16.breadcrumb
17.cta
18.faq
19.shop
20.contact
21.responsive

=====================================================================*/
/*=========
Font load
===========*/
/*global area*/
/*----------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #F4F7FC;
  font-size: 16px;
  line-height: 1.875;
  color: var(--body-color);
  font-family: var(--body-font);
  -moz-osx-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

.mt-80 {
  margin-top: 80px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-30 {
  margin-top: 30px;
}

.headline h1,
.headline h2,
.headline h3,
.headline h4,
.headline h5,
.headline h6 {
  margin: 0;
  font-weight: normal;
  font-family: var(--heading);
}



.archx-home .scrollup {
  background-color: var(--main-color-2);
}

.archx-home .container {
  max-width: 1425px;
}

.scrollup {
  width: 55px;
  right: 20px;
  z-index: 5;
  height: 55px;
  bottom: 20px;
  display: none;
  position: fixed;
  border-radius: 100%;
  line-height: 55px;
  background-color: var(--main-color);
}

.scrollup i {
  color: #fff;
}

.archx-home .scrollup {
  background-color: var(--main-color-2);
}

.headline-2 h1,
.headline-2 h2,
.headline-2 h3,
.headline-2 h4,
.headline-2 h5,
.headline-2 h6 {
  margin: 0;
  font-weight: normal;
  font-family: var(--heading-2);
}

.no-padding {
  padding: 0;
}

.arck-appointment-form-wrap form button, .arck-btn a {
  z-index: 1;
  width: 195px;
  height: 60px;
  font-weight: 600;
  border-radius: 5px;
  position: relative;
  color: var(--white-color);
  font-family: var(--heading);
  background-color: var(--main-color-2);
}
.arck-appointment-form-wrap form button:before, .arck-btn a:before {
  top: 10px;
  left: 10px;
  z-index: -2;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  border-radius: 5px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  border: 1px solid var(--black-color);
}
.arck-appointment-form-wrap form button:after, .arck-btn a:after {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  content: "";
  height: 100%;
  border-radius: 5px;
  position: absolute;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color-2);
}
.arck-appointment-form-wrap form button:hover:before, .arck-btn a:hover:before {
  top: 0px;
  left: 0px;
}
.arck-appointment-form-wrap form button:hover:after, .arck-btn a:hover:after {
  background-color: var(--black-color);
}

@-webkit-keyframes Move_animation_1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  75% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes Move_animation_1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  75% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.arck-btn-2 a {
  z-index: 1;
  color: #fff;
  width: 195px;
  height: 60px;
  font-weight: 600;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--heading);
  background-color: var(--black-color);
}
.arck-btn-2 a:before {
  top: 17px;
  right: 45px;
  z-index: -1;
  width: 25px;
  content: "";
  height: 25px;
  position: absolute;
  border-radius: 100%;
  -webkit-transition: 800ms all ease;
  transition: 800ms all ease;
  background-color: var(--main-color);
}
.arck-btn-2 a:hover:before {
  -webkit-animation: Move_animation_1 12s infinite linear alternate;
          animation: Move_animation_1 12s infinite linear alternate;
}

.arck-section-title .sub-title,
.arck-section-title-2 .sub-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--main-color);
  font-family: var(--heading);
}
.arck-section-title h2,
.arck-section-title-2 h2 {
  font-size: 48px;
  font-weight: 500;
  padding: 10px 0px 20px;
  color: #000000;
}
.arck-section-title h2 span {
    font-weight: 400;
    position: relative;
    display: inline-block;
    color: var(--main-color-2);
}
.arck-section-title.text-center,
.arck-section-title-2.text-center {
  margin: 0 auto;
  max-width: 670px;
}

.arck-section-title-2 .sub-title {
  padding-left: 35px;
  position: relative;
}
.arck-section-title-2 .sub-title:before {
  top: 0;
  left: 2px;
  content: "";
  width: 25px;
  height: 25px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../img/shape/title-shape.png);
}
.arck-section-title-2 h2 {
  font-weight: 500;
  padding: 20px 0 30px;
}
.arck-section-title-2 h2 span {
  font-weight: 700;
}
.arck-section-title-2 p {
  line-height: 1.875;
}

.acrk-img-shape1,
.acrk-img-shape2 {
  top: 0;
  right: 0;
  width: 200px;
  height: 155px;
}
.acrk-img-shape1:before, .acrk-img-shape1:after,
.acrk-img-shape2:before,
.acrk-img-shape2:after {
  top: 0;
  right: 0;
  content: "";
  width: 100px;
  height: 52px;
  position: absolute;
  background-color: var(--white-color);
}
.acrk-img-shape1:after,
.acrk-img-shape2:after {
  bottom: 0;
  top: auto;
}
.acrk-img-shape1 i,
.acrk-img-shape2 i {
  left: 2px;
  top: 52px;
  height: 52px;
  width: 100px;
  position: absolute;
  background-color: var(--white-color);
}

.acrk-img-shape2 {
  left: 0;
  bottom: 0;
  top: auto;
}
.acrk-img-shape2:before, .acrk-img-shape2:after {
  left: 0;
  right: auto;
}
.acrk-img-shape2 i {
  right: 2px;
  left: auto;
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.arck-testimonial-slider .slick-dots li, .arck-project-slider .slick-dots li, .arck-service-details-testimonial-slider .slick-dots li {
  height: 5px;
  width: 25px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--black-color);
}
.arck-testimonial-slider .slick-dots li button, .arck-project-slider .slick-dots li button, .arck-service-details-testimonial-slider .slick-dots li button {
  display: none;
}
.arck-testimonial-slider .slick-dots li:hover, .arck-project-slider .slick-dots li:hover, .arck-service-details-testimonial-slider .slick-dots li:hover, .arck-testimonial-slider .slick-dots li.slick-active, .arck-project-slider .slick-dots li.slick-active, .arck-service-details-testimonial-slider .slick-dots li.slick-active {
  background-color: var(--main-color);
}

.inner-page-padding {
  padding: 125px 0px;
}

.arck-pagination {
  margin-top: 35px;
}
.arck-pagination li a {
  width: 45px;
  height: 45px;
  color: var(--black-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0px 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #dcdcdc;
}
.arck-pagination li a:hover, .arck-pagination li a.active {
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.padding-top-120 {
  padding-top: 125px;
}

.catalog-download-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.catalog-download-card:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.catalog-thumb {
  position: relative;
  overflow: hidden;
  background: #f7f7f9;
  aspect-ratio: 1 / 1;
}

.catalog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.catalog-download-card:hover .catalog-thumb img {
  transform: scale(1.08);
}

.catalog-thumb-overlay {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  background: var(--main-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.catalog-body {
  padding: 25px;
}

.catalog-body h4 {
  font-size: 20px;
  font-weight: 700;
  color: var(--black-color);
  margin-bottom: 12px;
  line-height: 1.3;
}

.catalog-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-color);
  margin-bottom: 18px;
}

.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.catalog-meta span {
  font-size: 13px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
}

.catalog-meta span i {
  color: var(--main-color);
  font-size: 14px;
}

.catalog-download-btn a {
  display: inline-flex;
  width: 100%;
  padding: 12px 20px;
  background: var(--main-color);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.catalog-download-btn a:hover {
  background: var(--main-color-2, #d4a84b);
  color: #fff;
}

.catalog-download-btn a i {
  font-size: 18px;
}

@media (max-width: 767px) {
  .catalog-body {
    padding: 20px;
  }
  
  .catalog-body h4 {
    font-size: 18px;
  }
  
  .catalog-meta {
    gap: 10px;
  }
  
  .catalog-meta span {
    font-size: 12px;
  }
}

.arck-gallery-section .gallery-filter {
  margin-bottom: 50px;
}

.gallery-grid .gallery-item {
  margin-bottom: 30px;
}

.gallery-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  height: 100%;
}

.gallery-card:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.gallery-img {
  position: relative;
  overflow: hidden;
  background: #f7f7f9;
}

.gallery-img img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-img img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transform: scale(0.8);
  transition: all 0.3s ease;
  text-decoration: none;
}

.gallery-card:hover .gallery-overlay a {
  transform: scale(1);
}

.gallery-overlay a:hover {
  background: var(--main-color-2, #d4a84b);
}

.gallery-info {
  padding: 18px 20px;
}

.gallery-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--black-color);
  margin-bottom: 4px;
}

.gallery-info span {
  font-size: 13px;
  color: var(--main-color);
  font-weight: 500;
}

@media (max-width: 767px) {
  .arck-gallery-section .gallery-filter {
    margin-bottom: 35px;
  }
  
  .gallery-info {
    padding: 15px;
  }
  
  .gallery-info h4 {
    font-size: 15px;
  }
}

/* ===== About page: Our Factory gallery ===== */
.archx-factory-section .gallery-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-item .project-cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.project-item .project-text h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.project-item .project-text h3 a {
  color: var(--black-color);
  text-decoration: none;
  transition: color 0.3s;
}

.project-item .project-text h3 a:hover {
  color: var(--main-color);
}

.project-item .project-text p {
  font-size: 14px;
  color: var(--gray-color);
  line-height: 1.7;
  margin-bottom: 15px;
}

.project-item .read-more-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--main-color);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.3s;
}

.project-item .read-more-btn:hover {
  color: var(--black-color);
}

.project-item .read-more-btn i {
  margin-left: 5px;
  transition: margin-left 0.3s;
}

.project-item .read-more-btn:hover i {
  margin-left: 10px;
}

.archx-project-section-3 .project-filter-menu li {
  cursor: pointer;
}

@media (max-width: 767px) {
  .project-item .project-text h3 {
    font-size: 18px;
  }
}

/*---------------------------------------------------- */
/*Header area*/
/*----------------------------------------------------*/
.arck-header-section .brand-logo {
  max-width: 150px;
}
.arck-header-section .navbar-nav {
  display: inherit;
}
.arck-header-section .dropdown {
  position: relative;
}
.arck-header-section .dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  clip: inherit;
  -webkit-transform: scaleY(1);
  -khtml-transform: scaleY(1);
  transform: scaleY(1);
}
.arck-header-section .dropdown-menu {
  left: 0;
  top: 68px;
  z-index: 100;
  margin: 0px;
  padding: 20px 0;
  height: auto;
  min-width: 250px;
  display: block;
  border: none;
  border-radius: 0;
  position: absolute;
  opacity: 0;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  transform-origin: 0 0 0;
  -webkit-transform-origin: 0 0 0;
  -ms-transform-origin: 0 0 0;
  -o-transform-origin: 0 0 0;
  text-align: left;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.arck-header-section .dropdown-menu .dropdown-menu {
  top: 30px;
  left: 250px;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  opacity: 0 !important;
}
.arck-header-section .dropdown-menu .dropdown-menu a {
  font-size: 12px;
  font-weight: 600;
  color: #1a2428;
}
.arck-header-section .dropdown-menu .dropdown-menu a:before {
  display: none;
}
.arck-header-section .dropdown-menu li {
  display: block;
  margin: 0 !important;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.arck-header-section .dropdown-menu li:last-child {
  border-bottom: none;
}
.arck-header-section .dropdown-menu li:after {
  display: none;
}
.arck-header-section .dropdown-menu li:hover .dropdown-menu {
  top: 0;
  opacity: 1 !important;
}
.arck-header-section .dropdown-menu a {
  width: 100%;
  display: block;
  position: relative;
  padding: 10px 30px !important;
  color: #1a2428 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.arck-header-section .dropdown-menu a:before {
  display: none;
}
.arck-header-section .dropdown-menu a:hover {
  color: var(--main-color) !important;
}
.arck-header-section .main-navigation li {
  margin: 0px 30px;
}
.arck-header-section .main-navigation li a {
  font-weight: 600;
  color: var(--black-color);
  text-transform: uppercase;
  padding-bottom: var(--padding-bottom-45);
}
.arck-header-section .main-navigation li:hover a {
  color: var(--main-color);
}
.arck-header-section.header-style-one {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 15px 60px;
  position: absolute;
  background-color: var(--white-color);
}
.arck-header-section.header-style-one.inner-page-header {
  background-color: rgba(31, 31, 31, 0.302);
}
.arck-header-section.header-style-one .header-cta-social {
  color: var(--black-color);
}
.arck-header-section.header-style-one .header-cta-social .header-cta {
  font-weight: 600;
}
.arck-header-section.header-style-one .header-cta-social .header-social {
  position: relative;
  margin-left: var(--margin-left-80);
}
.arck-header-section.header-style-one .header-cta-social .header-social:before {
  top: -10px;
  width: 1px;
  left: -30px;
  content: "";
  height: 40px;
  position: absolute;
  background-color: #363636;
}
.arck-header-section.header-style-one .header-cta-social .header-social li {
  margin-left: var(--margin-left-20);
}
.arck-header-section.header-style-one .header-cta-social .header-social li a:hover {
  color: var(--main-color);
}
.arck-header-section.header-style-one .header-side-btn {
  margin-left: 75px;
}
.arck-header-section.header-style-one .header-side-btn button {
  color: var(--black-color);
  border: none;
  line-height: 1;
  font-size: 25px;
  position: relative;
  background-color: transparent;
}
.arck-header-section.header-style-one .header-side-btn button:before {
  top: -10px;
  width: 1px;
  left: -35px;
  content: "";
  height: 40px;
  position: absolute;
  background-color: #363636;
}
.arck-header-section.inner-page-header {
  background-color: #1c2834;
}

.arck-header-section.sticky-on {
  top: 0;
  width: 100%;
  z-index: 20;
  position: fixed;
  padding: 15px 60px;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  background-color: var(--white-color);
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  -webkit-box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
}
.arck-header-section.sticky-on .dropdown-menu {
  top: 60px;
}
.arck-header-section.sticky-on.inner-page-header {
  background-color: rgb(31, 31, 31);
}

/*Mobile area*/
/*----------------------------------------------------*/
.mobile_menu {
  display: none;
}

.mobile_logo {
  top: 10px;
  left: 15px;
  display: none;
  position: absolute;
}

.mobile_menu_content {
  top: 0px;
  bottom: 0;
  left: -350px;
  height: 100vh;
  z-index: 101;
  position: fixed;
  width: 310px;
  overflow-y: scroll;
  background-color: #fff;
  padding: 20px 35px 35px 35px;
  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.19);
          box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.19);
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
.mobile_menu_content .mobile-main-navigation {
  width: 100%;
}
.mobile_menu_content .mobile-main-navigation .navbar-nav {
  width: 100%;
}
.mobile_menu_content .dropdown:after {
  display: none;
}
.mobile_menu_content .navbar-nav .dropdown-menu {
  position: static !important;
  -webkit-transform: none !important;
          transform: none !important;
}
.mobile_menu_content .mobile-main-navigation .navbar-nav li {
  width: 100%;
  display: block;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.mobile_menu_content .mobile-main-navigation .navbar-nav li a {
  padding: 0;
  width: 100%;
  color: var(--black-color);
  display: block;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--heading);
  text-transform: uppercase;
  padding: 10px 30px 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.mobile_menu_content .m-brand-logo {
  width: 120px;
  margin: 50px auto;
}

.mobile_menu_wrap.mobile_menu_on .mobile_menu_content {
  left: 0px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

.mobile_menu_overlay {
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  right: 0%;
  height: 120vh;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.mobile_menu_overlay_on {
  overflow: hidden;
}

.mobile_menu_wrap.mobile_menu_on .mobile_menu_overlay {
  opacity: 1;
  visibility: visible;
}

.mobile_menu_button {
  right: 15px;
  top: 20px;
  z-index: 5;
  color: #fff;
  display: none;
  font-size: 24px;
  cursor: pointer;
  line-height: 38px;
  position: absolute;
  text-align: center;
}

.mobile_menu .mobile-main-navigation .navbar-nav li a:after {
  display: none;
}
.mobile_menu .mobile-main-navigation .dropdown > .dropdown-menu {
  opacity: 1 !important;
  visibility: visible;
}
.mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu {
  border: none;
  display: none;
  -webkit-transition: none;
  transition: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 5px 0px;
  width: 100%;
  background-color: transparent;
}
.mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li {
  border: none;
  padding: 0 10px;
  line-height: 1;
}
.mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li:hover {
  background-color: transparent;
}
.mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li a {
  color: var(--black-color) !important;
}
.mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li a:hover {
  color: var(--main-color);
  background-color: transparent;
}
.mobile_menu .dropdown {
  position: relative;
}
.mobile_menu .dropdown .dropdown-btn {
  color: #9397a7;
  position: absolute;
  top: 3px;
  right: 0;
  height: 30px;
  padding: 5px 10px;
}
.mobile_menu .dropdown .dropdown-btn.toggle-open {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.mobile_menu .mobile_menu_close {
  color: #d60606;
  cursor: pointer;
  top: 25px;
  right: 25px;
  font-size: 20px;
  position: absolute;
}

/*// off canvas style*/
/*----------------------------------------------------*/
.sidebar-info-contents {
  position: relative;
}

.sidebar-info-contents .content-inner {
  position: relative;
}

.sidebar-info-contents .content-inner .logo {
  padding-bottom: 20px;
  max-width: 180px;
}

.sidebar-info-contents .content-inner .logo img {
  display: inline-block;
  max-width: 100%;
}

.sidebar-info-contents .content-inner .content-box {
  position: relative;
  margin-top: 50px;
}

.sidebar-info-contents .content-inner h5 {
  color: #fff;
  font-weight: 700;
  margin: 25px 0px 15px;
}

.sidebar-info-contents .content-inner .content-box .text {
  color: #fff;
  margin-bottom: 35px;
}

.sidebar-info-contents .content-inner .social-box {
  position: relative;
  margin-top: 0px;
  padding-left: 0;
  margin-bottom: 30px;
}

.sidebar-info-contents .content-inner .social-box li {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}

.sidebar-info-contents .content-inner .social-box li a {
  position: relative;
  width: 36px;
  height: 36px;
  color: var(--black-color);
  z-index: 1;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  background-color: #fff;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.sidebar-info-contents .content-inner .social-box li a:hover {
  color: #fff;
  background-color: var(--main-color);
}

.close-side-widget,
.close-side-widget:hover {
  color: #fff !important;
  font-size: 24px;
}

.xs-sidebar-group .xs-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  position: fixed;
  pointer-events: none;
  cursor: url(../img/cross-out.png), pointer;
}
.xs-sidebar-group .xs-overlay .loader-area {
  height: 100vh;
}

.xs-sidebar-group.info-group .xs-overlay {
  z-index: 35;
}

.xs-sidebar-group .preloader-wrap {
  padding: 0px;
}

.xs-sidebar-group .loader-area {
  height: 100vh;
}

.xs-sidebar-group.info-group.isActive .preloader-wrap .loader-bg {
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  -webkit-transition: 800ms all cubic-bezier(0.77, 0, 0.175, 1);
  transition: 800ms all cubic-bezier(0.77, 0, 0.175, 1);
}

.xs-sidebar-group.info-group .preloader-wrap .loader-bg {
  left: 0;
  width: 0;
  opacity: 0;
  opacity: 0.95;
  height: 100%;
  -webkit-transition: 800ms all cubic-bezier(0.1, 0.1, 0.1, 1);
  transition: 800ms all cubic-bezier(0.1, 0.1, 0.1, 1);
}

.xs-sidebar-group .widget-heading {
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px;
}

.xs-sidebar-widget {
  position: fixed;
  right: -100%;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  z-index: 999999;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #272727;
  -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
  transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
  visibility: hidden;
  opacity: 0;
}

.xs-sidebar-group.isActive .xs-sidebar-widget {
  opacity: 1;
  visibility: visible;
  right: 0;
  -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
  transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}

.sidebar-textwidget {
  padding: 40px;
}

.close-side-widget {
  color: #1768dd;
  font-size: rem(15px);
  display: block;
}

.sidebar-widget-container {
  position: relative;
  top: 150px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in 0.3s;
  transition: all 0.3s ease-in 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.xs-sidebar-group.isActive .sidebar-widget-container {
  top: 0px;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 1s ease-out 1.2s;
  transition: all 1s ease-out 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sidebar-info-contents .gallery-box li {
  margin-bottom: 5px;
}

.tl-thx-header-section.sticky-on {
  top: 0;
  width: 100%;
  z-index: 20;
  position: fixed;
  padding-top: 0;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  background-color: #fff;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  -webkit-box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
}

/*---------------------------------------------------- */
/*Slider area*/
/*----------------------------------------------------*/
.arck-slider-section-1 {
  overflow: hidden;
  z-index: 1;
  padding: 0;
  background-color: var(--black-color-2);
}
.arck-slider-section-1:before, .arck-slider-section-1:after {
  content: "";
  z-index: -1;
  height: 70px;
  width: 100px;
  bottom: -20px;
  position: absolute;
  background-color: #f4f4f4;
}
.arck-slider-section-1:before {
  left: -20px;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
.arck-slider-section-1:after {
  right: -20px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

.arck-main-slider-item {
  z-index: 1;
  padding: 360px 0px 250px;
}
.arck-main-slider-item .arck-main-slider-img {
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.arck-main-slider-item .arck-slider-main-text {
  max-width: 650px;
}
.arck-main-slider-item .arck-slider-main-text:before, .arck-main-slider-item .arck-slider-main-text:after {
  top: -160px;
  left: -80px;
  width: 2px;
  content: "";
  height: 0;
  position: absolute;
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  background-color: rgba(255, 255, 255, 0.5);
}
.arck-main-slider-item .arck-slider-main-text:after {
  top: -110px;
  height: 2px;
  left: -135px;
  width: 0px;
}
.arck-main-slider-item .arck-slider-main-text .line-shape {
  bottom: -80px;
  right: 30px;
  height: 350px;
  width: 350px;
}
.arck-main-slider-item .arck-slider-main-text .line-shape:before, .arck-main-slider-item .arck-slider-main-text .line-shape:after {
  bottom: 0;
  right: -80px;
  width: 2px;
  content: "";
  height: 0px;
  position: absolute;
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  background-color: rgba(255, 255, 255, 0.5);
}
.arck-main-slider-item .arck-slider-main-text .line-shape:after {
  bottom: 50px;
  height: 2px;
  right: -135px;
  width: 0px;
}
.arck-main-slider-item .arck-slider-main-text .slider-sub-text {
  opacity: 0;
  color: var(--main-color);
  font-size: 18px;
  font-weight: 600;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item .arck-slider-main-text h1 {
  color: var(--white-color);
  font-size: 70px;
  font-weight: 600;
  line-height: 1.125;
  padding: 15px 0px 50px;
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item .arck-slider-main-text .arck-btn {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item .arck-slider-main-text .arck-btn a:before {
  border: 1px solid var(--white-color);
}
.arck-main-slider-item .arck-slider-main-text .arck-btn a:hover::after {
  background-color: var(--white-color);
}
.arck-main-slider-item .arck-slider-main-text .arck-btn a:hover {
  color: var(--black-color);
}
.arck-main-slider-item.slick-current.slick-active .img-zooming {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transition: all 7000ms linear;
  transition: all 7000ms linear;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text:before {
  height: 300px;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text:after {
  width: 300px;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text .line-shape:before {
  height: 300px;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text .line-shape:after {
  width: 300px;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text .slider-sub-text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text h1 {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 1200ms;
          transition-delay: 1200ms;
}
.arck-main-slider-item.slick-current.slick-active .arck-slider-main-text .arck-btn {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 1500ms;
          transition-delay: 1500ms;
}

.arck-main-slider-item .arck-main-slider-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 54, 104, 0.4);
  z-index: 1;
}

.arck-slider-area .slick-prev,
.arck-slider-area .slick-next {
  display: none !important;
}
.arck-slider-area .slick-dots {
  top: 50%;
  left: auto;
  width: auto;
  right: 120px;
  bottom: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.arck-slider-area .slick-dots li {
  width: 5px;
  height: 25px;
  display: block;
  margin-bottom: 10px;
  background-color: var(--white-color);
}
.arck-slider-area .slick-dots li.slick-active {
  background-color: var(--main-color);
}

.arck-slider-section-2 {
  overflow: hidden;
  background-color: #fbfbfb;
}
.arck-slider-section-2 .slider-social {
  left: 50px;
  z-index: 2;
  bottom: 50px;
}
.arck-slider-section-2 .slider-social a {
  margin-left: 15px;
  color: var(--black-color);
}
.arck-slider-section-2 .slider-social a:hover {
  color: var(--main-color);
}

.arck-main-slider-item-2 {
  padding: 350px 0px 215px;
}
.arck-main-slider-item-2 .arck-slider-img-2 {
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
}
.arck-main-slider-item-2 .arck-slider-img-2 img {
  width: 100%;
  height: 100%;
}
.arck-main-slider-item-2 .slider-shape {
  top: 25%;
  opacity: 0;
  left: 160px;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item-2 .arck-slider-main-text {
  max-width: 530px;
}
.arck-main-slider-item-2 .arck-slider-main-text .slider-sub-text {
  opacity: 0;
  color: var(--main-color);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 3px;
  font-family: var(--heading);
  padding-left: 35px;
  position: relative;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item-2 .arck-slider-main-text .slider-sub-text:before {
  top: 0;
  left: 2px;
  content: "";
  width: 25px;
  height: 25px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../img/shape/title-shape.png);
}
.arck-main-slider-item-2 .arck-slider-main-text h1 {
  opacity: 0;
  color: var(--black-color);
  font-size: 70px;
  line-height: 1.071;
  font-weight: 600;
  padding: 23px 0px 30px;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item-2 .arck-slider-main-text h1 span {
  font-weight: 700;
}
.arck-main-slider-item-2 .arck-slider-main-text p {
  opacity: 0;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 40px;
  font-family: var(--heading);
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item-2 .arck-slider-main-text .arck-btn-2 {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.arck-main-slider-item-2.slick-current.slick-active .arck-slider-main-text .slider-sub-text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
}
.arck-main-slider-item-2.slick-current.slick-active .arck-slider-main-text h1 {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
.arck-main-slider-item-2.slick-current.slick-active .arck-slider-main-text p {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
}
.arck-main-slider-item-2.slick-current.slick-active .arck-slider-main-text .arck-btn-2 {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 1000ms;
          transition-delay: 1000ms;
}
.arck-main-slider-item-2.slick-current.slick-active .slider-shape {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1500ms ease;
  transition: all 1500ms ease;
  -webkit-transition-delay: 1200ms;
          transition-delay: 1200ms;
}

.arck-main-slider-area-2 .carousel_nav {
  top: 50%;
  left: -100px;
  z-index: 2;
  position: absolute;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
.arck-main-slider-area-2 .carousel_nav:before, .arck-main-slider-area-2 .carousel_nav:after {
  top: -15px;
  width: 2px;
  content: "";
  height: 60px;
  right: 140px;
  position: absolute;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  background-color: var(--black-color);
}
.arck-main-slider-area-2 .carousel_nav:after {
  top: 0px;
  height: 30px;
  right: 118px;
  background-color: var(--main-color);
}
.arck-main-slider-area-2 .carousel_nav button {
  color: var(--black-color);
  padding: 0;
  border: none;
  font-weight: 600;
  margin: 0 50px;
  font-family: var(--heading);
  background-color: transparent;
}
.arck-main-slider-area-2 .carousel_nav button:hover {
  color: var(--main-color);
}

/*---------------------------------------------------- */
/*Service area*/
/*----------------------------------------------------*/
.arck-service-section {
  padding: 130px 0px;
  background-color: #f4f4f4;
}

.arck-service-content {
  margin: 0px -15px;
  padding: 0px 15px;
  background-color: var(--white-color);
  -webkit-box-shadow: 0px 0px 50px 0px rgba(35, 31, 32, 0.1);
          box-shadow: 0px 0px 50px 0px rgba(35, 31, 32, 0.1);
}

.arck-service-item {
  z-index: 1;
  overflow: hidden;
  padding: 70px 45px 55px;
}
.arck-service-item:before, .arck-service-item:after {
  top: 38px;
  left: 20px;
  content: "";
  height: 2px;
  width: 100px;
  position: absolute;
  background-color: #efefef;
}
.arck-service-item:after {
  top: 20px;
  width: 2px;
  left: 38px;
  height: 100px;
}
.arck-service-item .hover-img {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  z-index: -1;
  height: 100%;
  overflow: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-service-item .hover-img:before {
  top: 0;
  left: 0;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
}
.arck-service-item .hover-img img {
  width: 100%;
  height: 100%;
}
.arck-service-item .serial-no {
  right: 20px;
  bottom: 20px;
  color: #e8e8e8;
  font-size: 90px;
  line-height: 0.75;
  font-weight: 700;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  font-family: var(--heading);
}
.arck-service-item .inner-icon {
  z-index: 1;
  width: 170px;
  height: 160px;
  margin: 0 auto;
  margin-bottom: var(--margin-bottom-50);
}
.arck-service-item .inner-icon:before {
  z-index: -1;
  width: 50px;
  content: "";
  right: -15px;
  height: 45px;
  bottom: -15px;
  position: absolute;
  border: 5px solid #ebebeb;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-service-item .arck-inner-text {
  position: relative;
}
.arck-service-item .arck-inner-text h3 {
  font-weight: 700;
  color: var(--black-color);
  font-size: var(--font-24);
  padding-bottom: var(--padding-bottom-20);
}
.arck-service-item .arck-inner-text p {
  line-height: 1.625;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding-bottom: var(--padding-bottom-20);
}
.arck-service-item .arck-inner-text .btn-more {
  font-weight: 600;
  color: var(--black-color);
  font-family: var(--heading);
}
.arck-service-item .arck-inner-text .btn-more i {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-service-item .arck-inner-text .btn-more:hover {
  color: var(--main-color);
}
.arck-service-item .arck-inner-text .btn-more:hover i {
  margin-left: var(--margin-left-10);
}
.arck-service-item:hover .hover-img, .arck-service-item.active .hover-img {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
.arck-service-item:hover .serial-no, .arck-service-item.active .serial-no {
  color: #fff;
}
.arck-service-item:hover .arck-inner-text h3, .arck-service-item.active .arck-inner-text h3 {
  color: #fff;
}
.arck-service-item:hover .arck-inner-text p, .arck-service-item.active .arck-inner-text p {
  color: #fff;
}
.arck-service-item:hover .arck-inner-text .btn-more, .arck-service-item.active .arck-inner-text .btn-more {
  color: #fff;
}
.arck-service-item:hover .arck-inner-text .btn-more:hover, .arck-service-item.active .arck-inner-text .btn-more:hover {
  color: var(--main-color);
}
.arck-service-item:hover .inner-icon:before, .arck-service-item.active .inner-icon:before {
  opacity: 0.4;
}

.arck-service-content-2 {
  padding-top: 40px;
}

.arck-service-item-2 {
  overflow: hidden;
  margin-bottom: 30px;
  background-color: #fff;
  padding: 50px 35px 45px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-box-shadow: 0px 0px 50px 0px rgba(35, 31, 32, 0.1);
          box-shadow: 0px 0px 50px 0px rgba(35, 31, 32, 0.1);
}
.arck-service-item-2 .service-shape {
  top: -15px;
  right: -10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-service-item-2 .inner-icon {
  z-index: 1;
  width: 80px;
  height: 70px;
  margin-bottom: 40px;
  border: 5px solid #ebebeb;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-service-item-2 .inner-icon:before {
  left: 0;
  right: 0;
  top: -5px;
  content: "";
  z-index: -1;
  width: 28px;
  height: 116%;
  margin: 0 auto;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--white-color);
}
.arck-service-item-2 .inner-icon:after {
  top: 50%;
  left: -5px;
  content: "";
  z-index: -1;
  width: 116%;
  height: 28px;
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--white-color);
}
.arck-service-item-2 .inner-text h3 {
  font-weight: 600;
  padding-bottom: 18px;
  color: #1a1a1a;
  font-size: var(--font-24);
}
.arck-service-item-2 .inner-text p {
  line-height: 1.75;
  padding-bottom: 30px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-service-item-2:hover {
  background-color: var(--black-color);
}
.arck-service-item-2:hover .inner-icon {
  border: 5px solid #2f2f2f;
}
.arck-service-item-2:hover .inner-icon:before, .arck-service-item-2:hover .inner-icon:after {
  background-color: var(--black-color);
}
.arck-service-item-2:hover .inner-text h3, .arck-service-item-2:hover .inner-text p, .arck-service-item-2:hover .inner-text .read-more-btn {
  color: var(--white-color);
}

.arck-service-details-category li {
  margin-bottom: 10px;
  text-align: left !important;
}
.arck-service-details-category li a {
  color: var(--black-color);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 25px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.08);
          box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.08);
}
.arck-service-details-category li a:hover, .arck-service-details-category li a.active {
  color: var(--white-color);
  background-color: var(--main-color);
}

.arck-service-details-sub-category {
  list-style: none;
  margin: 8px 0 10px;
  padding-left: 20px;
}

.arck-service-details-sub-category li {
  margin-bottom: 6px;
}

.arck-service-details-sub-category li a {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  box-shadow: none;
  background-color: #f5f5f5;
  border-left: 3px solid transparent;
}

.arck-service-details-sub-category li a:hover,
.arck-service-details-sub-category li a.active {
  color: var(--main-color);
  background-color: #f5f5f5;
  border-left-color: var(--main-color);
}

.arck-project-details-slider .slick-prev, .arck-service-details-slider .slick-prev, .arck-project-details-slider .slick-next, .arck-service-details-slider .slick-next {
  color: var(--white-color);
  width: 40px;
  z-index: 2;
  height: 40px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--black-color);
}
.arck-project-details-slider .slick-prev:hover, .arck-service-details-slider .slick-prev:hover, .arck-project-details-slider .slick-next:hover, .arck-service-details-slider .slick-next:hover {
  background-color: var(--main-color);
}
.arck-project-details-slider .slick-next, .arck-service-details-slider .slick-next {
  right: 18px;
}
.arck-project-details-slider .slick-prev, .arck-service-details-slider .slick-prev {
  left: 15px;
}
.arck-project-details-slider .slick-prev.slick-disabled:before, .arck-service-details-slider .slick-prev.slick-disabled:before, .arck-project-details-slider .slick-next.slick-disabled:before, .arck-service-details-slider .slick-next.slick-disabled:before {
  opacity: 1;
}

.arck-service-details-slider {
  margin: 0px -15px;
}

.service-details-img-item {
  padding: 0px 15px;
}

.arck-service-details-progress-wrap {
  margin-bottom: 60px;
}

.arck-service-details-text-area {
  margin: 0px 0px 25px;
}
.arck-service-details-text-area h3 {
  color: var(--black-color);
  font-size: 42px;
  font-weight: 600;
  padding-bottom: 35px;
}
.arck-service-details-text-area p {
  line-height: 1.875;
  padding-bottom: 30px;
}

/* ====== Solution Document (sol-doc) ====== */
.sol-doc {
  background: #fff;
  padding: 40px 44px;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(1, 54, 104, 0.06);
}

.sol-doc-hero {
  margin: -40px -44px 36px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  position: relative;
}
.sol-doc-hero img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.sol-doc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,54,104,0) 55%, rgba(1,54,104,0.65) 100%);
  pointer-events: none;
}

.sol-doc-title-block {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
/* Hero + Title Split Layout */
.sol-doc-hero-split {
  display: flex;
  align-items: stretch;
  gap: 36px;
  margin: -40px -44px 36px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--main-color-tint) 0%, #fff 100%);
}
.sol-doc-hero-split-img {
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
}
.sol-doc-hero-split-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
.sol-doc-hero-split-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 36px 36px 0;
}
.sol-doc-hero-split-text .sol-doc-badge {
  margin-bottom: 16px;
}
.sol-doc-hero-split-text .sol-doc-title {
  margin-bottom: 14px !important;
}
.sol-doc-hero-split-text .sol-doc-subtitle {
  max-width: 560px;
}
@media (max-width: 991px) {
  .sol-doc-hero-split {
    flex-direction: column;
    gap: 0;
  }
  .sol-doc-hero-split-img {
    flex: 0 0 auto;
  }
  .sol-doc-hero-split-img img {
    min-height: 220px;
    max-height: 320px;
  }
  .sol-doc-hero-split-text {
    padding: 28px 24px;
  }
}
.sol-doc-badge {
  display: inline-block;
  background: var(--main-color-tint);
  color: var(--main-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  font-family: var(--body-font-2);
}
.sol-doc-title {
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--black-color) !important;
  padding-bottom: 12px !important;
  margin: 0 !important;
  font-family: var(--heading-2);
}
.sol-doc-subtitle {
  font-size: 17px;
  color: var(--body-color-2);
  line-height: 1.7;
  padding-bottom: 0 !important;
  margin: 0;
}

.sol-doc-section {
  margin-bottom: 44px;
}
.sol-doc-lead {
  font-size: 18px;
  line-height: 1.9;
  color: var(--black-color);
  font-weight: 500;
  padding-left: 18px;
  border-left: 4px solid var(--main-color);
  padding-bottom: 0 !important;
  margin-bottom: 20px !important;
}

.sol-doc-subtitle-h4 {
  font-size: 24px;
  font-weight: 700;
  color: var(--black-color);
  margin: 0 0 22px !important;
  padding-bottom: 14px;
  font-family: var(--heading-2);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.sol-doc-subtitle-h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--main-color);
  border-radius: 2px;
}
.sol-doc-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--heading-2);
}

/* Key Highlight Card */
.sol-doc-highlight {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  background: linear-gradient(135deg, #fffbeb 0%, var(--main-color-tint) 100%);
  border-radius: 12px;
  margin: 28px 0 44px;
  border-left: 5px solid var(--main-color);
  align-items: flex-start;
}
.sol-doc-highlight-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.sol-doc-highlight-body h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--main-color);
  margin: 0 0 6px;
  font-family: var(--heading-2);
}
.sol-doc-highlight-body p {
  font-size: 15px;
  color: var(--body-color);
  line-height: 1.7;
  padding-bottom: 0 !important;
  margin: 0;
}

/* Feature List */
.sol-doc-feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 10px;
}
.sol-doc-feature-list li {
  display: flex !important;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 10px;
  position: static !important;
  transition: all 0.2s ease;
}
.sol-doc-feature-list li:hover {
  background: #fff;
  border-color: var(--main-color);
  box-shadow: 0 4px 14px rgba(1,54,104,0.08);
  transform: translateX(4px);
}
.sol-doc-feature-list li::before {
  display: none !important;
}
.sol-doc-icon-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--main-color-tint);
  color: var(--main-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  margin-top: 2px;
}
.sol-doc-feature-list li > div {
  flex: 1;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body-color);
}
.sol-doc-feature-list li strong {
  color: var(--black-color);
  font-weight: 700;
}

/* Tags */
.sol-doc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 24px;
}
.sol-doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--main-color-tint2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--main-color);
  transition: all 0.2s ease;
  cursor: default;
}
.sol-doc-tag:hover {
  background: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}
.sol-doc-tag i {
  font-size: 12px;
}

/* Gallery */
.sol-doc-gallery {
  margin-top: 8px;
}
.sol-doc-gallery-item {
  margin-bottom: 20px;
}
.sol-doc-gallery-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(1,54,104,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sol-doc-gallery-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(1,54,104,0.15);
}
.sol-doc-gallery-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sol-doc-gallery-img:hover img {
  transform: scale(1.05);
}
.sol-doc-gallery-caption {
  font-size: 13px;
  color: var(--body-color-2);
  text-align: center;
  padding: 10px 0 0;
  padding-bottom: 0 !important;
  margin: 0;
  font-weight: 500;
}

/* CTA Block */
.sol-doc-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  background: linear-gradient(135deg, var(--main-color) 0%, #02529a 100%);
  border-radius: 12px;
  color: #fff;
  margin-top: 10px;
  box-shadow: 0 10px 30px rgba(1,54,104,0.2);
}
.sol-doc-cta-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  backdrop-filter: blur(4px);
}
.sol-doc-cta-body {
  flex: 1;
}
.sol-doc-cta-body h5 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  font-family: var(--heading-2);
}
.sol-doc-cta-body p {
  font-size: 14px;
  opacity: 0.9;
  padding-bottom: 0 !important;
  margin: 0;
  line-height: 1.5;
}
.sol-doc-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #fff;
  color: var(--main-color) !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sol-doc-cta-btn:hover {
  background: #fffbeb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Config Table */
.sol-doc-config-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(1,54,104,0.08);
  border: 1px solid var(--line);
  margin: 8px 0 10px;
}
.sol-doc-config-table thead th {
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding: 14px 22px;
  font-family: var(--heading-2);
  letter-spacing: 0.5px;
}
.sol-doc-config-table tbody td {
  padding: 16px 22px;
  font-size: 14px;
  color: var(--body-color);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.sol-doc-config-table tbody tr:last-child td {
  border-bottom: none;
}
.sol-doc-config-table tbody tr:nth-child(even) {
  background: var(--main-color-tint2);
}
.sol-doc-config-table tbody tr:nth-child(odd) {
  background: #fff;
}
.sol-doc-config-table tbody tr {
  transition: background-color 0.2s ease;
}
.sol-doc-config-table tbody tr:hover {
  background: var(--main-color-tint) !important;
}
.sol-doc-config-sys {
  width: 28%;
  font-weight: 700;
  color: var(--main-color);
  white-space: nowrap;
}
.sol-doc-config-sys i {
  margin-right: 8px;
  color: var(--main-color);
  font-size: 15px;
}
.sol-doc-config-comp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sol-doc-config-comp span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px 6px 10px;
  background: var(--main-color-tint2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--body-color);
  font-weight: 500;
  position: relative;
}
.sol-doc-config-comp span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--main-color);
  margin-right: 8px;
  flex-shrink: 0;
}
.sol-doc-config-table tbody tr:hover .sol-doc-config-comp span {
  background: #fff;
  border-color: var(--main-color);
}
@media (max-width: 767px) {
  .sol-doc-config-sys {
    width: auto;
    display: block;
    white-space: normal;
  }
  .sol-doc-config-comp {
    margin-top: 8px;
  }
}

/* Responsive for doc */
@media (max-width: 767px) {
  .sol-doc {
    padding: 24px 18px;
  }
  .sol-doc-hero {
    margin: -24px -18px 24px;
  }
  .sol-doc-hero img {
    height: 220px;
  }
  .sol-doc-title {
    font-size: 26px !important;
  }
  .sol-doc-subtitle-h4 {
    font-size: 20px;
  }
  .sol-doc-highlight {
    flex-direction: column;
  }
  .sol-doc-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .sol-doc-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .sol-doc-gallery-img img {
    height: 200px;
  }
}

.arck-service-details-progress {
  padding: 40px 30px;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.08);
          box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.08);
}
.arck-service-details-progress h3, .arck-service-details-progress h4 {
  font-size: 36px;
  color: var(--black-color);
  font-weight: 600;
}
.arck-service-details-progress h4 {
  font-size: 22px;
  padding-bottom: 10px;
}
.arck-service-details-progress p {
  line-height: 1.875;
}
.arck-service-details-progress .arck-skill-progress-bar {
  padding-top: 25px;
}
.arck-service-details-progress .arck-skill-progress-bar .progress span {
  display: none;
}
.arck-service-details-progress .arck-skill-progress-bar .skill-set-percent {
  margin-bottom: 20px;
}

.service-details-img-wrap {
  margin-bottom: 55px;
}

.arck-blog-details-main-content .arck-blog-details-text-wrap li, .arck-service-details-img-list-wrap li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 25px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap li:before, .arck-service-details-img-list-wrap li:before {
  top: 0;
  left: 0;
  content: "\f058";
  position: absolute;
  font-weight: 900;
  font-family: "Font Awesome 5 Pro";
}

.arck-service-details-img-list-wrap p {
  line-height: 1.875;
  padding-bottom: 30px;
}
.arck-service-details-testimonial-slider {
  padding-top: 35px;
}
.arck-service-details-testimonial-slider .arck-testimonial-slider-2 {
  margin: 0px -15px;
}
.arck-service-details-testimonial-slider .arck-testimonial-slider-2 .slick-list {
  overflow: visible;
}
.arck-service-details-testimonial-slider .arck-testimonial-slider-2 .slick-slide {
  -webkit-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1);
  transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1);
  opacity: 0;
}
.arck-service-details-testimonial-slider .arck-testimonial-slider-2 .slick-slide.slick-active {
  opacity: 1;
}
.arck-service-details-testimonial-slider .service-testimonial-item {
  padding: 0px 15px;
}
.arck-service-details-testimonial-slider .slick-dots {
  right: 0;
  width: auto;
  position: static;
}

.arck-service-details-section {
  overflow: hidden;
  padding: 80px 0px;
}

/*---------------------------------------------------- */
/*About area*/
/*----------------------------------------------------*/
.arck-about-section {
  overflow: hidden;
  padding: 130px 0px;
}

.arck-about-text-wrapper {
  padding-top: 30px;
  max-width: 720px;
}
.arck-about-text-wrapper .about-bg {
  right: 0px;
  top: 0px;
  z-index: -1;
}
.arck-about-text-wrapper .arck-year-experience {
  padding: 40px 0px;
}
.arck-about-text-wrapper .arck-year-experience h3 {
  font-size: 90px;
  font-weight: 700;
  padding: 30px 45px;
  margin-right: 35px;
  color: var(--main-color);
  background-color: var(--white-color);
  -webkit-box-shadow: 0px 0px 41px 0px rgba(35, 31, 32, 0.1);
          box-shadow: 0px 0px 41px 0px rgba(35, 31, 32, 0.1);
}
.arck-about-text-wrapper .arck-year-experience p {
  color: #333333;
  font-size: 24px;
  max-width: 145px;
}

.arck-about-img-wrapper {
  z-index: 1;
}
.arck-about-img-wrapper .shape1 {
  z-index: -1;
  right: -40px;
  bottom: 0;
}

.arck-about-section-2 {
  overflow: hidden;
  padding: 160px 0 215px;
}
.arck-about-section-2 .about-shape-1 {
  left: 0;
  z-index: -1;
  right: 255px;
  bottom: 125px;
  margin: 0 auto;
  text-align: center;
}

.arck-about-text-wrap-2 {
  padding-top: 25px;
  padding-left: 40px;
}

.about-signature-img {
  padding-top: 40px;
  margin-bottom: 60px;
}
.about-signature-img .inner-img {
  width: 120px;
  height: 100px;
  overflow: hidden;
  margin-right: 25px;
  border-radius: 10px;
}
.about-signature-img .inner-text h3 {
  color: var(--black-color);
  font-size: 18px;
  font-weight: 600;
  max-width: 360px;
  line-height: 1.667;
}
.about-signature-img .sign-img {
  right: -45px;
  bottom: -40px;
}
.about-signature-img .about-author {
  margin-top: 20px;
}
.about-signature-img .about-author h4 {
  color: var(--black-color);
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 5px;
}
.about-signature-img .about-author span {
  font-size: 14px;
}

.about-page-about-section {
  padding: 80px 0px 160px;
}

.about-page-about-content .arck-about-img-wrapper .shape1 {
  left: -40px;
  right: auto;
}
.about-page-about-content .acrk-img-shape2 {
  top: 0;
  left: 0;
  bottom: 0;
}
.about-page-about-content .acrk-img-shape1 {
  right: 0;
  top: auto;
  bottom: 0;
}

.archx-feature-section {
  padding: 100px 0px 120px;
}

/*---------------------------------------------------- */
/*Project area*/
/*----------------------------------------------------*/
.arck-project-section {
  padding-top: 40px;
  padding-bottom: 110px;
}

.arck-project-slider-wrapper {
  padding: 0px 45px;
}

.arck-project-top-content {
  padding-bottom: var(--padding-bottom-60);
}
.arck-project-top-content .arck-section-title h2 {
  padding: 0;
}

.arck-project-filter-btn li, .arck-project-filter-btn button,
.arck-project-filter-btn li,
.arck-project-filter-btn button {
  font-size: 18px;
  cursor: pointer;
  font-weight: 600;
  color: var(--black-color);
  margin-left: var(--margin-left-30);
}
.arck-project-filter-btn li.active, .arck-project-filter-btn button.active,
.arck-project-filter-btn li.active,
.arck-project-filter-btn button.active {
  color: var(--main-color);
}
.arck-project-filter-btn li.is-checked, .arck-project-filter-btn button.is-checked,
.arck-project-filter-btn li.is-checked,
.arck-project-filter-btn button.is-checked {
  color: var(--main-color);
}
.arck-project-filter-btn button,
.arck-project-filter-btn button {
  padding: 0;
  border: none;
  background-color: transparent;
}

.arck-project-item {
  margin: 15px;
  overflow: hidden;
}
.arck-project-item:before {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  z-index: 1;
  content: "";
  height: 100%;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: rgba(0, 0, 0, 0.7);
}
.arck-project-item .inner-img {
  overflow: hidden;
}
.arck-project-item .inner-img img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-project-item .inner-text {
  top: 95px;
  left: 40px;
  z-index: 2;
  position: absolute;
}
.arck-project-item .inner-text .project-title-desc {
  max-width: 340px;
}
.arck-project-item .inner-text .project-title-desc span {
  opacity: 0;
  font-weight: 700;
  font-size: var(--font-14);
  color: var(--main-color);
  display: inline-block;
  margin-bottom: var(--margin-bottom-15);
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.arck-project-item .inner-text .project-title-desc h3 {
  opacity: 0;
  font-weight: 700;
  color: var(--white-color);
  font-size: var(--font-28);
  padding-bottom: var(--padding-bottom-25);
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.arck-project-item .inner-text .project-title-desc p {
  opacity: 0;
  line-height: 1.75;
  color: var(--white-color);
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.arck-project-item .view-more-btn {
  opacity: 0;
  left: 20px;
  z-index: 2;
  bottom: 70px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-project-item .view-more-btn a {
  font-weight: 600;
  color: var(--main-color);
  font-family: var(--heading);
}
.arck-project-item .view-more-btn a i {
  margin-left: var(--margin-left-5);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-project-item .view-more-btn a:hover i {
  margin-left: var(--margin-left-10);
}
.arck-project-item:hover:before {
  opacity: 1;
}
.arck-project-item:hover .inner-text .project-title-desc span, .arck-project-item:hover .inner-text .project-title-desc h3, .arck-project-item:hover .inner-text .project-title-desc p {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
.arck-project-item:hover .view-more-btn {
  opacity: 1;
  left: 40px;
}
.arck-project-item:hover .inner-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.arck-project-slider .slick-slide {
  -webkit-transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1);
  transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1);
  opacity: 0;
}
.arck-project-slider .slick-track .slick-active {
  animation: zoomIn 600ms ease-out infinite;
  -webkit-animation: zoomIn 600ms ease-out infinite;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.arck-project-slider .slick-slide.slick-active {
  opacity: 1;
}
.arck-project-slider .slick-dots {
  margin-top: 40px;
  position: static;
}

.arck-project-section-2 {
  padding-top: 80px;
}

.arck-project-item-2:before {
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  content: "";
  z-index: 1;
  height: 100%;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: rgba(0, 0, 0, 0.7);
}
.arck-project-item-2 .inner-img img {
  width: 100%;
  height: 100%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-project-item-2 .inner-text {
  left: 0px;
  z-index: 2;
  opacity: 0;
  bottom: 50px;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-project-item-2 .inner-text h3 {
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 10px;
  color: var(--white-color);
}
.arck-project-item-2 .inner-text span {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-color);
}
.arck-project-item-2:hover:before {
  opacity: 1;
}
.arck-project-item-2:hover .inner-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.arck-project-item-2:hover .inner-text {
  left: 50px;
  opacity: 1;
}

.arck-project-filter-content {
  padding: 0px 60px;
}

.filtr-container-area .grid-sizer {
  width: 25%;
}
.filtr-container-area .grid-sizer,
.filtr-container-area .grid-item {
  float: left;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.filtr-container-area .grid-sizer img,
.filtr-container-area .grid-item img {
  width: 100%;
}
.filtr-container-area .grid-size-25 {
  width: 25%;
}
.filtr-container-area .grid-size-50 {
  width: 50%;
}
.filtr-container-area .grid-size-75 {
  width: 75%;
}
.filtr-container-area .grid_2-sizer {
  width: 41.2%;
}
.filtr-container-area .grid_2-sizer,
.filtr-container-area .grid_2-item {
  float: left;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.filtr-container-area .grid_2-sizer img,
.filtr-container-area .grid_2-item img {
  width: 100%;
}
.filtr-container-area .grid_2-size-40 {
  width: 41.2%;
}
.filtr-container-area .grid_2-size-60 {
  width: 58.8%;
}

.arck-project-feed-section .arck-project-filter-btn {
  padding-bottom: 55px;
}

.arck-project-feed-content-2 {
  margin: 0px -15px;
}

.arck-project-feed-item-2 {
  margin: 15px;
  overflow: hidden;
}
.arck-project-feed-item-2 .arck-project-item-2 .inner-text {
  bottom: 30px;
}
.arck-project-feed-item-2 .arck-project-item-2:hover .inner-text {
  left: 30px;
}

.arck-project-details-img-slider {
  margin-bottom: 55px;
}

.arck-project-details-text-wrapper {
  padding-bottom: 60px;
}

.arck-project-details-slider .slick-next {
  right: 6px;
}
.arck-project-details-slider .slick-prev {
  left: 0;
}

.arck-project-details-text h3, .arck-project-details-text h4 {
  font-size: 42px;
  font-weight: 600;
  padding-bottom: 35px;
  color: var(--black-color);
}
.arck-project-details-text h4 {
  font-size: 36px;
  padding-bottom: 25px;
}
.arck-project-details-text p {
  line-height: 1.875;
  padding-bottom: 35px;
  text-align: justify;
}
.arck-project-details-text li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 25px;
}
.arck-project-details-text li:before {
  top: 0;
  left: 0;
  content: "\f058";
  position: absolute;
  font-weight: 900;
  font-family: "Font Awesome 5 Pro";
  color: var(--main-color-2);
}

.arck-project-details-feature {
  padding: 50px 40px;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
}
.arck-project-details-feature h3 {
  color: var(--black-color);
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 40px;
}
.arck-project-details-feature .feature-list li {
  width: 100%;
  color: var(--black-color);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 13px;
  padding-bottom: 13px;
  font-family: var(--heading);
  border-bottom: 1px solid #dedede;
}
.arck-project-details-feature .feature-list li span {
  float: right;
  font-weight: 400;
  color: var(--body-color);
}
.arck-project-details-feature .project-share {
  margin-top: 30px;
}
.arck-project-details-feature .project-share .title {
  color: var(--black-color);
  font-weight: 700;
}
.arck-project-details-feature .project-share .share-social a {
  color: var(--black-color);
  margin-left: 5px;
}
.arck-project-details-feature .project-share .share-social a:hover {
  color: var(--main-color);
}

.arck-project-details-img-wrapper {
  padding-bottom: 55px;
}

/* About page: dynamic product gallery cards */
.arck-project-details-img-wrapper .arck-project-details-img-item {
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(15, 27, 41, 0.07);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.arck-project-details-img-wrapper .arck-project-details-img-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 109, 198, 0.18);
  text-decoration: none;
}
.arck-project-details-img-wrapper .arck-project-details-img-item .transition-zoom {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}
.arck-project-details-img-wrapper .arck-project-details-img-item:hover .transition-zoom {
  transform: scale(1.06);
}
.arck-project-details-img-caption {
  background: linear-gradient(180deg, rgba(15,27,41,0) 0%, rgba(15,27,41,0.82) 100%);
  padding-top: 40px !important;
  transform: translateY(6px);
  transition: transform 0.35s ease, background 0.35s ease;
}
.arck-project-details-img-wrapper .arck-project-details-img-item:hover .arck-project-details-img-caption {
  background: linear-gradient(180deg, rgba(0,109,198,0) 0%, rgba(0,109,198,0.88) 100%);
  transform: translateY(0);
}
.arck-project-details-img-caption-more {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(6px);
  display: inline-block;
}
.arck-project-details-img-wrapper .arck-project-details-img-item:hover .arck-project-details-img-caption-more {
  opacity: 1;
  transform: translateY(0);
}

.arck-project-next-prev-btn {
  margin-top: 80px;
}
.arck-project-next-prev-btn a {
  font-weight: 600;
  font-family: var(--heading);
}
.arck-project-next-prev-btn a i {
  margin-right: 15px;
}
.arck-project-next-prev-btn a:hover {
  color: var(--main-color);
}
.arck-project-next-prev-btn a:nth-child(2) i {
  margin-right: 0;
  margin-left: 15px;
}

.arck-project-section-2 .arck-project-top-content {
  padding-bottom: 70px;
}

/*---------------------------------------------------- */
/*Work Process area*/
/*----------------------------------------------------*/
.arck-work-process-section {
  padding-bottom: 150px;
}

.arck-work-process-content {
  padding-top: 85px;
}

.arck-work-process-item {
  z-index: 1;
  padding: 50px 30px 0px;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 0px 50px 0px rgba(35, 31, 32, 0.1);
          box-shadow: 0px 0px 50px 0px rgba(35, 31, 32, 0.1);
}
.arck-work-process-item:before {
  left: 0;
  right: 0;
  top: -20px;
  z-index: -2;
  width: 85%;
  content: "";
  height: 111%;
  margin: 0 auto;
  position: absolute;
  border: 2px solid #e5e5e5;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-work-process-item:after {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  background-color: #fff;
}
.arck-work-process-item .inner-icon {
  margin-bottom: 30px;
}
.arck-work-process-item .inner-text h3 {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 20px;
  color: var(--black-color);
}
.arck-work-process-item .inner-text p {
  padding-bottom: 15px;
}
.arck-work-process-item .work-serial {
  top: 20px;
  width: 110px;
  height: 90px;
  margin: 0 auto;
  padding-top: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--main-color);
}
.arck-work-process-item .work-serial h4 {
  font-size: 36px;
  font-weight: 700;
  color: var(--white-color);
}
.arck-work-process-item .work-serial span {
  color: #fff;
  font-weight: 600;
  font-family: var(--heading);
}
.arck-work-process-item:hover:before {
  border: 2px solid var(--main-color);
  background-color: var(--main-color);
}
.arck-work-process-item:hover .work-serial {
  background-color: var(--black-color);
}

/*---------------------------------------------------- */
/*Counter area*/
/*----------------------------------------------------*/
.arck-counter-section {
  padding: 70px 0px 75px;
  background-color: #f4f4f4;
}

.arck-counter-inner-item {
  padding-top: 10px;
}
.arck-counter-inner-item:before {
  top: 0;
  left: 0;
  right: 0;
  width: 2px;
  content: "";
  height: 50px;
  margin: 0 auto;
  position: absolute;
  background-color: var(--main-color);
  display: none;
}
.arck-counter-inner-item:after {
  top: 50px;
  left: 0;
  right: 0;
  width: 10px;
  content: "";
  height: 10px;
  margin: 0 auto;
  position: absolute;
  border-radius: 100%;
  background-color: var(--main-color);
  display: none;
}
.arck-counter-inner-item h3 {
  z-index: 1;
  font-size: 42px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  color: var(--main-color);
}
.arck-counter-inner-item h3:after {
  left: 0;
  z-index: -1;
  content: "";
  width: 100%;
  bottom: 10px;
  height: 10px;
  position: absolute;
}
.arck-counter-inner-item p {
  font-weight: 600;
  padding-top: 5px;
  font-size: var(--font-22);
  color: #000000;
  font-family: var(--heading);
  position: relative;
  z-index: 1;
}

.advanced-icon i {
  font-size: 62px;
  font-weight: 400;
  color: var(--main-color);
}

/*---------------------------------------------------- */
/*Team area*/
/*----------------------------------------------------*/
.arck-team-section {
  z-index: 1;
  overflow: hidden;
  padding: 125px 0px 100px;
}
.arck-team-section:before, .arck-team-section:after {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: url(../img/project/bg.jpg);
  background-attachment: fixed;
}
.arck-team-section:after {
  background: rgba(0, 0, 0, 0.6);
}
.arck-team-section .arck-section-title h2, .arck-team-section .arck-section-title p {
  color: #fff;
}

.arck-team-content {
  margin: 0px -15px;
  padding-top: 75px;
}

.arck-team-item {
  overflow: hidden;
  max-width: 370px;
  margin: 0 auto;
  margin-bottom: 30px;
  background-color: var(--white-color);
  padding: 10px;
}
.arck-team-item:before {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: rgba(0, 0, 0, 0.7);
}
.arck-team-item .inner-img img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-team-item .inner-text {
  left: 0;
  right: 0;
  top: 70px;
  z-index: 1;
  opacity: 0;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.arck-team-item .inner-text h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 10px;
}
.arck-team-item .inner-text span {
  color: #fff;
}
.arck-team-item .inner-social {
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  bottom: 70px;
  margin: 0 auto;
  position: absolute;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.arck-team-item .inner-social a {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0px 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--white-color);
}
.arck-team-item .inner-social a:hover {
  color: var(--white-color);
  background-color: var(--main-color);
}
.arck-team-item:hover .inner-text {
  opacity: 1;
  top: 112px;
}
.arck-team-item:hover:before {
  opacity: 1;
}
.arck-team-item:hover .inner-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.arck-team-item:hover .inner-social {
  opacity: 1;
  bottom: 110px;
}

.arck-team-details-content {
  margin-bottom: 65px;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
}

.arck-team-details-text-wrap {
  padding: 75px 30px;
}
.arck-team-details-text-wrap .about-bg {
  right: 25px;
  bottom: 20px;
}
.arck-team-details-text-wrap h3 {
  font-size: 36px;
  color: var(--black-color);
  font-weight: 600;
  padding-bottom: 12px;
}
.arck-team-details-text-wrap .arck-team-details-info {
  padding-top: 35px;
  max-width: 350px;
}
.arck-team-details-text-wrap .arck-team-details-info li {
  font-weight: 600;
  font-family: var(--heading);
  color: var(--black-color);
  text-transform: uppercase;
  margin-bottom: 15px;
}
.arck-team-details-text-wrap .arck-team-details-info li span {
  float: right;
  font-weight: 400;
  text-transform: capitalize;
}
.arck-team-details-text-wrap .arck-team-details-social {
  margin-top: 40px;
}
.arck-team-details-text-wrap .arck-team-details-social a {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--black-color);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 10px;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
}
.arck-team-details-text-wrap .arck-team-details-social a:hover {
  color: var(--white-color);
  background-color: var(--main-color);
}

.arck-team-details-text-content-wrap h3 {
  color: var(--black-color);
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 30px;
}
.arck-team-details-text-content-wrap p {
  line-height: 1.875;
  padding-bottom: 30px;
}

.arck-team-details-skill {
  max-width: 500px;
}
.arck-team-details-skill .arck-skill-progress-bar {
  padding-top: 0;
}

/*---------------------------------------------------- */
/*Testimonial area*/
/*----------------------------------------------------*/
.arck-testimonial-section {
  padding-bottom: 130px;
}

.arck-testimonial-text-wrap {
  padding-top: var(--padding-top-50);
  padding-left: var(--padding-left-40);
}

.arck-testimonial-slider-wrap {
  padding-top: var(--padding-top-20);
}

.arck-teestimonial-item .inner-text,
.arck-teestimonial-item-2 .inner-text {
  font-size: var(--font-22);
  font-weight: 500;
  line-height: 1.818;
  margin-bottom: var(--margin-bottom-90);
}
.arck-teestimonial-item .inner-text i,
.arck-teestimonial-item-2 .inner-text i {
  color: #ffe1df;
  margin-right: 10px;
  font-size: var(--font-50);
}
.arck-teestimonial-item .inner-author .author-img,
.arck-teestimonial-item-2 .inner-author .author-img {
  width: 90px;
  height: 80px;
  overflow: hidden;
  margin-bottom: 20px;
}
.arck-teestimonial-item .inner-author .author-text h3,
.arck-teestimonial-item-2 .inner-author .author-text h3 {
  color: var(--black-color);
  font-weight: 600;
  font-size: var(--font-28);
  padding-bottom: var(--padding-bottom-15);
}

.arck-teestimonial-item-2 .inner-text {
  padding: 30px 30px 80px;
  font-size: var(--font-16);
  margin-bottom: 0;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.08);
          box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.08);
}
.arck-teestimonial-item-2 .inner-text i {
  margin-right: 5px;
  font-size: var(--font-20);
}
.arck-teestimonial-item-2 .inner-author {
  top: -35px;
  left: 40px;
  position: relative;
}
.arck-teestimonial-item-2 .inner-author .author-img {
  width: 90px;
  height: 80px;
  overflow: hidden;
}
.arck-teestimonial-item-2 .inner-author .author-text h3 {
  color: var(--black-color);
  font-weight: 600;
  font-size: var(--font-20);
  padding-bottom: var(--padding-bottom-5);
}

.arck-testimonial-slider .slick-dots {
  right: 0;
  width: auto;
  bottom: -52px;
}
.arck-testimonial-slider .slick-prev, .arck-testimonial-slider .slick-next {
  display: none !important;
}

.arck-testimonial-appointment {
  z-index: 1;
  padding: 130px 0px;
  background-color: var(--black-color);
}
.arck-testimonial-appointment:before {
  top: 0;
  right: 0;
  width: 50.5%;
  content: "";
  z-index: -1;
  height: 100%;
  position: absolute;
  background-image: url(../img/bg/ta-bg.jpg);
}

.arck-testimonial-appointment-content .arck-testimonial-text-wrap {
  padding-top: 0;
  padding-left: 0;
  padding-right: 70px;
}
.arck-testimonial-appointment-content .arck-section-title-2 h2 {
  color: #fff;
}
.arck-testimonial-appointment-content .arck-teestimonial-item .inner-text i {
  color: var(--main-color);
}
.arck-testimonial-appointment-content .arck-teestimonial-item .inner-text {
  color: var(--white-color);
}
.arck-testimonial-appointment-content .arck-teestimonial-item .inner-author .author-img {
  margin-right: 30px;
}
.arck-testimonial-appointment-content .arck-teestimonial-item .inner-author .author-text h3,
.arck-testimonial-appointment-content .arck-teestimonial-item .inner-author .author-text span {
  color: var(--white-color);
}
.arck-testimonial-appointment-content .arck-testimonial-slider .slick-dots li, .arck-testimonial-appointment-content .arck-project-slider .slick-dots li {
  background-color: var(--white-color);
}
.arck-testimonial-appointment-content .arck-testimonial-slider .slick-dots li:hover,
.arck-testimonial-appointment-content .arck-testimonial-slider .slick-dots li.slick-active {
  background-color: var(--main-color);
}
.arck-testimonial-appointment-content .arck-testimonial-slider .slick-dots {
  bottom: 0;
}
.arck-testimonial-appointment-content .arck-appointment-form-wrap {
  padding-left: 45px;
}
.arck-testimonial-appointment-content .arck-appointment-form-wrap form {
  padding-top: 30px;
}
.arck-testimonial-appointment-content .arck-appointment-form-wrap form input, .arck-testimonial-appointment-content .arck-appointment-form-wrap form textarea {
  background-color: #fff;
}
.arck-testimonial-appointment-content .arck-appointment-form-wrap form button {
  border: none;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.arck-testimonial-appointment-content .arck-appointment-form-wrap form button:before, .arck-testimonial-appointment-content .arck-appointment-form-wrap form button:after {
  display: none;
}
.arck-testimonial-appointment-content .arck-appointment-form-wrap form button:hover {
  color: var(--block-color);
  background-color: var(--white-color);
}

.arck-testimonial-appointment-content .arck-appointment-form-wrap form input,
.arck-blog-details-content .arck-contact-page-form .arck-appointment-form-wrap form input,
.arck-blog-details-content .arck-contact-page-form .arck-appointment-form-wrap form textarea,
.arck-contact-page-form .arck-appointment-form-wrap form input, .arck-contact-page-form .arck-appointment-form-wrap form textarea {
  color: var(--black-color);
}

.arck-testimonial-feed-section {
  padding: 120px 0px 60px;
}

/*---------------------------------------------------- */
/*Appointment-Video area*/
/*----------------------------------------------------*/
.arck-appointment-video-section {
  z-index: 1;
  padding: 120px 0px 130px;
  background-color: var(--black-color);
}
.arck-appointment-video-section .side-icon {
  bottom: 0;
  left: 65px;
  z-index: -1;
}

.arck-video-play-wrap {
  top: 0;
  right: 0;
  width: 56.1%;
  height: 100%;
}
.arck-video-play-wrap:after {
  top: 0;
  left: 0;
  width: 100%;
  content: "";
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
}
.arck-video-play-wrap .arck-video-img-wrap {
  display: none;
}

.arck-video-play-btn {
  left: 0;
  top: 45%;
  right: 0;
  z-index: 1;
  margin: 0 auto;
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.arck-video-play-btn a {
  width: 85px;
  height: 85px;
  margin: 0 auto;
  border-radius: 100%;
  font-size: var(--font-20);
  color: var(--main-color);
  border: 3px solid var(--white-color);
}

.arck-appointment-form-wrap {
  max-width: 570px;
}
.arck-appointment-form-wrap .arck-section-title {
  padding-bottom: 30px;
}
.arck-appointment-form-wrap .arck-section-title h2 {
  color: var(--white-color);
}
.arck-appointment-form-wrap form input, .arck-appointment-form-wrap form textarea {
  width: 100%;
  height: 55px;
  border: none;
  color: #fff;
  padding-left: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  background-color: #2d2d2d;
}
.arck-appointment-form-wrap form input::-webkit-input-placeholder, .arck-appointment-form-wrap form textarea::-webkit-input-placeholder {
  color: rgb(108, 108, 108);
}
.arck-appointment-form-wrap form input::-moz-placeholder, .arck-appointment-form-wrap form textarea::-moz-placeholder {
  color: rgb(108, 108, 108);
}
.arck-appointment-form-wrap form input:-ms-input-placeholder, .arck-appointment-form-wrap form textarea:-ms-input-placeholder {
  color: rgb(108, 108, 108);
}
.arck-appointment-form-wrap form input::-ms-input-placeholder, .arck-appointment-form-wrap form textarea::-ms-input-placeholder {
  color: rgb(108, 108, 108);
}
.arck-appointment-form-wrap form input::placeholder, .arck-appointment-form-wrap form textarea::placeholder {
  color: rgb(108, 108, 108);
}
.arck-appointment-form-wrap form textarea {
  height: 105px;
  padding-top: 15px;
}
.arck-appointment-form-wrap form button {
  border: none;
  text-transform: uppercase;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.arck-appointment-form-wrap form button:before {
  border: 1px solid var(--white-color);
}
.arck-appointment-form-wrap form button:hover {
  color: var(--main-color);
}
.arck-appointment-form-wrap form button:hover:after {
  background-color: var(--white-color);
}

.arck-video-cta-wrap {
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: var(--main-color-2);
}
.arck-video-cta-wrap .video-cta-item {
  width: 33.33%;
  padding: 30px 25px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-video-cta-wrap .video-cta-item.active {
  background-color: var(--main-color);
}
.arck-video-cta-wrap .video-cta-item .inner-icon {
  margin-right: 20px;
  width: 52px;
}
.arck-video-cta-wrap .video-cta-item .inner-text {
  flex: 1;
}
.arck-video-cta-wrap .video-cta-item .inner-text p {
  color: var(--white-color);
}
.arck-video-cta-wrap .video-cta-item .inner-text h3 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 8px;
  color: var(--white-color);
}

#about-page-about .pera-content p strong {
  color: var(--main-color-2);
}
#about-page-about .pera-content p {
  text-align: justify;
}

.about-counter .arck-counter-inner-item h3 {
  color: var(--main-color-2);
}

.about-counter .arck-counter-inner-item p {
  color: #000;
}

/*---------------------------------------------------- */
/*Blog area*/
/*----------------------------------------------------*/
.arck-blog-item .inner-text .read-more-btn,
.arck-blog-item-2 .inner-text .read-more-btn, .arck-service-item-2 .inner-text .read-more-btn {
  color: var(--black-color);
  font-weight: 600;
  font-family: var(--heading);
}
.arck-blog-item .inner-text .read-more-btn i,
.arck-blog-item-2 .inner-text .read-more-btn i, .arck-service-item-2 .inner-text .read-more-btn i {
  margin-left: 3px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-blog-item .inner-text .read-more-btn:hover,
.arck-blog-item-2 .inner-text .read-more-btn:hover, .arck-service-item-2 .inner-text .read-more-btn:hover {
  color: var(--main-color);
}
.arck-blog-item .inner-text .read-more-btn:hover i,
.arck-blog-item-2 .inner-text .read-more-btn:hover i, .arck-service-item-2 .inner-text .read-more-btn:hover i {
  margin-left: 8px;
}

.arck-blog-section {
  padding: 120px 0px 95px;
}

.arck-blog-content {
  padding-top: 65px;
}

.arck-blog-details-main-content .blog-meta, .arck-blog-item .blog-meta,
.arck-blog-item-2 .blog-meta {
  margin-bottom: 25px;
}
.arck-blog-details-main-content .blog-meta a, .arck-blog-item .blog-meta a,
.arck-blog-item-2 .blog-meta a {
  margin-right: 15px;
}
.arck-blog-details-main-content .blog-meta a:last-child, .arck-blog-item .blog-meta a:last-child,
.arck-blog-item-2 .blog-meta a:last-child {
  margin-right: 0;
}
.arck-blog-details-main-content .blog-meta .blog-cat, .arck-blog-item .blog-meta .blog-cat,
.arck-blog-item-2 .blog-meta .blog-cat {
  color: #fff;
  font-size: 12px;
  padding: 7px 10px;
  background-color: var(--main-color);
}
.arck-blog-details-main-content .blog-meta .date, .arck-blog-item .blog-meta .date,
.arck-blog-item-2 .blog-meta .date {
  color: #7a7a7a;
}

.arck-blog-item,
.arck-blog-item-2 {
  margin-bottom: 32px;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
}
.arck-blog-item .inner-img,
.arck-blog-item-2 .inner-img {
  overflow: hidden;
}
.arck-blog-item .inner-img img,
.arck-blog-item-2 .inner-img img {
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.arck-blog-item .inner-text,
.arck-blog-item-2 .inner-text {
  padding: 45px 15px 20px;
}
.arck-blog-item .inner-text h3,
.arck-blog-item-2 .inner-text h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.333;
  padding-bottom: 15px;
  color: var(--black-color);
}
.arck-blog-item .inner-text h3:hover,
.arck-blog-item-2 .inner-text h3:hover {
  color: var(--main-color);
}
.arck-blog-item .inner-text p,
.arck-blog-item-2 .inner-text p {
  line-height: 1.875;
  padding-bottom: 25px;
}
.arck-blog-item:hover .inner-img img,
.arck-blog-item-2:hover .inner-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.arck-blog-item-2 .inner-text {
  padding-left: 30px;
}

.arck-sponsor-section {
  overflow: hidden;
  padding: 105px 0px;
  background-color: #f4f4f4;
}

.arck-sponsor-slider .slick-initialized .slick-slide,
.arck-sponsor-slider .arck-sponsor-slider-item {
  text-align: center;
}
.arck-sponsor-slider .slick-slide img {
  display: inline-block;
}

.arck-blog-feed-content .arck-blog-item-2 {
  max-width: 770px;
  margin-bottom: 60px;
}
.arck-blog-feed-content .arck-blog-item-2 .inner-text {
  padding: 45px 40px;
}
.arck-blog-feed-content .arck-blog-item-2 .inner-text h3 {
  font-size: 30px;
}

.arck-side-bar-widget {
  margin-bottom: 50px;
  background-color: #fff;
  padding: 30px 30px 40px;
  -webkit-box-shadow: 0px 5px 50px 0px rgba(110, 110, 110, 0.1);
          box-shadow: 0px 5px 50px 0px rgba(110, 110, 110, 0.1);
}
.arck-side-bar-widget .widget-title {
  color: var(--black-color);
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 25px;
}
.arck-side-bar-widget .cat-card:hover,
.arck-side-bar-widget .cat-card-active {
  border-color: var(--main-color-2) !important;
  background-color: var(--main-color-2);
}
.arck-side-bar-widget .cat-card-active i {
  color: #ffffff !important;
}
.arck-side-bar-widget .cat-card-active span,
.arck-side-bar-widget .cat-card:hover span {
  color: #fff !important;
}
.arck-side-bar-widget .cat-card-active img,
.arck-side-bar-widget .cat-card:hover img {
  filter: brightness(0) invert(1);
}
.arck-side-bar-widget .cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(14, 115, 55, 0.2);
}
.arck-side-bar-widget .search-widget form {
  position: relative;
}
.arck-side-bar-widget .search-widget input {
  width: 100%;
  height: 50px;
  padding: 15px;
  border: 1px solid #e7e7e7;
}
.arck-side-bar-widget .search-widget button {
  top: 15px;
  padding: 0;
  right: 15px;
  border: none;
  position: absolute;
  background-color: transparent;
}
.arck-side-bar-widget .category-widget li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 15px;
}
.arck-side-bar-widget .category-widget li a {
  width: 100%;
}
.arck-side-bar-widget .category-widget li a span {
  float: right;
  padding: 0px 10px;
  position: relative;
}
.arck-side-bar-widget .category-widget li a span:before, .arck-side-bar-widget .category-widget li a span:after {
  top: 15px;
  left: 0;
  width: 5px;
  height: 1px;
  content: "";
  position: absolute;
  background-color: var(--black-color);
}
.arck-side-bar-widget .category-widget li a span:after {
  right: 0;
  left: auto;
}
.arck-side-bar-widget .category-widget li a:hover {
  color: var(--main-color);
}
.arck-side-bar-widget .category-widget li:before {
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  content: "";
  position: absolute;
  border-radius: 100%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--black-color);
}
.arck-side-bar-widget .category-widget li:last-child {
  margin-bottom: 0;
}
.arck-side-bar-widget .category-widget li:hover:before {
  background-color: var(--main-color);
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text:last-child {
  border-bottom: none;
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text .recent-blog-img {
  width: 70px;
  height: 70px;
  overflow: hidden;
  margin-right: 15px;
  border-radius: 5px;
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text .recent-blog-text {
  width: 190px;
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text .recent-blog-text h6 {
  color: #444444;
  font-size: 16px;
  line-height: 1.375;
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示的行数为3 */
  overflow: hidden;
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text .recent-blog-text h3 {
  color: var(--black-color);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
  padding-bottom: 8px;
}
.arck-side-bar-widget .recent-post-wrap .recent-blog-img-text .recent-blog-text span {
  font-size: 14px;
}
.arck-side-bar-widget .popular-tag-widget a {
  font-size: 13px;
  padding: 7px 20px;
  margin-right: 5px;
  margin-bottom: 8px;
  display: inline-block;
  background-color: #f4f4f4;
}
.arck-side-bar-widget .popular-tag-widget a:hover {
  color: #fff;
  background-color: var(--main-color);
}
.arck-side-bar-widget .newslatter-widget input {
  width: 100%;
  height: 50px;
  border: none;
  padding-left: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  background-color: #e9f6f6;
}
.arck-side-bar-widget .newslatter-widget button {
  color: #fff;
  height: 50px;
  border: none;
  width: 170px;
  border-radius: 5px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color);
}
.arck-side-bar-widget .newslatter-widget button:hover {
  background-color: #000e58;
}
.arck-side-bar-widget .brochure-widget h3 {
  color: var(--black-color);
  font-size: 22px;
  font-weight: 600;
  padding: 30px 0px 50px;
}

.arck-blog-details-content .arck-project-next-prev-btn {
  margin-top: 50px;
}
.arck-blog-details-content .arck-contact-page-form {
  padding-left: 0;
}
.arck-blog-details-content .arck-appointment-form-wrap {
  max-width: 100%;
}
.arck-blog-details-content .arck-contact-page-form .arck-appointment-form-wrap form input,
.arck-blog-details-content .arck-contact-page-form .arck-appointment-form-wrap form textarea {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid #e7e7e7;
}
.arck-blog-details-content .arck-contact-page-form .arck-appointment-form-wrap form textarea {
  height: 170px;
}

.arck-blog-details-main-content {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
}
.arck-blog-details-main-content .arck-blog-details-text-wrap {
  padding: 50px 40px 20px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap h2, .arck-blog-details-main-content .arck-blog-details-text-wrap h3 {
  color: var(--black-color);
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 30px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap h3 {
  font-size: 24px;
  padding-bottom: 20px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap p {
  line-height: 1.875;
  padding-bottom: 30px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap blockquote {
  font-size: 20px;
  line-height: 1.7;
  padding: 10px 55px;
  margin-bottom: 30px;
  border-left: 5px solid var(--main-color);
  font-family: var(--heading);
  color: var(--black-color);
}
.arck-blog-details-main-content .arck-blog-details-text-wrap ul {
  margin-bottom: 30px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap li {
  margin-bottom: 10px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap .arck-blog-details-img-wrap {
  margin-bottom: 30px;
}
.arck-blog-details-main-content .arck-blog-details-text-wrap .arck-blog-details-img-wrap-2 {
  margin-bottom: 50px;
}
.arck-blog-details-main-content .arck-blog-share-tag {
  border-top: 1px solid #ebebeb;
  padding: 20px 40px 30px;
}
.arck-blog-details-main-content .arck-blog-share-tag .blog-share span {
  color: var(--black-color);
  font-size: 18px;
  font-weight: 600;
  margin-right: 15px;
}
.arck-blog-details-main-content .arck-blog-share-tag .blog-share a {
  margin-right: 10px;
  color: var(--black-color);
}
.arck-blog-details-main-content .arck-blog-share-tag .blog-hash-tag a {
  color: #101010;
  margin-left: 20px;
}

.arck-blog-author {
  margin-top: 60px;
  padding: 45px 30px;
  margin-bottom: 70px;
  background-color: #fff;
  -webkit-box-shadow: 0px 5px 50px 0px rgba(110, 110, 110, 0.1);
          box-shadow: 0px 5px 50px 0px rgba(110, 110, 110, 0.1);
}
.arck-blog-author .inner-img {
  width: 114px;
  height: 114px;
  overflow: hidden;
  margin-right: 30px;
  border-radius: 100%;
}
.arck-blog-author .inner-text {
  max-width: 510px;
}
.arck-blog-author .inner-text h4 {
  color: var(--black-color);
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 15px;
}
.arck-blog-author .inner-text p {
  padding-bottom: 15px;
}
.arck-blog-author .inner-text .inner-social a {
  margin-right: 25px;
}
.arck-blog-author .inner-text .inner-social a:hover {
  color: var(--main-color);
}

.blog_comment_box h3 {
  color: var(--black-color);
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 35px;
}
.blog_comment_box .comment_itemlist .comment_element {
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ebebeb;
}
.blog_comment_box .comment_itemlist .comment_img {
  width: 90px;
  height: 90px;
  overflow: hidden;
  margin-right: 25px;
  border-radius: 100%;
}
.blog_comment_box .comment_itemlist .comment_content {
  max-width: 590px;
}
.blog_comment_box .comment_itemlist .comment_content h4 {
  color: var(--black-color);
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 5px;
}
.blog_comment_box .comment_itemlist .comment_content p {
  padding: 10px 0px 15px;
}
.blog_comment_box .comment_itemlist .reply-btn {
  top: 0;
  right: 0;
  font-size: 15px;
  color: var(--main-color);
}

.comment_box_area {
  margin-bottom: 40px;
}

.comment_formfield .clenix-contact-form {
  margin-top: 10px;
}

/*---------------------------------------------------- */
/*Before After area*/
/*----------------------------------------------------*/
.arck-before-after-section {
  padding: 125px 0px;
}
.arck-before-after-section:before, .arck-before-after-section:after {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  content: "";
  height: 605px;
  position: absolute;
  background: url(../img/bg/ba-bg.jpg);
}
.arck-before-after-section:after {
  background: rgba(0, 0, 0, 0.7);
}
.arck-before-after-section .arck-section-title-2 {
  max-width: 480px;
}
.arck-before-after-section .arck-section-title-2 h2 {
  color: var(--white-color);
}

.arck-before-item {
  margin-right: 10px;
}

.arck-before-after-content {
  padding-top: 45px;
}
.arck-before-after-content .twentytwenty-handle {
  background-color: var(--main-color);
  border: none;
}
.arck-before-after-content .twentytwenty-after-label:before {
  content: "AFTER DESIGN";
}
.arck-before-after-content .twentytwenty-before-label:before {
  content: "BEFORE DESIGN";
}
.arck-before-after-content .twentytwenty-before-label:before, .arck-before-after-content .twentytwenty-after-label:before {
  top: auto;
  bottom: 30px;
  font-size: 12px;
  font-weight: 500;
  padding: 0px 15px;
  line-height: 30px;
  color: var(--white-color);
  background-color: var(--main-color);
}
.arck-before-after-content .twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 30px;
}
.arck-before-after-content .twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 30px;
}
.arck-before-after-content .twentytwenty-overlay:hover {
  background-color: transparent;
}
.arck-before-after-content .twentytwenty-before-label,
.arck-before-after-content .twentytwenty-after-label {
  opacity: 1;
} /*---------------------------------------------------- */
/*Skill area*/
/*----------------------------------------------------*/
.arck-working-skill-section {
  padding: 130px 0px;
}
.arck-working-skill-section .arck-section-title-2 h2 {
  padding-bottom: 20px;
}
.arck-working-skill-section .arck-section-title {
  padding-bottom: 20px;
}

.arck-working-skill-text-wrap {
  max-width: 540px;
  padding-top: 50px;
}

.arck-skill-progress-bar {
  padding-top: 20px;
}
.arck-skill-progress-bar .skill-set-percent {
  margin-bottom: 32px;
}
.arck-skill-progress-bar .skill-set-percent h4 {
  color: var(--black-color);
  font-size: 16px;
  padding-bottom: 15px;
  text-transform: uppercase;
}
.arck-skill-progress-bar .skill-set-percent .progress {
  height: 10px;
  border-radius: 0;
  position: relative;
  overflow: visible;
  border: 1px solid var(--black-color);
  background-color: transparent;
}
.arck-skill-progress-bar .skill-set-percent .progress span {
  right: 0;
  top: -25px;
  font-weight: 600;
  position: absolute;
  font-family: var(--heading);
}
.arck-skill-progress-bar .skill-set-percent .progress-bar {
  width: 0;
  left: 2px;
  top: 2px;
  float: left;
  height: 4px;
  position: relative;
  border-radius: 0;
  -webkit-transition: 1s all ease-in-out;
  transition: 1s all ease-in-out;
  background-color: var(--black-color);
}

/*---------------------------------------------------- */
/*Price area*/
/*----------------------------------------------------*/
.arck-pricing-section {
  padding: 125px 0px;
}
.arck-pricing-section .arck-section-title-2 {
  max-width: 570px;
}

.arck-pricing-content {
  padding-top: 30px;
}

.arck-pricing-item {
  padding: 50px 30px;
  background-color: var(--white-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.05);
          box-shadow: 0px 0px 25px 0px rgba(72, 72, 72, 0.05);
}
.arck-pricing-item .inner-title {
  padding-bottom: 25px;
  border-bottom: 1px solid #e5e5e5;
}
.arck-pricing-item .inner-title h3 {
  font-size: 26px;
  font-weight: 600;
  padding-bottom: 10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  color: var(--black-color);
}
.arck-pricing-item .inner-title .inner-price h4 {
  font-size: 60px;
  font-weight: 600;
  padding-bottom: 10px;
  color: var(--main-color);
}
.arck-pricing-item .inner-title .inner-price h4 sup {
  font-size: 24px;
}
.arck-pricing-item .inner-title .inner-price span {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--black-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-pricing-item .inner-feature-list {
  margin: 35px 0px 40px;
}
.arck-pricing-item .inner-feature-list li {
  margin-bottom: 20px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-pricing-item .inner-feature-list li span {
  font-size: 17px;
  font-weight: 700;
  margin-right: 5px;
  color: var(--black-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.arck-pricing-item.active {
  background-color: var(--black-color);
}
.arck-pricing-item.active .inner-title {
  border-bottom: 1px solid #363636;
}
.arck-pricing-item.active .inner-title h3 {
  color: var(--white-color);
}
.arck-pricing-item.active .inner-price span {
  color: var(--white-color);
}
.arck-pricing-item.active .inner-feature-list li {
  color: var(--white-color);
}
.arck-pricing-item.active .inner-feature-list li span {
  color: var(--white-color);
}
.arck-pricing-item.active .arck-btn-2 a {
  color: var(--black-color);
  background-color: var(--white-color);
}

/*---------------------------------------------------- */
/*Breadcrumb area*/
/*----------------------------------------------------*/
.arck-breadcrumb-section .background_overlay {
  opacity: 0.7;
  background-color: #030303;
}
.arck-breadcrumb-section .acrk-img-shape2 {
  left: 0;
  bottom: 0;
}
.arck-breadcrumb-section .acrk-img-shape1 {
  top: auto;
  right: 0;
  bottom: 0;
}

.arck-breadcrumb-content {
  padding: 310px 0px 235px;
}
.arck-breadcrumb-content h1 {
  font-size: 60px;
  font-weight: 600;
  padding-bottom: 28px;
  color: var(--white-color);
}
.arck-breadcrumb-content li {
  color: var(--white-color);
  font-weight: 600;
  margin: 0px 10px;
  position: relative;
  text-transform: uppercase;
  font-family: var(--heading);
}
.arck-breadcrumb-content li:before {
  top: 0;
  right: -14px;
  color: #000000;
  content: "//";
  position: absolute;
}
.arck-breadcrumb-content li:last-child:before {
  display: none;
}

/*---------------------------------------------------- */
/*CTA area*/
/*----------------------------------------------------*/
.arck-cta-section {
  background-attachment: fixed;
}
.arck-cta-section .background_overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.arck-cta-content {
  margin: 0 auto;
  max-width: 770px;
  padding: 120px 0px 140px;
}
.arck-cta-content h2 {
  font-size: 48px;
  font-weight: 600;
  color: var(--white-color);
}
.arck-cta-content .arck-cta-button-group {
  margin-top: 50px;
}
.arck-cta-content .arck-btn {
  margin-right: 40px;
}
.arck-cta-content .arck-btn a:before {
  border: 1px solid var(--white-color);
}
.arck-cta-content .arck-cta-number i {
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 25px;
  line-height: 60px;
  margin-right: 20px;
  border-radius: 100%;
  background-color: var(--main-color);
}
.arck-cta-content .arck-cta-number a {
  color: var(--white-color);
  font-weight: 600;
  font-size: 30px;
  font-family: var(--heading);
}

/*---------------------------------------------------- */
/*Faq area*/
/*----------------------------------------------------*/
.arck-faq-video-section {
  padding:80px 0px;
}

.arck-faq-content {
  max-width: 600px;
  padding-top: 35px;
}

.arck-faq-accordion {
  margin-top: 10px;
}
.arck-faq-accordion .accordion-header button {
  color: var(--black-color);
  font-size: 18px;
  font-weight: 600;
  padding: 20px 30px;
}
.arck-faq-accordion .accordion-button:focus {
  border: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.arck-faq-accordion .accordion-item {
  border: none;
  border-radius: 5px;
  margin-bottom: 15px;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
}
.arck-faq-accordion .accordion-body {
  color: #fff;
  background-color: var(--black-color);
  padding: 20px 30px 30px;
}
.arck-faq-accordion .accordion-button:not(.collapsed) {
  color: #fff;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: var(--black-color);
}
.arck-faq-accordion .accordion-button::after {
  right: 25px;
  height: auto;
  width: auto;
  font-size: 15px;
  content: "\f078";
  font-weight: 900;
  position: absolute;
  background-image: none;
  font-family: "Font Awesome 5 Pro";
}
.arck-faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
}

.arck-faq-feed-section {
  padding: 125px 0px;
  background-color: #f4f4f4;
}

.arck-faq-feed-content {
  padding-top: 60px;
}
.arck-faq-feed-content .faq-feed-item {
  margin-bottom: 40px;
}
.arck-faq-feed-content .faq-feed-item h3 {
  color: var(--black-color);
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 15px;
}

/*---------------------------------------------------- */
/*Shop area*/
/*----------------------------------------------------*/
.arck-shop-product-item {
  margin: 0 auto;
  max-width: 370px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.arck-shop-product-item:hover {
  border-color: var(--main-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.arck-shop-product-item .inner-img {
  margin-bottom: 15px;
  background-color: #f7f7f9;
  border-radius: 4px;
  padding: 2px;
}

#product-carousel {
  border-radius: 8px;
  overflow: hidden;
}

#product-carousel .carousel-inner {
  height: 500px;
  background-color: #f7f7f9;
}

#product-carousel .carousel-inner img {
  object-fit: contain;
  max-height: 100%;
}

#product-carousel .carousel-control-prev,
#product-carousel .carousel-control-next {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#product-carousel:hover .carousel-control-prev,
#product-carousel:hover .carousel-control-next {
  opacity: 1;
}

#product-carousel .carousel-control-prev {
  left: 15px;
}

#product-carousel .carousel-control-next {
  right: 15px;
}

#product-carousel .carousel-control-prev-icon,
#product-carousel .carousel-control-next-icon {
  background-color: var(--main-color);
  border-radius: 50%;
}

.carousel-indicators {
  gap: 10px;
}

.carousel-indicators button {
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.carousel-indicators button.active {
  border-color: var(--main-color);
}

.carousel-indicators button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-more-slider .slick-slide {
  margin: 0 10px;
}

@media (max-width: 767px) {
  #product-carousel .carousel-inner {
    height: 300px;
  }
  
  .carousel-indicators button {
    width: 60px;
    height: 60px;
  }
}

.arck-shop-product-item .inner-text h3 {
  color: var(--black-color);
  font-size:16px;
  font-weight: 600;
  padding-bottom: 5px;
}
.arck-shop-product-item .inner-text span {
  font-weight: 600;
  font-family: var(--heading);
  color: var(--main-color);
}
.arck-shop-product-item .hover-item {
  left: 0;
  right: 0;
  opacity: 0;
  bottom: 15px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.arck-shop-product-item .hover-item a {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--main-color);
  border-radius: 100%;
  margin: 0px 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.arck-shop-product-item .hover-item a:hover {
  color: #fff;
  background-color: var(--main-color);
}
.arck-shop-product-item:hover .hover-item {
  opacity: 1;
  bottom: 50px;
}

.shop-details-text-wrap {
  padding-top: 15px;
  padding-left: 30px;
}
.shop-details-text-wrap h3 {
  color: var(--black-color);
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 12px;
}
.shop-details-text-wrap .arck-price {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--heading);
  color: var(--main-color);
  margin-bottom: 28px;
}
.shop-details-text-wrap .arck-code-category {
  margin-bottom: 30px;
}
.shop-details-text-wrap .arck-code-category li {
  margin-right: 30px;
}
.shop-details-text-wrap .arck-code-category li:last-child {
  margin-right: 0;
}
.shop-details-text-wrap .arck-code-category li span {
  color: var(--main-color);
}
.shop-details-text-wrap .item-desc-text {
  padding-bottom: 40px;
}
.shop-details-text-wrap .quantity-btn-area p {
  font-weight: 500;
  margin-right: 15px;
}
.shop-details-text-wrap .quantity-btn-area .quantity-field {
  margin-right: 30px;
}
.shop-details-text-wrap .quantity-btn-area .quantity-field input {
  width: 90px;
  height: 55px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
}
.shop-details-text-wrap .quantity-btn-area .quantity-field .custom-next,
.shop-details-text-wrap .quantity-btn-area .quantity-field .custom-prev {
  top: 50%;
  cursor: pointer;
  font-size: 20px;
  margin: 0px 5px;
  position: absolute;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.shop-details-text-wrap .quantity-btn-area .quantity-field .custom-next:hover,
.shop-details-text-wrap .quantity-btn-area .quantity-field .custom-prev:hover {
  color: var(--main-color);
}
.shop-details-text-wrap .quantity-btn-area .quantity-field .custom-next {
  right: 5px;
}
.shop-details-text-wrap .quantity-btn-area .quantity-field .custom-prev {
  left: 8px;
}
.shop-details-text-wrap .quantity-btn-area .add-cart-btn a {
  color: #fff;
  height: 55px;
  width: 170px;
  font-weight: 500;
  background-color: var(--main-color);
}

.arck-shop-details-content {
  margin-bottom: 70px;
}

.shop-details-text-wrap .product-share {
  margin-top: 48px;
}
.shop-details-text-wrap .product-share a {
  color: #fff;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.shop-details-text-wrap .product-share a.fb-bg {
  background-color: #3b579d;
}
.shop-details-text-wrap .product-share a.tw-bg {
  background-color: #1da1f2;
}
.shop-details-text-wrap .product-share a.yt-bg {
  background-color: #ea4335;
}
.shop-details-text-wrap .product-share a.bh-bg {
  background-color: #0177b5;
}

.arck-shop-details-review-content .shop-review-tab-btn {
    margin-bottom: 40px;
    border-bottom: 1px solid #cdd9e3;
}
.arck-shop-details-review-content .shop-review-tab-btn .nav-tabs {
  border-bottom: none;
}
.arck-shop-details-review-content .shop-review-tab-btn .nav-tabs .nav-link {
  border: none;
}
.arck-shop-details-review-content .shop-review-tab-btn li {
  color: #161616;
  margin-right: 15px;
  font-family: var(--heading);
  background-color: #f4f4f4;
}
.arck-shop-details-review-content .shop-review-tab-btn .nav-tabs .nav-link {
  font-size: 18px;
  border-radius: 0;
  padding: 8px 30px;
}
.arck-shop-details-review-content .shop-review-tab-btn .nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--main-color);
}
.arck-shop-details-review-content .review-comment-area {
  max-width: 800px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-inner {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-pic {
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 100%;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text {
  overflow: hidden;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text h4 {
  color: var(--black-color);
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text span {
  display: block;
  padding-bottom: 15px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text .buyer-review-rate {
  margin-top: 5px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text .buyer-review-rate a {
  font-size: 14px;
  color: var(--main-color);
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text .buyer-review-date {
  color: rgba(105, 105, 105, 0.6);
  font-size: 14px;
  padding-left: 30px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-text .buyer-review-date:before {
  top: 3px;
  left: 10px;
  width: 2px;
  content: "";
  height: 15px;
  position: absolute;
  background-color: rgba(105, 105, 105, 0.6);
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box .customer-rate-option {
  margin: 4px 0px 20px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box .customer-rate-option li {
  width: 16px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box .customer-rate-option .customer-rate {
  display: none;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box .customer-rate-option .rate-value {
  position: relative;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box .customer-rate-option .rate-value:before {
  left: 0;
  top: -10px;
  content: "\f005";
  cursor: pointer;
  position: absolute;
  font-weight: 900;
  font-family: "Font Awesome 5 Pro";
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box .customer-rate-option .customer-rate:checked ~ .rate-value:before {
  content: "\f005";
  color: var(--main-color);
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box h4 {
  font-size: 18px;
  padding-right: 40px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box textarea,
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box input {
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  padding-left: 40px;
  border: 1px solid #e5e5e5;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box textarea {
  height: 200px;
  padding-top: 30px;
  margin-bottom: 15px;
}
.arck-shop-details-review-content .review-comment-area .buyer-review-comment-box button {
  color: #fff;
  border: none;
  font-weight: 500;
  padding: 15px 50px;
  font-family: var(--heading);
  text-transform: uppercase;
  font-weight: 700;
  background-color: var(--main-color);
}

.arck-shop-feed-content {
  margin: 0px -15px;
}

.arck-more-product {
  padding-top: 40px;
}
.arck-more-product .arck-section-title {
  padding-bottom: 30px;
}
.arck-more-product .arck-section-title h2 {
  font-size: 30px;
}

/*---------------------------------------------------- */
/*Contact area*/
/*----------------------------------------------------*/
.arck-contact-page-cta .arck-video-cta-wrap {
  background-color: transparent;
}
.arck-contact-page-cta .arck-video-cta-wrap .video-cta-item {
  width: 100%;
  padding: 0;
  margin-bottom: 30px;
}
.arck-contact-page-cta .arck-video-cta-wrap .video-cta-item:hover {
  background-color: transparent;
}
.arck-contact-page-cta .arck-video-cta-wrap .video-cta-item .inner-text {
  width: auto;
  padding: 0;
  flex-grow: 1;
}
.arck-contact-page-cta .contact-cta-inner-text {
  top: 50px;
  right: 0;
  padding: 45px 40px 15px;
  max-width: 450px;;
}
.arck-contact-page-cta .contact-cta-inner-text h3 {
  color: var(--white-color);
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 45px;
}

.arck-contact-page-form {
  padding-left: 30px;
}
.arck-contact-page-form .arck-appointment-form-wrap .arck-section-title h2 {
  color: var(--black-color);
}
.arck-contact-page-form .arck-section-title {
  padding-bottom: 45px;
}
.arck-contact-page-form .arck-appointment-form-wrap form input, .arck-contact-page-form .arck-appointment-form-wrap form textarea {
  background-color: var(--white-color);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
}
.arck-contact-page-form .arck-appointment-form-wrap form button {
  border: none;
  background-color: var(--black-color);
}
.arck-contact-page-form .arck-appointment-form-wrap form button:before {
  border: 1px solid var(--main-color);
}
.arck-contact-page-form .arck-appointment-form-wrap form button:after {
  background-color: var(--black-color);
}

.arck_map {
  height: 475px;
}
.arck_map iframe {
  width: 100%;
}

/*---------------------------------------------------- */
/*Footer area*/
/*----------------------------------------------------*/
.arck-footer-widget-wrapper {
  padding: 100px 0px;
}

.arck-footer-widget .widget-title {
  color: var(--white-color);
  font-size: 24px;
  font-weight: 600;
  padding-bottom: var(--padding-bottom-50);
}
.arck-footer-widget .contact-cta-widget li {
  color: #fff;
  margin-bottom: 15px;
}
.arck-footer-widget .contact-cta-widget li i {
  top: 5px;
  float: left;
  font-size: 20px;
  padding-top: 3px;
  margin-right: 12px;
  position: relative;
  color: var(--main-color);
}
.arck-footer-widget .contact-cta-widget li span {
  display: block;
  overflow: hidden;
  max-width: 225px;
}
.arck-footer-widget .menu-widget li {
  color: #fff;
  margin-bottom: 10px;
}
.arck-footer-widget .menu-widget li a {
  padding-left: 25px;
  position: relative;
}
.arck-footer-widget .menu-widget li a:hover {
  color: var(--main-color);
  margin-left: 8px;
}
.arck-footer-widget .menu-widget li a:before {
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  content: "";
  position: absolute;
  border-radius: 100%;
  background-color: var(--main-color);
}
.arck-footer-widget .blog-img-content {
  max-width: 300px;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #4a4a4a;
}
.arck-footer-widget .blog-img-content .blog-img {
  width: 70px;
  height: 70px;
  margin-right: 15px;
}
.arck-footer-widget .blog-img-content .blog-text {
  width: 200px;
}
.arck-footer-widget .blog-img-content .blog-text h3 {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 5px;
  color: var(--white-color);
}
.arck-footer-widget .blog-img-content .blog-text .blog-meta {
  color: #cccccc;
  font-size: 14px;
}
.arck-footer-widget .blog-img-content:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.arck-footer-widget .newslatter-widget .footer-social {
  margin-top: 30px;
}
.arck-footer-widget .newslatter-widget .footer-social a {
  color: #fff;
  margin-right: 15px;
}
.arck-footer-widget .newslatter-widget .footer-social a:hover {
  color: var(--main-color);
}
.arck-footer-widget .newsleter-form input {
  width: 100%;
  height: 50px;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 30px;
  border: 1px solid #fff;
  background-color: transparent;
}
.arck-footer-widget .newsleter-form input::-webkit-input-placeholder {
  color: #fff;
}
.arck-footer-widget .newsleter-form input::-moz-placeholder {
  color: #fff;
}
.arck-footer-widget .newsleter-form input:-ms-input-placeholder {
  color: #fff;
}
.arck-footer-widget .newsleter-form input::-ms-input-placeholder {
  color: #fff;
}
.arck-footer-widget .newsleter-form input::placeholder {
  color: #fff;
}
.arck-footer-widget .newsleter-form button {
  width: 100%;
  color: #fff;
  height: 50px;
  border: none;
  font-weight: 500;
  border-radius: 5px;
  text-align: center;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color);
}
.arck-footer-widget .newsleter-form button:hover {
  color: var(--main-color);
  background-color: #fff;
}

.arck-footer-copyright {
  color: #fff;
  padding: 15px;
  background-color: #2d2d2d;
}

/*---------------------------------------------------- */
/*New Home area*/
/*----------------------------------------------------*/
/*Global Style*/
/*----------------------------------------------------*/
.archx-section-title {
  padding-bottom: 50px;
}
.archx-section-title .title-serial {
  line-height: 1;
  font-size: 80px;
  font-weight: 700;
  padding-bottom: 15px;
  display: inline-block;
  color: var(--main-color-2);
  font-family: var(--heading-2);
}
.archx-section-title h2 {
  color: #000000;
  font-size: 48px;
  font-weight: 500;
  line-height: 50px;
}
.archx-section-title h2 span {
  font-weight: 400;
  position: relative;
  display: inline-block;
  color: var(--main-color-2);
}
.archx-section-title h2 span:before {
  left: 0;
  bottom: 3px;
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  background-color: var(--main-color-2);
}

/*Header Section 3*/
/*----------------------------------------------------*/
.archx-header-section {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  position: absolute;
}
.archx-header-section .container {
  /* max-width: 1505px; */
}
.archx-header-section .navbar-nav {
  display: inherit;
}
.archx-header-section .dropdown {
  position: relative;
}
.archx-header-section .dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  clip: inherit;
  -webkit-transform: scaleY(1);
  -khtml-transform: scaleY(1);
  transform: scaleY(1);
}
.archx-header-section .dropdown-menu {
  left: 0;
  top: 60px;
  z-index: 100;
  margin: 0px;
  padding: 20px 0;
  height: auto;
  min-width: 250px;
  display: block;
  border: none;
  border-radius: 0;
  position: absolute;
  opacity: 0;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  transform-origin: 0 0 0;
  -webkit-transform-origin: 0 0 0;
  -ms-transform-origin: 0 0 0;
  -o-transform-origin: 0 0 0;
  text-align: left;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.archx-header-section .dropdown-menu .dropdown-menu {
  top: 30px;
  left: 250px;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  opacity: 0 !important;
}
.archx-header-section .dropdown-menu .dropdown-menu a {
  font-size: 12px;
  font-weight: 600;
  color: #1a2428;
}
.archx-header-section .dropdown-menu .dropdown-menu a:before {
  display: none;
}
.archx-header-section .dropdown-menu li {
  display: block;
  margin: 0 !important;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.archx-header-section .dropdown-menu li:last-child {
  border-bottom: none;
}
.archx-header-section .dropdown-menu li:after {
  display: none;
}
.archx-header-section .dropdown-menu li:hover .dropdown-menu {
  top: 0;
  opacity: 1 !important;
}
.archx-header-section .dropdown-menu a {
  width: 100%;
  display: block;
  position: relative;
  padding: 10px 30px !important;
  color: #1a2428 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.archx-header-section .dropdown-menu a:before {
  display: none;
}
.archx-header-section .dropdown-menu a:hover {
  color: var(--main-color-2) !important;
}

/* ============ Mega Dropdown Styles ============ */
.archx-header-section .mega-dropdown {
  position: relative;
}
.archx-header-section .mega-dropdown > a {
  padding-bottom: var(--padding-bottom-35);
}

.archx-header-section .mega-dropdown .mega-menu {
  position: absolute;
  top: 60px;
  left: 50%;
  -webkit-transform: translateX(-50%) scaleY(0);
          transform: translateX(-50%) scaleY(0);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  width: 1000px;
  background: #fff;
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  margin-top: 18px;
}
.archx-header-section .mega-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) scaleY(1);
          transform: translateX(-50%) scaleY(1);
  margin-top: 0;
}
.archx-header-section .mega-dropdown .mega-menu:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.archx-header-section .mega-dropdown .mega-menu-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 320px;
}

/* Left Column */
.archx-header-section .mega-dropdown .mega-menu-left {
  width: 360px;
  -webkit-box-flex: 0 0 360px;
      -ms-flex: 0 0 360px;
          flex: 0 0 360px;
  background: -webkit-gradient(linear, left top, right bottom, from(var(--main-color-tint2)), to(var(--main-color-tint)));
  background: linear-gradient(135deg, var(--main-color-tint2), var(--main-color-tint));
  padding: 24px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  position: relative;
  overflow: hidden;
}
.archx-header-section .mega-dropdown .mega-menu-left:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: rgba(1, 54, 104, 0.06);
  border-radius: 50%;
}
.archx-header-section .mega-dropdown .mega-menu-cat-info {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0 0 45%;
      -ms-flex: 0 0 45%;
          flex: 0 0 45%;
  max-width: 45%;
  padding-right: 14px;
  border-right: 1px dashed rgba(1, 54, 104, 0.2);
}
.archx-header-section .mega-dropdown .mega-menu-cat-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--main-color);
  margin-bottom: 10px;
  font-family: var(--heading-2);
}
.archx-header-section .mega-dropdown .mega-menu-cat-desc {
  font-size: 13px;
  color: #5a6a7a;
  line-height: 1.6;
  margin-bottom: 16px;
}
.archx-header-section .mega-dropdown .mega-menu-more {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--main-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--main-color);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.archx-header-section .mega-dropdown .mega-menu-more:hover {
  color: var(--main-color-2);
  border-color: var(--main-color-2);
  gap: 12px;
}
.archx-header-section .mega-dropdown .mega-menu-more i {
  -webkit-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

/* Hot Products */
.archx-header-section .mega-dropdown .mega-menu-hot-products {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 0 0 20px;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.archx-header-section .mega-dropdown .mega-menu-hot-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.archx-header-section .mega-dropdown .mega-menu-hot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  gap: 12px;
}
.archx-header-section .mega-dropdown .mega-menu-hot-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 10px;
}
.archx-header-section .mega-dropdown .mega-menu-hot-item:hover {
  border-color: var(--main-color);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.archx-header-section .mega-dropdown .mega-menu-hot-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2f5;
}
.archx-header-section .mega-dropdown .mega-menu-hot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archx-header-section .mega-dropdown .mega-menu-hot-name {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.archx-header-section .mega-dropdown .mega-menu-hot-item:hover .mega-menu-hot-name {
  color: var(--main-color-2);
}

/* Right Column - Two Panel Layout */
.archx-header-section .mega-dropdown .mega-menu-right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0;
  background: #fff;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 320px;
}

/* Left nav sidebar */
.archx-header-section .mega-dropdown .mega-menu-nav {
  -webkit-box-flex: 0 0 150px;
      -ms-flex: 0 0 150px;
          flex: 0 0 150px;
  background: #f8fafb;
  border-right: 1px solid #eef0f2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px 0;
  position: relative;
}
.archx-header-section .mega-dropdown .mega-menu-nav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify-content;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  position: relative;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.archx-header-section .mega-dropdown .mega-menu-nav-item .mega-menu-nav-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}
.archx-header-section .mega-dropdown .mega-menu-nav-item i {
  font-size: 11px;
  color: #b0bac4;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.archx-header-section .mega-dropdown .mega-menu-nav-item:hover,
.archx-header-section .mega-dropdown .mega-menu-nav-item.active {
  background: #fff;
  color: var(--main-color-2);
  border-left-color: var(--main-color-2);
  font-weight: 600;
}
.archx-header-section .mega-dropdown .mega-menu-nav-item:hover i,
.archx-header-section .mega-dropdown .mega-menu-nav-item.active i {
  color: var(--main-color-2);
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
}

/* Right panels area */
.archx-header-section .mega-dropdown .mega-menu-panels {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  padding: 24px 24px;
  min-width: 0;
}
.archx-header-section .mega-dropdown .mega-menu-panel {
  display: none;
  -webkit-animation: megaFadeIn 0.3s ease;
          animation: megaFadeIn 0.3s ease;
}
.archx-header-section .mega-dropdown .mega-menu-panel.active {
  display: block;
}
@-webkit-keyframes megaFadeIn {
  from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
  to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes megaFadeIn {
  from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
  to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

/* Panel: tertiary categories grid */
.archx-header-section .mega-dropdown .mega-menu-panel-cats-wrap {
  margin-bottom: 0;
}
.archx-header-section .mega-dropdown .mega-menu-panel-cats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.archx-header-section .mega-dropdown .mega-menu-panel-cat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  background: #f8fafb;
  border-radius: 6px;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  border: 1px solid transparent;
}
.archx-header-section .mega-dropdown .mega-menu-panel-cat i {
  font-size: 11px;
  color: #b0bac4;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  opacity: 0;
  -webkit-transform: translateX(-4px);
          transform: translateX(-4px);
}
.archx-header-section .mega-dropdown .mega-menu-panel-cat:hover {
  background: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
  -webkit-box-shadow: 0 4px 14px rgba(1, 54, 104, 0.2);
          box-shadow: 0 4px 14px rgba(1, 54, 104, 0.2);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.archx-header-section .mega-dropdown .mega-menu-panel-cat:hover i {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  color: #fff;
}

/* Panel: products list */
.archx-header-section .mega-dropdown .mega-menu-panel-products,
.archx-header-section .mega-dropdown .mega-menu-panel-featured {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.archx-header-section .mega-dropdown .mega-menu-panel-featured {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7ea;
}
.archx-header-section .mega-dropdown .mega-menu-panel-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify-content;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f2;
}
.archx-header-section .mega-dropdown .mega-menu-panel-title h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--main-color);
  margin: 0;
}
.archx-header-section .mega-dropdown .mega-menu-panel-viewall {
  font-size: 12px;
  font-weight: 500;
  color: var(--main-color-2);
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  -webkit-transition: gap 0.25s ease;
  transition: gap 0.25s ease;
}
.archx-header-section .mega-dropdown .mega-menu-panel-viewall:hover {
  gap: 8px;
}
.archx-header-section .mega-dropdown .mega-menu-panel-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.archx-header-section .mega-dropdown .mega-menu-panel-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  border: 1px solid #e8eaed;
  background: #fff;
  overflow: hidden;
}
.archx-header-section .mega-dropdown .mega-menu-panel-product:hover {
  background: #f8fafb;
  border-color: var(--main-color);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.archx-header-section .mega-dropdown .mega-menu-panel-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2f5;
  -webkit-box-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.archx-header-section .mega-dropdown .mega-menu-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archx-header-section .mega-dropdown .mega-menu-panel-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}
.archx-header-section .mega-dropdown .mega-menu-panel-product:hover .mega-menu-panel-name {
  color: var(--main-color-2);
}

/* Featured products */
.archx-header-section .mega-dropdown .mega-menu-panel-featured .mega-menu-panel-list {
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.archx-header-section .mega-dropdown .mega-menu-panel-featured .mega-menu-panel-img {
  aspect-ratio: 1 / 1;
}
.archx-header-section .mega-dropdown .mega-menu-panel-featured .mega-menu-panel-name {
  font-size: 13px;
}

/* Recommended products */
.archx-header-section .mega-dropdown .mega-menu-panel-products .mega-menu-panel-list {
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Index header (transparent) mega dropdown adjustments */
.index-header .mega-dropdown > a {
  color: #fff;
}
.index-header .mega-dropdown > a:after {
  color: #fff;
}
.index-header .mega-dropdown:hover > a:after {
  color: #a7c3ff;
}
.index-header .mega-dropdown .mega-menu {
  top: calc(100% + 18px);
}
.index-header .mega-dropdown:hover .mega-menu {
  top: 100%;
}
.index-header .mega-dropdown:hover > a {
  color: #a7c3ff;
}

/* Hide dot indicator for mega dropdown items (use caret instead) */
.archx-header-section .mega-dropdown:after {
  display: none !important;
}

/* Sticky header mega dropdown */
.archx-header-section.sticky_on .mega-dropdown .mega-menu {
  top: 100%;
  margin-top: 0;
}
.archx-header-section.sticky_on .mega-dropdown > a {
  color: #000;
}
.archx-header-section.sticky_on .mega-dropdown:hover > a {
  color: var(--main-color-2);
}

/* Responsive: tablet */
@media (max-width: 1199px) {
  .archx-header-section .mega-dropdown .mega-menu {
    width: 880px;
  }
  .archx-header-section .mega-dropdown .mega-menu-left {
    width: 280px;
    -webkit-box-flex: 0 0 280px;
        -ms-flex: 0 0 280px;
            flex: 0 0 280px;
    padding: 22px 18px;
  }
  .archx-header-section .mega-dropdown .mega-menu-cat-info {
    -webkit-box-flex: 0 0 45%;
        -ms-flex: 0 0 45%;
            flex: 0 0 45%;
    max-width: 45%;
    padding-right: 10px;
  }
  .archx-header-section .mega-dropdown .mega-menu-nav {
    -webkit-box-flex: 0 0 140px;
        -ms-flex: 0 0 140px;
            flex: 0 0 140px;
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-cats {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-list {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-featured .mega-menu-panel-list {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-products .mega-menu-panel-list {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991px) {
  .archx-header-section .mega-dropdown .mega-menu {
    width: 680px;
  }
  .archx-header-section .mega-dropdown .mega-menu-left {
    width: 240px;
    -webkit-box-flex: 0 0 240px;
        -ms-flex: 0 0 240px;
            flex: 0 0 240px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 20px 18px;
  }
  .archx-header-section .mega-dropdown .mega-menu-cat-info {
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
    max-width: 100%;
    padding-right: 0;
    border-right: none;
    margin-bottom: 16px;
  }
  .archx-header-section .mega-dropdown .mega-menu-hot-products {
    padding: 0;
  }
  .archx-header-section .mega-dropdown .mega-menu-nav {
    -webkit-box-flex: 0 0 130px;
        -ms-flex: 0 0 130px;
            flex: 0 0 130px;
  }
  .archx-header-section .mega-dropdown .mega-menu-panels {
    padding: 16px;
  }
  .archx-header-section .mega-dropdown .mega-menu-nav-item {
    padding: 8px 12px;
    font-size: 12px;
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-list {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-featured .mega-menu-panel-list {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .archx-header-section .mega-dropdown .mega-menu-panel-products .mega-menu-panel-list {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

.archx-header-section .main-navigation li {
  margin: 0px 30px;
  position: relative;
  font-size: 18px;;
}
.archx-header-section .main-navigation li:after {
  top: 15px;
  width: 5px;
  height: 5px;
  content: "";
  right: -10px;
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
  border-radius: 100%;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color-2);
}

.archx-header-section .main-navigation li a {
  font-weight: 500;
  color: #000000;
}

.index-header .main-navigation li a {
  color: #ffffff;
}

.archx-header-section .main-navigation li:hover:after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.archx-header-section .main-navigation li:hover a {
  color: var(--main-color-2);
}
/* 有下拉的菜单项显示下拉箭头 */
.archx-header-section .main-navigation li.dropdown > a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 13px;
  margin-left: 7px;
  color: inherit;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
}
.archx-header-section .main-navigation li.dropdown:hover > a::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}


.archx-header-section .header-top-content {
  margin-bottom: 20px;
}
.archx-header-section .header-top-content .header-top-cta li {
  color: #fff;
  font-size: 15px;
  position: relative;
  margin-right: 30px;
}
.archx-header-section .header-top-content .header-top-cta li:before {
  top: 3px;
  width: 1px;
  content: "";
  right: -18px;
  height: 18px;
  position: absolute;
  background-color: rgba(229, 229, 229, 0.1882352941);
}
.archx-header-section .header-top-content .header-top-cta li:last-child:before {
  display: none;
}
.archx-header-section .header-top-content .header-top-cta li i {
  margin-right: 10px;
  color: #ffffff;
}
.archx-header-section .header-top-content .brand-logo {
  top: 0;
  left: 0;
  right: 0;
  width: 115px;
  margin: 0 auto;
  position: absolute;
  color: #ffffff;
}
.archx-header-section .header-top-content .header-social {
  margin-left: 15px;
  position: relative;
}
.archx-header-section .header-top-content .header-social:before {
  top: 3px;
  width: 1px;
  content: "";
  left: -5px;
  height: 18px;
  position: absolute;
  background-color: rgba(229, 229, 229, 0.1882352941);
}
.archx-header-section .header-top-content .header-social a {
  color: #fff;
  margin-left: 15px;
}
.archx-header-section .header-top-content .header-social a:hover {
  color: var(--main-color-2);
}
.archx-header-section .header-top-content .header-language-select select {
  color: #fff;
  border: none;
  background-color: transparent;
}
.archx-header-section .header-top-content .header-language-select select option {
  color: var(--main-color-2);
}
.archx-header-section .header-main-menu-wrapper {
  z-index: 1;
  padding: 18px 15px;
  background-color: transparent;
}
.archx-header-section .header-main-menu-wrapper:before {
  left: 0;
  width: 0;
  top: 0px;
  height: 0;
  z-index: -1;
  content: "";
  position: absolute;
  border-right: 100px solid transparent;
  border-bottom: 92px solid var(--main-color-2);
  display: none;
}
.archx-header-section .archx-side-bar-button {
  cursor: pointer;
  padding-left: 20px;
  margin-right: 25px;
}
.archx-header-section .archx-side-bar-button span {
  height: 2px;
  display: block;
  margin: 5px 0px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: #000000;
}
.archx-header-section .archx-side-bar-button span:nth-child(1) {
  width: 14px;
}
.archx-header-section .archx-side-bar-button span:nth-child(2) {
  width: 22px;
}
.archx-header-section .archx-side-bar-button span:nth-child(3) {
  width: 18px;
}
.archx-header-section .archx-side-bar-button:hover span:nth-child(1), .archx-header-section .archx-side-bar-button:hover span:nth-child(2), .archx-header-section .archx-side-bar-button:hover span:nth-child(3) {
  width: 22px;
}
.archx-header-section .header-cta-number {
  line-height: 1;
}
.archx-header-section .header-cta-number .header-cta-icon {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  border-radius: 100%;
  background-color: #F5F5F5;
}
.archx-header-section .header-cta-number .header-cta-icon i {
  color: var(--black-color);
}
.archx-header-section .header-cta-number .ar-title {
  font-size: 13px;
  font-weight: 500;
}
.archx-header-section .header-cta-number .ar-value {
  display: block;
  color: #DD1D26;
  font-size: 14px;
  font-family: var(--heading-2);
}
.archx-header-section .header-cta-btn {
  margin-left: 30px;
}
.archx-header-section .header-cta-btn a {
  color: #fff;
  width: 155px;
  height: 55px;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--main-color-2);
}
.archx-header-section .header-cta-btn a i {
  margin-left: 8px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-header-section .header-cta-btn a:hover {
  background-color: var(--main-color);
}
.archx-header-section .header-cta-btn a:hover i {
  margin-left: 10px;
}
.archx-header-section .header-cta-btn .cta-icon-mobile {
  display: none;
}
/* 手机端：隐藏文字和箭头，只显示图标 */
@media (max-width: 991px) {
  .archx-header-section .header-cta-btn {
    margin-left: 12px;
  }
  .archx-header-section .header-cta-btn a {
    width: 40px;
    height: 40px;
    font-size: 0;
    border-radius: 50%;
  }
  .archx-header-section .header-cta-btn .cta-text,
  .archx-header-section .header-cta-btn .cta-arrow {
    display: none;
  }
  .archx-header-section .header-cta-btn .cta-icon-mobile {
    display: inline-block;
    font-size: 16px;
    margin: 0;
  }
}

.archx-header-section.sticky_on {
  top: 0;
  padding: 0;
  width: 100%;
  z-index: 20;
  position: fixed;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  background-color: var(--white-color);
  -webkit-box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
}
.archx-header-section.sticky_on .header-top-content {
  display: none !important;
}
/* 默认显示白色logo，隐藏黑色logo */
.archx-header-section .logo-black {
  display: inline-block;
}
.archx-header-section .logo-white {
  display: none;
}

/* 默认显示白色logo，隐藏黑色logo */
.index-header .logo-black {
  display: none;
}
.index-header .logo-white {
  display: inline-block;
}

/* 滚动后(sticky_on)显示黑色logo，隐藏白色logo */
.archx-header-section.sticky_on .logo-white {
  display: none;
}
.archx-header-section.sticky_on .logo-black {
  display: inline-block;
}
/* 手机端强制显示黑色logo */
@media (max-width: 991px) {
  .archx-header-section .logo-black,
  .index-header .logo-black,
  .archx-header-section.sticky_on .logo-black {
    display: inline-block !important;
  }
  .archx-header-section .logo-white,
  .index-header .logo-white,
  .archx-header-section.sticky_on .logo-white {
    display: none !important;
  }
}
/* 滚动后导航文字变黑 */
.archx-header-section.sticky_on .main-navigation li a {
  color: #1a1a2e;
}
.archx-header-section.sticky_on .header-main-menu-wrapper:before {
  display: none;
}
.archx-header-section.sticky_on .archx-side-bar-button {
  padding-left: 0;
}

.archx-header-section.archx-header-style-two {
  padding-top: 0;
  background-color: #ffffff;
}
@media(max-width: 765px) {
  .archx-header-section.archx-header-style-two  {
    background-color: #ffffff;
  }
}
.archx-header-section.archx-header-style-two .header-main-menu-wrapper:before {
  display: none;
}
.archx-header-section.archx-header-style-two .archx-side-bar-button {
  padding-left: 0;
}

/*Slider Section*/
/*---------------------------------------------------*/
.archx-slider-section {
  padding: 340px 0px 250px;
}
.archx-slider-section .archx-slider-side1 {
  top: 90px;
  left: 30px;
  color: #fff;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.archx-slider-section .archx-slider-side2 {
  left: 30px;
  bottom: 80px;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.archx-slider-section .archx-slider-side2 li {
  margin-bottom: 40px;
}
.archx-slider-section .archx-slider-side2 li a {
  color: #fff;
}
.archx-slider-section .archx-slider-side2 li a:hover {
  color: var(--main-color-2);
}

.archx-slider-counter {
  z-index: 1;
}
.archx-slider-counter .ar-slider-shape-img {
  left: 0px;
  top: -80px;
  z-index: -1;
  opacity: 0.2;
}
.archx-slider-counter .archx-slider-counter-text {
  max-width: 480px;
}
.archx-slider-counter .archx-slider-counter-text h2 {
  line-height: 1;
  font-size: 200px;
  font-weight: 700;
  color: var(--main-color-2);
}
.archx-slider-counter .archx-slider-counter-text p {
  color: #fff;
  font-size: 18px;
  font-family: var(--heading-2);
}

.archx-slider-content:before {
  left: 0;
  right: 0;
  top: -85px;
  width: 1px;
  content: "";
  height: 530px;
  margin: 0 auto;
  position: absolute;
  background-color: var(--main-color-2);
  display: none;
}

.archx-slider-text {
  padding-left: 80px;
}
.archx-slider-text .slider-slug {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 25px;
  margin-bottom: 25px;
  display: inline-block;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  background-color: var(--main-color-2);
}
.archx-slider-text h1 {
  color: #fff;
  font-size: 44px;
  font-weight: 700;
  line-height: 55px;
  padding-bottom: 20px;
}
.archx-slider-text p {
  color: #fff;
  padding-bottom: 30px;
}

.archx-video-play-btn .archx-slider-btn {
  margin-right: 25px;
}
.archx-video-play-btn .archx-slider-btn a {
  color: #fff;
  width: 165px;
  height: 55px;
  background-color: var(--main-color-2);
}
.archx-video-play-btn .archx-slider-btn a i {
  margin-left: 5px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-video-play-btn .archx-slider-btn a:hover {
  color: #000;
  background-color: #fff;
}
.archx-video-play-btn .archx-slider-btn a:hover i {
  margin-left: 10px;
}
.archx-video-play-btn .archx-video-play-btn a {
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: 1px solid #fff;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.archx-slider-section-2 {
  padding-top: 95px;
  background-color: #f5f5f5;
}
.archx-slider-section-2 .archx-banner-img1 {
  left: 55px;
  top: 120px;
  z-index: 1;
}
.archx-slider-section-2 .archx-banner-img2 {
  top: 210px;
  left: 140px;
}
.archx-slider-section-2 .archx-banner-img3 {
  left: 75px;
  bottom: 230px;
}
.archx-slider-section-2 .archx-banner-img4 {
  left: 220px;
  bottom: 100px;
}
.archx-slider-section-2 .archx-banner-img5 {
  top: 210px;
  right: 160px;
  z-index: 1;
}
.archx-slider-section-2 .archx-banner-img6 {
  right: 60px;
  z-index: 1;
  bottom: 130px;
}
.archx-slider-section-2 .archx-banner-img7 {
  z-index: 0;
  right: 205px;
  bottom: 160px;
  -webkit-animation-name: spin;
          animation-name: spin;
  -webkit-animation-duration: 5000ms;
          animation-duration: 5000ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.archx-slider-section-2 .archx-banner-counter {
  bottom: 255px;
  right: 275px;
}
.archx-slider-section-2 .archx-banner-counter h3 {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--main-color-2);
}
.archx-slider-section-2 .archx-banner-counter p {
  font-size: 18px;
  color: #000000;
  font-family: var(--heading-2);
}

.archx-slider-content-2 .archx-slider-text-2 {
  margin: 0 auto;
  max-width: 550px;
  padding: 250px 0 285px;
}
.archx-slider-content-2 .archx-slider-text-2 .slider-slug {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 30px;
  border-radius: 20px;
  display: inline-block;
  background-color: #000000;
}
.archx-slider-content-2 .archx-slider-text-2 h1 {
  color: #000000;
  font-size: 48px;
  font-weight: 500;
  padding: 20px 0px 30px;
}
.archx-slider-content-2 .archx-slider-text-2 h1 span {
  color: var(--main-color-2);
}
.archx-slider-content-2 .archx-slider-text-2 p {
  color: #000000;
  padding-bottom: 40px;
}
.archx-slider-content-2 .archx-slider-text-2 .archx-video-play-btn .archx-slider-btn a:hover {
  color: #fff;
  background-color: #000;
}
.archx-slider-content-2 .archx-slider-text-2 .archx-video-play-btn .archx-video-play-btn a {
  color: #000;
  border: 1px solid #000;
}

.slider-side-content {
  top: 0;
  left: 0;
  width: 85px;
  z-index: 12;
  height: 100%;
  background-color: #fff;
}
.slider-side-content .archx-slider-side1 {
  top: 100px;
  left: 25px;
  color: #000;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.slider-side-content .archx-slider-side2 {
  color: #000;
  left: 25px;
  bottom: 100px;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.slider-side-content .archx-slider-side2 li {
  margin-bottom: 20px;
}
.slider-side-content .archx-slider-side2 li a:hover {
  color: var(--main-color-2);
}

/*Feature Section*/
/*----------------------------------------------------*/
.archx-feature-section .archx-bg {
  left: 0;
  top: -150px;
}

.archx-feature-content {
  margin: 0 auto;
  max-width: 1920px;
}

.archx-feature-img_2 {
  z-index: 1;
  top: -85px;
  margin-bottom: -115px;
}
.archx-feature-img_2 .archx-ft-shape {
  top: 40px;
  z-index: -1;
  left: -30px;
}
.archx-feature-img_2 .award-wining-text {
  top: 120px;
  right: -70px;
  color: #020202;
  padding: 5px 20px;
  background-color: #fff;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.archx-feature-img_2 .award-wining-text span {
  color: var(--main-color-2);
}
.archx-feature-img_2 .archx-experience-text {
  color: #fff;
  left: 15px;
  bottom: 35px;
  width: 130px;
  height: 120px;
  font-size: 50px;
  line-height: 1.1;
  font-weight: 500;
  padding-top: 15px;
  font-family: var(--heading-2);
  background-color: var(--main-color-2);
}
.archx-feature-img_2 .archx-experience-text sub {
  bottom: 0;
  line-height: 1;
  font-size: 23px;
  font-weight: 700;
}
.archx-feature-img_2 .archx-experience-text p {
  margin: 0 auto;
  font-size: 14px;
  max-width: 100px;
  font-weight: 400;
}

.archx-feature-content-item_2 {
  padding-top: 60px;
  padding-left: 15px;
}

.archx-feature-item_2 .archx-feature-icon,
.archx-service-section-2 .archx-feature-item .archx-feature-icon {
  margin-bottom: 20px;
  display: inline-block;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  -webkit-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
}
.archx-feature-item_2 .archx-feature-icon:before,
.archx-service-section-2 .archx-feature-item .archx-feature-icon:before {
  top: -5px;
  right: -5px;
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 100%;
  position: absolute;
  background-color: rgba(210, 143, 81, 0.1411764706);
}
.archx-feature-item_2 .archx-feature-text h3,
.archx-service-section-2 .archx-feature-item .archx-feature-text h3 {
  color: #020202;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 12px;
}
.archx-feature-item_2 .archx-feature-text p,
.archx-service-section-2 .archx-feature-item .archx-feature-text p {
  line-height: 32px;
  padding-bottom: 8px;
}
.archx-feature-item_2 .archx-feature-text a,
.archx-service-section-2 .archx-feature-item .archx-feature-text a {
  color: #020202;
  font-size: 500;
}
.archx-feature-item_2 .archx-feature-text a i,
.archx-service-section-2 .archx-feature-item .archx-feature-text a i {
  margin-left: 5px;
  -webkit-transition: 200ms all ease;
  transition: 200ms all ease;
}
.archx-feature-item_2 .archx-feature-text a:hover,
.archx-service-section-2 .archx-feature-item .archx-feature-text a:hover {
  color: var(--main-color-2);
}
.archx-feature-item_2 .archx-feature-text a:hover i,
.archx-service-section-2 .archx-feature-item .archx-feature-text a:hover i {
  margin-left: 8px;
}
.archx-feature-item_2:hover .archx-feature-icon,
.archx-service-section-2 .archx-feature-item:hover .archx-feature-icon {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}

.archx-service-section-2 .archx-feature-item .archx-feature-text p {
  max-width: 240px;
}

.archx-feature-cta-text {
  color: #000000;
  font-size: 14px;
  padding: 3px 20px;
  margin-top: 30px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.168627451);
}
.archx-feature-cta-text a {
  color: #D28F51;
}

.archx-produce-section {
  padding-top: 75px;
  overflow: hidden;
}

.archx-produce-title {
  padding-bottom: 40px;
}
.archx-produce-title h3 {
  color: #000000;
  font-size: 28px;
  font-weight: 700;
}

/*Faq Section*/
/*----------------------------------------------------*/
.archx-faq-section {
  z-index: 1;
  overflow: hidden;
  padding: 90px 0px 70px;
}
.archx-faq-section .archx-section-title {
  max-width: 730px;
}
.archx-faq-section .ar-bg {
  right: 0;
  bottom: 0;
  z-index: -1;
}

.archx-faq-content-wrapper .accordion-item {
  border: none;
  margin-bottom: 10px;
  border-bottom: 1px solid #D9D9D9;
}
.archx-faq-content-wrapper .accordion-item:first-of-type .accordion-button {
  border-radius: 0;
}
.archx-faq-content-wrapper .accordion-button:not(.collapsed) {
  background-color: transparent;
}
.archx-faq-content-wrapper .accordion-item:first-of-type {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #D9D9D9;
}
.archx-faq-content-wrapper .accordion-button {
  padding: 0;
  border: none;
  border: none;
  height: 50px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
}
.archx-faq-content-wrapper .accordion-button:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.archx-faq-content-wrapper .accordion-body {
  padding: 0;
  color: rgba(0, 0, 0, 0.5019607843);
  line-height: 42px;
}
.archx-faq-content-wrapper .accordion-button:not(.collapsed)::after,
.archx-faq-content-wrapper .accordion-button::after {
  width: auto;
  height: auto;
  background-image: none;
  content: "\f067";
  font-weight: 900;
  font-family: "Font Awesome 5 Pro";
}
.archx-faq-content-wrapper .accordion-button:not(.collapsed)::after {
  content: "\f068";
}

.archx-faq-section-2 {
  z-index: 1;
  padding: 120px 0px 90px;
}
.archx-faq-section-2:before {
  top: 0;
  right: 0;
  z-index: -1;
  width: 53%;
  content: "";
  height: 100%;
  position: absolute;
  background-color: #f7f4f3;
}

.archx-faq-accordion-2 .archx-faq-content-wrapper .accordion-item:first-of-type,
.archx-faq-accordion-2 .archx-faq-content-wrapper .accordion-item,
.archx-faq-accordion-2 .accordion-item:last-of-type .accordion-button.collapsed,
.archx-faq-accordion-2 .archx-faq-content-wrapper .accordion-item:first-of-type .accordion-button {
  border: none;
  background-color: #f7f4f3;
}
.archx-faq-accordion-2 .accordion-button:not(.collapsed) {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.archx-faq-pointer-wrapper {
  top: 0;
  left: 0;
  width: 47%;
  height: 100%;
  background-color: #fcfcfc;
}
.archx-faq-pointer-wrapper .archx-faq-exp {
  top: 80px;
  left: 25px;
  width: 140px;
  height: 120px;
  padding-top: 25px;
  background-color: #000;
}
.archx-faq-pointer-wrapper .archx-faq-exp h3 {
  color: #fff;
  line-height: 0.75;
  font-size: 50px;
  font-weight: 700;
}
.archx-faq-pointer-wrapper .archx-faq-exp p {
  color: #fff;
  font-size: 12px;
}

.archx-point-area {
  top: 10%;
  right: 10%;
  position: absolute;
}
.archx-point-area .archx-pointer-indicatior {
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  cursor: pointer;
  position: absolute;
  border-radius: 100%;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.archx-point-area .archx-pointer-indicatior:hover {
  color: #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: var(--main-color-2);
}
.archx-point-area .archx-pointer-text {
  top: -25px;
  opacity: 0;
  right: 40px;
  width: 240px;
  padding: 20px;
  position: absolute;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
}
.archx-point-area .archx-pointer-text:before {
  width: 0;
  height: 0;
  top: 40px;
  content: "";
  right: -20px;
  position: absolute;
  border-left: 20px solid #d3d1d1;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.archx-point-area .archx-pointer-text h3 {
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
}
.archx-point-area .archx-pointer-text p {
  font-size: 12px;
  line-height: 19px;
}
.archx-point-area:hover .archx-pointer-text {
  opacity: 1;
  right: 80px;
}
.archx-point-area:nth-child(2) {
  top: 20%;
  right: 50%;
}
.archx-point-area:nth-child(3) {
  top: auto;
  right: 15%;
  bottom: 20%;
}
.archx-point-area:nth-child(4) {
  top: auto;
  right: 30%;
  bottom: 50%;
}
.archx-point-area:nth-child(5) {
  top: auto;
  left: 40%;
  right: auto;
  bottom: 30%;
}

/*Fun Fact Section*/
/*----------------------------------------------------*/
.archx-fun-fact-section {
  padding: 45px 0px;
  background-color: var(--main-color-2);
}

.archx-fun-fact-title h3 {
  color: #fff;
  font-size: 34px;
  font-weight: 500;
  padding-bottom: 15px;
}
.archx-fun-fact-title p {
  color: #fff;
}

.archx-fun-fact-item h3 {
  opacity: 0.3;
  color: #FFFFFF;
  line-height: 1;
  font-size: 93px;
}
.archx-fun-fact-item p {
  color: #000000;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 5px;
}

/*Team Section*/
/*----------------------------------------------------*/
.archx-team-section {
  overflow: hidden;
}
.archx-team-section .container {
  max-width: 1500px;
}

.archx-team-content {
  padding: 100px 60px;
  background-color: #fbf8f6;
}
.archx-team-content .archx-section-title {
  margin: 0 auto;
  max-width: 560px;
}

.archx-team-slider-area {
  margin: 0px -15px;
}

.archx-team-item-wrap {
  padding: 0px 15px;
}

.archx-team-item {
  max-width: 322px;
}
.archx-team-item .team-text {
  left: 0;
  right: 0;
  width: 80%;
  opacity: 0;
  bottom: 0px;
  margin: 0 auto;
  padding: 20px 15px;
  position: absolute;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-team-item .team-text span {
  font-size: 13px;
  color: var(--main-color-2);
}
.archx-team-item .team-text h3 {
  color: #241616;
  font-size: 16px;
}
.archx-team-item .team-social {
  top: 80px;
  right: 30px;
  position: absolute;
}
.archx-team-item .team-social:before {
  top: -45px;
  left: -11px;
  width: 34px;
  height: 34px;
  color: #5D5D70;
  content: "\f067";
  font-weight: 900;
  line-height: 34px;
  text-align: center;
  position: absolute;
  border-radius: 100%;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  font-family: "Font Awesome 5 Pro";
}
.archx-team-item .team-social ul {
  opacity: 0;
  margin-top: 20px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-team-item .team-social li {
  margin-bottom: 5px;
}
.archx-team-item .team-social li a {
  color: #3E3E4F;
}
.archx-team-item .team-social li a:hover {
  color: var(--main-color-2);
}
.archx-team-item:hover .team-text {
  opacity: 1;
  bottom: 25px;
}
.archx-team-item:hover .team-social:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.archx-team-item:hover .team-social ul {
  opacity: 1;
  margin-top: 0;
}

.ar-team_left_arrow,
.ar-team_right_arrow {
  top: 50%;
  border: none;
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: transparent;
}

.ar-team_left_arrow {
  left: -180px;
}

.ar-team_right_arrow {
  right: -180px;
}

/*Project Section*/
/*----------------------------------------------------*/
.archx-project-section {
  overflow: hidden;
  border-top: 1px solid #D7D8E3;
}
.archx-project-content {
      flex-wrap: wrap;
}

.index-product-category .archx-project-item {
  width: 20%;
}

.archx-project-item {
  overflow: hidden;
  padding: 10px 10px 10px;
  margin-bottom: 15px;
}
.archx-project-item::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  /* background: linear-gradient(to right, #D7D8E3, transparent); */
}

.archx-project-item:last-child {
  border-right: none;
}
.archx-project-item:last-child:after {
  display: none;
}


.archx-project-item .hover-item {
  top: 0;
  opacity: 0;
  left: -30px;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-project-item .hover-item .inner-text {
  left: 0;
  right: 0;
  width: 90%;
  opacity: 0;
  bottom: -40px;
  margin: 0 auto;
  padding: 28px 25px;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.archx-project-item .hover-item .inner-text .inner-serial {
  font-size: 40px;
  font-weight: 700;
  margin-left: 20px;
  color: var(--main-color-2);
  font-family: var(--heading-2);
}
.archx-project-item .hover-item .inner-title {
  margin-top: 15px;
}
.archx-project-item .hover-item .inner-title h3 {
  color: #000000;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}
.archx-project-item .hover-item .inner-title a {
  color: #020202;
  font-size: 14px;
  font-weight: 500;
}
.archx-project-item .hover-item .inner-title a i {
  margin-left: 5px;
  -webkit-transition: 200ms all ease;
  transition: 200ms all ease;
}
.archx-project-item .hover-item .inner-title a:hover {
  color: var(--main-color-2);
}
.archx-project-item .hover-item .inner-title a:hover i {
  margin-left: 8px;
}
.archx-project-item .img-bg {
  left: 0;
  bottom: 0;
}
.archx-project-item .project-icon {
  margin-bottom: 36px;
}
.archx-project-item .project-text h3 {
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding-bottom: 15px;
}
.archx-project-item .project-text p {
  padding-bottom: 20px;
}
.archx-project-item .project-text a {
  color: #020202;
  font-size: 14px;
  font-weight: 500;
}
.archx-project-item .project-text a i {
  margin-left: 5px;
}
.archx-project-item:hover .hover-item {
  left: 0;
  opacity: 1;
}
.archx-project-item:hover .hover-item .inner-text {
  background-color: rgba(255, 255, 255, 0.6);
  bottom: 25px;
  opacity: 1;
}

/*Before After Section*/
/*----------------------------------------------------*/
.archx-before-after-section {
  z-index: 1;
  overflow: hidden;
  padding: 70px 0px 110px;
  background-color: #232A31;
}
.archx-before-after-section .archx-section-title {
  margin: 0 auto;
  max-width: 680px;
}
.archx-before-after-section .archx-section-title h2 {
  color: #fff;
}
.archx-before-after-section .archx-before-after-shape {
  top: 70px;
  left: 20px;
  z-index: -1;
  opacity: 0.2;
}
.archx-before-after-section .tab-content > .tab-pane {
  height: 0;
  display: block;
}
.archx-before-after-section .tab-content > .active {
  height: auto;
  display: block;
}

.archx-before-after-tab-btn {
  padding-left: 50px;
}
.archx-before-after-tab-btn:before {
  top: 0;
  left: 0;
  width: 4px;
  content: "";
  height: 100%;
  border-radius: 5px;
  position: absolute;
  background-color: #EAEAEA;
}
.archx-before-after-tab-btn .nav {
  display: inherit;
}
.archx-before-after-tab-btn .nav-link {
  padding: 0;
}
.archx-before-after-tab-btn .nav-pills .nav-link {
  color: #fff;
  border-radius: 0;
}
.archx-before-after-tab-btn .nav-pills .nav-link.active, .archx-before-after-tab-btn .nav-pills .show > .nav-link,
.archx-before-after-tab-btn .nav-pills .nav-link {
  position: relative;
  background-color: transparent;
}
.archx-before-after-tab-btn .nav-pills .nav-link.active:before, .archx-before-after-tab-btn .nav-pills .show > .nav-link:before,
.archx-before-after-tab-btn .nav-pills .nav-link:before {
  top: 0;
  left: -50px;
  width: 4px;
  content: "";
  height: 0px;
  position: absolute;
  border-radius: 5px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color-2);
}
.archx-before-after-tab-btn .nav-pills .nav-link.active {
  position: relative;
  color: var(--main-color-2);
}
.archx-before-after-tab-btn .nav-pills .nav-link.active:before {
  height: 50px;
}
.archx-before-after-tab-btn li {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 38px;
}

.beforeafter-wrap .twentytwenty-handle {
  border: none;
  background-color: var(--main-color-2);
}
.beforeafter-wrap .twentytwenty-after-label:before {
  content: "AFTER DESIGN";
}
.beforeafter-wrap .twentytwenty-before-label:before {
  content: "BEFORE DESIGN";
}
.beforeafter-wrap .twentytwenty-before-label:before, .beforeafter-wrap .twentytwenty-after-label:before {
  top: auto;
  bottom: 30px;
  font-size: 12px;
  font-weight: 500;
  padding: 0px 15px;
  line-height: 30px;
  color: var(--white-color);
  background-color: var(--main-color-2);
}
.beforeafter-wrap .twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 30px;
}
.beforeafter-wrap .twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 30px;
}
.beforeafter-wrap .twentytwenty-overlay:hover {
  background-color: transparent;
}
.beforeafter-wrap .twentytwenty-before-label,
.beforeafter-wrap .twentytwenty-after-label {
  opacity: 1;
}

/*Service Section*/
/*----------------------------------------------------*/
.archx-service-section {
  overflow: hidden;
  padding: 80px 0px;
}

.archx-service-text-area {
  max-width: 400px;
}
.archx-service-text-area .archx-section-title {
  padding-bottom: 35px;
}
.archx-service-text-area .archx-section-title h2 {
  font-size: 28px;
  line-height: 44px;
}
.archx-service-text-area .archx-section-title h2 span:before {
  bottom: 5px;
}

.archx-service-list-wraper li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 10px;
}
.archx-service-list-wraper li:before {
  left: 0;
  top: 8px;
  width: 20px;
  content: "";
  height: 20px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../icon/check.png);
}

.archx-service-item {
  padding: 40px 35px;
  position: relative;
  border: 1px solid #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-service-item .bg-img {
  left: 0;
  right: 0;
  opacity: 0;
  top: 45px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-service-item:before {
  left: 0;
  right: 0;
  bottom: 0;
  width: 0%;
  height: 5px;
  content: "";
  margin: 0 auto;
  position: absolute;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color-2);
}
.archx-service-item.active, .archx-service-item:hover {
  border: 1px solid rgba(0, 0, 0, 0.168627451);
}
.archx-service-item.active:before, .archx-service-item:hover:before {
  width: 100%;
}
.archx-service-item.active .bg-img, .archx-service-item:hover .bg-img {
  top: 25px;
  opacity: 1;
}
.archx-service-item .service-serial {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.1490196078);
  font-weight: 600;
  margin-bottom: 5px;
}
.archx-service-item .service-title-text h3 {
  color: #020202;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 10px;
}
.archx-service-item .service-title-text p {
  padding-bottom: 15px;
}
.archx-service-item .service-title-text .more-btn {
  font-size: 20px;
}
.archx-service-item .service-title-text .more-btn:hover {
  color: var(--main-color-2);
}

.archx-service-section-2 {
  z-index: 1;
}
.archx-service-section-2 .container {
  max-width: 1490px;
}
.archx-service-section-2 .archx-section-title {
  max-width: 520px;
  padding-bottom: 0;
  padding-top: 60px;
}

.archx-service-top-content-2 .archx-feature-item {
  margin-top: 30px;
}
.archx-service-top-content-2 .archx-feature-item:after {
  right: 5px;
}
.archx-service-top-content-2 .top-service-item {
  margin-left: 180px;
}

.archx-service-content-2 .archx-feature-item .archx-feature-text p {
  max-width: 235px;
}
.archx-service-content-2 .archx-feature-item {
  margin-top: 90px;
}
.archx-service-content-2 .archx-feature-item:after {
  right: 5px;
}
.archx-service-content-2 .archx-feature-item:last-child:after {
  display: block;
}
.archx-service-content-2 .col-lg-3:nth-child(3) .archx-feature-item:after, .archx-service-content-2 .col-lg-3:nth-child(6) .archx-feature-item:after {
  display: none;
}
.archx-service-content-2 .archx-feature-item .archx-feature-icon:before {
  display: none;
}

.archx-service-section-2 {
  z-index: 1;
  padding: 40px 0px 0px;
}
.archx-service-section-2:before {
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  width: 100%;
  height: 700px;
  position: absolute;
  background-color: #fbf8f6;
  background-image: url(../img/bg/shape-bg.png);
  background-repeat: no-repeat;
}
.archx-service-section-2:after {
  left: 0;
  top: 40px;
  z-index: -1;
  content: "";
  width: 830px;
  height: 275px;
  position: absolute;
  background-color: #fff;
}

.archx-service-content-2 {
  padding-bottom: 130px;
}

.archx-service-img-2 {
  right: 0;
  z-index: 1;
  bottom: 20px;
  position: absolute;
}
.archx-service-img-2:before {
  top: 20px;
  width: 100%;
  content: "";
  z-index: -1;
  height: 100%;
  right: -20px;
  position: absolute;
  background-color: var(--main-color-2);
}
.archx-service-img-2 .circle-shape {
  top: -40px;
  left: -75px;
  z-index: -1;
}

.archx-service-text-wrapper {
  padding-top: 150px;
}

.archx-service-text-area-2 {
  color: #000000;
}
.archx-service-text-area-2 span {
  font-size: 15px;
}
.archx-service-text-area-2 h3 {
  font-size: 20px;
}
.archx-service-text-area-2:before {
  top: 25px;
  right: 50px;
  height: 2px;
  content: "";
  width: 200px;
  position: absolute;
  background-color: var(--main-color-2);
}

.archx-service-text-content {
  max-width: 970px;
}

.archx-service-top-content-2 {
  padding-left: 85px;
}

/*About Section*/
/*----------------------------------------------------*/
.archx-about-section {
  z-index: 1;
  overflow: hidden;
  padding: 95px 0px 115px;
  background-color: #fcfcfc;
}
.archx-about-section:before {
  top: 0;
  right: 0;
  width: 56.5%;
  z-index: -1;
  content: "";
  height: 100%;
  position: absolute;
  background-color: #f8f6f4;
}

.archx-about-sub-text {
  margin-bottom: 40px;
}
.archx-about-sub-text h3 {
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 15px;
}
.archx-about-sub-text p {
  line-height: 35px;
}
.archx-about-feature-list {
  padding: 20px 0;
}

.archx-about-feature-list li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 10px;
}
.archx-about-feature-list li:before {
  left: 0;
  top: 8px;
  width: 30px;
  content: "";
  height: 30px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../icon/check.png);
}

.archx-about-sponsor-scroller {
  padding-left: 20px;
}

.archx-about-sponsor-wrapper {
  margin: 0px -10px;
}
.archx-about-sponsor-wrapper .archx-sponsor-item {
  height: 90px;
  width: 170px;
  margin: 0px 10px;
  padding-top: 25px;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-about-sponsor-wrapper .archx-sponsor-item img {
  margin: 0 auto;
}
.archx-about-sponsor-wrapper .archx-sponsor-item:hover {
  background-color: var(--main-color-2);
}

.archx-about-experience-scoller {
  margin-top: 80px;
}

.archx-about-experience {
  width: 170px;
  height: 275px;
  border: 1px solid #D28F51;
}
.archx-about-experience .archx-about-exp-text h3 {
  font-size: 50px;
  font-weight: 500;
  padding-bottom: 15px;
  color: var(--main-color-2);
}
.archx-about-experience .archx-about-exp-text h3 sub {
  bottom: 0;
}
.archx-about-experience .archx-about-exp-text p {
  color: #32302E;
  font-size: 14px;
  line-height: 1.3;
  max-width: 105px;
  font-family: var(--heading-2);
}

.archx-about-scroller-wrapper {
  width: 605px;
  height: 275px;
  margin-left: 35px;
  overflow-y: scroll;
}
.archx-about-scroller-wrapper::-webkit-scrollbar {
  width: 4px;
}
.archx-about-scroller-wrapper::-webkit-scrollbar-track {
  background: #EAEAEA;
}
.archx-about-scroller-wrapper::-webkit-scrollbar-thumb {
  background: var(--main-color-2);
}

.archx-about-scroller-item {
  margin-bottom: 50px;
}
.archx-about-scroller-item h3 {
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 20px;
}
.archx-about-scroller-item p {
  line-height: 35px;
}

.archx-about-section-2 {
  z-index: 1;
  padding: 100px 0px;
}
.archx-about-section-2 .container {
  max-width: 1490px;
}
.archx-about-section-2 .archx-about-counter-img {
  left: 0;
  right: 0;
  top: 70px;
  z-index: -1;
  margin: 0 auto;
  text-align: center;
}

.archx-about-img-wrapper-2 .archx-about-img-2 {
  z-index: 1;
  max-width: 335px;
}
.archx-about-img-wrapper-2 .archx-about-img-2:before {
  top: 0;
  z-index: -1;
  width: 100%;
  content: "";
  height: 100%;
  right: -20px;
  position: absolute;
  border-radius: 170px;
  background-color: var(--main-color-2);
}
.archx-about-img-wrapper-2 .archx-about-exp-text {
  top: 50%;
  z-index: 1;
  left: -20px;
  color: #000;
  font-weight: 500;
  padding: 30px 5px;
  background-color: #fff;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0509803922);
          box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0509803922);
}
.archx-about-img-wrapper-2 .archx-about-exp-text span {
  color: var(--main-color-2);
}
.archx-about-img-wrapper-2 .archx-about-mail {
  bottom: 0;
  z-index: 1;
  left: -70px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.archx-about-img-wrapper-2 .archx-about-mail img {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.archx-about-img-wrapper-2 .archx-about-mail span {
  top: 3px;
  left: -45px;
  color: #fff;
  position: relative;
  padding: 10px 40px;
  border-radius: 30px;
  background-color: var(--main-color-2);
}

.archx-about-counter {
  padding-top: 110px;
}
.archx-about-counter h3 {
  line-height: 1;
  font-size: 200px;
  font-weight: 700;
  color: var(--main-color-2);
}
.archx-about-counter p {
  color: #000000;
  font-size: 18px;
  font-weight: 500;
}
.archx-about-counter .counter-text {
  margin-top: 80px;
}

.archx-about-service-area {
  width: 350px;
  padding: 15px;
  border: 1px solid rgba(222, 212, 212, 0.6);
}
.archx-about-service-area .archx-about-service {
  padding: 25px;
}
.archx-about-service-area .archx-about-service .about-service-icon {
  margin-right: 25px;
}
.archx-about-service-area .archx-about-service .about-service-title h3 {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
}
.archx-about-service-area .archx-about-service .about-service-title p {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.2784313725);
}
.archx-about-service-area .archx-about-service .archx-service-list-item {
  margin-top: 55px;
}
.archx-about-service-area .archx-about-service .archx-service-list-item li {
  color: #020202;
  margin-bottom: 28px;
}
.archx-about-service-area .archx-about-service .archx-service-list-item li img {
  margin-right: 15px;
}
.archx-about-service-area .about-service-btn a {
  color: #fff;
  width: 100%;
  height: 45px;
  font-size: 14px;
  background-color: var(--main-color-2);
}
.archx-about-service-area .about-service-btn a:hover {
  background-color: #000000;
}

/*Work Process Section*/
/*---------------------------------------------------*/
.archx-work-process-section {
  z-index: 1;
  margin-top: 50px;
  overflow: hidden;
}
.archx-work-process-section .container {
  max-width: 1490px;
}
.archx-work-process-section .archx-wp-exp-text1,
.archx-work-process-section .archx-wp-exp-text2 {
  left: 130px;
  color: #000000;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.archx-work-process-section .archx-wp-exp-text1 span,
.archx-work-process-section .archx-wp-exp-text2 span {
  color: var(--main-color-2);
}
.archx-work-process-section .archx-wp-exp-text1 {
  top: 50px;
}
.archx-work-process-section .archx-wp-exp-text2 {
  bottom: 50px;
}
.archx-work-process-section .archx-work-pro-img {
  top: 0;
  right: 0;
  z-index: -1;
}

.archx-work-process-system-content {
  background-color: #fdfdfd;
}

.archx-work-process-item-wrap {
  padding: 0px 15px;
}

.archx-work-process-item {
  max-width: 260px;
  position: relative;
}
.archx-work-process-item:after {
  top: 15px;
  right: -25px;
  width: 1px;
  height: 100%;
  content: "";
  position: absolute;
  background-color: rgba(217, 217, 217, 0.4392156863);
}
.archx-work-process-item .archx-work-porcess-icon {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  border: 1px solid rgba(210, 143, 81, 0.3490196078);
}
.archx-work-process-item .archx-work-process-serial {
  opacity: 0.5;
  font-size: 60px;
  font-weight: 500;
  color: var(--main-color-2);
  font-family: var(--heading-2);
}
.archx-work-process-item .archx-work-process-text {
  margin-top: 10px;
}
.archx-work-process-item .archx-work-process-text h3 {
  color: #020202;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 15px;
}
.archx-work-process-item .archx-work-process-text p {
  max-width: 265px;
}

.archx-work-process-system {
  right: 0;
  top: 50%;
  max-width: 1070px;
  overflow: hidden;
  position: absolute;
  background-color: #fff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.archx-work-process-system .archx-work-process-system-content {
  padding: 65px 55px;
}

.archx-work-process-title {
  margin-top: 35px;
  margin-left: 15px;
}
.archx-work-process-title h3 {
  color: #000000;
  font-size: 38px;
  font-weight: 700;
}
.archx-work-process-title h3 span {
  font-weight: 400;
  color: var(--main-color-2);
}

/*Contact Section*/
/*---------------------------------------------------*/
.archx-contact-section {
  padding: 55px 0px 90px;
}

.archx-contact-img {
  z-index: 1;
  top: -170px;
  margin-bottom: -170px;
}
.archx-contact-img .img-shape {
  top: 45px;
  width: 80%;
  z-index: -1;
  height: 85%;
  right: -20px;
  position: absolute;
  background-color: var(--main-color-2);
}

.archx-counter-wrapper {
  margin-top: 40px;
}

.archx-counter-item h3 {
  font-size: 32px;
  font-weight: 500;
  color: var(--main-color-2);
}
.archx-counter-item p {
  color: #000000;
}

.archx-contact-form-wrapper {
  padding-left: 100px;
}

.archx-contact-form input, .archx-contact-form textarea {
  width: 100%;
  height: 50px;
  border: none;
  margin-bottom: 40px;
  border-bottom: 1px solid #E0E0E0;
}
.archx-contact-form input::-webkit-input-placeholder, .archx-contact-form textarea::-webkit-input-placeholder {
  color: #817F7E;
}
.archx-contact-form input::-moz-placeholder, .archx-contact-form textarea::-moz-placeholder {
  color: #817F7E;
}
.archx-contact-form input:-ms-input-placeholder, .archx-contact-form textarea:-ms-input-placeholder {
  color: #817F7E;
}
.archx-contact-form input::-ms-input-placeholder, .archx-contact-form textarea::-ms-input-placeholder {
  color: #817F7E;
}
.archx-contact-form input::placeholder, .archx-contact-form textarea::placeholder {
  color: #817F7E;
}
.archx-contact-form textarea {
  height: 90px;
}
.archx-contact-form button {
  color: #fff;
  height: 58px;
  width: 252px;
  border: none;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color-2);
}
.archx-contact-form button i {
  margin-left: 5px;
}
.archx-contact-form button:hover {
  background-color: #000;
}

.archx-contact-section-2 {
  overflow: hidden;
  padding-bottom: 20px;
}
.archx-contact-section-2 .archx-contact-form-wrapper {
  max-width: 750px !important;
}

.archx-contact-map-form .archx-contact-map {
  width: 50%;
  -webkit-filter: invert(90%);
          filter: invert(90%);
  background-color: #fff;
}
.archx-contact-map-form .archx-contact-form-wrapper {
  width: 50%;
  max-width: 100%;
  padding-top: 80px;
  padding-left: 60px;
  padding-right: 15px;
}

.archx-testimonial-section-2 {
  overflow: hidden;
  padding: 80px 0px 160px;
}
.archx-testimonial-section-2 .archx-testimonial-bg-2 {
  bottom: 0;
  left: -50px;
}

.archx-testimonial-2-slider-wrapper {
  margin: 0 auto;
  max-width: 1270px;
}

.archx-testimonial-img-2 {
  z-index: 1;
  width: 360px;
  margin-right: 120px;
}
.archx-testimonial-img-2 .inner-img {
  width: 340px;
  height: 335px;
  overflow: hidden;
  border-radius: 100%;
}
.archx-testimonial-img-2 .testimonial-social {
  left: 20px;
  bottom: -10px;
  padding: 3px 15px;
  position: absolute;
  background-color: #fff;
  -webkit-transform: skew(-15deg);
          transform: skew(-15deg);
  -webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.0784313725);
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.0784313725);
}
.archx-testimonial-img-2 .testimonial-social li {
  margin: 0px 10px;
}
.archx-testimonial-img-2 .testimonial-social li a {
  color: #1E1919;
}
.archx-testimonial-img-2 .testimonial-social li a:hover {
  color: var(--main-color-2);
}
.archx-testimonial-img-2 .archx-shape1 {
  left: -50px;
  bottom: -65px;
}
.archx-testimonial-img-2 .archx-shape2 {
  right: 0;
  bottom: 0;
  z-index: -1;
}
.archx-testimonial-img-2 .archx-testimonial-quote {
  top: -35px;
  right: -10px;
  line-height: 0;
  color: #DADADA;
  font-size: 55px;
}

.archx-testimonial-img-text-2 {
  padding-top: 40px;
}

.archx-textimonial-text-2 h3 {
  color: #020202;
  font-size: 38px;
  padding-bottom: 20px;
}
.archx-textimonial-text-2 p {
  color: #000000;
  font-size: 20px;
  line-height: 45px;
  padding-bottom: 20px;
}

.archx-testimonial-author-2 h4 {
  color: #445658;
  font-size: 16px;
  margin-right: 25px;
}
.archx-testimonial-author-2 span {
  color: #445658;
  font-size: 13px;
  letter-spacing: 5px;
}

.archx-testimonial-slider-2 .slick-dots li {
  color: #000;
  position: relative;
}
.archx-testimonial-slider-2 .slick-dots li:after {
  top: 0;
  right: -7px;
  content: "/";
  position: absolute;
}
.archx-testimonial-slider-2 .slick-dots li:last-child:after {
  display: none;
}
.archx-testimonial-slider-2 .slick-dots li.slick-active {
  color: var(--main-color-2);
}
.archx-testimonial-slider-2 .ar-tst_2_left_arrow,
.archx-testimonial-slider-2 .ar-tst_2_right_arrow {
  border: none;
  background-color: transparent;
}

.archx-testimonial-2-slider-wrapper .ar-tst_2_left_arrow,
.archx-testimonial-2-slider-wrapper .ar-tst_2_right_arrow {
  border: none;
  position: relative;
  background-color: transparent;
}
.archx-testimonial-2-slider-wrapper .ar-tst_2_left_arrow {
  top: -5px;
  left: -40px;
}
.archx-testimonial-2-slider-wrapper .ar-tst_2_right_arrow {
  top: -5px;
  right: -40px;
}
.archx-testimonial-2-slider-wrapper .carousel_nav {
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  position: absolute;
}

/*Project Section*/
/*---------------------------------------------------*/
.archx-project-section-2 {
  overflow: hidden;
  padding: 100px 0px 50px;
  background-color: #232A31;
}
.archx-project-section-2 .archx-section-title {
  max-width: 480px;
  padding-bottom: 0;
}
.archx-project-section-2 .archx-section-title h2 {
  color: #fff;
}

.archx-project-slider-area {
  margin: 0px -10px;
  padding-top: 75px;
}

.ar-pro_left_arrow,
.ar-pro_right_arrow {
  width: 55px;
  height: 40px;
  border: none;
  font-size: 20px;
  margin-left: 10px;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  color: var(--main-color-2);
}
.ar-pro_left_arrow:hover,
.ar-pro_right_arrow:hover {
  color: #fff;
  background-color: var(--main-color-2);
}

.archx-project-item-2 {
  width: 368px;
  margin: 0px 10px;
}
.archx-project-item-2 .serial-no {
  top: 0px;
  right: 0px;
  opacity: 0;
  width: 45px;
  height: 45px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  border-radius: 23px;
  border-top-right-radius: 0;
  background-color: #FFFFFF;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-project-item-2 .archx-project-text-2 {
  left: 0;
  right: 0;
  width: 90%;
  opacity: 0;
  bottom: 0px;
  height: 70px;
  margin: 0 auto;
  padding: 0px 15px;
  background-color: #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-project-item-2 .archx-project-text-2 h3 {
  color: #020202;
  font-size: 16px;
}
.archx-project-item-2 .archx-project-text-2 .more_btn {
  color: #fff;
  width: 50px;
  height: 45px;
  font-size: 20px;
  background-color: var(--main-color-2);
}
.archx-project-item-2:hover .serial-no {
  top: 12px;
  opacity: 1;
  right: 12px;
}
.archx-project-item-2:hover .archx-project-text-2 {
  opacity: 1;
  bottom: 20px;
}

.archx-project-section-3 {
  z-index: 1;
  padding: 100px 0px 120px;
}
.archx-project-section-3 .archx-section-title {
  margin: 0 auto;
  max-width: 750px;
}
.archx-project-section-3 .archx-project-pro-img {
  top: 0;
  right: 0;
  z-index: -1;
}

.archx-project-content-3 .archx-before-after-tab-btn .nav-pills .nav-link {
  color: #000000;
}
.archx-project-content-3 .archx-before-after-tab-btn .nav-pills .nav-link.active {
  color: var(--main-color-2);
  font-weight: 600;
}

.archx-project-item-3 {
  max-width: 938px;
}
.archx-project-item-3 .archx-project-text {
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 15px 45px;
  background-color: rgba(0, 0, 0, 0.7);
}
.archx-project-item-3 .archx-project-text h3 {
  color: #fff;
  font-size: 20px;
}
.archx-project-item-3 .archx-project-text .read-more-btn {
  width: 42px;
  height: 42px;
  color: #000000;
  border-radius: 23px;
  background-color: #fff;
  border-top-right-radius: 0;
}
.archx-project-item-3 .archx-project-text .read-more-btn:hover {
  color: #fff;
  background-color: var(--main-color-2);
}

.news-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.news-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.news-item .news-img {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.news-item .news-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item:hover .news-img img {
  transform: scale(1.05);
}

.news-item .news-content {
  padding: 20px;
}

.news-item .news-meta {
  margin-bottom: 12px;
}

.news-item .news-meta .date {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.news-item .news-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
}

.news-item .news-content h4 a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-item .news-content h4 a:hover {
  color: var(--main-color);
}

.news-item .news-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item .news-content .read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--main-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.news-item .news-content .read-more-btn:hover {
  color: var(--main-color-2);
}

.news-item .news-content .read-more-btn i {
  font-size: 14px;
}

@media (max-width: 768px) {
  .news-item .news-content h4 {
    font-size: 15px;
  }
  .news-item .news-content p {
    font-size: 13px;
  }
}

/*News Latter Section*/
/*---------------------------------------------------*/
.archx-newslatter-content {
  max-width: 870px;
  padding-top: 75px;
}

.archx-newslatter-cta {
  width: 270px;
}
.archx-newslatter-cta .inner-icon {
  margin-right: 15px;
}
.archx-newslatter-cta .inner-text {
  color: #fff;
  font-size: 14px;
}
.archx-newslatter-cta .inner-text span {
  display: block;
}
.archx-newslatter-cta .inner-text .cta-no {
  font-weight: 500;
}
.archx-newslatter-cta .inner-text .cta-text a {
  color: var(--main-color-2);
}

.newslatter-form {
  width: 470px;
}
.newslatter-form:before {
  top: 25px;
  left: 30px;
  width: 1px;
  content: "";
  height: 12px;
  position: absolute;
  background-color: #949392;
}
.newslatter-form .bg-icon {
  left: 0;
  top: 15px;
}
.newslatter-form input {
  width: 100%;
  border: none;
  height: 60px;
  padding-left: 45px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6705882353);
}
.newslatter-form input::-webkit-input-placeholder {
  color: #949392;
}
.newslatter-form input::-moz-placeholder {
  color: #949392;
}
.newslatter-form input:-ms-input-placeholder {
  color: #949392;
}
.newslatter-form input::-ms-input-placeholder {
  color: #949392;
}
.newslatter-form input::placeholder {
  color: #949392;
}
.newslatter-form button {
  right: 0;
  top: 20px;
  color: #fff;
  border: none;
  font-weight: 500;
  position: absolute;
  font-family: var(--heading-2);
  background-color: transparent;
}

/*Testimonial Section*/
/*---------------------------------------------------*/
.archx-testimonial-section {
  z-index: 1;
  padding-bottom: 120px;
}
.archx-testimonial-section:before {
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  width: 952px;
  height: 200px;
  position: absolute;
  background-color: #f4f2f1;
}
.archx-testimonial-section .archx-section-title {
  max-width: 450px;
  padding-bottom: 0px;
}

.archx-testimonial-top-content {
  max-width: 760px;
  padding-top: 60px;
}

.archx-testimonial-carousel-btn .carousel-control-next,
.archx-testimonial-carousel-btn .carousel-control-prev {
  opacity: 1;
  width: 60px;
  color: #fff;
  height: 55px;
  position: static;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: var(--main-color-2);
}
.archx-testimonial-carousel-btn .carousel-control-next:hover,
.archx-testimonial-carousel-btn .carousel-control-prev:hover {
  color: #000000;
  background-color: #fff;
}
.archx-testimonial-carousel-btn .carousel-control-prev-icon,
.archx-testimonial-carousel-btn .carousel-control-next-icon {
  background-image: none;
}

.archx-testimonial-slider .carousel-indicators {
  margin: 0;
  position: static;
  display: inline-block;
}
.archx-testimonial-slider .carousel-indicators:hover [data-bs-target] {
  margin-left: 0px;
}
.archx-testimonial-slider .carousel-indicators:hover [data-bs-target]:nth-child(1) {
  margin-left: 0px;
}
.archx-testimonial-slider .carousel-indicators [data-bs-target] {
  opacity: 1;
  width: 50px;
  height: 50px;
  border: none;
  text-indent: 0;
  margin-right: 0;
  overflow: hidden;
  margin-left: -20px;
  border-radius: 100%;
  border: 3px solid #fff;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-testimonial-slider .carousel-indicators [data-bs-target]:nth-child(1) {
  margin-left: 0;
}
.archx-testimonial-slider .carousel-indicators [data-bs-target].active {
  border: 3px solid var(--main-color-2);
}
.archx-testimonial-slider .carousel-indicators-wrap {
  margin-top: 40px;
}
.archx-testimonial-slider .carousel-indicators-wrap .more-testimonial-btn {
  margin-left: 15px;
}
.archx-testimonial-slider .carousel-indicators-wrap .more-testimonial-btn a {
  color: #000000;
  font-weight: 500;
}
.archx-testimonial-slider .carousel-indicators-wrap .more-testimonial-btn a i {
  margin-left: 5px;
}

.carousel-item {
  height: 100%;
  position: relative;
}

.carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

}

.archx-testimonial-item h3 {
  color: #020202;
  font-size: 30px;
  padding-bottom: 20px;
}
.archx-testimonial-item p {
  color: #000000;
  max-width: 805px;
  line-height: 30px;
}

.archx-testimonial-img-wrap .inner-img {
  z-index: 1;
  top: -90px;
  padding-right: 30px;
  margin-bottom: -90px;
}
.archx-testimonial-img-wrap .inner-img:before {
  right: 0;
  top: 30px;
  width: 90%;
  z-index: -1;
  content: "";
  height: 100%;
  position: absolute;
  background-color: var(--main-color-2);
}

/*Blog Section*/
/*---------------------------------------------------*/
.archx-blog-section {
  overflow: hidden;
  padding-bottom: 115px;
  padding-top: 100px;
}
.archx-blog-section .archx-section-title {
  margin: 0 auto;
  max-width: 570px;
}
.archx-blog-section .archx-section-title h2 {
  font-size: 60px;
  font-weight: 300;
}
.archx-blog-section .archx-section-title h2 span {
  font-weight: 300;
}
.archx-blog-section .archx-section-title h2 span::before {
  content: none;
}

.archx-blog-item {
  max-width: 445px;
}
.archx-blog-item .blog-img {
  overflow: hidden;
  margin-bottom: 20px;
}
.archx-blog-item .blog-img img {
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-blog-item .blog-category {
  left: 30px;
  color: #fff;
  width: 145px;
  height: 35px;
  bottom: 30px;
  font-weight: 700;
  background-color: #000000;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}
.archx-blog-item .blog-meta {
  margin-bottom: 12px;
}
.archx-blog-item .blog-meta li {
  margin-right: 20px;
}
.archx-blog-item .blog-meta li a {
  color: #000000;
}
.archx-blog-item .blog-meta li:last-child {
  margin-right: 0;
}
.archx-blog-item .blog-meta i {
  margin-right: 5px;
  color: var(--main-color-2);
}
.archx-blog-item .blog-title h3 {
  color: #000000;
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
}
.archx-blog-item .blog-title h3:hover {
  color: var(--main-color-2);
}
.archx-blog-item .blog-read-more {
  margin-top: 20px;
}
.archx-blog-item .blog-read-more a {
  color: #000000;
}
.archx-blog-item .blog-read-more a i {
  margin-left: 5px;
  -webkit-transition: 200ms all ease;
  transition: 200ms all ease;
}
.archx-blog-item .blog-read-more a:hover {
  color: var(--main-color);
}
.archx-blog-item .blog-read-more a:hover i {
  margin-left: 8px;
}
.archx-blog-item .blog-read-more a:hover {
  color: var(--main-color-2);
}
.archx-blog-item:hover .blog-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.archx-blog-item:hover .blog-category {
  background-color: var(--main-color-2);
}

.archx-blog-section-2 {
  padding: 110px 0px 70px;
  background-color: #fbf8f6;
}
.archx-blog-section-2 .archx-section-title {
  margin: 0 auto;
  max-width: 650px;
}
.archx-blog-section-2 .archx-blog-item {
  background-color: #fff;
}
.archx-blog-section-2 .archx-blog-item .blog-text {
  padding: 0px 25px 30px;
}

.archx-blog-more-btn {
  margin-top: 40px;
}
.archx-blog-more-btn a {
  color: #fff;
  width: 200px;
  height: 65px;
  background-color: var(--main-color-2);
}
.archx-blog-more-btn a i {
  margin-left: 5px;
}
.archx-blog-more-btn a:hover {
  background-color: #000000;
}

/*Map Social Section*/
/*---------------------------------------------------*/
.archx-map-section {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1490196078);
}

.archx-map-wrap {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.archx-map-info {
  top: 50%;
  right: 15%;
  position: absolute;
  background-color: #fff;
  padding: 50px 40px 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-bottom: 3px solid var(--main-color-2);
}

.archx-map-info-item {
  margin-bottom: 40px;
}
.archx-map-info-item .info-title {
  margin-bottom: 10px;
}
.archx-map-info-item .info-title span {
  font-size: 24px;
  margin-right: 15px;
  color: var(--main-color-2);
}
.archx-map-info-item .info-title h3 {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}
.archx-map-info-item .info-text {
  color: #000000;
  max-width: 250px;
}
.archx-map-info-item .info-text li i {
  margin-right: 15px;
  color: var(--main-color-2);
}

.archx-social-content .archx-social-item {
  width: 16.667%;
}
.archx-social-content .archx-social-item a {
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-right: 1px solid #D9D9D9;
}
.archx-social-content .archx-social-item a:hover i {
  color: var(--main-color-2);
}
.archx-social-content .archx-social-item i {
  color: #000000;
  margin-right: 8px;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
}

/*Footer Section*/
/*---------------------------------------------------*/
.archx-newslatter-content-area {
  padding-bottom: 50px;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(222, 226, 238, 0.0784313725);
}
.archx-newslatter-content-area .archx-newslatter-text h3 {
  color: #fff;
  font-size: 38px;
  font-weight: 500;
}
.archx-newslatter-content-area .archx-newslatter-text h3 span {
  color: var(--main-color-2);
}
.archx-newslatter-content-area .archx-newslatter-text p {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.archx-newslatter-content-area .archx-newslatter-form input {
  width: 495px;
  height: 60px;
  border: none;
  max-width: 100%;
  padding-left: 20px;
  background-color: rgba(255, 255, 255, 0.1019607843);
}
.archx-newslatter-content-area .archx-newslatter-form button {
  top: 0;
  right: 0;
  color: #fff;
  width: 160px;
  height: 60px;
  border: none;
  position: absolute;
  background-color: var(--main-color-2);
}
.archx-newslatter-content-area .archx-newslatter-form button i {
  margin-left: 5px;
}

.arck-certifications-section {
  padding: 80px 0;
  background-color: #fff;
}

.arck-cert-item {
  background-color: #f7f7f9;
  padding: 40px 30px;
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.arck-cert-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.arck-cert-item .cert-icon {
  margin-bottom: 25px;
  color: var(--main-color);
}

.arck-cert-item .cert-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111;
}

.arck-cert-item .cert-content p {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

.arck-cert-features {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #eee;
}

.arck-feature-item {
  align-items: flex-start;
  padding: 20px;
  background-color: #f7f7f9;
  border-radius: 8px;
  margin-bottom: 20px;
}

.arck-feature-item .feature-icon {
  font-size: 24px;
  color: var(--main-color);
  margin-right: 15px;
  margin-top: 5px;
}

.arck-feature-item .feature-text h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #111;
}

.arck-feature-item .feature-text p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

@media (min-width: 768px) {
  .pd-md-left-50 {
    padding-left: 50px;
  }
  .pd-md-right-50 {
    padding-right: 50px;
  }
}

@media (max-width: 767px) {
  .arck-certifications-section {
    padding: 60px 0;
  }
  
  .arck-cert-item {
    padding: 30px 20px;
  }
  
  .arck-cert-features {
    margin-top: 40px;
    padding-top: 40px;
  }
}

.archx-footer-section {
  padding-top: 140px;
  overflow: hidden;
  background-color: var(--main-color);
}
.archx-footer-section .archx-footer-mail {
  top: 60px;
  left: 20px;
  color: #fff;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.archx-footer-section .archx-footer-address {
  left: 20px;
  color: #fff;
  bottom: 50px;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.archx-footer-section .archx-footer-address b {
  font-weight: 400;
  color: var(--main-color-2);
}

.archx-footer-content {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.archx-footer-content .archx-footer-widget .widget-title {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  padding-bottom: 25px;
}
.archx-footer-content .archx-footer-widget .logo-widget .brand-logo {
  margin-bottom: 25px;
}
.archx-footer-content .archx-footer-widget .logo-widget .logo-text {
  color: #ffffff;
  line-height: 30px;
  margin-bottom: 30px;
}
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li {
  color: #ffffff;
  margin-bottom: 20px;
}
.logo-cta-info li {
  margin-bottom: 10px;;
}
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li:last-child {
  margin-bottom: 0;
}
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li i {
  color: var(--main-color-2);
  margin-right: 15px;
}
.archx-footer-content .archx-footer-widget .menu-widget {
  padding-left: 50px;
}
.archx-footer-content .archx-footer-widget .menu-widget li {
  margin-bottom: 15px;
}
.archx-footer-content .archx-footer-widget .menu-widget li:last-child {
  margin-bottom: 0;
}
.archx-footer-content .archx-footer-widget .menu-widget li a {
  color: #ffffff;
  font-family: var(--heading-2);
}
.archx-footer-content .archx-footer-widget .menu-widget li a:hover {
  color: var(--main-color-2);
}
.archx-footer-content .archx-footer-widget .award-widget .aw-title {
  color: #ffffff;
}
.archx-footer-content .archx-footer-widget .award-widget .aw-number {
  color: #fff;
  line-height: 1;
  font-size: 55px;
  font-weight: 600;
  margin-left: 50px;
}
.archx-footer-content .archx-footer-widget .aw-instagram-wrap {
  margin: 40px 0px;
}
.archx-footer-content .archx-footer-widget .aw-instagram-wrap li a {
  width: 110px;
  height: 115px;
  height: 115px;
  display: block;
  border-radius: 5px;
  position: relative;
  margin-right: 30px;
}
.archx-footer-content .archx-footer-widget .aw-instagram-wrap li a:before {
  top: 0;
  left: 0;
  width: 100%;
  content: "";
  opacity: 0;
  height: 100%;
  position: absolute;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  background-color: rgba(0, 0, 0, 0.6);
}
.archx-footer-content .archx-footer-widget .aw-instagram-wrap li a i {
  left: 0;
  right: 0;
  top: 60%;
  opacity: 0;
  color: #fff;
  position: absolute;
  text-align: center;
  -webkit-transition: 500ms all ease;
  transition: 500ms all ease;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.archx-footer-content .archx-footer-widget .aw-instagram-wrap li a:hover:before {
  opacity: 1;
}
.archx-footer-content .archx-footer-widget .aw-instagram-wrap li a:hover i {
  top: 50%;
  opacity: 1;
}
.archx-footer-content .archx-footer-widget .aw-btn-wrap {
  padding-bottom: 10px;
}
.archx-footer-content .archx-footer-widget .aw-btn-wrap img {
  margin-right: 5px;
}
.archx-footer-content .archx-footer-widget .aw-btn-wrap span {
  color: #DD1D26;
}
.archx-footer-content .archx-footer-widget .aw-btn-wrap .aw-line {
  bottom: 0;
  left: 40px;
}

.archx-footer-copyright {
  padding: 35px 0px;
}

.archx-footer-copyright-social a {
  color: #fff;
  width: 45px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 10px;
  border-radius: 2px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(255, 255, 255, 0.12);
}
.archx-footer-copyright-social a:hover {
  background-color: var(--main-color-2);
  color: #fff;
}
.archx-footer-copyright-text {
  color: #999;
}
.archx-footer-copyright-text a {
  color: #ccc;
}

/*Responsive*/
/*----------------------------------------------------*/
@media screen and (max-width: 1600px) {
  .archx-slider-section .archx-slider-side1,
.archx-slider-section .archx-slider-side2 {
    display: none;
  }
  .archx-feature-img {
    margin-left: 15px;
  }
  .archx-feature-item {
    width: 230px;
  }
  .archx-feature-img .archx-ft-shape {
    display: none;
  }
  .archx-feature-item:after {
    display: none;
  }
  .archx-project-item .project-icon {
    width: 110px;
    margin-bottom: 40px;
  }
  .archx-project-item .hover-item .inner-title h3 {
    font-size: 20px;
    line-height: 30px;
  }
  .archx-project-item .hover-item .inner-text .inner-icon {
    width: 40px;
  }
  .archx-project-item .hover-item .inner-text .inner-serial {
    font-size: 30px;
  }
  .archx-newslatter-content {
    max-width: 790px;
  }
  .archx-footer-section .archx-footer-address,
.archx-footer-section .archx-footer-mail {
    display: none;
  }
  .archx-footer-content {
    padding-bottom: 30px;
  }
  .archx-service-section-2:after {
    width: 585px;
  }
  .archx-service-img-2 .circle-shape {
    left: -35px;
  }
  .archx-service-img-2:before {
    display: none;
  }
  .archx-header-section.archx-header-style-two .header-main-menu-wrapper {
    padding: 15px 20px;
  }
  .slider-side-content {
    display: none;
  }
  .archx-slider-section-2 .archx-banner-img1 {
    left: 0;
  }
  .archx-slider-section-2 .archx-banner-img2 {
    left: 80px;
  }
  .archx-slider-section-2 .archx-banner-img3 {
    left: 0;
  }
  .archx-slider-section-2 .archx-banner-img4 {
    left: 120px;
  }
  .archx-slider-section-2 .archx-banner-img5 {
    right: 0;
  }
  .archx-slider-section-2 .archx-banner-img7 {
    display: none;
  }
  .archx-slider-section-2 .archx-banner-counter {
    display: none;
  }
  .archx-about-img-wrapper-2 .archx-about-exp-text {
    left: 0;
  }
  .archx-service-top-content-2 .top-service-item {
    margin-left: 50px;
  }
  .archx-service-top-content-2 {
    padding-left: 15px;
  }
}
@media screen and (max-width: 1300px) {
  .archx-feature-img {
    top: -40px;
    width: 285px;
    margin-bottom: -40px;
  }
  .archx-project-item {
    margin: 0 auto;
    max-width: 475px;
    border-right: 0;
  }
  .archx-project-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-project-item .project-text h3 {
    font-size: 20px;
    line-height: 30px;
  }
  .archx-testimonial-img-wrap .inner-img {
    top: 0;
    padding-top: 50px;
  }
  .archx-newslatter-content {
    max-width: 100%;
  }
  .archx-service-img-2 .circle-shape {
    display: none;
  }
  .archx-service-text-area-2:before {
    width: 140px;
    right: 140px;
  }
}
@media screen and (max-width: 1100px) {
  .archx-header-section .main-navigation li {
    margin: 0px 25px;
  }
  .archx-header-section .header-top-content .header-top-cta {
    display: none;
  }
  .archx-header-section .header-top-content .brand-logo {
    margin: 0;
    position: static;
  }
  .archx-feature-img {
    display: none;
  }
  .archx-feature-item-content {
    padding: 0px 15px;
  }
  .archx-feature-item {
    width: 260px;
  }
  .archx-section-title h2 {
    font-size: 30px;
  }
  .archx-section-title .title-serial {
    font-size: 45px;
  }
  .archx-section-title {
    padding-bottom: 30px;
  }
  .archx-footer-content .archx-footer-widget .aw-instagram-wrap li a {
    width: 85px;
  }
  .archx-footer-content .archx-footer-widget .aw-btn-wrap .aw-line {
    display: none;
  }
  .archx-header-section.archx-header-style-two .main-navigation li {
    margin: 0px 15px;
  }
  .archx-testimonial-img-2 {
    margin-right: 40px;
  }
  .archx-service-section-2:before {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .archx-header-section .main-navigation li {
    margin: 0px 15px;
  }
  .archx-feature-item {
    margin-bottom: 30px;
  }
  .archx-about-scroller-wrapper {
    width: 470px;
  }
  .archx-contact-img {
    top: -140px;
    margin-bottom: -140px;
  }
  .archx-footer-content .archx-footer-widget .aw-instagram-wrap li a {
    width: 75px;
  }
  .archx-header-section.archx-header-style-two .header-cta-number {
    display: none !important;
  }
  .archx-about-counter h3 {
    font-size: 120px;
  }
  .archx-about-counter .counter-text {
    margin-top: 15px;
  }
  .archx-service-img-2 {
    display: none;
  }
  .archx-service-text-wrapper {
    padding-top: 0;
  }
  .archx-work-process-system {
    position: static;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .archx-work-process-section .archx-wp-exp-text2,
.archx-work-process-section .archx-wp-exp-text1 {
    display: none;
  }
  .ar-team_left_arrow, .ar-team_right_arrow {
    position: static;
    margin: 0px 5px;
    display: inline-block;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .archx-team-content .carousel_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .archx-slider-section-2 .archx-banner-img2,
.archx-slider-section-2 .archx-banner-img1,
.archx-slider-section-2 .archx-banner-img3,
.archx-slider-section-2 .archx-banner-img4,
.archx-slider-section-2 .archx-banner-img5,
.archx-slider-section-2 .archx-banner-img6,
.archx-slider-section-2 .archx-banner-img7 {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .archx-side-bar-menu-wrapper {
    display: none !important;
  }
  .archx-header-section .header-main-menu-wrapper {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: end !important;
  }
  .archx-slider-content:before {
    display: none;
  }
  .archx-slider-counter .archx-slider-counter-text {
    margin: 0 auto;
  }
  .archx-slider-counter .ar-slider-shape-img {
    display: none;
  }
  .archx-slider-text {
    text-align: center;
  }
  .archx-video-play-btn {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .archx-slider-counter .archx-slider-counter-text h2 {
    font-size: 130px;
  }
  .archx-slider-text {
    padding-left: 0;
  }
  .archx-faq-img-wrap {
    margin: 0 auto;
    max-width: 470px;
    margin-top: 30px;
  }
  .archx-service-text-area {
    margin: 0 auto;
    max-width: 570px;
    margin-bottom: 40px;
  }
  .archx-about-section:before {
    display: none;
  }
  .archx-about-text-content {
    margin-bottom: 30px;
  }
  .archx-about-experience-scoller {
    margin: 0 auto;
    max-width: 700px;
    margin-top: 40px;
  }
  .archx-contact-img {
    top: 0;
    margin: 0 auto;
    max-width: 450px;
    margin-bottom: 0;
  }
  .archx-contact-form-wrapper {
    padding-left: 0;
    margin-top: 40px;
  }
  .archx-testimonial-img-wrap {
    display: none !important;
  }
  .archx-blog-item {
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .archx-footer-content .archx-footer-widget .menu-widget {
    padding-left: 0;
  }
  .archx-footer-content .archx-footer-widget {
    margin-bottom: 30px;
  }
  .archx-footer-content .archx-footer-widget .aw-instagram-wrap li a {
    height: auto;
  }
  .archx-testimonial-section {
    overflow: hidden;
  }
  .archx-header-section .mobile_menu_button {
    top: 50%;
    left: 15px;
    right: auto;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: var(--main-color-2);
  }
  .archx-header-section.archx-header-style-two .archx-main-navigation-wrap {
    display: none;
  }
  .archx-header-section.archx-header-style-two .header-main-menu-wrapper {
    padding: 20px 15px;
  }
  .archx-header-section.archx-header-style-two .brand-logo {
    left: 0;
    top: 50%;
    right: 0;
    margin: 0 auto;
    max-width: 75px;
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .archx-slider-section-2 {
    padding-top: 65px;
  }
  .archx-about-img-wrapper-2 {
    margin: 0 auto;
    max-width: 370px;
  }
  .archx-about-service-content {
    margin: 0 auto;
    margin-top: 40px;
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: start !important;
  }
  .archx-about-service-area {
    width: 100%;
    margin: 0 auto;
  }
  .archx-about-counter {
    padding-top: 50px;
  }
  .archx-service-section-2 .archx-section-title {
    padding-top: 0;
  }
  .archx-service-section-2 .archx-section-title {
    margin: 0 auto;
    text-align: center;
  }
  .archx-service-content-2 .archx-feature-item:last-child:after {
    display: none;
  }
  .archx-service-content-2 .archx-feature-item,
.archx-service-content-2 .archx-feature-item .archx-feature-text p,
.archx-service-top-content-2 .archx-feature-item .archx-feature-text p {
    width: 100%;
    max-width: 100%;
  }
  .archx-service-top-content-2 .archx-feature-item {
    width: 50%;
  }
  .archx-service-top-content-2 .top-service-item {
    margin-left: 0;
  }
  .archx-service-content-2 .archx-feature-item {
    margin-top: 0;
  }
  .archx-service-text-wrapper {
    display: none;
  }
  .archx-service-content-2 {
    padding-bottom: 0px;
  }
  .archx-faq-pointer-wrapper {
    display: none;
  }
  .archx-faq-section-2:before {
    width: 100%;
  }
  .archx-fun-fact-title {
    margin-bottom: 30px;
  }
  .archx-team-item .team-text {
    padding: 10px 15px;
  }
  .archx-work-process-system .archx-work-process-system-content {
    padding: 40px 15px;
  }
  .archx-service-top-content-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (max-width: 800px) {
  .archx-textimonial-text-2 h3 {
    font-size: 28px;
  }
}
@media screen and (max-width: 680px) {
  .archx-project-top-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .ar-pro_left_arrow, .ar-pro_right_arrow {
    margin-left: 0;
    margin-top: 20px;
    margin-right: 5px;
  }
  .archx-newslatter-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-project-item-content {
    margin: 0 auto;
    max-width: 368px;
  }
  .archx-contact-map-form .archx-contact-map {
    width: 100%;
  }
  .archx-contact-map-form .archx-contact-form-wrapper {
    width: 100%;
  }
  .archx-contact-map-form {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-contact-map-form .archx-contact-form-wrapper {
    padding-left: 15px;
  }
  .archx-testimonial-img-text-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-textimonial-text-2 {
    padding-top: 30px;
  }
  .archx-service-top-content-2 .archx-feature-item {
    width: 100%;
    padding-right: 15px;
  }
  .archx-slider-content-2 .archx-slider-text-2 h1 {
    font-size: 30px;
    padding-bottom: 20px;
  }
  .archx-slider-content-2 .archx-slider-text-2 {
    padding: 130px 0px 150px;
  }
  .archx-project-item-3 .archx-project-text {
    padding: 15px 20px;
  }
  .archx-fun-fact-counter {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-fun-fact-item {
    width: 100%;
    margin-bottom: 20px;
  }
  .archx-produce-slider .slick-slide img {
    display: inherit;
  }
  .archx-contact-section-2 .archx-contact-form-wrapper {
    margin-top: 0;
  }
}
@media screen and (max-width: 480px) {
  .archx-header-section .header-cta-number {
    display: none !important;
  }
  .archx-slider-section {
    padding: 290px 0px 150px;
  }
  .archx-slider-counter .archx-slider-counter-text {
    margin-bottom: 30px;
  }
  .archx-slider-counter .archx-slider-counter-text h2 {
    font-size: 100px;
  }
  .archx-slider-text h1 {
    font-size: 36px;
    line-height: 40px;
  }
  .archx-slider-text .archx-video-play-btn .archx-slider-btn a {
    height: 50px;
    width: 150px;
  }
  .index-product-category .archx-project-item {
    width: 50% !important;
    padding-left: 6%;
    padding-bottom: 20px;
    margin-top: 10px;
  }
  .archx-project-item .hover-item {
    display: none;
  }

  .archx-project-item::after {
    display: none;
  }

  .archx-project-item .project-text h3 {
    font-size: 16px;
    line-height: 20px;
  }
  .archx-project-item .project-text a {
    color: #666666;
  }

  .archx-project-item .project-icon {
    width: 140px;
    margin-bottom: 20px;
  }

  .arck-counter-inner-item p {
    color: #000000;
  }

  .archx-about-experience-scoller {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-about-scroller-wrapper {
    margin-left: 0;
  }
  .archx-about-experience {
    width: 100%;
    margin-bottom: 30px;
  }
  .archx-about-sponsor-scroller {
    padding-left: 0;
  }
  .archx-contact-img .img-shape {
    display: none;
  }
  .header-language-select {
    display: none;
  }
  .archx-section-title h2 {
    font-size: 26px;
    line-height: 32px;
  }
  .archx-faq-section,
.archx-before-after-section,
.archx-service-section,
.archx-about-section,
.archx-project-section-2 {
    padding: 60px 0px;
  }
  .archx-feature-cta-text {
    margin-top: 10px;
  }
  .archx-service-text-area {
    margin-bottom: 20px;
  }
  .archx-about-section {
    background-color: #f7f7f7;
  }
  .ar-pro_left_arrow, .ar-pro_right_arrow {
    margin-top: 0;
  }
  .archx-project-section-2 .archx-section-title .title-serial {
    padding-bottom: 0;
  }
  .archx-newslatter-form {
    width: 100%;
  }
  .archx-newslatter-form .newslatter-form {
    max-width: 100%;
  }
  .archx-testimonial-top-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-testimonial-section .archx-section-title {
    padding-bottom: 20px;
  }
  .archx-testimonial-slider {
    padding-top: 40px;
  }
  .archx-testimonial-section {
    padding-bottom: 60px;
  }
  .archx-social-content .archx-social-item {
    width: 50%;
  }
  .archx-social-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-footer-section {
    padding-top: 60px;
  }


  .archx-footer-content .archx-footer-widget .aw-instagram-wrap {
    margin: 20px 0px;
  }
  .archx-footer-content .archx-footer-widget .award-widget .aw-number {
    font-size: 40px;
  }
  .archx-footer-copyright {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .archx-footer-copyright-social {
    margin-top: 10px;
  }
  .archx-footer-copyright-social a {
    margin-left: 0;
    margin: 0px 5px;
  }
  .archx-header-section .header-main-menu-wrapper {
    padding: 10px 15px;
  }
  .archx-header-section.sticky_on .header-main-menu-wrapper {
    padding: 10px 0px;
  }
  .archx-header-section .header-main-menu-wrapper:before {
    display: none;
  }
  .archx-blog-section {
    margin-bottom: 60px;
  }
  .archx-faq-content-wrapper .accordion-button:not(.collapsed)::after,
.archx-faq-content-wrapper .accordion-button::after {
    font-size: 12px;
  }
  .archx-header-section.archx-header-style-two .header-cta-btn a {
    font-size: 12px;
  }
  .archx-header-section.archx-header-style-two .header-cta-btn a i.cta-arrow {
    display: none;
  }
  .archx-about-img-wrapper-2 {
    max-width: 330px;
  }
  .archx-about-section-2 {
    padding: 60px 0px;
  }
  .archx-service-content-2 .archx-feature-item {
    margin-top: 20px;
  }
  .archx-work-process-item:after {
    display: none;
  }
  .archx-work-process-title h3 {
    font-size: 28px;
  }
  .archx-work-process-item .archx-work-process-serial {
    font-size: 30px;
  }
  .archx-project-section-3,
.archx-faq-section-2,
.archx-team-content,
.archx-testimonial-section-2,
.archx-blog-section-2 {
    padding: 60px 0px;
  }
  .archx-fun-fact-item h3 {
    font-size: 40px;
  }
  .archx-fun-fact-item p {
    font-size: 14px;
  }
  .archx-team-item {
    margin: 0 auto;
  }
  .archx-newslatter-content-area {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .archx-newslatter-text {
    margin-bottom: 30px;
  }
  .archx-service-section-2 {
    overflow: hidden;
  }
  .archx-service-section-2 .archx-section-title {
    padding-bottom: 40px;
  }
  .archx-header-section.archx-header-style-two.sticky_on .header-main-menu-wrapper {
    padding: 10px 15px;
  }
  .archx-testimonial-slider-2 .slick-dots {
    display: none !important;
  }
  .archx-testimonial-2-slider-wrapper .carousel_nav {
    position: static;
    margin-top: 30px;
  }
  .archx-testimonial-2-slider-wrapper .ar-tst_2_left_arrow,
.archx-testimonial-2-slider-wrapper .ar-tst_2_right_arrow {
    position: static;
  }
}
/*Breadrumb Section*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
.arck-breadcrumb-section-2 {
  
  background: linear-gradient(135deg, var(--main-color-tint2), var(--main-color-tint));
  margin-top: 141px;
  padding: 14px 0;
}

@media(max-width: 765px) {
  .arck-breadcrumb-section-2 {
    margin-top: 121px;
  }
}

.arck-breadcrumb-section-2 .breadcrumb-overlay {
  display: none;
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content {
  padding: 0;
  text-align: left;
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content li {
  color: #999;
  display: inline-flex;
  align-items: center;
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content li a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content li a:hover {
  color: var(--main-color-2);
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content .arck-breadcrumb-sep {
  margin: 0 10px;
  color: #bbb;
  font-size: 14px;
  line-height: 1;
}
.arck-breadcrumb-section-2 .arck-breadcrumb-content .arck-breadcrumb-current {
  color: var(--main-color-2);
}

@media screen and (max-width: 1600px) {
  .archx-feature-img_2 .archx-ft-shape {
    display: none;
  }
}
@media screen and (max-width: 1300px) {
  .archx-feature-content-item_2 {
    padding-left: 0;
    padding-top: 100px;
  }
  .archx-feature-img_2 {
    top: 0;
    margin-bottom: 0;
    margin-top: 50px;
  }
}
@media screen and (max-width: 1024px) {
  .archx-feature-content-item_2 {
    padding-top: 50px;
  }
  .archx-feature-img_2 .award-wining-text {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .archx-feature-img_2 {
    max-width: 355px;
    margin: 50px auto 0px;
  }
  .archx-feature-item_2 {
    margin: 0 auto;
    max-width: 370px;
    text-align: center;
    margin-bottom: 40px;
  }
  .archx-feature-cta-text {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    max-width: 370px;
    text-align: center;
  }
}
/*---------------------------------------------------- */
/*Responsive area*/
/*----------------------------------------------------*/
@media screen and (max-width: 1500px) {
  .arck-header-section.header-style-one {
    padding: 25px 20px;
  }
  .arck-slider-section-1 {
    padding: 80px 20px 0px 20px;
  }
  .arck-header-section .main-navigation li {
    margin: 0px 20px;
  }
  .arck-header-section.header-style-one .header-cta-social .header-social {
    margin-left: 20px;
  }
  .arck-header-section.header-style-one .header-cta-social .header-social:before {
    left: 0;
  }
  .arck-header-section .dropdown-menu {
    top: 55px;
  }
  .arck-header-section.sticky-on .dropdown-menu {
    top: 52px;
  }
  .arck-main-slider-item .arck-slider-main-text:before {
    left: -45px;
    top: -50px;
  }
  .arck-main-slider-item .arck-slider-main-text:after {
    left: -55px;
    top: -40px;
  }
  .arck-video-cta-wrap .video-cta-item .inner-icon {
    margin-right: 10px;
    width: 52px;;
  }
  .arck-video-cta-wrap .video-cta-item .inner-text h3 {
    font-size: 16px;
  }
  .arck-video-cta-wrap .video-cta-item {
    padding: 20px 15px;
  }
  .arck-video-play-wrap {
    width: 52%;
  }
  .arck-appointment-form-wrap {
    max-width: 530px;
  }
}
@media screen and (max-width: 1280px) {
  .arck-main-slider-item .arck-slider-main-text:before,
.arck-main-slider-item .arck-slider-main-text:after {
    display: none;
  }
  .arck-header-section.header-style-one .header-cta-social .header-cta {
    display: none;
  }
  .arck-header-section.header-style-one .header-cta-social .header-social:before {
    display: none;
  }
  .arck-project-item .inner-text {
    max-width: 300px;
  }
  .arck-main-slider-area-2 .carousel_nav {
    display: none;
  }
  .arck-main-slider-item-2 {
    padding: 230px 0px 110px;
  }
}
@media screen and (max-width: 1024px) {
  .arck-project-slider-wrapper {
    padding: 0px 15px;
  }
  .arck-project-item .inner-text .project-title-desc p {
    display: none;
  }
  .arck-project-item .inner-text {
    top: 40px;
    left: 40px;
    max-width: 230px;
  }
  .arck-project-item .view-more-btn {
    bottom: 40px;
  }
  .arck-video-play-wrap {
    width: 48%;
  }
  .arck-appointment-form-wrap {
    max-width: 50%;
  }
  .arck-video-cta-wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .arck-video-cta-wrap .video-cta-item {
    width: 50%;
  }
  .arck-sponsor-section {
    padding: 70px 0px;
  }
  .arck-blog-item-2 .inner-text p,
.arck-blog-item .inner-text p {
    display: none;
  }
  .arck-blog-item-2 .inner-text {
    padding: 45px 15px 40px;
  }
  .about-signature-img .sign-img {
    right: 0;
  }
  .filtr-container-area .grid-size-25 {
    width: 50%;
  }
  .arck-working-skill-text-wrap {
    padding-top: 0px;
  }
  .arck-skill-progress-bar {
    padding-top: 20px;
  }
  .arck-testimonial-appointment-content .arck-appointment-form-wrap {
    max-width: 100%;
  }
  .arck-testimonial-appointment-content .arck-appointment-form-wrap {
    padding-left: 20px;
  }
  .arck-main-slider-item-2 .arck-slider-main-text {
    max-width: 485px;
  }
  .arck-main-slider-item-2 .arck-slider-main-text h1 {
    font-size: 60px;
  }
  .arck-slider-section-2 .slider-social {
    left: 0;
  }
}
@media screen and (max-width: 991px) {
  .arck-main-navigation-wrap {
    display: none;
  }
  .arck-slider-area .slick-dots {
    right: 30px;
  }
  .arck-header-section.header-style-one .header-cta-social {
    display: none !important;
  }
  .mobile_menu_button {
    display: block;
  }
  .no-padding {
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
  }
  .arck-about-text-wrapper {
    margin: 0 auto;
    margin-bottom: 40px;
  }
  .arck-about-img-wrapper,
.arck-testimonial-img-wrap {
    max-width: 570px;
    margin: 0 auto;
  }
  .arck-work-process-item {
    margin-bottom: 60px;
  }
  .arck-work-process-section {
    padding-bottom: 90px;
  }
  .arck-counter-inner-item {
    margin-bottom: 40px;
  }
  .arck-testimonial-text-wrap {
    padding-left: 0;
    margin: 0 auto;
    max-width: 570px;
  }
  .arck-blog-item,
.arck-blog-item-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    max-width: 770px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 40px;
  }
  .arck-blog-item-wrapper .row {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .arck-blog-item-2 .inner-text {
    padding: 45px 35px 40px;
  }
  .arck-footer-widget {
    margin-bottom: 40px;
  }
  .arck-footer-widget .widget-title {
    padding-bottom: 20px;
  }
  .arck-footer-widget-wrapper {
    padding-bottom: 50px;
  }
  .arck-slider-section-2 .arck-slider-img-2 {
    display: none;
  }
  .arck-about-img-wrap-2,
.arck-working-skill-text-wrap,
.arck-contact-page-cta {
    margin: 0 auto;
    max-width: 570px;
    margin-bottom: 30px;
  }
  .arck-about-text-wrap-2,
.arck-working-skill-img,
.arck-testimonial-appointment-content .arck-appointment-form-wrap,
.arck-faq-video-play-wrap,
.arck-appointment-form-wrap {
    margin: 0 auto;
    padding-left: 0;
    max-width: 570px;
  }
  .arck-pricing-item {
    margin-bottom: 30px;
  }
  .arck-testimonial-appointment:before {
    display: none;
  }
  .arck-testimonial-appointment-content .arck-testimonial-text-wrap {
    padding-right: 0;
    padding-bottom: 60px;
  }
  .about-page-about-content .arck-about-img-wrapper {
    margin-bottom: 60px;
  }
  .arck-faq-content {
    margin: 0 auto;
    margin-bottom: 40px;
  }
  .shop-details-text-wrap {
    padding-left: 0;
  }
  .arck-service-details-category {
    margin-bottom: 40px;
  }
  .arck-blog-sidebar {
    margin-top: 50px;
  }
  .arck-contact-page-form {
    padding-left: 0;
  }
  .arck-project-details-img-item {
    margin-bottom: 30px;
  }
  .arck-project-details-text {
    margin-top: 30px;
    padding-left: 0;
    padding-right: 0;
  }
  .mobile_menu {
    display: block;
  }
  .archx-header-section .header-main-menu-wrapper:before {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .arck-main-slider-item .arck-slider-main-text h1 {
    font-size: 60px;
  }
  .arck-main-slider-item .arck-slider-main-text {
    max-width: 530px;
  }
  .arck-section-title h2, .arck-section-title-2 h2 {
    font-size: 40px;
  }
  .arck-project-filter-btn li,
.arck-project-filter-btn button,
.arck-project-filter-btn li,
.arck-project-filter-btn button {
    margin-left: 15px;
  }
  .arck-project-top-content {
    padding-bottom: 40px;
  }
  .arck-appointment-form-wrap {
    max-width: 100%;
  }
  .arck-video-play-wrap {
    width: 100%;
    height: 500px;
    margin-top: 50px;
    position: relative !important;
  }
  .arck-video-cta-wrap {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .arck-appointment-video-section {
    padding-bottom: 0;
  }
  .arck-blog-item, .arck-blog-item-2 {
    margin: 0 auto;
    display: block;
    max-width: 370px;
    margin-bottom: 40px;
  }
  .filtr-container-area .grid-sizer,
.filtr-container-area .grid-size-50,
.filtr-container-area .grid-size-25 {
    width: 100%;
  }
  .arck-blog-details-main-content .arck-blog-share-tag {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (max-width: 680px) {
  .arck-main-slider-item .arck-slider-main-text .line-shape {
    display: none;
  }
  .arck-video-cta-wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative !important;
  }
  .arck-video-cta-wrap .video-cta-item {
    width: 100%;
  }
  .arck-video-play-wrap .arck-video-img-wrap {
    display: block;
  }
  .arck-video-play-wrap {
    height: auto;
  }
  .arck-video-play-btn {
    top: 25%;
  }
  .arck-cta-content h2 {
    font-size: 30px;
  }
  .arck-cta-content .arck-cta-button-group {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .arck-cta-number {
    margin-top: 30px;
  }
  .arck-cta-content .arck-cta-number i {
    width: 50px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
  }
  .arck-cta-content .arck-cta-number a {
    font-size: 20px;
  }
  .filtr-container-area .grid_2-size-40,
.filtr-container-area .grid_2-size-60,
.filtr-container-area .grid_2-sizer {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .arck-main-slider-item .arck-slider-main-text h1 {
    font-size: 40px;
  }
  .arck-main-slider-item .arck-slider-main-text {
    max-width: 310px;
  }
  .arck-slider-section-1 {
    padding: 80px 0px 0px;
  }
  .arck-slider-area .slick-dots {
    right: 15px;
  }
  .arck-main-slider-item .arck-slider-main-text h1 {
    padding-bottom: 30px;
  }
  .arck-slider-section-1:before, .arck-slider-section-1:after {
    display: none;
  }
  .arck-main-slider-item {
    padding: 150px 0px 160px;
  }
  .arck-appointment-form-wrap form button, .arck-btn a {
    height: 50px;
    width: 150px;
  }
  .arck-service-section,
.arck-about-section {
    padding: 60px 0px;
  }
  .arck-section-title h2, .arck-section-title-2 h2 {
    font-size: 30px;
    padding-bottom: 20px;
  }
  .arck-about-text-wrapper .arck-year-experience h3 {
    font-size: 60px;
  }
  .arck-project-top-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 20px;
  }
  .arck-project-top-content .arck-section-title {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
  }
  .arck-project-section {
    padding: 60px 0px;
  }
  .arck-work-process-content {
    padding-top: 70px;
  }
  .arck-work-process-section {
    padding-bottom: 60px;
  }
  .arck-counter-section {
    padding: 60px 0px 40px;
  }
  .arck-appointment-video-section {
    padding-top: 80px;
  }
  .arck-appointment-form-wrap .arck-section-title {
    padding-bottom: 15px;
  }
  .arck-team-section {
    padding: 60px 0px 30px;
  }
  .arck-teestimonial-item .inner-text {
    font-size: 18px;
    margin-bottom: 45px;
  }
  .arck-blog-section {
    padding: 60px 0px 35px;
  }
  .arck-sponsor-section {
    padding: 40px 0px;
  }
  .arck-footer-widget-wrapper {
    padding-bottom: 20px;
  }
  .arck-main-slider-item-2 .arck-slider-main-text h1 {
    font-size: 40px;
    padding-bottom: 10px;
  }
  .arck-main-slider-item-2 .arck-slider-main-text p {
    padding-bottom: 20px;
  }
  .arck-btn-2 a {
    height: 50px;
    width: 150px;
  }
  .arck-about-section-2,
.arck-before-after-section,
.arck-working-skill-section,
.arck-pricing-section,
.arck-testimonial-appointment {
    padding: 60px 0px;
  }
  .arck-before-after-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .arck-before-after-content {
    padding-top: 20px;
  }
  .arck-project-section-2 {
    padding-top: 40px;
  }
  .arck-project-filter-content {
    padding: 0px 15px;
  }
  .arck-project-item-2 .inner-text {
    bottom: 25px;
  }
  .arck-project-item-2:hover .inner-text {
    left: 25px;
  }
  .arck-breadcrumb-content {
    padding: 175px 0px 140px;
  }
  .arck-breadcrumb-section .acrk-img-shape2,
.arck-breadcrumb-section .acrk-img-shape1 {
    display: none;
  }
  .arck-breadcrumb-content h1 {
    font-size: 40px;
    padding-bottom: 15px;
  }
  .about-page-about-section {
    padding: 60px 0px;
  }
  .arck-cta-content,
.arck-faq-video-section {
    padding: 60px 0px;
  }
  .arck-faq-video-play-wrap .arck-video-play-btn {
    top: 50%;
  }
  .inner-page-padding {
    padding: 60px 0px;
  }
  .shop-details-text-wrap .arck-code-category li {
    margin-right: 10px;
  }
  .shop-details-text-wrap .quantity-btn-area .add-cart-btn a {
    width: 140px;
  }
  .arck-service-details-text-area h3 {
    font-size: 30px;
    padding-bottom: 15px;
  }
  .arck-blog-details-main-content .arck-blog-details-text-wrap {
    padding: 50px 20px 20px;
  }
  .arck-blog-details-main-content .arck-blog-share-tag .blog-hash-tag a {
    margin-left: 0;
  }
  .arck-blog-details-main-content .arck-blog-share-tag .blog-hash-tag {
    margin-top: 15px;
  }
  .contact-cta-inner-img {
    display: none;
  }
  .arck-contact-page-cta .contact-cta-inner-text {
    position: static !important;
  }
  .arck-faq-feed-content {
    padding-top: 30px;
  }
  .arck-faq-feed-section {
    padding: 60px 0px;
  }
  .arck-testimonial-feed-section {
    padding: 60px 0px 20px;
  }
}

.video-thumb {
  position: relative;
  overflow: hidden;
}

.video-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.video-play-btn a {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: var(--main-color);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.video-play-btn a:hover {
  background-color: var(--main-color);
  color: #fff;
  transform: scale(1.1);
}

.video-play-btn a i {
  font-size: 24px;
  margin-left: 3px;
}

.video-item:hover .video-thumb img {
  transform: scale(1.05);
}

.video-info {
  text-align: center;
  padding: 15px 0;
}

.video-info h4 {
  margin: 0;
  font-size: 18px;
}

.one-stop-content .row {
  margin-bottom: 100px;
}

.one-stop-content .row:last-child {
  margin-bottom: 0;
}

.service-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.service-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.service-img:hover img {
  transform: scale(1.05);
}

.service-text {
  padding: 30px 0;
}

.service-step {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: var(--main-color-2);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 20px;
}

.service-text h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--black-color);
  margin-bottom: 20px;
}

.service-text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 25px;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-features li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
  color: var(--gray-color);
}

.service-features li i {
  color: var(--main-color);
  margin-right: 15px;
  font-size: 18px;
}

@media (max-width: 767px) {
  .one-stop-content .row {
    margin-bottom: 60px;
  }
  
  .service-text {
    padding: 20px 0;
    text-align: center;
  }
  
  .service-step {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
  }
  
  .service-text h3 {
    font-size: 24px;
  }
  
  .service-features li {
    justify-content: center;
  }
}

/* ============================================
   arck-cat-bento - Bento Category Showcase
   ============================================ */
.arck-cat-bento {
  padding: 80px 0 60px;
  background-color: #f8f9fc;
}
.arck-cat-bento-head {
  margin-bottom: 40px;
  gap: 20px;
}
.arck-cat-bento-head .sub-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--main-color-2);
  display: block;
  margin-bottom: 8px;
}
.arck-cat-bento-head h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.arck-cat-bento-head h2 span {
  color: var(--main-color-2);
}
.arck-cat-bento-all {
  font-size: 14px;
  font-weight: 600;
  color: #1a2428;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -webkit-transition: gap 0.3s ease, color 0.3s ease;
  transition: gap 0.3s ease, color 0.3s ease;
}
.arck-cat-bento-all:hover {
  gap: 14px;
  color: var(--main-color-2);
}
.arck-cat-bento-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: 260px 260px 260px;
      grid-template-rows: 260px 260px 260px;
  gap: 16px;
}
/* Card 1: Large 2x2 */
.arck-cat-bento-grid .arck-cat-bento-card:nth-child(1) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
}
/* Card 2: Small 1x1 top-right */
.arck-cat-bento-grid .arck-cat-bento-card:nth-child(2) {
  -ms-grid-column: 3;
  grid-column: 3 / 4;
  -ms-grid-row: 1;
  grid-row: 1 / 2;
}
/* Card 3: Small 1x1 middle-right */
.arck-cat-bento-grid .arck-cat-bento-card:nth-child(3) {
  -ms-grid-column: 3;
  grid-column: 3 / 4;
  -ms-grid-row: 2;
  grid-row: 2 / 3;
}
/* Card 4: Small 1x1 bottom-left */
.arck-cat-bento-grid .arck-cat-bento-card:nth-child(4) {
  -ms-grid-column: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 3;
  grid-row: 3 / 4;
}
/* Card 5: Wide 2x1 bottom-right */
.arck-cat-bento-grid .arck-cat-bento-card:nth-child(5) {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / 4;
  -ms-grid-row: 3;
  grid-row: 3 / 4;
}
/* Extra cards fallback */
.arck-cat-bento-grid .arck-cat-bento-card:nth-child(n+6) {
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-row-span: 1;
  grid-row: span 1;
}
.arck-cat-bento-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: #d8dce0;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.arck-cat-bento-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}
.arck-cat-bento-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.arck-cat-bento-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.arck-cat-bento-card:hover .arck-cat-bento-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.arck-cat-bento-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 1;
  padding: 24px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), to(rgba(0, 0, 0, 0.82)));
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.82));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.arck-cat-bento-info {
  position: relative;
  z-index: 1;
}
.arck-cat-bento-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.arck-cat-bento-card:nth-child(1) .arck-cat-bento-info h3 {
  font-size: 28px;
}
.arck-cat-bento-products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 4px 12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.arck-cat-bento-products li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  padding-left: 10px;
  white-space: nowrap;
}
.arck-cat-bento-products li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--main-color-2);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.arck-cat-bento-card:hover .arck-cat-bento-products {
  max-height: 80px;
  opacity: 1;
  margin-top: 4px;
}
.arck-cat-bento-card:nth-child(1):hover .arck-cat-bento-products {
  max-height: 100px;
}
.arck-cat-bento-cta {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  font-size: 14px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  -webkit-transition: background 0.35s ease, -webkit-transform 0.35s ease;
  transition: background 0.35s ease, -webkit-transform 0.35s ease;
  transition: background 0.35s ease, transform 0.35s ease;
  transition: background 0.35s ease, transform 0.35s ease, -webkit-transform 0.35s ease;
}
.arck-cat-bento-card:hover .arck-cat-bento-cta {
  background: var(--main-color-2);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
/* Responsive */
@media (max-width: 991px) {
  .arck-cat-bento-grid {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 220px 220px 220px 220px;
        grid-template-rows: 220px 220px 220px 220px;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
  .arck-cat-bento-card:nth-child(1) .arck-cat-bento-info h3 {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .arck-cat-bento {
    padding: 50px 0 40px;
  }
  .arck-cat-bento-grid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: auto;
        grid-template-rows: 240px 200px 200px 200px 200px;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(n) {
    grid-column: 1 / 2;
    grid-row: auto;
  }
  .arck-cat-bento-grid .arck-cat-bento-card:nth-child(1) {
    grid-row: 1 / 2;
  }
  .arck-cat-bento-products {
    max-height: 80px;
    opacity: 1;
  }
}

/* ============================================
   arck-category - Product Category Section
   ============================================ */
.arck-category {
  padding: 90px 0;
  background-color: #f8f9fc;
}

.arck-category-head {
  margin-bottom: 48px;
  gap: 20px;
}

.arck-category-title h2 {
  font-size: 36px;
  line-height: 1.3;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

.arck-category-title h2 span {
  color: #0d47a1;
}

.arck-category-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background-color: #0d47a1;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.arck-category-more-btn i {
  margin-left: 8px;
}

.arck-category-more-btn:hover {
  background-color: #0a3a85;
  color: #ffffff;
  text-decoration: none;
}

/* Grid Layout - CSS Grid 实现自适应比例 */
.arck-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.arck-category-card {
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.arck-category-card:hover {
  box-shadow: 0 12px 32px rgba(13, 71, 161, 0.08);
}

/* Hero Card (第一个大图卡) */
.arck-category-card--hero {
  min-height: 420px;
  padding: 0;
  border: none;
}

.arck-category-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.arck-category-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arck-category-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 100%);
}

.arck-category-card__hero-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 28px;
}

.arck-category-card__hero-content h3 {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.arck-category-card__hero-content h3 i {
  font-size: 16px;
}

/* Info Card (信息卡片) */
.arck-category-card--info {
  padding: 28px 24px 24px;
  gap: 16px;
  min-height: 420px;
}

.arck-category-card__info-wrap {
  flex: 1;
}

.arck-category-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background-color: #e8f0fc;
  padding: 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arck-category-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.arck-category-card__text h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
}

.arck-category-card__text p {
  font-size: 14px;
  line-height: 1.7;
  color: #5a6175;
  margin: 0;
}

.arck-category-card__img {
  width: 100%;
  flex: 1;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.arck-category-card__img img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

.arck-category-card__link {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #0d47a1;
  text-decoration: none;
  padding-top: 4px;
  transition: color 0.3s ease;
}

.arck-category-card__link i {
  margin-left: 6px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.arck-category-card__link:hover {
  color: #0a3a85;
  text-decoration: none;
}

.arck-category-card__link:hover i {
  transform: translateX(3px);
}

/* ========= Responsive - 自适应断点 ========= */

/* 桌面小屏 / 平板横屏: 4列 -> 4列（保持，但缩小间距） */
@media (max-width: 1199px) {
  .arck-category {
    padding: 64px 0;
  }
  .arck-category-title h2 {
    font-size: 32px;
  }
  .arck-category-grid {
    gap: 20px;
  }
  .arck-category-card--hero,
  .arck-category-card--info {
    min-height: 380px;
  }
}

/* 平板: 4列 -> 2列 */
@media (max-width: 991px) {
  .arck-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .arck-category-card--hero {
    grid-column: span 2;
    min-height: 300px;
  }
  .arck-category-card--info {
    min-height: 360px;
  }
  .arck-category-title h2 {
    font-size: 28px;
  }
  .arck-category-head {
    margin-bottom: 36px;
  }
}

/* 手机横屏 / 小平板: 2列 -> 1列 */
@media (max-width: 767px) {
  .arck-category {
    padding: 48px 0;
  }
  .arck-category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .arck-category-card--hero {
    grid-column: span 1;
    min-height: 280px;
  }
  .arck-category-card--info {
    min-height: auto;
  }
  .arck-category-title h2 {
    font-size: 24px;
  }
  .arck-category-head {
    margin-bottom: 28px;
    align-items: flex-start;
  }
  .arck-category-card__text h3 {
    font-size: 18px;
  }
  .arck-category-card__hero-content h3 {
    font-size: 20px;
  }
}

/* 手机竖屏 */
@media (max-width: 479px) {
  .arck-category {
    padding: 40px 0;
  }
  .arck-category-title h2 {
    font-size: 20px;
  }
  .arck-category-grid {
    gap: 12px;
  }
  .arck-category-card--info {
    padding: 20px 18px 18px;
  }
  .arck-category-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }
  .arck-category-card__hero-content {
    padding: 20px;
  }
}

/* ======================================================
   arck-category-card--info hover -> hero style animation
   ------------------------------------------------------
   方案：纯 opacity 淡入淡出，无 position/布局切换
   - 背景大图(__bg-img) absolute 铺满，常态透明，hover 淡入
   - 渐变遮罩淡入
   - 图标/描述/链接/flow产品图 淡出
   - h3 变白 + 微下移 + 箭头淡入
   ====================================================== */

/* 背景图层：absolute 铺满全卡，常态透明 */
.arck-category-card--info .arck-category-card__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.arck-category-card--info .arck-category-card__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.arck-category-card--info:hover .arck-category-card__bg-img {
  opacity: 1;
}

/* 渐变遮罩 */
.arck-category-card--info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.arck-category-card--info:hover::before {
  opacity: 1;
}

/* 内容层 z-index 确保在遮罩之上 */
.arck-category-card--info .arck-category-card__info-wrap,
.arck-category-card--info .arck-category-card__img,
.arck-category-card--info .arck-category-card__link {
  position: relative;
  z-index: 2;
}

/* 卡片 hover 去边框 */
.arck-category-card--info {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.arck-category-card--info:hover {
  border-color: transparent;
}

/* 统一淡出过渡 */
.arck-category-card--info .arck-category-card__icon,
.arck-category-card--info .arck-category-card__text p,
.arck-category-card--info .arck-category-card__img,
.arck-category-card--info .arck-category-card__link {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* hover：图标/描述/产品图/链接 淡出 */
.arck-category-card--info:hover .arck-category-card__icon {
  opacity: 0;
  transform: translateY(-12px);
}
.arck-category-card--info:hover .arck-category-card__text p {
  opacity: 0;
  transform: translateY(-8px);
}
.arck-category-card--info:hover .arck-category-card__img {
  opacity: 0;
}
.arck-category-card--info:hover .arck-category-card__link {
  opacity: 1;
  transform: translateY(8px);
  color: #ffffff;
}

.arck-category-card--info:hover .arck-category-card__link

/* h3 标题变白 + 微下移 */
.arck-category-card--info .arck-category-card__text h3 {
  transition: color 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.arck-category-card--info:hover .arck-category-card__text h3 {
  color: #ffffff;
  transform: translateY(6px);
}

/* 箭头淡入 */
.arck-category-card--info .arck-category-card__text h3::after {
  content: "\f061";
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0;
  opacity: 0;
  white-space: nowrap;
  color: #ffffff;
  transition: opacity 0.35s ease 0.25s, font-size 0.35s ease 0.25s, margin 0.35s ease 0.25s;
}
.arck-category-card--info:hover .arck-category-card__text h3::after {
  opacity: 1;
  font-size: 16px;
  margin-left: 10px;
}

/* ===== 手机端 / 触屏设备 降级 ===== */
@media (hover: none) and (pointer: coarse) {
  .arck-category-card--info .arck-category-card__bg-img,
  .arck-category-card--info::before {
    display: none;
  }
  .arck-category-card--info:hover {
    border-color: #e8eaf0;
  }
  .arck-category-card--info:hover .arck-category-card__icon,
  .arck-category-card--info:hover .arck-category-card__text p,
  .arck-category-card--info:hover .arck-category-card__img,
  .arck-category-card--info:hover .arck-category-card__link {
    opacity: 1;
    transform: none;
  }
  .arck-category-card--info:hover .arck-category-card__text h3 {
    color: #1a1a2e;
    transform: none;
  }
  .arck-category-card--info:hover .arck-category-card__text h3::after {
    display: none;
  }
}

/* ===== Contact Page Styles ===== */

/* Hero section with title and contact cards */
.arck-contact-hero {
  padding: 64px 0 56px;
  background: linear-gradient(180deg, #cde6ff 0%, #ffffff 85%);
  position: relative;
}

.arck-contact-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--main-color-2);
}

.arck-contact-hero .container,
.arck-contact-form-section .container {
  max-width: 1200px;
}

.arck-contact-hero-title {
  font-size: 38px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 40px;
  line-height: 1.2;
  position: relative;
  display: inline-block;
}

.arck-contact-hero-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--main-color-2);
  margin-top: 14px;
  border-radius: 2px;
}

.arck-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.arck-contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 16px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.arck-contact-card:hover {
  transform: translateY(-2px);
}

.arck-contact-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color-2);
  font-size: 28px;
}

.arck-contact-card-body {
  min-width: 0;
}

.arck-contact-card-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 8px;
}

.arck-contact-card-body p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #1a1a2e;
  line-height: 1.5;
  word-break: break-word;
}

/* Form section */
.arck-contact-form-section {
  padding: 56px 0 80px;
  background-color: #fbfbfd;
  border-top: 1px solid #ececef;
  position: relative;
}

.arck-contact-form-wrap {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 48px 56px;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.arck-contact-form-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--main-color-2);
}

.arck-contact-form-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 28px;
}

.arck-contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 5px;
}

.arck-contact-form-field {
  margin-bottom: 20px;
}

.arck-contact-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.arck-contact-form-field input,
.arck-contact-form-field select,
.arck-contact-form-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dcdce0;
  border-radius: 4px;
  font-size: 14px;
  color: #1a1a2e;
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}

/* Input with icon */
.arck-contact-form-input-wrap {
  position: relative;
  display: block;
}

.arck-contact-form-input-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #aaa;
  pointer-events: none;
  z-index: 1;
}

.arck-contact-form-field-icon .arck-contact-form-input-wrap input,
.arck-contact-form-field-icon .arck-contact-form-input-wrap select {
  padding-left: 42px;
}

.arck-contact-form-input-wrap-textarea > i {
  top: 16px;
  transform: none;
}

.arck-contact-form-field-icon .arck-contact-form-input-wrap textarea {
  padding-left: 42px;
  padding-top: 14px;
}

.arck-contact-form-field input:focus,
.arck-contact-form-field select:focus,
.arck-contact-form-field textarea:focus {
  outline: none;
  border-color: var(--main-color-2);
  box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), 0.1);
}

.arck-contact-form-field input::placeholder,
.arck-contact-form-field textarea::placeholder {
  color: #aaa;
}

.arck-contact-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.arck-contact-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.arck-contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background-color: var(--main-color-2);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.arck-contact-form-submit:hover {
  background-color: var(--main-color);
  transform: translateY(-1px);
}

.arck-contact-form-submit i {
  font-size: 14px;
}

/* Responsive */
@media (max-width: 991px) {
  .arck-contact-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .arck-contact-hero-title {
    font-size: 30px;
  }

  .arck-contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 767px) {
  .arck-contact-hero {
    padding: 40px 0 32px;
  }

  .arck-contact-hero-title {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .arck-contact-form-section {
    padding: 32px 0 56px;
  }

  .arck-contact-form-wrap {
    padding: 28px 24px;
  }

  .arck-contact-form-title {
    font-size: 18px;
  }

  .arck-contact-card {
    padding: 20px;
    gap: 14px;
  }
}

/* ===== Contact Page Styles ===== */

/* Hero Section */
.arck-contact-hero-section {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
  min-height: 430px;
}

.arck-contact-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8eaf0 0%, #f5f6fa 50%, #dfe3eb 100%);
  z-index: 0;
}

.arck-contact-hero-bg::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
}

.arck-contact-hero-section .container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}

.arck-contact-hero-content {
  padding: 0 20px;
}

.arck-contact-hero-content h1 {
  font-size: 42px;
  font-weight: 700;
  color: #1a2b4a;
  margin: 0 0 20px;
  line-height: 1.2;
}

.arck-contact-hero-content p {
  font-size: 15px;
  color: #5a6075;
  line-height: 1.7;
  margin: 0;
}

/* Info Cards (3 columns) */
.arck-contact-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 50px;
  padding-bottom: 0;
}

.arck-contact-info-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #ffffff;
  padding: 28px 32px 28px 50px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: -40px;
}

.arck-contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.arck-contact-info-icon {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background-color: var(--main-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}

.arck-contact-info-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1a2b4a;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.arck-contact-info-body p {
  font-size: 16px;
  font-weight: 500;
  color: #3a4055;
  margin: 0;
  line-height: 1.4;
}

/* Body Section */
.arck-contact-body-section {
  padding: 100px 0 80px;
  background-color: #ffffff;
}

.arck-contact-body-section .container {
  max-width: 1200px;
}

/* Intro */
.arck-contact-intro h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1a2b4a;
  margin: 0 0 20px;
  line-height: 1.2;
}

.arck-contact-intro p {
  font-size: 15px;
  color: #5a6075;
  line-height: 1.8;
  margin: 0 0 30px;
}

.arck-contact-social {
  display: flex;
  gap: 12px;
}

.arck-contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #f0f2f7;
  color: #5a6075;
  border-radius: 50%;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.arck-contact-social a:hover {
  background-color: #f5a623;
  color: #ffffff;
}

/* Form Card */
.arck-contact-form-card {
  background-color: var(--main-color);
  border-radius: 12px;
  padding: 48px 44px;
}

.arck-contact-form-card-head {
  text-align: center;
  margin-bottom: 32px;
}

.arck-contact-form-card-head h3 {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.arck-contact-form-card-head p {
  font-size: 14px;
  color: #ffffff;
  margin: 0;
  opacity: 0.85;
}

.arck-contact-form-field {
  margin-bottom: 18px;
}

.arck-contact-form-field input:focus,
.arck-contact-form-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 43, 74, 0.15);
}

.arck-contact-form-field textarea {
  resize: vertical;
  min-height: 100px;
}

.arck-contact-form-field select,
.arck-contact-form-select {
  width: 100%;
  height: 48px;
  padding: 14px 44px 14px 18px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  color: #1a2b4a;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
}

.arck-contact-form-field select:focus,
.arck-contact-form-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 43, 74, 0.15);
}

.arck-contact-form-field input::placeholder,
.arck-contact-form-field textarea::placeholder {
  color: #8a8f9e;
}

.arck-contact-submit-btn {
  width: 100%;
  padding: 16px 28px;
  background-color: #000000;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin-top: 8px;
}

.arck-contact-submit-btn:hover {
  background-color: #0f1c35;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 991px) {
  .arck-contact-hero-section {
    padding: 60px 0 0;
  }

  .arck-contact-hero-content h1 {
    font-size: 32px;
  }

  .arck-contact-info-cards {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .arck-contact-info-card {
    margin-bottom: 0;
  }

  .arck-contact-body-section {
    padding: 60px 0;
  }

  .arck-contact-intro h2 {
    font-size: 28px;
    margin-top: 20px;
  }

  .arck-contact-form-card {
    padding: 36px 28px;
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .arck-contact-hero-content h1 {
    font-size: 26px;
  }

  .arck-contact-info-card {
    padding: 20px 20px 20px 40px;
    gap: 14px;
  }

  .arck-contact-info-icon {
    width: 44px;
    height: 44px;
    font-size: 16px;
    left: -22px;
  }

  .arck-contact-intro h2 {
    font-size: 24px;
  }

  .arck-contact-form-card {
    padding: 28px 20px;
  }

  .arck-contact-form-card-head h3 {
    font-size: 22px;
  }
}

/* ======================================================
   Product Category Sidebar List
   ====================================================== */

.cat-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-sidebar__item {
  border-bottom: 1px solid #ececec;
}
.cat-sidebar__item:last-child {
  border-bottom: none;
}
.cat-sidebar__row {
  position: relative;
}
.cat-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 14px 0px;
  font-size: 16px;
  font-weight: 500;
  color: #2a2a2a !important;
  text-decoration: none;
  transition: color 0.25s ease;
}
.cat-sidebar__link:hover {
  color: #0a3a85;
}
.cat-sidebar__label {
  position: relative;
}
.cat-sidebar__label::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0a3a85;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cat-sidebar__link:hover .cat-sidebar__label::before,
.cat-sidebar__item--active > .cat-sidebar__row > .cat-sidebar__link .cat-sidebar__label::before {
  opacity: 1;
}
.cat-sidebar__arrow {
  font-size: 14px;
  color: #555;
  transition: transform 0.25s ease, color 0.25s ease;
  margin-right: 8px;
}
.cat-sidebar__link:hover .cat-sidebar__arrow,
.cat-sidebar__item--active > .cat-sidebar__row > .cat-sidebar__link .cat-sidebar__arrow {
  color: #0a3a85;
  transform: translateX(4px);
}
.cat-sidebar__item--active > .cat-sidebar__row > .cat-sidebar__link .cat-sidebar__label {
  color: #0a3a85;
  font-weight: 600;
}
/* toggle */
.cat-sidebar__toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  z-index: 2;
}
.cat-sidebar__toggle:hover {
  color: #ff6b35;
}
.cat-sidebar__toggle i {
  font-size: 14px;
  transition: transform 0.25s ease;
}
.cat-sidebar__toggle.open i {
  transform: rotate(45deg);
  color: var(--main-color);
}
/* sub list */
.cat-sidebar__sub {
  display: none;
  background: #fafafa;
}
.cat-sidebar__sub.open {
  display: block;
}
.cat-sidebar__sub .cat-sidebar__list .cat-sidebar__link {
  padding-left: 28px;
  font-size: 14px;
  font-weight: 400;
  justify-content: stretch;
}
.cat-sidebar__sub .cat-sidebar__sub .cat-sidebar__list .cat-sidebar__link {
  padding-left: 44px;
  font-size: 13px;
}
.cat-sidebar__sub .cat-sidebar__label::before {
  display: none;
}

.cat-sidebar__sub .cat-sidebar__item--active > .cat-sidebar__row > .cat-sidebar__link .cat-sidebar__label::before {
  display: inline-block;
  opacity: 1;
}
/* widget title underline style */
.widget-title--underline {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 0;
      padding-left: 45px;
}
.widget-title--underline::after {
  content: "";
  position: absolute;
     width: 4px;
    height: 4px;
    top: 12px;
    left: 24px;
    border-radius: 100%;
  background: #0a3a85;
}
.widget-title--underline::before {
  content: "";
  position: absolute;
      top: 12px;
      width: 20px;
height: 3px;
border-radius: 20px;
    left: 0;
  background: #0a3a85;
}

/* ======================================================
   Solutions Page Styles
   ====================================================== */
/* Hero */
.solutions-hero-section {
  background: #fff;
  padding: 70px 0 50px;
}
.solutions-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.solutions-hero-left {
  max-width: 580px;
}
.solutions-hero-left .hero-sub-title {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 3px;
  color: #0d47a1;
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.solutions-hero-left h2 {
  font-size: 40px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 18px;
  line-height: 1.25;
}
.solutions-hero-left p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 28px;
}
.hero-scroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 2px solid #0d47a1;
  border-radius: 30px;
  color: #0d47a1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.hero-scroll-btn:hover {
  background: #0d47a1;
  color: #fff;
}
.hero-scroll-btn i {
  font-size: 12px;
  animation: bounceDown 2s infinite;
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
/* Hero Stats */
.solutions-hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.hero-stat-item {
  text-align: center;
}
.hero-stat-num {
  font-size: 36px;
  font-weight: 800;
  color: #0d47a1;
  line-height: 1;
  margin-bottom: 6px;
}
.hero-stat-label {
  font-size: 12px;
  color: #999;
  letter-spacing: 1px;
}
.hero-stat-divider {
  width: 1px;
  height: 50px;
  background: #e0e0e0;
}

/* === Product Description: Modern Web Layout === */
.shop-details-description-text {
  counter-reset: sec;
}
.shop-details-description-text section {
  margin: 0 0 32px;
}


/* H1 / H2 / H3 headings */
.shop-details-description-text h1 {
  font-size: 26px; color: var(--main-color);
  border-bottom: 3px solid var(--main-color);
  padding-bottom: 12px; margin: 0 0 8px;
}
.shop-details-description-text h2 {
  counter-increment: sec;
  font-size: 22px;
  color: var(--main-color);
  margin: 0 0 24px;
  padding: 10px 0 14px 56px;
  position: relative;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex; align-items: center;
  /* double underline: solid 1px full-width + gradient 3px short */

  background-size: 80px 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  border-bottom: 1px solid #eef1f6;
}
/* chip-label style numeric badge */
.shop-details-description-text h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  background: var(--main-color);
  color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px #fff inset,
    0 0 0 2px var(--main-color),
    3px 3px 0 rgba(1, 54, 104, 0.18);
}
/* small triangle pointer extending from the chip to the heading text */
.shop-details-description-text h2::after {
  content: '';
  position: absolute; left: 40px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 8px solid var(--main-color);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.shop-details-description-text h3 {
  font-size: 17px; color: var(--main-color);
  margin: 0 0 8px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.shop-details-description-text h3::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--main-color-2, #ff6b35); flex-shrink: 0;
}

/* Paragraphs */
.shop-details-description-text p { margin: 10px 0; font-size: 15px; line-height: 1.8; color: #333; }
.shop-details-description-text p span { font-size: inherit !important; color: inherit !important; }

/* Key-features banner image */
.shop-details-description-text .kf-banner { margin: 0 0 24px; border-radius: 12px; overflow: hidden; }
.shop-details-description-text .kf-banner img {
  width: 100%; margin: 0; border: none; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 40, 82, 0.12);
}

/* Features grid */
.shop-details-description-text .kf-wrap {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 0; padding: 0;
}
@media screen and (max-width: 768px) {
  .shop-details-description-text .kf-wrap {
    grid-template-columns: 1fr;
  }
}
.shop-details-description-text .features .feature {
  padding: 14px 16px; background: linear-gradient(145deg, #f7f9fc, #fff);
  border: 1px solid #eaeef5; border-radius: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative; overflow: hidden;
  margin-bottom: 10px;
}
.shop-details-description-text .features .feature::before {
  content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: linear-gradient(180deg, var(--main-color), var(--main-color-2, #ff6b35));
}
.shop-details-description-text .features .feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(15, 40, 82, 0.12);
  border-color: var(--main-color);
}
.shop-details-description-text .features .feature h3 { margin: 0 0 6px; font-size: 15px; }
.shop-details-description-text .features .feature h3::before { display: none; }
.shop-details-description-text .features .feature p { margin: 0; font-size: 13px; color: #555; line-height: 1.55; }

/* Application gallery */
.shop-details-description-text .app-gallery {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 20px;
}
.shop-details-description-text .app-gallery img {
  flex: 1 1 280px; max-width: calc(33% - 20px); margin: 0;
  border-radius: 10px; border: 1px solid #eaeef5;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  object-fit: cover;
}
.shop-details-description-text .app-gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(15, 40, 82, 0.15);
}

/* Checkmark lists */
.shop-details-description-text ul.checks {
  list-style: none; margin: 0; padding: 0;
  grid-template-columns: 1fr 1fr; gap: 0 24px;
}
.shop-details-description-text ul.checks li {
  margin: 0; padding: 12px 8px 12px 18px; list-style: none;
  position: relative;
  display: flex; align-items: center;
  border-bottom: 1px dashed #eaeef5;
  transition: padding-left 0.25s ease, background 0.25s ease;
}
/* left accent bar */
.shop-details-description-text ul.checks li::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 60%;
  background: var(--main-color);
  border-radius: 2px;
  transition: height 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.shop-details-description-text ul.checks li:hover {
  padding-left: 22px;
  background: linear-gradient(90deg, rgba(234,241,248,0.6) 0%, transparent 80%);
}
.shop-details-description-text ul.checks li:hover::before {
  height: 80%;
  background: linear-gradient(180deg, var(--main-color), #02529a);
  box-shadow: 0 0 8px rgba(1, 54, 104, 0.45);
}
.shop-details-description-text ul.checks li:hover::after {
  opacity: 1;
  transform: scale(1.15);
}
.shop-details-description-text ul.checks li p { margin: 0; font-size: 14px; color: #333; line-height: 1.6; }
.shop-details-description-text ul.checks li p span { font-size: inherit !important; color: inherit !important; }

/* Generic lists (fallback for CMS content) */
.shop-details-description-text ul:not(.checks), .shop-details-description-text ol {
  margin: 10px 0 10px 24px;
}
.shop-details-description-text ul:not(.checks) li, .shop-details-description-text ol li {
  margin: 6px 0; font-size: 15px; color: #333;
}
.shop-details-description-text ul:not(.checks) li p span, .shop-details-description-text ol li p span {
  font-size: inherit !important; color: inherit !important;
}

/* Spec tables (supports both .spec and .spec-table classes) */
.shop-details-description-text table.spec,
.shop-details-description-text table.spec-table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 20px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 40, 82, 0.06);
}
.shop-details-description-text table.spec th,
.shop-details-description-text table.spec td,
.shop-details-description-text table.spec-table th,
.shop-details-description-text table.spec-table td {
  padding: 12px 16px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid #eaeef5; color: #333; font-size: 14px;
}
.shop-details-description-text table.spec thead th,
.shop-details-description-text table.spec-table thead th {
  background: var(--main-color); color: #fff; font-weight: 600; font-size: 14px;
  letter-spacing: 0.3px; border-bottom: none;
}
.shop-details-description-text table.spec tbody tr:nth-child(even),
.shop-details-description-text table.spec-table tbody tr:nth-child(even) {
  background: #f7f9fc;
}
.shop-details-description-text table.spec tbody tr:hover,
.shop-details-description-text table.spec-table tbody tr:hover {
  background: var(--main-color-tint, #eef3fb);
}
.shop-details-description-text table.spec td:first-child,
.shop-details-description-text table.spec-table td:first-child,
.shop-details-description-text table.spec-table td.item-cell {
  font-weight: 600; color: var(--main-color); background: #f7f9fc; width: 28%;
}
.shop-details-description-text table.spec td:first-child + td,
.shop-details-description-text table.spec-table td.item-cell + td {
  background: #fff;
}

/* Generic images */
.shop-details-description-text img {
  max-width: 100%; height: auto; display: block; margin: 16px 0;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 991px) {
  .shop-details-description-text .features { grid-template-columns: repeat(2, 1fr); }
  .shop-details-description-text .app-gallery img { max-width: calc(33.33% - 14px); flex: 1 1 140px; }
}
@media (max-width: 640px) {
  .shop-details-description-text section { padding: 20px 16px; margin-bottom: 24px; }
  .shop-details-description-text .features { grid-template-columns: 1fr; }
  .shop-details-description-text ul.checks { grid-template-columns: 1fr; }
  .shop-details-description-text .app-gallery img { max-width: calc(50% - 14px); }
}
@media print { .shop-details-description-text .container { box-shadow: none; } }

/* === CTA Contact Section === */
.arck-cta-contact {
  position: relative;
  padding: 80px 0 70px;
  background: linear-gradient(135deg, #013668 0%, #02529a 50%, #013668 100%);
  overflow: hidden;
  color: #fff;
}
.arck-cta-contact::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 45%; height: 100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 20px,
      rgba(255,255,255,0.025) 20px,
      rgba(255,255,255,0.025) 22px
    );
  pointer-events: none;
}
.arck-cta-contact::after {
  content: '';
  position: absolute; top: -2px; right: 0;
  width: 0; height: 0;
  border-top: 80px solid transparent;
  border-right: 80px solid #fff;
  opacity: 0.04;
  pointer-events: none;
}
.arck-cta-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
}
.arck-cta-text {
  flex: 1;
  max-width: 680px;
}
.arck-cta-sub {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  opacity: 0.75;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 3px;
}
.arck-cta-text h2 {
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 18px;
  line-height: 1.25;
}
.arck-cta-text p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.80);
  margin: 0;
}

.arck-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 60px;
}
.arck-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.arck-cta-btn--primary {
  background: #fff;
  color: var(--main-color) !important;
  border: 2px solid #fff;
}
.arck-cta-btn--primary:hover {
  background: transparent;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.arck-cta-btn--phone {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.50);
}
.arck-cta-btn--phone:hover {
  background: #fff;
  color: var(--main-color);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.arck-cta-btn i {
  font-size: 16px;
}

.arck-cta-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30) 30%, rgba(255,255,255,0.30) 70%, transparent);
  margin: 40px 0 30px;
  position: relative;
  z-index: 2;
}

.arck-cta-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}
.arck-cta-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}
a.arck-cta-card:hover {
  text-decoration: none;
  color: inherit;
}
.arck-cta-card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-3px);
}
.arck-cta-card-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
}
.arck-cta-card-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.arck-cta-card-body p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

/* CTA Responsive */
@media (max-width: 991px) {
  .arck-cta-inner { flex-direction: column; gap: 30px; }
  .arck-cta-actions { flex-direction: row; padding-top: 0; }
  .arck-cta-btn { flex: 1; }
  .arck-cta-text h2 { font-size: 32px; }
  .arck-cta-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .arck-cta-contact { padding: 50px 0 40px; }
  .arck-cta-text h2 { font-size: 26px; }
  .arck-cta-actions { flex-direction: column; }
  .arck-cta-divider { margin: 30px 0 24px; }
  .arck-cta-card { padding: 18px 16px; }
}
/* =====================
All Buttons - Pill (fully rounded ends)
===================== */
button,
input[type="button"],
input[type="submit"],
.btn,
a.btn,
[class$="-btn"],
[class$="-btn"] a,
[class^="btn-"] {
  border-radius: 999px !important;
}
/* =====================
Blue Top Bar
===================== */
.archx-topbar {
  position: relative;
  z-index: 99;
  padding: 7px 0;
  color: #ffffff;
  font-size: 14px;
  background: linear-gradient(90deg, var(--main-color) 0%, var(--main-color-2) 100%);
}

@media (max-width: 991px) {
  .archx-topbar { z-index:0 !important }
}

.archx-topbar a { color: #ffffff; text-decoration: none; }
.archx-topbar-contact .archx-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 28px;
  opacity: 0.92;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.archx-topbar-contact .archx-topbar-item i { font-size: 13px; }
.archx-topbar-contact .archx-topbar-item:hover { opacity: 1; }
/* search */
.archx-topbar-search { position: relative; margin-right: 18px; }
.archx-topbar-search-input {
  position: absolute;
  right: 30px;
  top: 50%;
  width: 0;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background-color: #ffffff;
  color: #333333;
  font-size: 13px;
  outline: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.archx-topbar-search.open .archx-topbar-search-input {
  width: 200px;
  padding: 0 14px;
  opacity: 1;
  visibility: visible;
}
.archx-topbar-search-input::-webkit-input-placeholder { color: #999999; }
.archx-topbar-search-input:-moz-placeholder { color: #999999; }
.archx-topbar-search-input::-moz-placeholder { color: #999999; }
.archx-topbar-search-input:-ms-input-placeholder { color: #999999; }
.archx-topbar-search-btn {
  position: relative;
  width: 30px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.archx-topbar-search-btn:hover { opacity: 0.8; }
/* language */
.archx-topbar-lang { position: relative; }
.archx-topbar-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: none;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.archx-topbar-lang-toggle:hover { opacity: 0.8; }
.archx-topbar-lang-toggle .lang-caret {
  font-size: 10px;
  -webkit-transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
}
.archx-topbar-lang.open .lang-caret {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.archx-topbar-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 999;
  min-width: 150px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 8px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: none;
}
.archx-topbar-lang.open .archx-topbar-lang-menu { display: block; }
.archx-topbar-lang-menu li a {
  display: block;
  padding: 8px 16px;
  color: #333333;
  font-size: 13px;
  white-space: nowrap;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}
.archx-topbar-lang-menu li a:hover {
  color: var(--main-color);
  background-color: #f3f5f9;
}
/* sticky: hide top bar */
.archx-header-section.sticky_on .archx-topbar { display: none !important; }
/* responsive */
@media (max-width: 991px) {
  .archx-topbar-search.open .archx-topbar-search-input { width: 160px; }
  .archx-topbar-contact .archx-topbar-item span { display: none; }
}
@media (max-width: 767px) {
  .archx-topbar { padding: 6px 0; }
  .archx-topbar-inner {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px 16px;
  }
  .archx-topbar-search { display: none; }
  .archx-topbar-contact .archx-topbar-item { margin-right: 10px; }
}
/* =====================
Home Hero - Pure Image Carousel
===================== */
#arck-slider-1.arck-slider-section {
  margin-top: 141px;
  padding: 0;
}
#arck-slider-1 .arck-main-slider-item { padding: 0; }
#arck-slider-1 .archx-slider-area img {
  display: block;
  width: 100%;
  max-height: 800px;
  object-fit: cover;
}
@media (max-width: 765px) {
  #arck-slider-1.arck-slider-section { margin-top: 121px; }
}
/* =====================
Home Hero - Slider Arrows
===================== */
#arck-slider-1 .arck-slider-area .slick-prev,
#arck-slider-1 .arck-slider-area .slick-next {
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
#arck-slider-1 .arck-slider-area .slick-prev::before,
#arck-slider-1 .arck-slider-area .slick-next::before {
  content: none;
}
#arck-slider-1 .arck-slider-area .slick-prev { left: 40px; }
#arck-slider-1 .arck-slider-area .slick-next { right: 40px; }
#arck-slider-1 .arck-slider-area .slick-prev:hover,
#arck-slider-1 .arck-slider-area .slick-next:hover {
  border-color: var(--main-color);
  background-color: var(--main-color);
  color: #ffffff;
}
@media (max-width: 765px) {
  #arck-slider-1 .arck-slider-area .slick-prev,
  #arck-slider-1 .arck-slider-area .slick-next {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  #arck-slider-1 .arck-slider-area .slick-prev { left: 15px; }
  #arck-slider-1 .arck-slider-area .slick-next { right: 15px; }
}
/* =====================
Top Cards - Overlapping Slider Bottom
===================== */
.archx-top-cards {
  position: relative;
  z-index: 0;
  margin-top: -30px;
}

@media (max-width: 765px) {
  .archx-top-cards { margin-top: 30px; }
}

.archx-top-cards .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.archx-top-cards-inner {
  display: -webkit-flex;
  display: flex;
  gap: 20px;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 1425px;
  margin: 0 auto;
}
.archx-top-card {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 380px;
  height: 60px;
  padding: 0 25px;
  background: linear-gradient(90deg, var(--main-color) 0%, var(--main-color-2) 100%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color 0.25s;
  transition: background-color 0.25s;
}
.archx-top-card-arrow {
  font-size: 18px;
  -webkit-transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
}
.archx-top-card:hover {
  background: #013668;
  color: #ffffff;
}
.archx-top-card:hover i {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}
@media (max-width: 1199px) {
  .archx-top-card { width: 320px; }
}
@media (max-width: 991px) {
  .archx-top-cards-inner {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .archx-top-card { width: 280px; }
}
@media (max-width: 575px) {
  .archx-top-cards-inner {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
  }
  .archx-top-card { width: 380px; max-width: 100%; }
}

/* ===== Home Hero Title ===== */
.archx-home-hero-title {
  padding: 80px 0 50px;
}
.archx-home-hero-title-text {
  font-size: 78px;
  line-height: 1.15;
  font-weight: 300;
  color: var(--black-color);
  margin: 0;
}
.archx-home-hero-title-text span {
  color: var(--main-color-2);
}
@media (max-width: 991px) {
  .archx-home-hero-title {
    padding: 50px 0 15px;
  }
  .archx-home-hero-title-text {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .archx-home-hero-title-text {
    font-size: 30px;
  }
}

/* ===== Home Featured (products + intro) ===== */
.archx-home-featured {
  padding: 40px 0 20px;
}
.archx-home-featured-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  -webkit-align-items: center;
  align-items: center;
}
.archx-home-featured-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.archx-home-featured-product {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(1, 54, 104, 0.06), 0 8px 28px rgba(1, 54, 104, 0.06);
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.35s, box-shadow 0.35s;
  transition: transform 0.35s, box-shadow 0.35s;
}
.archx-home-featured-product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--main-color) 0%, var(--main-color-2) 100%);
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.archx-home-featured-product:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(1, 54, 104, 0.10), 0 16px 40px rgba(1, 54, 104, 0.14);
}
.archx-home-featured-product:hover::before {
  opacity: 1;
}
.archx-home-featured-product-img {
  -webkit-flex: 0 0 150px;
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 12px;
}
.archx-home-featured-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.archx-home-featured-product:hover .archx-home-featured-product-img img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
.archx-home-featured-product-info {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.archx-home-featured-product-info .archx-home-featured-product-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--main-color-2);
  margin: 0 0 6px;
}
.archx-home-featured-product-model {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.3;
  color: var(--black-color);
  margin: 0 0 14px;
}
.archx-home-featured-product-arrow {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--main-color-tint);
  color: var(--main-color);
  font-size: 14px;
  -webkit-transition: background 0.35s, color 0.35s, -webkit-transform 0.35s;
  transition: background 0.35s, color 0.35s, transform 0.35s;
}
.archx-home-featured-product:hover .archx-home-featured-product-arrow {
  background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-2) 100%);
  color: #ffffff;
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}
.archx-home-featured-right {
  padding-right: 60px;
}
.archx-home-featured-right h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--black-color);
  margin: 0 0 18px;
}
.archx-home-featured-right p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--body-color);
  margin: 0 0 30px;
}
.archx-featured-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--main-color-2);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.archx-featured-btn:hover {
  background: var(--main-color);
  color: #ffffff;
}
@media (max-width: 991px) {
  .archx-home-featured-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .archx-home-featured-right {
    padding-right: 0;
  }
  .archx-home-featured {
    padding: 30px 0 10px;
  }
}
@media (max-width: 765px) {
  .archx-home-featured-left {
    grid-template-columns: 1fr;
  }
  .archx-home-featured-product {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .archx-home-featured-product-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
      -webkit-flex: 0 0 380px;
    flex: 0 0 380px;
  }
  .archx-home-featured-right h2 {
    font-size: 28px;
  }
}

/* ===== Recommended Products ===== */
.archx-rec-products {
  padding: 80px 0;
  background: #ffffff;
}
.archx-rec-products .archx-section-title {
  padding-bottom: 0;
}
.archx-rec-products .archx-section-title h2 {
  font-size: 60px;
  font-weight: 300;
}
.archx-rec-products .archx-section-title h2 span {
  font-weight: 300;
}
.archx-rec-products .archx-section-title h2 span::before {
  content: none;
}
.archx-rec-products .archx-section-title p {
  font-size: 18px;
  line-height: 1.7;
  margin-top: 15px;
}
.archx-rec-cats {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 18px;
  margin: 45px 0 50px;
}

.archx-rec-cat {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;
  padding: 26px 34px;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.archx-rec-cat:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}
.archx-rec-cat-icon {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  background: var(--main-color-tint);
  color: var(--main-color);
  font-size: 26px;
  border-radius: 14px;
}
.archx-rec-cat-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.archx-rec-cat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--black-color);
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.archx-rec-cat:hover .archx-rec-cat-name {
  color: var(--main-color);
}
.archx-rec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.archx-rec-item {
  position: relative;
  display: block;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(1, 54, 104, 0.04), 0 4px 14px rgba(1, 54, 104, 0.04);
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.35s, box-shadow 0.35s;
  transition: transform 0.35s, box-shadow 0.35s;
}
.archx-rec-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--main-color) 0%, var(--main-color-2) 100%);
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  z-index: 2;
}
.archx-rec-item:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(1, 54, 104, 0.06), 0 10px 24px rgba(1, 54, 104, 0.08);
}
.archx-rec-item:hover::before {
  opacity: 1;
}
.archx-rec-item-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.archx-rec-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.archx-rec-item:hover .archx-rec-item-img img {
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}
.archx-rec-item-info {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 10px;
  padding: 22px 18px;
}
.archx-rec-item-info h3 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--black-color);
  margin: 0;
  min-height: 43.2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.archx-rec-item:hover .archx-rec-item-info h3 {
  color: var(--main-color);
}
.archx-rec-item-arrow {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex: 0 0 34px;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--main-color-tint);
  color: var(--main-color);
  font-size: 14px;
  -webkit-transition: background 0.35s, color 0.35s, -webkit-transform 0.35s;
  transition: background 0.35s, color 0.35s, transform 0.35s;
}
.archx-rec-item:hover .archx-rec-item-arrow {
  background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-2) 100%);
  color: #ffffff;
  -webkit-transform: translateX(2px);
  transform: translateX(2px);
}
@media (max-width: 1199px) {
  .archx-rec-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .archx-rec-products {
    padding: 60px 0;
  }
  .archx-rec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .archx-rec-grid {
    grid-template-columns: 1fr;
  }
  .archx-rec-cats {
    gap: 12px;
    display: grid;
grid-template-columns: repeat(2, 1fr);
  }
    .archx-rec-cats .archx-rec-cat {
      padding: 10px 0;;

    }
}

/* ===== About section image caption ===== */
.arck-about-img-wrapper .inner-img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.arck-about-img-wrapper .inner-img img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 0 0 auto;
}
.arck-about-img-wrapper .about-img-text {
  position: absolute;
  top: 62%;
  left: 50%;
  width: 200px;
  height: 200px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(circle at 72% 78%, rgba(0, 174, 255, 0.3), transparent 55%),
    linear-gradient(160deg, rgba(12, 48, 92, 0.9), rgba(2, 26, 56, 0.94));
  border: 1px solid rgba(0, 174, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 174, 255, 0.22),
    0 0 28px rgba(0, 174, 255, 0.4),
    0 18px 42px rgba(0, 0, 0, 0.35),
    inset 0 0 42px rgba(0, 174, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-transform: translate(-72%, -50%);
  transform: translate(-72%, -50%);
  -webkit-animation: archx-float-ball 5s ease-in-out infinite;
  animation: archx-float-ball 5s ease-in-out infinite;
  z-index: 2;
}
/* rotating tech arc */
.arck-about-img-wrapper .about-img-arc {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 245deg, rgba(0, 174, 255, 0.95) 300deg, rgba(120, 220, 255, 0.9) 315deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  -webkit-animation: archx-spin-ball 6s linear infinite;
  animation: archx-spin-ball 6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(0, 174, 255, 0.85));
}
/* dashed orbit ring */
.arck-about-img-wrapper .about-img-text::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 174, 255, 0.45);
  -webkit-animation: archx-spin-ball 22s linear infinite reverse;
  animation: archx-spin-ball 22s linear infinite reverse;
}
/* orbiting particles */
.arck-about-img-wrapper .about-img-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #00aeff;
  box-shadow: 0 0 12px rgba(0, 174, 255, 0.95);
  -webkit-animation: archx-orbit-ball 8s linear infinite;
  animation: archx-orbit-ball 8s linear infinite;
  --orbit-r: 106px;
}
.arck-about-img-wrapper .about-img-particle-2 {
  width: 6px;
  height: 6px;
  background: #6fd7ff;
  -webkit-animation: archx-orbit-ball 14s linear infinite reverse;
  animation: archx-orbit-ball 14s linear infinite reverse;
  --orbit-r: 124px;
}
/* inner text */
.arck-about-img-wrapper .about-img-text-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.arck-about-img-wrapper .about-img-text-inner em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #8fdcff;
}
@-webkit-keyframes archx-float-ball {
  0%, 100% {
    -webkit-transform: translate(-72%, -50%) translateY(0);
    transform: translate(-72%, -50%) translateY(0);
  }
  50% {
    -webkit-transform: translate(-72%, -50%) translateY(-12px);
    transform: translate(-72%, -50%) translateY(-12px);
  }
}
@keyframes archx-float-ball {
  0%, 100% {
    -webkit-transform: translate(-72%, -50%) translateY(0);
    transform: translate(-72%, -50%) translateY(0);
  }
  50% {
    -webkit-transform: translate(-72%, -50%) translateY(-12px);
    transform: translate(-72%, -50%) translateY(-12px);
  }
}
@-webkit-keyframes archx-spin-ball {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes archx-spin-ball {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes archx-orbit-ball {
  from {
    -webkit-transform: rotate(0deg) translateX(var(--orbit-r, 128px)) rotate(0deg);
    transform: rotate(0deg) translateX(var(--orbit-r, 128px)) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(var(--orbit-r, 128px)) rotate(-360deg);
    transform: rotate(360deg) translateX(var(--orbit-r, 128px)) rotate(-360deg);
  }
}
@keyframes archx-orbit-ball {
  from {
    -webkit-transform: rotate(0deg) translateX(var(--orbit-r, 128px)) rotate(0deg);
    transform: rotate(0deg) translateX(var(--orbit-r, 128px)) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(var(--orbit-r, 128px)) rotate(-360deg);
    transform: rotate(360deg) translateX(var(--orbit-r, 128px)) rotate(-360deg);
  }
}
@media (max-width: 575px) {
  .arck-about-img-wrapper .about-img-text {
    width: 150px;
    height: 150px;
    top: 65%;
  }
  .arck-about-img-wrapper .about-img-arc {
    inset: -9px;
  }
  .arck-about-img-wrapper .about-img-text::before {
    inset: -20px;
  }
  .arck-about-img-wrapper .about-img-particle {
    --orbit-r: 82px;
  }
  .arck-about-img-wrapper .about-img-particle-2 {
    --orbit-r: 96px;
  }
  .arck-about-img-wrapper .about-img-text-inner {
    font-size: 14px;
  }
  .arck-about-img-wrapper .about-img-text-inner em {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}

/* ===== About section text optimized design ===== */
.arck-about-text-wrapper {
  padding-top: 4px;
}
.arck-about-text-wrapper .sub-title {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;
}
.arck-about-text-wrapper .sub-title::before {
  content: '';
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--main-color-2), var(--main-color));
}
.arck-about-text-wrapper h2 {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--black-color);
  padding: 0;
  margin: 16px 0 20px;
}
.arck-about-text-wrapper .pera-content p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--body-color);
  margin: 0 0 6px;
}
.arck-about-text-wrapper .archx-about-feature-list {
  padding: 8px 0 12px;
}
.arck-about-text-wrapper .archx-about-feature-list li {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 14px;
  padding-left: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--black-color);
  margin-bottom: 14px;
  text-align: left;
}
.arck-about-text-wrapper .archx-about-feature-list li::before {
  content: none;
}
.arck-about-text-wrapper .archx-about-feature-list li i {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex: 0 0 38px;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--main-color-2);
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.14), rgba(1, 54, 104, 0.12));
  border: 1px solid rgba(0, 180, 216, 0.28);
  -webkit-transition: background 0.3s, color 0.3s, -webkit-transform 0.3s;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.arck-about-text-wrapper .archx-about-feature-list li:hover i {
  background: linear-gradient(135deg, var(--main-color-2), var(--main-color));
  color: #ffffff;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.archx-about-btn {
  margin-top: 10px;
}
@media (max-width: 575px) {
  .arck-about-text-wrapper h2 {
    font-size: 28px;
  }
  .arck-about-text-wrapper .pera-content p {
    font-size: 15px;
  }
}

/* ===== About experience stats ===== */
.archx-about-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  padding: 20px 10px;
}
.archx-about-stat {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 10px 18px;
}
.archx-about-stat + .archx-about-stat {
  border-left: 1px solid rgba(0, 180, 216, 0.18);
}
/* icon in thin tech ring */
.archx-about-stat i {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--main-color);
  border: 1px solid rgba(0, 180, 216, 0.4);
  background: rgba(0, 180, 216, 0.06);
  box-shadow: inset 0 0 12px rgba(0, 180, 216, 0.15), 0 0 10px rgba(0, 180, 216, 0.15);
  margin-bottom: 2px;
}
/* glowing dot on icon ring */
.archx-about-stat i::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--main-color-2);
  box-shadow: 0 0 8px var(--main-color-2);
}
.archx-about-stat-num {
  font-size: 42px;
  font-weight:700;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--main-color);
  text-shadow: 0 0 18px rgba(0, 180, 216, 0.35);
}
.archx-about-stat-label {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5a6b7d;
  padding-top: 8px;
}
/* underline accent under label */
.archx-about-stat-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--main-color-2), transparent);
}
@media (max-width: 991px) {
  .archx-about-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .archx-about-stat:nth-child(4) {
    border-left: none;
  }
}
@media (max-width: 575px) {
  .archx-about-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 30px 14px;
    margin-top: 40px;
  }
  .archx-about-stat:nth-child(3),
  .archx-about-stat:nth-child(5) {
    border-left: none;
  }
  .archx-about-stat-num {
    font-size: 34px;
  }
  .archx-about-stat i {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
}

/*Industries Solutions Section*/
/*---------------------------------------------------*/
.archx-industries {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  background: #ffffff;
}
/* full-screen background layer + dark overlay */
.archx-industries-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  z-index: 0;
}
.archx-industries-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
}
/* per-category backgrounds (Welding / Polishing & Sanding / Cutting / Loading & Unloading) */
.archx-industries-bg-1 {
  background-image: url('/static/lianway/img/banner/solutions/Welding-Workstation.jpeg');
}
.archx-industries-bg-2 {
  background-image: url('/static/lianway/img/banner/solutions/Polishing-Sanding-Workstation.webp');
}
.archx-industries-bg-3 {
  background-image: url('/static/lianway/img/banner/solutions/Cutting-Workstation.jpg');
}
.archx-industries-bg-4 {
  background-image: url('/static/lianway/img/banner/solutions/Loading-Unloading-Workstation.jpg');
}
.archx-industries-nav {
  position: relative;
  z-index: 1;
  padding-top: 40px;
}
.archx-industries-title {
  margin: 0;
  padding: 0 12px 28px;
  font-size: 78px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--black-color);
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}
.archx-industries-list {
  position: relative;
  border-top: 1px solid #e5e7eb;
  -webkit-transition: border-color 0.4s;
  transition: border-color 0.4s;
}
.archx-industries-item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 24px;
  height: 148px;
  padding: 0 12px;
  border-bottom: 1px solid #e5e7eb;
  color: var(--black-color);
  text-decoration: none;
  -webkit-transition: color 0.4s, border-color 0.4s, opacity 0.4s;
  transition: color 0.4s, border-color 0.4s, opacity 0.4s;
}
.archx-industries-item-text {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.4;
}
.archx-industries-item-arrow {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
/* hover any list item: full-screen bg, title white, dividers white, others faded */
/* hover each item switches to its own category background */
.archx-industries:has(.archx-industries-item:nth-child(1):hover) .archx-industries-bg-1 {
  opacity: 1;
}
.archx-industries:has(.archx-industries-item:nth-child(2):hover) .archx-industries-bg-2 {
  opacity: 1;
}
.archx-industries:has(.archx-industries-item:nth-child(3):hover) .archx-industries-bg-3 {
  opacity: 1;
}
.archx-industries:has(.archx-industries-item:nth-child(4):hover) .archx-industries-bg-4 {
  opacity: 1;
}
.archx-industries:has(.archx-industries-item:hover) .archx-industries-title {
  color: #ffffff;
}
.archx-industries:has(.archx-industries-item:hover) .archx-industries-list {
  border-top-color: #ffffff;
}
.archx-industries:has(.archx-industries-item:hover) .archx-industries-item {
  color: rgba(255, 255, 255, 0.35);
  border-bottom-color: #ffffff;
}
/* hover current item: pure white + white underline */
.archx-industries:has(.archx-industries-item:hover) .archx-industries-item:hover {
  color: #ffffff;
}
.archx-industries:has(.archx-industries-item:hover) .archx-industries-item:hover::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: #ffffff;
}

@media (max-width: 767px) {
  .archx-industries {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .archx-industries-nav {
    padding-top: 28px;
  }
  .archx-industries-title {
    font-size: 34px;
    padding: 0 8px 20px;
  }
  .archx-industries-item {
    height: auto;
    padding: 16px 8px;
  }
  .archx-industries-item-text {
    font-size: 18px;
  }
}

/* 手机端隐藏 About 图片列 */
@media (max-width: 767px) {
  .archx-about-section .col-lg-5 {
    display: none;
  }
}

/* ===== Home FAQ ===== */
.archx-home-faq {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 100px 0 90px;
}
.archx-home-faq .archx-section-title {
  padding-bottom: 0;
  padding-right: 45px;
}
.archx-home-faq .archx-section-title h2 {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.3;
  color: #0a2540;
  margin-bottom: 20px;
}
.archx-home-faq .archx-section-title h2 span {
  font-weight: 300;
  color: var(--main-color-2);
}
.archx-home-faq .archx-section-title h2 span::before {
  content: none;
}
.archx-home-faq .archx-section-title p {
  font-size: 18px;
  line-height: 1.9;
  color: #5a6b7d;
  margin: 0;
}
.archx-home-faq-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--main-color-2);
  margin-bottom: 24px;
}
.archx-home-faq-label::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--main-color-2);
}
/* accordion cards */
.archx-home-faq .archx-faq-content-wrapper .accordion-item {
  border: 1px solid #e6ecf5;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(10, 37, 64, 0.05);
  margin-bottom: 14px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.archx-home-faq .archx-faq-content-wrapper .accordion-item:hover {
  border-color: rgba(0, 180, 216, 0.45);
  box-shadow: 0 10px 28px rgba(10, 37, 64, 0.09);
}
.archx-home-faq .archx-faq-content-wrapper .accordion-item:first-of-type {
  border: 1px solid #e6ecf5;
  border-radius: 10px;
}
.archx-home-faq .archx-faq-content-wrapper .accordion-button {
  position: relative;
  height: auto;
  min-height: 64px;
  padding: 22px 62px 22px 26px;
  font-size: 17px;
  font-weight: 600;
  color: #0a2540;
  text-align: left;
}
.archx-home-faq .archx-faq-content-wrapper .accordion-button:not(.collapsed) {
  color: var(--main-color-2);
  background-color: transparent;
  box-shadow: none;
}
.archx-home-faq .archx-faq-content-wrapper .accordion-button::after,
.archx-home-faq .archx-faq-content-wrapper .accordion-button:not(.collapsed)::after {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  background-image: none;
  background-color: rgba(0, 180, 216, 0.12);
  color: var(--main-color-2);
  font-size: 13px;
  font-weight: 900;
  font-family: "Font Awesome 5 Pro";
}
.archx-home-faq .archx-faq-content-wrapper .accordion-button:not(.collapsed)::after {
  content: "\f068";
  background-color: var(--main-color-2);
  color: #ffffff;
}
.archx-home-faq .archx-faq-content-wrapper .accordion-body {
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.8;
  color: #5a6b7d;
}
@media (max-width: 991px) {
  .archx-home-faq .archx-section-title {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .archx-home-faq {
    padding: 70px 0 60px;
  }
  .archx-home-faq .archx-section-title {
    padding-bottom: 32px;
  }
  .archx-home-faq .archx-section-title h2 {
    font-size: 28px;
  }
}

/* ===== Footer 优化设计 ===== */
.archx-footer-section .container {
  z-index: 1;
}
/* 氛围：右上/左下青色微光 + 极淡工程网格 */
.archx-footer-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(640px 320px at 92% -12%, rgba(0, 180, 216, 0.14), transparent 70%),
    radial-gradient(520px 280px at -6% 112%, rgba(0, 180, 216, 0.1), transparent 70%);
}
.archx-footer-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 90px 90px;
}
/* 小标题：大写 + 字距 + 青色短杠 */
.archx-footer-content .archx-footer-widget .widget-title {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 20px;
}
.archx-footer-content .archx-footer-widget .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--main-color-2);
}
/* 品牌简介 */
.archx-footer-content .archx-footer-widget .logo-widget .logo-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.9;
  max-width: 300px;
}
/* 菜单链接 hover */
.archx-footer-content .archx-footer-widget .menu-widget {
  padding-left: 0;
}
.archx-footer-content .archx-footer-widget .menu-widget li {
  margin-bottom: 13px;
}
.archx-footer-content .archx-footer-widget .menu-widget li a {
  display: inline-block;
  position: relative;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  -webkit-transition: color 0.3s ease, padding-left 0.3s ease;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.archx-footer-content .archx-footer-widget .menu-widget li a::before {
  content: "\f105";
  position: absolute;
  left: 0;
  top: 50%;
  font-family: "Font Awesome 5 Pro";
  font-size: 12px;
  color: var(--main-color-2);
  opacity: 0;
  -webkit-transform: translate(-10px, -50%);
          transform: translate(-10px, -50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.archx-footer-content .archx-footer-widget .menu-widget li a:hover {
  color: var(--main-color-2);
  padding-left: 20px;
}
.archx-footer-content .archx-footer-widget .menu-widget li a:hover::before {
  opacity: 1;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
/* 社交图标：圆形 + hover 上浮填充 */
.archx-footer-copyright-social {
  margin-top: 28px;
}
.archx-footer-copyright-social li {
  margin-right: 8px;
}
.archx-footer-copyright-social a {
  width: 38px;
  height: 38px;
  margin-left: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.archx-footer-copyright-social a:hover {
  background-color: var(--main-color-2);
  border-color: var(--main-color-2);
  color: #fff;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 180, 216, 0.35);
}
/* 联系方式：图标徽章 */
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.7;
}
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li i {
  width: 34px;
  height: 34px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 34px;
          flex: 0 0 34px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 8px;
  margin-right: 12px;
  margin-top: 2px;
  background: rgba(0, 180, 216, 0.12);
  color: var(--main-color-2);
  font-size: 14px;
}
/* 联系方式链接 */
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li a {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.archx-footer-content .archx-footer-widget .logo-widget .logo-cta-info li a:hover {
  color: var(--main-color-2);
}
/* 版权栏 */
.archx-footer-copyright {
  padding: 28px 0;
}
.archx-footer-copyright-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.archx-footer-copyright-text a {
  color: var(--main-color-2);
}

/* ===== Mega Menu 新结构：分类图标 + 推荐产品 ===== */
.archx-header-section .mega-dropdown .mega-menu-inner-new {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 26px 30px 30px;
}
/* 分类图标 */
.archx-header-section .mega-dropdown .mega-menu-new-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eef2f7;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  min-width: 132px;
  padding: 16px 18px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #ffffff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat:hover {
  border-color: rgba(0, 180, 216, 0.5);
  box-shadow: 0 10px 24px rgba(10, 37, 64, 0.08);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.archx-header-section .mega-dropdown .mega-menu-new-cat-icon {
  width: 58px;
  height: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat-icon img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat-name {
  font-size: 14px;
  font-weight: 600;
  color: #0a2540;
  text-align: center;
  line-height: 1.3;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat:hover .mega-menu-new-cat-name {
  color: var(--main-color-2);
}
/* 推荐产品卡片 */
.archx-header-section .mega-dropdown .mega-menu-new-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.archx-header-section .mega-dropdown .mega-menu-new-product {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #ffffff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.archx-header-section .mega-dropdown .mega-menu-new-product:hover {
  border-color: rgba(0, 180, 216, 0.5);
  box-shadow: 0 10px 24px rgba(10, 37, 64, 0.08);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}
.archx-header-section .mega-dropdown .mega-menu-new-product-img {
  -webkit-box-flex: 0 0 90px;
      -ms-flex: 0 0 90px;
          flex: 0 0 90px;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
}
.archx-header-section .mega-dropdown .mega-menu-new-product-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.archx-header-section .mega-dropdown .mega-menu-new-product-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5px;
}
.archx-header-section .mega-dropdown .mega-menu-new-product-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--main-color-2);
}
.archx-header-section .mega-dropdown .mega-menu-new-product-name {
  font-size: 15px;
  font-weight: 400;
  color: #0a2540;
  line-height: 1.4;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.archx-header-section .mega-dropdown .mega-menu-new-product:hover .mega-menu-new-product-name {
  color: var(--main-color-2);
}
/* ===== Mega Menu 非产品分类：分类图标卡片（不展示子级分类） ===== */
.archx-header-section .mega-dropdown .mega-menu-new-cats-only {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat-icon-fa {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 180, 216, 0.1);
  color: var(--main-color-2);
}
.archx-header-section .mega-dropdown .mega-menu-new-cat-icon-fa i {
  font-size: 26px;
  line-height: 1;
}
.archx-header-section .mega-dropdown .mega-menu-new-cat:hover .mega-menu-new-cat-icon-fa {
  background: rgba(0, 180, 216, 0.18);
}
@media (max-width: 1199px) {
  .archx-header-section .mega-dropdown .mega-menu-new-cats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .archx-header-section .mega-dropdown .mega-menu-new-cat {
    min-width: 112px;
    padding: 14px 14px;
  }
  .archx-header-section .mega-dropdown .mega-menu-new-product-img {
    -webkit-box-flex: 0 0 76px;
        -ms-flex: 0 0 76px;
            flex: 0 0 76px;
    width: 76px;
    height: 76px;
  }
}