@charset "UTF-8";
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  padding: 13px;
}
@media screen and (max-width: 479.98px) {
  .category-card {
    padding: 13px 0;
  }
}
.category-card:hover .category-card__title {
  color: #f16122;
}
.category-card {
  /* category card hover */
}
.category-card__img {
  width: 100%;
  margin: 0 auto;
}
.category-card {
  /* category card img */
}
.category-card__title {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: center;
  margin: 0;
  transition: all 300ms linear;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.category-card {
  /* category card title */
}
@media only screen and (max-width: 575.98px) {
  .category-card__title {
    font-size: 13.5px;
  }
}

/* category card */
@media screen and (max-width: 991.98px) {
  .categoryColor .category-color-box {
    width: 25%;
  }
}
.categoryColor .category-color-box {
  width: 12%;
}

.color-category-color {
  display: block;
  text-align: center;
  padding: 15px 0;
}
.color-category-color:hover .color {
  box-shadow: none;
}
.color-category-color .color {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0 inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  transition: all 300ms linear;
}
.color-category-color .color [class^=icon] {
  font-size: 38px;
  color: var(--carpet-color);
}
.color-category-color .color:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  border-radius: 50%;
  border: 3px solid var(--carpet-color);
}
.color-category-color .title {
  color: #6e6e6e;
  font-weight: 700;
  font-size: 12px;
}

.product-card {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px, rgba(241, 178, 44, 0.03) 0 0 0 1px inset;
  max-width: 350px;
  margin: 0 auto;
}
.product-card:has(.main-btn-buy).discount:before {
  bottom: 65px;
}
.product-card:hover .product-card__img.img-first {
  opacity: 0;
}
.product-card:hover .product-card__img.img-second {
  opacity: 1;
}
.product-card__body {
  position: relative;
}
.product-card__body .less-inventory {
  display: flex;
  gap: 2px;
  color: #ef394e;
  font-size: 12px;
  position: absolute;
  top: 51%;
}
.product-card.discount {
  position: relative;
}
.product-card.discount::before {
  content: attr(data-discount);
  text-align: center;
  position: absolute;
  width: 35px;
  height: 30px;
  padding-top: 6px;
  bottom: 18px;
  left: 10px;
  background-color: #f30303;
  color: #fff;
  border-radius: 5px;
  font-weight: 500;
  font-size: 13px;
  z-index: 2;
}
@media screen and (max-width: 767.98px) {
  .product-card.discount::before {
    padding-top: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  .product-card.discount::before {
    width: 25px;
    height: 25px;
    padding-top: 5px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .product-card.discount::before {
    font-size: 13px;
    width: 25px;
    height: 25px;
    padding-top: 5px;
  }
}
.product-card.discount {
  /* discount before */
}
.product-card {
  /* product card discount */
}
.product-card__img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 20px;
  transition: all 300ms linear;
}
.product-card__img-wrapper {
  position: relative;
  display: block;
}
.product-card__img.img-first {
  opacity: 1;
}
.product-card__img.img-second {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.product-card {
  /* product card img */
}
.product-card__title {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  line-height: 25px;
  margin-bottom: 25px;
  transition: all 300ms linear;
  width: 100%;
  height: 50px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-card__title:hover {
  color: #f16122;
}
.product-card {
  /* product card title */
}
.product-card__price {
  color: #121212;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-card__price::after {
  content: "تومان";
  font-size: 12px;
  font-weight: 300;
  margin-right: 2.5px;
  margin-top: 3px;
}
.product-card__price {
  /* price after */
}
@media screen and (max-width: 991.98px) {
  .product-card__price {
    font-size: 15px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .product-card__price {
    font-size: 16px;
  }
}
.product-card__price .old-price {
  color: rgb(148.25, 148.25, 148.25);
  font-size: 13px;
  font-weight: 300;
  text-decoration: line-through;
  margin: 0 0 0 6px;
}
.product-card__price .old-price::after {
  display: none;
}
.product-card__price {
  /* price old price */
}
.product-card__price.unavailable {
  display: block;
  color: #b6b6b6;
  text-align: center;
}
.product-card__price.unavailable::after {
  display: none;
}
.product-card__price {
  /* price unavailable */
}
.product-card {
  /* product card price */
} /* product card */
.customer-decor-card {
  position: relative;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.customer-decor-card:hover::before {
  opacity: 1;
}
.customer-decor-card:hover {
  /* hover before */
}
.customer-decor-card {
  /* customer decor card hover */
}
.customer-decor-card::before {
  content: "\e997";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(18, 18, 18, 0.6);
  opacity: 0;
  z-index: 2;
  transition: all 300ms linear;
  color: #fff;
  font-size: 35px;
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.customer-decor-card {
  /* customer decor card before */
}
.customer-decor-card img {
  width: 100%;
}
.customer-decor-card {
  /* customer decor card img */
} /* customer decor card */
.service-card {
  max-width: 170px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
  border-radius: 5px;
  border: 1px solid rgb(229.5, 229.5, 229.5);
  transition: all 300ms linear;
}
.service-card:hover {
  border-color: #f16122;
}
.service-card:hover .service-card__title {
  color: #f16122;
}
.service-card {
  /* service card hover */
}
.service-card__img {
  width: 50%;
  margin: 0 auto;
}
.service-card {
  /* service card img */
}
.service-card__title {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  transition: all 300ms linear;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.service-card {
  /* service card title */
}
@media only screen and (max-width: 575.98px) {
  .service-card {
    border: none;
    padding: 8px;
  }
  .service-card__img {
    width: 75%;
  }
  .service-card__title {
    font-size: 12px;
  }
}

/* service card */
.show-more {
  height: auto;
  overflow: visible;
  padding-bottom: 40px;
}
.show-more-wrapper {
  position: relative;
}

.hide-more {
  height: 200px;
  overflow: hidden;
}
.hide-more::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 18%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
@media only screen and (max-width: 575.98px) {
  .hide-more::before {
    height: 100px;
  }
}
@media only screen and (max-width: 767.98px) {
  .hide-more {
    height: 150px;
  }
}

.show-more-button {
  position: absolute;
  bottom: 15px;
  right: 5px;
  cursor: pointer;
  z-index: 2;
  color: #0058ff;
  font-size: 12px;
  font-weight: 600;
  transition: all 300ms linear;
}
.show-more-button.active {
  color: #f16122;
  font-size: 14px;
}
.show-more-button.active [class^=icon-] {
  transform: rotate(90deg);
}
.show-more-button:hover {
  color: #f16122;
}
.show-more-button [class^=icon-] {
  font-size: 10px;
  transform: rotate(-90deg);
  transition: all 300ms linear;
}

/*------------------------------------ sections ------------------------------------*/
.index-sec {
  margin-bottom: 50px;
}
.index-sec.category .row {
  margin-top: -10px;
  align-items: flex-start;
}
@media only screen and (max-width: 991.98px) {
  .index-sec {
    margin-bottom: 30px;
  }
}

/* sections */
/*------------------------------------ title line ------------------------------------*/
@media only screen and (max-width: 575.98px) {
  .title-line {
    font-size: 16px !important;
  }
  .title-line::after {
    width: 80px !important;
  }
}

/*------------------------------------ newest and popular section ------------------------------------*/
.product-banner-section .product-slider-wrapper {
  width: 79%;
}
@media only screen and (max-width: 1399.98px) {
  .product-banner-section .product-slider-wrapper {
    width: 76%;
  }
}
@media only screen and (max-width: 1199.98px) {
  .product-banner-section .product-slider-wrapper {
    width: 73%;
  }
}
@media only screen and (max-width: 991.98px) {
  .product-banner-section .product-slider-wrapper {
    width: 64%;
  }
}
@media only screen and (max-width: 767.98px) {
  .product-banner-section .product-slider-wrapper {
    width: 100%;
  }
}
.product-banner-section .productSlider .owl-stage-outer {
  padding: 0 5px;
  padding-top: 8px;
}

/*------------------------------------ merdas mag section ------------------------------------*/
.merdas-mag {
  padding-top: 30px;
  padding-bottom: 70px;
  background-color: rgb(248.625, 248.625, 248.625);
  margin-bottom: 0;
}
.merdas-mag .hide-more:before {
  background: linear-gradient(0deg, rgb(248.625, 248.625, 248.625) 18%, transparent 100%);
}
@media only screen and (max-width: 575.98px) {
  .merdas-mag {
    padding-bottom: 30px;
  }
}

/* merdas mag */
/*------------------------------------ customer slider ------------------------------------*/
.customerSlider .owl-stage {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 10px 0;
}
.customerSlider .owl-stage .owl-item {
  height: inherit;
  display: flex;
}
.customerSlider__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.customerSlider__item .product-card {
  min-height: 285px;
  display: flex;
  flex-direction: column;
}
.customerSlider__item .product-card__price {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}
.customerSlider__item .product-card__price.old-price {
  padding-left: 32px;
  margin: 0;
}
.customerSlider__item .product-card__price.unavailable {
  justify-content: center;
}
.customerSlider {
  /* customer slider item */
} /* customer slider */
/*------------------------------------ main slider ------------------------------------*/
.mainSlider:not(.owl-loaded) {
  display: block !important;
  aspect-ratio: 46/25;
  overflow: hidden;
}
@media only screen and (max-width: 1199.98px) {
  .mainSlider:not(.owl-loaded) {
    aspect-ratio: 116/63;
  }
}
@media only screen and (max-width: 991.98px) {
  .mainSlider:not(.owl-loaded) {
    aspect-ratio: 129/70;
  }
}
@media only screen and (max-width: 575.98px) {
  .mainSlider:not(.owl-loaded) {
    aspect-ratio: 551/299;
  }
}

.mainSlider:not(.owl-loaded) .owl-item:not(:first-child) {
  display: none;
}

.mainSlider:not(.owl-loaded) .owl-item img {
  height: 100%;
}

.commonSlider {
  position: relative;
}
.commonSlider .owl-stage {
  padding-bottom: 40px;
}
.commonSlider {
  /* common slider owl stage */
}
.commonSlider .owl-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
@media only screen and (max-width: 575.98px) {
  .commonSlider .owl-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }
}
.commonSlider .owl-nav .owl-prev,
.commonSlider .owl-nav .owl-next {
  background-color: transparent !important;
  margin: 0;
  transform: translateY(3px);
}
.commonSlider .owl-nav .owl-prev span,
.commonSlider .owl-nav .owl-next span {
  font-size: 25px;
  color: #50514b;
  transition: all 300ms linear;
}
.commonSlider .owl-nav .owl-prev span:hover,
.commonSlider .owl-nav .owl-next span:hover {
  color: #f16122;
}
.commonSlider .owl-nav .owl-prev span,
.commonSlider .owl-nav .owl-next span {
  /* span hover */
}
.commonSlider .owl-nav .owl-prev,
.commonSlider .owl-nav .owl-next {
  /* owl prev and owl next span */
}
.commonSlider .owl-nav {
  /* owl nav owl prev and owl next */
}
.commonSlider .owl-nav .owl-prev {
  margin-left: 150px;
}
.commonSlider .owl-nav {
  /* owl nav owl prev */
}
.commonSlider {
  /* common slider owl nav */
}
.commonSlider .owl-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}
@media only screen and (max-width: 575.98px) {
  .commonSlider .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 2%;
  }
}
.commonSlider .owl-dots .owl-dot span {
  width: 6px;
  height: 6px;
  opacity: 0.8;
  background-color: rgb(181.9230769231, 182.8846153846, 177.1153846154);
  border-radius: 5px;
  transition: all 300ms linear;
}
.commonSlider .owl-dots .owl-dot {
  /* owl dot span */
}
.commonSlider .owl-dots .owl-dot.active span {
  width: 20px;
  background-color: #f16122;
  opacity: 1;
}
.commonSlider .owl-dots .owl-dot {
  /* owl dot active span */
}
.commonSlider .owl-dots {
  /* owl dots owl dot */
}
.commonSlider {
  /* common slider owl dots */
} /* common slider */
.mainSlider {
  direction: ltr !important;
}
.mainSlider__link {
  display: block;
  border-radius: 30px;
  overflow: hidden;
  transition: all 300ms linear;
}
@media only screen and (max-width: 575.98px) {
  .mainSlider__link {
    border-radius: calc(30px / 2);
  }
}
.mainSlider {
  /* main slider link */
}
.mainSlider .owl-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98%;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}
.mainSlider .owl-nav .owl-prev,
.mainSlider .owl-nav .owl-next {
  background: transparent !important;
}
.mainSlider .owl-nav .owl-prev span,
.mainSlider .owl-nav .owl-next span {
  padding: 15px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  color: #f16122;
  font-size: 20px;
}
@media only screen and (max-width: 575.98px) {
  .mainSlider .owl-nav .owl-prev span,
  .mainSlider .owl-nav .owl-next span {
    padding: 8px;
  }
}
.mainSlider .owl-nav .owl-prev,
.mainSlider .owl-nav .owl-next {
  /* owl prev and owl next span */
}
.mainSlider .owl-nav {
  /* owl nav owl prev and owl next */
}
.mainSlider {
  /* main slider owl nav */
}
.mainSlider .owl-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainSlider .owl-dots .owl-dot.active span {
  background-color: #f16122;
  width: 15px;
}
.mainSlider .owl-dots .owl-dot span {
  background-color: #fff;
  width: 7px;
  height: 7px;
  transition: all 300ms linear;
}
.mainSlider {
  /* main slider owl dots */
}
@media only screen and (min-width: 1600px) {
  .mainSlider {
    height: 100%;
  }
  .mainSlider .owl-stage,
  .mainSlider .owl-stage-outer,
  .mainSlider .owl-item, .mainSlider__link, .mainSlider__link img {
    height: 100%;
  }
  .mainSlider__link img {
    object-fit: cover;
  }
}

/* main slider */
.main-banner {
  display: block;
  overflow: hidden;
  border-radius: 30px;
}
@media only screen and (max-width: 575.98px) {
  .main-banner {
    border-radius: calc(30px / 2);
  }
}
.main-banner img {
  width: 100%;
}
.main-banner {
  /* main banner img */
} /* main banner*/
.index-widget-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}
@media screen and (max-width: 767.98px) {
  .index-widget-header {
    justify-content: space-between;
  }
}
.index-widget-header .title-line {
  margin: 0;
  color: #50514b;
  font-weight: 800;
  font-size: 20px;
}
@media screen and (max-width: 767.98px) {
  .index-widget-header .title-line {
    font-size: 15px;
  }
}
.index-widget-header {
  /* index widget header title line */
}
.index-widget-header .main-btn {
  margin-right: 20px;
  padding: 13px 25px;
}
.index-widget-header {
  /* index widget header main btn */
}
.index-widget-header .see-more-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #0058ff;
}
.index-widget-header .see-more-btn i {
  font-size: 11px;
}
.index-widget-header .see-more-btn__text {
  font-size: 12px;
}

/* index widget header */
.product-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  overflow: hidden;
  padding: 25px 25px 0 25px;
  width: 100%;
  height: 88%;
  margin-top: 8px;
}
.product-banner-section .product-banner-slider-mobile {
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  padding: 15px 0;
}
.product-banner-section .product-banner-slider-mobile::-webkit-scrollbar {
  display: none;
}
.product-banner-section .product-banner-slider-mobile .product-card {
  min-width: 60vw;
  max-width: 60vw;
}
@media screen and (min-width: 480px) and (max-width: 575.98px) {
  .product-banner-section .product-banner-slider-mobile .product-card {
    min-width: 55vw;
    max-width: 55vw;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  .product-banner-section .product-banner-slider-mobile .product-card {
    min-width: 45vw;
    max-width: 45vw;
  }
}
.product-banner.newest {
  border-radius: 150px 5px 5px 5px;
  background-image: url("../images/background/newest-product-banner.webp");
  background-repeat: no-repeat;
  background-size: 253px;
  background-position: center center;
  background-attachment: inherit;
}
.product-banner.newest::before {
  background-color: rgba(103, 71, 71, 0.85);
}
.product-banner.newest {
  /* newest before */
}
.product-banner {
  /* product banner newest */
}
.product-banner.popular {
  border-radius: 5px 150px 5px 5px;
  background-image: url("../images/background/popular-product-banner.webp");
  background-repeat: no-repeat;
  background-size: 253px;
  background-position: center center;
  background-attachment: inherit;
}
.product-banner.popular:before {
  background-color: rgba(28, 103, 88, 0.85);
}
.product-banner.popular {
  /* popular before */
}
.product-banner {
  /* product banner popular */
}
.product-banner.special {
  border-radius: 5px 150px 5px 5px;
  background-image: url("../images/background/special-product-banner.webp");
  background-repeat: no-repeat;
  background-size: 253px;
  background-position: center center;
  background-attachment: inherit;
}
.product-banner.special::before {
  background-color: rgba(51, 91, 146, 0.85);
}
.product-banner.special {
  /* newest before */
}
.product-banner {
  /* product banner newest */
}
.product-banner.customer {
  border-radius: 150px 5px 5px 5px;
  background-image: url("../images/background/customer-product-banner.webp");
  background-repeat: no-repeat;
  background-size: 253px;
  background-position: center center;
  background-attachment: inherit;
}
.product-banner.customer::before {
  background-color: rgba(80, 81, 75, 0.85);
}
.product-banner.customer {
  /* customer before */
}
.product-banner {
  /* product banner customer */
}
.product-banner::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.product-banner {
  /* product banner before */
}
.product-banner__title {
  top: 20px;
  color: #fff;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.product-banner__title span {
  margin-top: 10px;
  font-size: 36px;
  font-weight: 850;
  display: block;
}
.product-banner__title {
  /* title span */
}
.product-banner {
  /* product banner title */
}
.product-banner .main-btn {
  position: relative;
  padding: 15px;
  width: 100%;
  margin-bottom: -20px;
}
.product-banner .main-btn:hover {
  border-color: #fff;
}
.product-banner .main-btn:hover .main-btn__text,
.product-banner .main-btn:hover .main-btn__icon {
  color: #fff;
}
.product-banner {
  /* product banner main btn */
}
@media only screen and (min-width: 1600px) {
  .product-banner {
    background-size: cover !important;
  }
}

/* product banner */
.banners {
  display: grid;
  gap: 20px;
}
.banners__wrapper {
  flex-wrap: wrap;
  gap: 25px 16px;
}
@media screen and (min-width: 576px) and (max-width: 991.98px) {
  .banners__wrapper {
    gap: 16px;
  }
}
.banners {
  /* banners wrapper */
}
.banners__item {
  flex: 1;
  overflow: hidden;
  border-radius: calc(5px * 2);
}
@media screen and (max-width: 991.9px) {
  .banners__item {
    flex-basis: calc(50% - 10px);
  }
}
.banners__item.no-image {
  flex: none !important;
  display: none;
}
.banners__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banners__item {
  /* item img */
}
.banners {
  /* banners item */
}
@media only screen and (max-width: 575.98px) {
  .banners__item {
    border-radius: 5px;
  }
  .banners {
    /* query banners item */
  }
  .banners__wrapper {
    gap: 10px;
  }
  .banners {
    /* query banners wrapper */
  }
}
.banners {
  /* banners query */
} /* banners */
.about-us {
  position: relative;
  margin-top: 80px;
  margin-bottom: 100px;
}
@media only screen and (max-width: 575.98px) {
  .about-us {
    padding-bottom: 20px;
  }
}
.about-us::after {
  content: "";
  position: absolute;
  top: 0;
}
.about-us {
  /* about us before and after */
}
.about-us::after {
  left: 0;
  height: 105%;
  width: 62%;
  border-radius: 0 170px 5px 0;
  background-color: rgb(251.6340425532, 217.0127659574, 201.8659574468);
  z-index: -2;
}
.about-us {
  /* about us after */
}
.about-us__wrapper {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 30px 60px;
  border-radius: 170px 5px 5px 5px;
  background-color: rgb(247.35, 247.35, 247.35);
}
.about-us {
  /* about us wrapper */
}
.about-us__text {
  font-size: 14px;
  font-weight: 300;
  line-height: 30px;
  text-align: justify;
  margin-bottom: 30px;
  color: #333;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 12;
}
.about-us {
  /* about us text */
}
.about-us .main-btn {
  display: flex;
  margin-right: auto;
  padding: 15px 30px;
}
.about-us {
  /* about us main btn */
}
.about-us__main {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-us__main.visible .about-us__img:first-child {
  animation: comeUpOut 1300ms forwards;
}
.about-us__main.visible .about-us__img:nth-child(2) {
  animation: borderRadiusOut 1300ms forwards;
}
.about-us__main.visible .about-us__img:last-child {
  animation: comeDownOut 1300ms forwards;
}
@media only screen and (max-width: 575.98px) {
  .about-us__main.visible .about-us__img:first-child {
    animation: comeUpOut-sm 1300ms forwards;
  }
  .about-us__main.visible .about-us__img:nth-child(2) {
    animation: borderRadiusOut 1300ms forwards;
  }
  .about-us__main.visible .about-us__img:last-child {
    animation: comeDownOut-sm 1300ms forwards;
  }
}
.about-us {
  /* about us main */
}
.about-us__img {
  width: 33%;
}
.about-us__img:first-child {
  border-radius: 0 5px 5px 0;
  animation: comeUpIn 750ms forwards;
}
.about-us__img:nth-child(2) {
  animation: borderRadiusIn 750ms forwards;
}
.about-us__img:last-child {
  border-radius: 5px 0 0 5px;
  animation: comeDownIn 750ms forwards;
}
@media only screen and (max-width: 575.98px) {
  .about-us__img:first-child {
    border-radius: 0 5px 5px 0;
    animation: comeUpIn-sm 750ms forwards;
  }
  .about-us__img:nth-child(2) {
    animation: borderRadiusIn 750ms forwards;
  }
  .about-us__img:last-child {
    border-radius: 5px 0 0 5px;
    animation: comeDownIn-sm 750ms forwards;
  }
}
.about-us {
  /* about us img */
}
@media only screen and (max-width: 991.98px) {
  .about-us .about-us__main {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 575.98px) {
  .about-us .about-us__main {
    margin-top: 30px;
  }
}

/* about us */
/* ------------------------------------------------------- out animations ------------------------------------------------------- */
@keyframes borderRadiusOut {
  from {
    transform: scale(1);
    border-radius: 0;
  }
  to {
    transform: scale(0.9);
    border-radius: 5px;
  }
}
@keyframes comeUpOut {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
  25% {
    transform: translateY(85px) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
  75% {
    transform: translateY(85px) translateX(40px) scale(1);
    border-radius: 0 5px 5px 0;
  }
  100% {
    transform: translateY(85px) translateX(40px) scale(0.9);
    border-radius: 5px;
  }
}
@keyframes comeDownOut {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
  25% {
    transform: translateY(-70px) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
  75% {
    transform: translateY(-70px) translateX(-40px) scale(1);
    border-radius: 5px 0 0 5px;
  }
  100% {
    transform: translateY(-70px) translateX(-40px) scale(0.9);
    border-radius: 5px;
  }
}
/* ------------------------------------------------------- in animations ------------------------------------------------------- */
@keyframes borderRadiusIn {
  from {
    transform: scale(0.9);
    border-radius: 5px;
  }
  to {
    transform: scale(1);
    border-radius: 0;
  }
}
@keyframes comeUpIn {
  0% {
    transform: translateY(85px) translateX(40px) scale(0.9);
    border-radius: 5px;
  }
  25% {
    transform: translateY(85px) translateX(40px) scale(1);
    border-radius: 0 5px 5px 0;
  }
  75% {
    transform: translateY(85px) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
}
@keyframes comeDownIn {
  0% {
    transform: translateY(-70px) translateX(-40px) scale(0.9);
    border-radius: 5px;
  }
  25% {
    transform: translateY(-70px) translateX(-40px) scale(1);
    border-radius: 5px 0 0 5px;
  }
  75% {
    transform: translateY(-70px) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
}
@keyframes comeUpOut-sm {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
  25% {
    transform: translateY(25px) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
  75% {
    transform: translateY(25px) translateX(10px) scale(1);
    border-radius: 0 5px 5px 0;
  }
  100% {
    transform: translateY(25px) translateX(10px) scale(0.9);
    border-radius: 5px;
  }
}
@keyframes comeDownOut-sm {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
  25% {
    transform: translateY(-25px) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
  75% {
    transform: translateY(-25px) translateX(-10px) scale(1);
    border-radius: 5px 0 0 5px;
  }
  100% {
    transform: translateY(-25px) translateX(-10px) scale(0.9);
    border-radius: 5px;
  }
}
@keyframes comeUpIn-sm {
  0% {
    transform: translateY(25px) translateX(10px) scale(0.9);
    border-radius: 5px;
  }
  25% {
    transform: translateY(25px) translateX(10px) scale(1);
    border-radius: 0 5px 5px 0;
  }
  75% {
    transform: translateY(25px) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 0 5px 5px 0;
  }
}
@keyframes comeDownIn-sm {
  0% {
    transform: translateY(-25px) translateX(-10px) scale(0.9);
    border-radius: 5px;
  }
  25% {
    transform: translateY(-25px) translateX(-10px) scale(1);
    border-radius: 5px 0 0 5px;
  }
  75% {
    transform: translateY(-25px) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    border-radius: 5px 0 0 5px;
  }
}
@media screen and (min-width: 992px) {
  .category-mobile {
    display: none !important;
  }
}

@media only screen and (max-width: 991.98px) {
  .categoryColor .category-color-box {
    width: 25%;
  }
}

@media only screen and (max-width: 767.98px) {
  .color-category-color .title {
    font-size: 9px;
  }
}
@media only screen and (max-width: 480.98px) {
  .color-category-color .title {
    font-size: 8px;
  }
}

/*# sourceMappingURL=index.css.map */