* {
  margin: 0 auto;
  padding: 0;
  outline: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
  font-family: Shabnam;
  direction: rtl;
}

body,
html {
  background-color: #EFEFEF;
  overflow-x: hidden;
}

.body-navbar-design {
  height: 280px;
}

/***********************************/


.your-pic-panel {
  border-radius: 15px;
}

.your-pic-btn-bar {
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 10px;
}

.your-pic-btn-bar button {
  width: 100%;
  height: 45px;
  align-items: center;
  border-radius: 15px;
}

.your-pic-btn-bar button:hover,
.your-pic-btn-bar button:hover span,
.your-pic-btn-bar button:hover span svg path {
  background-color: #8F1105;
  color: white;
  fill: white;
  cursor: pointer;
}

.your-pic-btn-bar button span {
  align-items: center;
  gap: 1rem;
  display: inline-flex;
  font-size: 16px;
  color: #322D2D;
}

.your-pic-btn-bar button span svg path {
  fill: #322D2D;
}

.your-pic-size-bar {
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

.your-pic-size-bar select {
  width: 100%;
  padding: 10px 15px;
  background-color: #F0F0F0;
  border-radius: 15px;
}

.your-pic-size-bar span {
  text-wrap: nowrap;
  align-items: center;
  display: flex;
}

/**********************************************/

.category-main-body {
  background: url(../img/bime.png) no-repeat top 0px right 0px;
  -webkit-background-size: 78%;
  -moz-background-size: 78%;
  -o-background-size: 78%;
  background-size: 78% 85%;
}

.category-main-body .row {
  padding-top: 470px;
  margin-bottom: 300px;
}

.category-main-body .row .insurance {
  color: white;
}

.category-main-body .row .insurance h1 {
  font-size: 4em;
  margin-right: 3rem;
  margin-bottom: 2rem;
}

.category-main-body .row .insurance p {
  font-size: 18px;
  text-align: justify;
  word-break: break-word;
  padding: 0px 50px;
}

.category-main-body .row .insurance button {
  width: 60%;
  padding: 10px 18px;
  background-color: white;
  border-radius: 10px;
  color: black;
  cursor: pointer;
}

.category-main-body .row .service {
  color: black;
}

.category-main-body .row .service h1 {
  font-size: 4em;
  margin-right: 3rem;
  margin-bottom: 2rem;
}

.category-main-body .row .service p {
  font-size: 18px;
  text-align: justify;
  word-break: break-word;
  padding: 0px 50px;
}

.category-main-body .row .service button {
  width: 60%;
  padding: 10px 18px;
  background-color: #de2a35;
  border-radius: 10px;
  color: white;
  cursor: pointer;
}

.margin-background {
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

.relative {
  position: relative;
}

.unset {
  position: unset !important;
}

.color-red-ghalichin {
  color: #de2a35;
}

.right {
  float: right;
}

.left {
  float: left;
}

.d-flex {
  display: flex;
}

.d-none {
  display: none;
}

.d-grid {
  display: grid;
}

.clear-both {
  width: 100%;
  clear: both;
  height: 2px;
}

.min-height-for-scroll {
  height: auto;
  margin: 1rem 0;
}

.min-height-for-scroll.active {
  margin: 10rem 0 10rem;
}

button.btn-preview {
  width: 85%;
  font-size: 18px;
  font-weight: bold;
  padding: 7px 26px;
  background-color: #45b565;
  color: white;
  text-decoration: none;
  border-radius: 60px;
  cursor: pointer;
}

button.btn-left {
  width: 170px;
  font-size: 18px;
  padding: 15px 26px;
  background-color: #8F1105;
  color: white;
  text-decoration: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: normal;
  float: left;
  margin-top: 8px;
}

.favorites-list-normal-display ul li.btn {
  width: 250px;
  height: 85px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  border-radius: 15px;
  margin: 0 5px;
}

.favorites-list-normal-display ul li.btn-hide {
  width: 70px;
}

.favorites-list-normal-display ul li.btn-hide svg {
  scale: 2;
}

button.normal-add {
  font-size: 14px;
  background-color: #EFEFEF;
  color: #322D2D;
  text-decoration: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: normal;
  gap: 1rem;
  display: flex;
  flex-direction: row;
  position: absolute;
  height: 85px;
  width: auto;
  align-items: center;
}

button.normal-add-hide span {
  display: none;
}

button.normal-add svg {
  width: 30px;
  height: 30px;
}

button.normal-add svg path {
  fill: #322D2D;
}

button.normal-add:hover,
button.normal-add:hover svg path {
  color: white;
  fill: white;
}

button.btn-preview svg {
  width: 24px;
  height: 24px;
  float: left;
  fill: #ffffff;
}

button.btn-preview:hover {
  background-color: #de2a35;
}

button.btn-preview:disabled {
  background-color: #727d93 !important;
  cursor: no-drop !important;
}

button.btn-preview.mobile-preview {
  display: none;
}

.category-body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.category-body .category-btn-body {
  position: relative;
  z-index: 0;
  border-radius: 15px;
  flex: 0 1 auto;
  height: 200px;
  padding: 0px;
  margin: 1% 1% 50px;
  text-align: center;
}

.category-body .category-btn-body img {
  width: 100%;
  height: 100%;
}

.category-body .category-btn-body a {
  text-decoration: unset;
  color: white;
}

.category-body .category-btn-body a .btn-text {
  position: relative;
  z-index: 1;
  width: 80%;
  border-radius: 15px;
  margin-top: -22px;
  background-color: #de2a35;
  text-align: center;
  padding: 12px 18px;
  -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
}

.category-body .category-btn-body a .btn-text span {
  font-size: 19px;
  font-weight: bold;
}

.category-body .category-btn-body a:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.category-body .category-btn-body a:hover .btn-text {
  background-color: #26283a;
}

.footer-page {
  width: 100%;
  height: 60px;
  background-color: #727d93;
  text-align: center;
  padding: 20px;
}

.footer-page-new {
  width: 100%;
  height: 80px;
  text-align: center;
  padding: 20px;
}

.footer-page p.copyright-footer {
  color: #bbc2ce;
}

.landing {
  background: url(../img/test-background1.png);
  background-color: #f9fafa;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-position: unset, unset;
  background-repeat: no-repeat, no-repeat;
}

.landing .landing-header {
  width: 100%;
  margin-top: 20px;
  display: inline-flex;
  color: white;
}

.landing .landing-header img {
  width: 170px;
  height: 50px;
  margin-top: auto;
  margin-left: 0px;
  margin-right: 3rem;
}

.landing .landing-header img.colored {
  display: none;
}

.landing .landing-header img.white {
  display: block;
}

.landing .landing-header ul {
  display: flex;
  padding-top: 26px;
  margin-right: 40px;
}

.landing .landing-header ul li {
  margin: 5px 5px 0;
  padding: 8px 16px 6px;
  border-radius: 50px;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.landing .landing-header ul li:hover {
  cursor: pointer;
  background-color: #ffffff;
  color: #26283a;
}

.landing .container .row:nth-child(2) .about-text {
  padding-top: 10rem;
}

.landing .container .row:nth-child(2) .about-text p {
  line-height: 1.7;
  margin: 2rem 3rem 3rem;
  padding: 0.5rem;
  color: #ffffff;
}

.landing .container .row:nth-child(2) .mobile-image {
  text-align: left;
}

.landing .container .row:nth-child(2) .mobile-image img {
  display: none;
  margin-left: -3vw;
}

.landing .container .row:nth-child(3).margin-area {
  margin-top: 19rem;
  margin-bottom: 3rem;
  padding: 0 5rem;
}

.landing .container .row:nth-child(3).margin-area .col-12 .text-body {
  padding: 8rem 2rem 0;
}

.landing .container .row:nth-child(3).margin-area .col-12 .text-body h3 {
  margin-bottom: 1rem;
}

.landing .container .row:nth-child(3).margin-area .col-12 .text-body p {
  font-size: 15px;
  word-break: break-word;
  text-align: justify;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, cover;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body.bg-wiki {
  background-image: url("../img/bg-wiki.png");
  padding: 75px;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body.bg-generate {
  background-image: url("../img/bg-generate.png");
  padding: 125px 40px 65px;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body.bg-3d {
  background-image: url("../img/bg-3d.png");
  padding: 115px 70px;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body.bg-buy {
  background-image: url("../img/bg-buy.png");
  padding: 125px 40px;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body.bg-bime {
  background-image: url("../img/bg-bime.png");
  padding: 100px 35px;
}

.landing .container .row:nth-child(3).margin-area .col-12 .btn-body img {
  width: 100%;
  margin: 0 auto;
}

.landing .container .row:nth-child(3).margin-area .col-12:nth-child(odd) .btn-body {
  margin-right: auto;
}

.landing .container .row:nth-child(3).margin-area .col-12:nth-child(even) .btn-body {
  margin-left: auto;
}

.landing .container .row:nth-child(3).margin-area .col-12:not(:first-child) {
  margin-bottom: -4rem;
}

.landing .container .row:nth-child(3).margin-area .btn-body {
  position: relative;
  width: max-content;
  margin: 0;
}

.landing .footer {
  min-height: 36vh;
}

.landing .footer .carpet-image-footer {
  width: 30%;
  margin: 0px;
  margin-top: -30px;
}

.landing .footer .carpet-image-footer img {
  width: 185px;
}

.landing .footer .links-footer {
  margin: 40px auto 0 125px;
  width: 30%;
  align-self: flex-end;
}

.landing .footer .links-footer a {
  color: #ffffff;
  fill: #ffffff;
  margin: 0.5rem 0.5rem 1rem;
}

.landing .footer .links-footer a svg {
  width: 16px;
  height: 16px;
}

.landing .footer .links-footer a:hover {
  color: #26283a;
  fill: #26283a;
}

.landing .footer .links-footer p {
  color: white;
  margin-top: 10px;
  margin-bottom: 20px;
}

.landing .footer .validation-icon-footer {
  padding-bottom: 20px;
  padding-right: 10px;
  text-align: right;
  width: 40%;
  margin: 0px;
}

.landing .footer .validation-icon-footer img {
  width: 65px;
  margin: 3rem 1rem 0px;
  border-radius: 15px;
  box-shadow: 0 14px 28px 4px rgba(0, 0, 0, 0.25),
    0 10px 10px 4px rgba(0, 0, 0, 0.22);
}

.body-daneshname {
  background-color: #f3f4f6;
}

.body-daneshname .header-daneshname {
  width: 100%;
  height: 100px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  background-color: #de2a35;
  line-height: 7;
}

.body-daneshname .header-daneshname img {
  margin-right: 85px;
}

.body-daneshname .background-images-first {
  background: url(../img/laptop-background.png) no-repeat;
  -webkit-background-size: 94% 100%;
  -moz-background-size: 94% 100%;
  -o-background-size: 94% 100%;
  background-size: 94% 100%;
  position: relative;
  margin-top: 100px;
  min-height: 42vh;
}

.body-daneshname .background-images-first img {
  position: absolute;
  z-index: 2;
  top: -72px;
  right: 19%;
}

.body-daneshname .hot-title {
  background: url(../img/mataleb-khast-background.png) no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
  height: auto;
  padding: 7rem 5rem;
  color: #ffffff;
}

.body-daneshname .hot-title h1 {
  margin-bottom: 2rem;
  margin-right: 16px;
}

.body-daneshname .hot-title .card-body img {
  height: 250px;
}

.body-daneshname .hot-title .card-body .texts-body {
  position: relative;
}

.body-daneshname .hot-title .card-body .texts-body p {
  max-height: 40px;
}

.body-daneshname .other-card .number-of-page {
  background-color: white;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 6rem;
  padding: 20px 20px 12px;
  max-width: 100%;
  flex: 0 0 100%;
  -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
}

.body-daneshname .other-card .number-of-page ul.body-pagination {
  display: inline-flex;
  direction: ltr;
  width: 35%;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li {
  margin: 0px 10px;
  height: 25px;
  flex: 1 1;
  color: #2b2d42;
  cursor: pointer;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li a {
  text-decoration: none;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li:not(:hover).left-arrow,
.body-daneshname .other-card .number-of-page ul.body-pagination li:not(:hover).right-arrow,
.body-daneshname .other-card .number-of-page ul.body-pagination li:hover {
  color: #2b2d42;
  font-size: 18px;
  font-weight: bold;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li.right-arrow,
.body-daneshname .other-card .number-of-page ul.body-pagination li.left-arrow {
  stroke: #2b2d42;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li.right-arrow svg,
.body-daneshname .other-card .number-of-page ul.body-pagination li.left-arrow svg {
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  width: 60px;
  height: 25px;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li.right-arrow svg path,
.body-daneshname .other-card .number-of-page ul.body-pagination li.left-arrow svg path {
  fill: #fcfcfc;
  fill-rule: nonzero;
  stroke-width: 0.39px;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li.right-arrow:hover,
.body-daneshname .other-card .number-of-page ul.body-pagination li.left-arrow:hover {
  stroke: #de2a35;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li.right-arrow {
  margin-left: 30px;
}

.body-daneshname .other-card .number-of-page ul.body-pagination li.left-arrow {
  margin-right: 30px;
}

.body-daneshname .footer {
  width: 100%;
  height: 50px;
  background-color: #de2a35;
}

.card-body {
  color: black;
  border-radius: 20px;
  margin: 20px 0px;
}

.card-body img {
  width: 100%;
  height: 250px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.card-body .texts-body {
  height: 200px;
  overflow: hidden;
  margin-top: -8px;
  background-color: #ffffff;
  padding: 25px 20px;
  position: relative;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
}

.card-body .texts-body:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-body .texts-body a h4 {
  margin: 0px 0px 25px;
  word-break: break-word;
}

.card-body .texts-body p {
  text-align: justify;
  color: #909090;
  font-size: 14px;
  word-break: break-word;
  overflow: hidden;
  max-height: 60px;
}

.card-body .texts-body button.btn-more {
  position: absolute;
  bottom: 25px;
  left: 20px;
  padding: 8px 16px;
  background-color: #26283a;
  color: white;
  text-decoration: none;
  border-radius: 10px;
}

.card-body .texts-body button.btn-more:hover {
  background-color: #de2a35;
  cursor: pointer;
}

.post-page {
  background-color: #f3f4f6;
}

.post-page .search-bar {
  margin-bottom: 50px;
  background-color: white;
}

.post-page .search-bar form {
  width: 100%;
  text-align: center;
  padding: 20px 0px;
}

.post-page .search-bar form input,
.post-page .search-bar form button {
  border: 1px solid #9e9e9e;
}

.post-page .search-bar form input.search-icon,
.post-page .search-bar form button.search-icon {
  padding: 6px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #de2a35;
  border-left-width: 0.5px;
}

.post-page .search-bar form input.search-icon svg,
.post-page .search-bar form button.search-icon svg {
  width: 30px;
  height: 12px;
  color: #ffffff;
  fill: #ffffff;
}

.post-page .search-bar form input.search-text,
.post-page .search-bar form button.search-text {
  padding: 6px;
  width: 50%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right-width: 0px;
}

.post-page .search-bar img.best-cover {
  width: 100%;
  margin-bottom: 40px;
}

.post-page .detail-post {
  background-color: white;
}

.post-page .detail-post .description-post h2,
.post-page .detail-post .description-post p {
  text-align: justify;
  word-break: break-word;
}

.post-page .detail-post .image-post img.big-image {
  width: 100%;
  height: 300px;
}

.post-page .detail-post .image-post ul.little-list-image {
  display: flex;
  overflow: hidden;
}

.post-page .detail-post .image-post ul.little-list-image li {
  padding: 10px 5px;
}

.post-page .detail-post .image-post ul.little-list-image li img {
  width: 60px;
  height: 60px;
}

.post-page .detail-post .image-post ul.little-list-image li:hover {
  cursor: pointer;
}

.post-page .detail-post .comment-body {
  background-color: #f3f4f6;
  padding: 1rem 1rem 1rem 1.5rem;
}

.post-page .detail-post .comment-body .comment.d-flex {
  margin-top: 1rem;
}

.post-page .detail-post .comment-body .comment.d-flex img.user-avatar {
  margin: 0px;
  width: 30px;
  height: 30px;
}

.post-page .detail-post .comment-body .comment.d-flex .detail-comment {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  margin-right: 0.5rem;
}

.post-page .detail-post .comment-body .comment.d-flex .detail-comment h4,
.post-page .detail-post .comment-body .comment.d-flex .detail-comment p {
  text-align: justify;
  word-break: break-word;
}

.post-page .detail-post .comment-body .comment.d-flex .detail-comment h4 {
  margin-bottom: 5px;
}

.post-page .detail-post .comment-body .comment.d-flex .detail-comment p {
  margin-right: 15px;
}

.post-page .detail-post .comment-body .comment-reply {
  margin-top: 0.5rem;
}

.post-page .detail-post form.enter-comment .title-comment {
  padding-left: 0px;
}

.post-page .detail-post form.enter-comment .title-comment input {
  font-weight: bold;
  padding: 0px 8px;
  height: 40px;
  border-radius: 10px;
}

.post-page .detail-post form.enter-comment .description-comment {
  margin: 10px 0px;
}

.post-page .detail-post form.enter-comment .description-comment textarea {
  font-weight: bold;
  padding: 8px;
  border-radius: 10px;
  resize: inherit;
  min-height: 150px;
}

.post-page .detail-post form.enter-comment button.send-btn {
  cursor: pointer;
  color: white;
  background-color: #5cb85c;
  padding: 8px 16px;
  border-radius: 10px;
}

.image-controller-3d {
  position: absolute;
  z-index: 20;
  background: rgba(255, 255, 255, 0.393);
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 5px;
  gap: 1rem;
  width: 63%;
  top: 34px;
  right: 10px;
  direction: rtl;
}

.image-controller-3d div {
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0;
  width: 100%;
  gap: 0.2rem;
}

.image-controller-3d div div {
  border-radius: 6px;
  display: flex;
  gap: 1px;
  align-items: center;
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.image-controller-3d div div div {
  width: auto;
  text-wrap: nowrap;
  border-radius: 6px;
  display: flex;
  align-items: end;
  flex-direction: column;
  margin: 0;
  width: 100%;
  gap: 0;
}

.image-controller-3d div div .co-title {
  width: 220px;
}

.image-controller-3d div div .co-title1 {
  width: 100px;
}

.image-controller-3d div div div span {
  font-size: 12px;
  width: 100%;
  text-align: center;
  display: none;
}

.image-controller-3d div div input {
  width: 100%;
}

.image-controller-3d div div input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

/* Track (Chrome, Safari, Edge) */
.image-controller-3d div div input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #8F1105;
  border-radius: 5px;
}

/* Firefox */
.image-controller-3d div div input[type="range"]::-moz-range-track {
  height: 6px;
  background: #8F1105;
  border-radius: 5px;
}

/* Thumb (Chrome, Safari, Edge) */
.image-controller-3d div div input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 18px;
  background: #fff;
  border: 2px solid #8F1105;
  border-radius: 10px;
  cursor: pointer;
  margin-top: -6px;
  /* centers the thumb */
}

.image-controller-3d div div input[type="range"]::-moz-range-thumb {
  width: 6px;
  height: 18px;
  background: #fff;
  border: 2px solid #8F1105;
  border-radius: 10px;
  cursor: pointer;
}

.image-controller-3d div div button {
  width: 33px;
  height: 18px;
  border-radius: 15px;
  cursor: pointer;
  background-color: #8F1105;
  color: #fff;
  align-items: center;
  padding: 2px;
}

.image-controller-3d div div button svg {
  width: 13px;
  height: 13px;
}

.image-controller-3d div div button svg path {
  fill: #fff;
}

.body-3D {
  position: relative;
  z-index: 0;
}

.body-3D .test-3D {
  position: relative;
  width: 100%;
  height: 1080px;
}

.body-3D .test-3D img.background-3D {
  width: 100%;
  height: 748px;
  z-index: 0;
  margin: 0 auto;
  display: block;
  border-radius: 24px;
  position: relative;
  top: -31px;
}

.body-3D .test-3D .selected-normal-display {
  background-color: unset;
  padding: 0px;
  border: 1px solid #EFEFEF;
  color: #ffffff;
  border-radius: 15px;
  width: 100%;
  height: fit-content;
}

.body-3D .test-3D .selected-normal-display p {
  padding: 10px;
  background-color: #F8F8F8;
  border-radius: 15px;
  margin: 10px;
  color: #322D2D;
}

.body-3D .test-3D .selected-normal-display ul.normal-display {
  background-color: rgba(255, 255, 255, 0.6);
  margin: 0px;
  padding: 20px 30px 20px 45px;
  border-bottom-left-radius: 15px;
  overflow: hidden;
  scrollbar-width: none;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  background-color: #F8F8F8;
  border-radius: 15px;
  margin: 10px;
  gap: 1rem;
}

.body-3D .test-3D .selected-normal-display ul.normal-display::-webkit-scrollbar {
  display: none;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check {
  width: 120px;
  height: 85px;
  background-color: transparent;
  margin: 0 0 0;
  /* border: 2px solid #727d93; */
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .background-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .margin-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .torange-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-lachek-torang .lecheck-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-afshan .background-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-afshan .margin-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-kheshti .background-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .selected-normal-display ul.normal-display li.check div .main-carpet-kheshti .flex-container img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display {
  background-color: unset;
  padding: 0px;
  border: 1px solid #EFEFEF;
  color: #ffffff;
  border-radius: 15px;
  width: 100%;
  height: fit-content;
}

.body-3D .test-3D .similar-normal-display p {
  padding: 10px;
  background-color: #F8F8F8;
  border-radius: 15px;
  margin: 10px;
  color: #322D2D;
}

.body-3D .test-3D .similar-normal-display ul {
  background-color: rgba(255, 255, 255, 0.6);
  margin: 0px;
  padding: 20px 55px 20px 20px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
  scrollbar-width: none;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  background-color: #F8F8F8;
  border-radius: 15px;
  margin: 10px;
  gap: 1rem;
}

.body-3D .test-3D .similar-normal-display ul::-webkit-scrollbar {
  display: none;
}

.body-3D .test-3D .similar-normal-display ul li.check {
  width: 120px;
  height: 85px;
  background-color: transparent;
  margin: 0 0 0;
  /* border: 2px solid #727d93; */
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.body-3D .test-3D .similar-normal-display ul li.check img.image-preview {
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .background-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .margin-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .torange-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-lachek-torang .lecheck-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-afshan .background-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-afshan .margin-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-kheshti .background-carpet img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.body-3D .test-3D .similar-normal-display ul li.check div .main-carpet-kheshti .flex-container img {
  width: 120px;
  height: 85px;
}

.body-3D .test-3D .similar-normal-display ul li.check span {
  position: absolute;
  left: 67%;
  top: 3px;
  padding: 5px;
  background: #8f1105;
  border-radius: 15px;
  /* border-bottom-right-radius: 15px; */
  z-index: 99;
  font-size: smaller;
  opacity: 0.6;
}

.body-3D .test-3D .carpet-3D {
  /* transform: perspective(630px) rotateX(60deg); */
  position: absolute;
  bottom: 85px;
  right: 25%;
  left: 25%;
  width: 640px;
  height: 500px;
  z-index: 2;
  transform-origin: bottom center;

}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet {
  background: transparent;
  box-shadow: none;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet {
  background-color: white;
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet img.image-preview {
  width: 100%;
  height: 100%;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
  width: 100%;
  height: 252px;
}

.body-3D .test-3D .footer-3D {
  padding-top: 27px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  color: white;
  background-color: #de2a35;
}

.body-3D .navbar {
  padding-right: 40px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
}

.body-3D .navbar ul {
  padding: 25px 25px 15px;
  display: inline-flex;
  border-bottom: 1px solid #bbc2ce;
  margin-bottom: 0;
}

.body-3D .navbar ul li {
  margin: 0px 15px;
  font-size: 18px;
  font-weight: bold;
  color: darkgray;
}

.body-3D .navbar ul li:hover {
  color: black;
  cursor: pointer;
}

.body-3D .navbar ul li.active {
  color: #de2a35;
}

.body-3D .navbar .city-filter-body {
  position: relative;
  width: 100%;
  display: flex;
  font-weight: bold;
  font-size: 14px;
}

.body-3D .navbar .city-filter-body .mobile-size {
  display: inline-flex;
}

.body-3D .navbar .city-filter-body p {
  width: 85px;
  padding: 0 40px 0 0;
  margin: 0;
  color: #999;
}

.body-3D .navbar .city-filter-body .search-body {
  padding: 25px 0 10px 0;
  width: 100%;
  margin: 0;
  display: inline-flex;
}

.body-3D .navbar .city-filter-body .search-form {
  margin: 0;
  width: 204px;
}

.body-3D .navbar .city-filter-body .search-form input[type="search"] {
  width: 100%;
  padding-left: 10px;
}

.body-3D .navbar .city-filter-body .search-form input[type="search"]:hover {
  cursor: pointer;
}

.body-3D .navbar .city-filter-body .search-form ul.multi-select {
  z-index: 3;
  position: absolute;
  top: 100%;
  display: none;
  width: 204px;
  max-height: 170px;
  margin: 0;
  padding: 0;
  border: 1.7px solid rgba(0, 0, 0, 0.09);
  overflow: hidden;
  scrollbar-width: none;
  overflow-y: scroll;
  background-color: #ffffff;
}

.body-3D .navbar .city-filter-body .search-form ul.multi-select::-webkit-scrollbar {
  display: none;
}

.body-3D .navbar .city-filter-body .search-form ul.multi-select li {
  color: #000000;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
}

.body-3D .navbar .city-filter-body .search-form ul.multi-select li:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.09);
}

.body-3D .navbar .city-filter-body .search-form ul.multi-select li:hover,
.body-3D .navbar .city-filter-body .search-form ul.multi-select li.active {
  color: #ffffff;
  background: #de2a35;
}

.body-3D .navbar .city-filter-body .search-form ul.multi-select.active {
  display: block;
}

.body-3D .navbar .city-filter-body .selected-body {
  display: inline-flex;
  margin: 0;
  padding: 0 5px 5px;
  height: fit-content;
}

.body-3D .navbar .city-filter-body .selected-body span {
  margin: 0 5px;
  background-color: #de2a35;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 8px;
}

.body-3D .navbar .city-filter-body .selected-body span:hover {
  background-color: #26283a;
}

.body-3D .navbar .city-filter-body .selected-body button.close {
  position: relative;
  width: 12px;
  height: 12px;
  background: transparent;
  margin: 0 0 0 10px;
}

.body-3D .navbar .city-filter-body .selected-body button.close:before,
.body-3D .navbar .city-filter-body .selected-body button.close:after {
  position: absolute;
  left: 4px;
  top: -3px;
  content: " ";
  height: 13px;
  width: 4px;
  background-color: #ffffff;
}

.body-3D .navbar .city-filter-body .selected-body button.close:before {
  transform: rotate(45deg);
}

.body-3D .navbar .city-filter-body .selected-body button.close:after {
  transform: rotate(-45deg);
}

.body-3D .navbar .city-filter-body .selected-body button.close:hover {
  cursor: pointer;
}

.body-3D .cards-body .card-3D {
  color: black;
  border-radius: 20px;
  margin: 20px 0px;
  position: relative;
}

.body-3D .cards-body .card-3D .location-shopping {
  position: absolute;
  top: 0px;
  background-color: #ffffff;
  padding: 5px 7px 3px;
  margin: 10px;
  border-radius: 8px;
}

.body-3D .cards-body .card-3D .location-shopping svg {
  width: 24px;
  height: 24px;
}

.body-3D .cards-body .card-3D .insurance-icon {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: #de2a35;
  padding: 5px 7px 3px;
  margin-bottom: 7px;
  border-top-right-radius: 8px;
}

.body-3D .cards-body .card-3D .insurance-icon svg {
  width: 32px;
  height: 32px;
}

.body-3D .cards-body .card-3D .sales {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: #de2a35;
  padding: 3px 14px 5px 33px;
  margin-bottom: 7px;
  color: white;
  clip-path: polygon(30% 0%, 100% 0, 100% 100%, 0 100%);
}

.body-3D .cards-body .card-3D img {
  width: 100%;
  /* height: 250px; */
  height: 200px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.body-3D .cards-body .card-3D .texts-body {
  /* height: 200px; */
  height: 250px;
  position: relative;
  overflow: hidden;
  margin-top: -8px;
  background-color: #ffffff;
  padding: 25px 20px;
  padding-top: 15px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
}

.body-3D .cards-body .card-3D .texts-body .size-carpet {
  padding: 10px 12px 8px;
  color: gray;
  /* margin-bottom: 30px; */
  margin-bottom: 10px;
  background-color: rgba(169, 169, 169, 0.42);
  border-radius: 8px;
  font-size: 18px;
}

.body-3D .cards-body .card-3D .texts-body .size-carpet span {
  margin: 0px auto 0px 10px;
  color: black;
  font-weight: bolder;
}

.body-3D .cards-body .card-3D .texts-body:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.body-3D .cards-body .card-3D .texts-body h4 {
  /* margin: 0px 0px 25px; */
  margin: 0px 0px 10px;
  word-break: break-word;
}

.body-3D .cards-body .card-3D .texts-body p {
  color: #909090;
  /* font-size: 14px; */
  font-size: 13px;
  word-break: break-word;
  overflow: hidden;
}

.body-3D .pagination {
  background-color: white;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 3rem;
  padding: 20px 20px 12px;
  max-width: 100%;
  flex: 0 0 100%;
  -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
}

.body-3D .pagination ul.body-pagination {
  display: inline-flex;
  direction: ltr;
  width: 35%;
}

.body-3D .pagination ul.body-pagination li {
  margin: 0px 10px;
  height: 25px;
  flex: 1 1;
  color: #2b2d42;
  cursor: pointer;
}

.body-3D .pagination ul.body-pagination li a {
  text-decoration: none;
}

.body-3D .pagination ul.body-pagination li:not(:hover):last-child,
.body-3D .pagination ul.body-pagination li:not(:hover):first-child,
.body-3D .pagination ul.body-pagination li:hover {
  color: #2b2d42;
  font-size: 18px;
  font-weight: bold;
}

.body-3D .pagination ul.body-pagination li.right-arrow,
.body-3D .pagination ul.body-pagination li.left-arrow {
  stroke: #2b2d42;
}

.body-3D .pagination ul.body-pagination li.right-arrow svg,
.body-3D .pagination ul.body-pagination li.left-arrow svg {
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  width: 60px;
  height: 25px;
}

.body-3D .pagination ul.body-pagination li.right-arrow svg path,
.body-3D .pagination ul.body-pagination li.left-arrow svg path {
  fill: #fcfcfc;
  fill-rule: nonzero;
  stroke-width: 0.39px;
}

.body-3D .pagination ul.body-pagination li.right-arrow:hover,
.body-3D .pagination ul.body-pagination li.left-arrow:hover {
  stroke: #de2a35;
}

.body-3D .pagination ul.body-pagination li.right-arrow {
  margin-left: 30px;
}

.body-3D .pagination ul.body-pagination li.left-arrow {
  margin-right: 30px;
}

.body-3D .footer-page {
  width: 100%;
  height: 60px;
  background-color: #727d93;
  text-align: center;
  padding: 20px;
}

.body-3D .footer-page p.copyright-footer {
  color: #bbc2ce;
}

.header {
  background-color: #8F1105;
  display: flex;
  z-index: 100;
  height: 148px;
  position: static;
}

.header .header-center {
  width: 60%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.header .header-center .user-profile {
  margin: 0;
  padding: 5px;
  border-radius: 24px;
  background-color: #720E04;
  align-items: center;
  display: flex;
  color: #fff;
  gap: 2px;
  cursor: pointer;
  position: relative;
  z-index: 99;
}



.header .header-center .user-profile ul {
  display: none;
  position: absolute;
  text-align: center;
  top: 37px;
  right: 0px;
  background: #ffffff;
  color: #727d93;
  border-radius: 5px;
  /* border: 3px solid #727d93; */
  padding: 10px 0;
  border-radius: 15px;
  z-index: 9;
  box-shadow: 5px 5px 5px #00000027;
  min-width: 150px;
}

.header .header-center .user-profile ul li {
  padding: 5px 7px;
  display: grid;
  display: flex;
  flex-direction: row;
}

.header .header-center .user-profile ul li span {
  color: #000
}

.header .header-center .user-profile ul li.active {
  background: #720E04;
}

.header .header-center .user-profile ul li.active span {
  color: #ffffff;
}

.header .header-center .user-profile ul li:hover {
  background: #720E04;
  color: #ffffff;
}

.header .header-center .user-profile ul li:hover span {
  color: #ffffff;
}

.header .header-center .user-profile.active ul {
  display: block;
}

.header .header-center .language {
  background-color: rgba(0, 0, 0, 0.5);
  margin: 10px auto 10px 0;
  padding: 10px 30px 10px 20px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  height: 35px;
  display: flex;
  font-size: 14px;
  line-height: 1.6;
  color: #727d93;
  padding: 2px 15px;
  border-radius: 50px;
  margin: 0 5px;
  cursor: pointer;
  background-color: #720E04;
  z-index: 100;
}

.header .header-center .language img,
.header .header-center .language span {
  width: 32px;
  height: 32px;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  color: #fff;
  display: flex;
}

.header .header-center .language ul {
  display: none;
  position: absolute;
  text-align: center;
  top: 115%;
  left: 9.5%;
  background: #ffffff;
  color: #727d93;
  border: none;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #00000027;
}

.header .header-center .language ul li {
  padding: 5px 7px;
  display: grid;
  display: flex;
  flex-direction: row;
}

.header .header-center .language ul li span {
  color: #000
}

.header .header-center .language ul li.active {
  background: #720E04;
  border-radius: 15px;
}

.header .header-center .language ul li.active span {
  color: #ffffff;
}

.header .header-center .language ul li:hover {
  background: #720E04;
  color: #ffffff;
  border-radius: 15px;
}

.header .header-center .language ul li:hover span {
  color: #ffffff;
}

.header .header-center .language.active ul {
  display: block;
}

/*  old code header btn */

.header .svg-div-logo {
  padding: 10px;
  /* margin-right: -10px; */
  margin: 10px auto;
}

.header .svg-div-logo .svg-logo {
  /* background-color: #ffffff; */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 10px 20px 0px 30px;
  height: 100%;
}

.header .svg-div-logo .svg-logo img {
  height: 40px;
}

.header .btn-register-body,
.language {
  background-color: rgba(0, 0, 0, 0.5);
  margin: 10px auto 10px 0;
  padding: 10px 30px 10px 20px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
}

.header .btn-register-body .language,
.language {
  height: 35px;
  display: flex;
  background-color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  color: #727d93;
  padding: 2px 15px;
  border-radius: 50px;
  margin: 0 5px;
  position: relative;
  cursor: pointer;
}

.header .btn-register-body .language img,
.language img {
  width: 32px;
  height: 32px;
}

.header .btn-register-body .language ul,
.language ul {
  display: none;
  position: absolute;
  text-align: center;
  top: 115%;
  left: 9.5%;
  background: #ffffff;
  color: #727d93;
  border-radius: 5px;
  border: 3px solid #727d93;
  z-index: 999999;
}

.header .btn-register-body .language ul li,
.language ul li {
  padding: 5px 7px;
  display: grid;
  display: flex;
  flex-direction: row;
}

.header .btn-register-body .language ul li.active,
.language ul li.active {
  background: #de2a35;
  color: #ffffff;
}

.header .btn-register-body .language ul li:hover,
.language ul li:hover {
  background: #26283a;
  color: #ffffff;
}

.header .btn-register-body .language.active ul,
.language.active ul {
  display: block;
}

.header .btn-register-body .btn-register {
  height: 35px;
  display: flex;
  background-color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  color: #727d93;
  padding: 6px 10px 6px 6px;
  border-radius: 50px;
  margin: 0 5px;
}

.header .btn-register-body .btn-register:hover {
  color: #de2a35;
}

.header .btn-register-body .btn-register svg {
  margin: 0px 5px;
  width: 25px;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linejoin: round;
  stroke-literlimit: 1.41421;
}

.auth-modal-overlay {
  position: absolute;
  width: 40%;
  height: auto;
  background-color: #fff;
  padding: 2rem 2rem;
  top: 25%;
  left: 25%;
  right: 25%;
  z-index: 9999;
  border-radius: 24px;
  min-width: 220px;
}

.auth-modal-overlay .auth-modal {
  width: 100%;
}

.auth-modal-overlay .auth-modal .auth-tabs {
  display: flex;
  height: 45px;
  gap: 0.5rem;

}

.auth-modal-overlay .auth-modal .auth-tabs button {
  width: 100% !important;
  padding: 5px;
  border-radius: 15px;
  cursor: pointer;
}

.auth-modal-overlay .auth-modal .auth-tabs button.active {
  background-color: #8F1105;
  color: #fff;
  font-weight: bold;
}

.auth-modal-overlay .auth-modal form {
  width: 100%;
  margin: 10px 0;
}

.auth-modal-overlay .auth-modal form .auth-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  justify-content: baseline;
  gap: 0.5rem;
}

.auth-modal-overlay .auth-modal form .auth-row label {
  text-align: right;
  width: 100%;
  font-weight: normal;
}

.auth-modal-overlay .auth-modal form .auth-row input {
  padding: 10px 5px;
  border: 1.5px solid #CACFDF;
  border-radius: 15px;
  width: 100%;
}

.auth-modal-overlay .auth-modal form .auth-actions {
  width: 100%;
}

.auth-modal-overlay .auth-modal form .auth-actions button {
  padding: 10px 20px;
  margin: 2px;
  border-radius: 10px;
}

.cards-body {
  padding: 0 !important;
}

.auth-modal-overlay-carpet {
  height: 100%;
  background-color: #fff !important;
  padding: 5px 10px;
  z-index: 9999;
  border-radius: 24px;
  min-width: 220px;
  margin: 15px 0;
  width: 100% !important;
}

.auth-modal-overlay-carpet .auth-modal {
  width: 100%;
}

.auth-modal-overlay-carpet .auth-modal .auth-tabs {
  display: flex;
  height: 45px;
  gap: 0.5rem;

}

.auth-modal-overlay-carpet .auth-modal .auth-tabs button {
  width: 100% !important;
  padding: 5px;
  border-radius: 15px;
  cursor: pointer;
}

.auth-modal-overlay-carpet .auth-modal .auth-tabs button.active {
  background-color: #8F1105;
  color: #fff;
  font-weight: bold;
}

.auth-modal-overlay-carpet .auth-modal form {
  width: 100%;
  margin: 10px 0;
}

.auth-modal-overlay-carpet .auth-modal form .auth-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  justify-content: baseline;
  gap: 0.2rem;
}

.auth-modal-overlay-carpet .auth-modal form .auth-row label {
  text-align: right;
  width: 100%;
  font-weight: normal;
}

.auth-modal-overlay-carpet .auth-modal form .auth-row input {
  padding: 10px 5px;
  border: 1px solid #CACFDF;
  border-radius: 8px;
  width: 100%;
}

.auth-modal-overlay-carpet .auth-modal form .auth-actions {
  width: 100%;
}

.auth-modal-overlay-carpet .auth-modal form .auth-actions button {
  padding: 10px 20px;
  margin: 2px;
  border-radius: 8px;
  width: 100%;
}


.shadow-div {
  min-width: 60%;
  max-width: 100%;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 15px;
  border-radius: 24px;
  /* -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13); */
  position: relative;
  top: -30px;
}

.full-body {
  max-width: 100% !important;
}

.rug-header {
  min-width: 60%;
  max-width: 100%;
  position: relative;
  top: -50px;
  z-index: 1;
  text-align: center !important;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 24px;
}

.rug-header .rug-header-main {
  background-color: #F8F8F8;
  width: 100%;
  border-radius: 20px;
  display: table;
}

.rug-header .btn-rug {
  padding: 10px 20px;
  margin: 10px;
  display: flex;
  gap: 1rem;
  vertical-align: middle;
  align-items: center;
  border-radius: 15px;
}

.rug-header .btn-rug:hover,
.rug-header .btn-rug:hover svg,
.rug-header .btn-rug:hover svg path {
  background-color: #8F1105;
  color: #fff;
  fill: #fff;
  cursor: pointer;
}


.rug-header .btn-rug-right {
  float: right;
  background-color: transparent;
}

.rug-header .btn-rug-left {
  float: left;
  z-index: 99999;
  position: relative;
}

.rug-header-filter {
  min-width: 60%;
  max-width: 100%;
  position: relative;
  top: -50px;
  z-index: 99;
  text-align: center !important;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 24px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.arrow {
  border: solid;
  border-width: 0 3px 3px 0;
  border-radius: 1px 3px 1px 3px;
  display: inline-block;
  padding: 3px;
}

.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-bottom: -4px;
}

.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 1px;
}

.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.room-generator {
  font-family: Shabnam;
  position: relative;
}

.room-generator .page-loader {
  color: #de2a35;
  display: none;
}

.room-generator .page-loader.active {
  display: block;
}

.room-generator .mobile-menu {
  height: 0px;
  transition: all 1s;
  display: none;
  width: 285px;
  position: absolute;
  top: 35px;
  bottom: 0;
  left: -177px;
  z-index: 20;
}

.room-generator .mobile-menu .d-flex {
  padding-right: 23px;
  display: none;
}

.room-generator .mobile-menu .carpet-btn {
  text-align: right;
  background-color: #de2a35;
  padding: 12px 18px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 1.5em;
  color: white;
  cursor: pointer;
}

.room-generator .mobile-menu .list-body {
  width: 177px;
  margin: 0;
  background-color: rgba(236, 237, 238, 0.81);
}

.room-generator .mobile-menu .list-body span {
  cursor: pointer;
}

.room-generator .mobile-menu .list-body .three-child-body,
.room-generator .mobile-menu .list-body .second-child-body {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .mobile-menu .list-body .three-child-body::-webkit-scrollbar,
.room-generator .mobile-menu .list-body .second-child-body::-webkit-scrollbar {
  display: none;
}

.room-generator .mobile-menu .list-body .second-child-body {
  max-height: 160px;
}

.room-generator .mobile-menu .list-body .second-child-body.active {
  display: flex;
}

.room-generator .mobile-menu .list-body .three-child-body {
  max-height: 100px;
}

.room-generator .mobile-menu .list-body .three-child-body.active {
  display: flex;
}

.room-generator .mobile-menu .list-body .first-child {
  color: #de2a35;
  font-size: 1.6em;
  font-weight: 500;
  padding: 6px 0;
}

.room-generator .mobile-menu .list-body .first-child span {
  padding: 0 22px;
}

.room-generator .mobile-menu .list-body .first-child span i {
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.room-generator .mobile-menu .list-body .first-child span:hover {
  color: #727d93;
}

.room-generator .mobile-menu .list-body .first-child.active span i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 1px;
}

.room-generator .mobile-menu .list-body .second-child {
  color: #727d93;
  font-size: 1.3em;
  font-weight: 500;
  padding: 4px 0;
  margin: 0;
}

.room-generator .mobile-menu .list-body .second-child span {
  padding: 0 29px;
}

.room-generator .mobile-menu .list-body .second-child span:hover {
  color: #de2a35;
}

.room-generator .mobile-menu .list-body .second-child.active {
  color: #de2a35;
}

.room-generator .mobile-menu .list-body .three-child {
  color: #bbc2ce;
  font-size: 1em;
  font-weight: 300;
  padding: 4px 0;
  margin-right: 0;
}

.room-generator .mobile-menu .list-body .three-child span {
  padding: 0 39px 0 0;
}

.room-generator .mobile-menu .list-body .three-child span:hover {
  color: #de2a35;
}

.room-generator .mobile-menu .list-body .three-child.active {
  color: #de2a35;
  background-color: white;
  margin-left: 20px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.room-generator .mobile-menu .carpet-body {
  width: 85px;
  margin: 0;
  background-color: #ffffff;
}

.room-generator .mobile-menu .carpet-body .container.just-body {
  border-radius: 0;
  padding: 0;
}

.room-generator .mobile-menu .carpet-body .container.just-body .row {
  margin: 0;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet {
  width: 90%;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet button {
  text-align: center;
  width: 100%;
  background-color: #ffffff;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet button.button-shadow-left {
  top: 0;
  right: 0;
  left: 0;
  bottom: unset;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet button.button-shadow-right {
  top: unset;
  right: 0;
  left: 0;
  bottom: 0;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet button svg {
  fill: #727d93;
  transform: rotate(90deg);
}

.room-generator .mobile-menu .carpet-body .recommend-carpet button svg:hover {
  fill: #de2a35;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet .body-carpet {
  width: 100%;
  height: auto;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet .recommend-carpet-scroll {
  max-width: unset;
  max-height: 414px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: unset;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .mobile-menu .carpet-body .recommend-carpet .recommend-carpet-scroll::-webkit-scrollbar {
  display: none;
}

.room-generator .mobile-menu.active {
  height: auto;
  left: 0;
}

.room-generator .mobile-menu.active .carpet-btn {
  text-align: left;
}

.room-generator .mobile-menu.active .d-flex {
  display: flex;
}

.room-generator .mobile-menu-right-side {
  height: 0px;
  transition: all 1s;
  display: none;
  width: 285px;
  position: absolute;
  top: 35px;
  bottom: 0;
  right: -177px;
  z-index: 20;
}

.room-generator .mobile-menu-right-side .d-flex {
  padding-left: 23px;
  display: none;
  height: 429px;
}

.room-generator .mobile-menu-right-side .carpet-btn {
  text-align: left;
  background-color: #de2a35;
  padding: 12px 18px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 1.5em;
  color: white;
  cursor: pointer;
}

.room-generator .mobile-menu-right-side .list-body {
  width: 177px;
  margin: 0;
  background-color: rgba(236, 237, 238, 0.81);
}

.room-generator .mobile-menu-right-side .list-body span {
  cursor: pointer;
}

.room-generator .mobile-menu-right-side .list-body .three-child-body,
.room-generator .mobile-menu-right-side .list-body .second-child-body {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .mobile-menu-right-side .list-body .three-child-body::-webkit-scrollbar,
.room-generator .mobile-menu-right-side .list-body .second-child-body::-webkit-scrollbar {
  display: none;
}

.room-generator .mobile-menu-right-side .list-body .second-child-body {
  max-height: 160px;
}

.room-generator .mobile-menu-right-side .list-body .second-child-body.active {
  display: flex;
}

.room-generator .mobile-menu-right-side .list-body .three-child-body {
  max-height: 100px;
}

.room-generator .mobile-menu-right-side .list-body .three-child-body.active {
  display: flex;
}

.room-generator .mobile-menu-right-side .list-body .first-child {
  color: #de2a35;
  font-size: 1.6em;
  font-weight: 500;
  padding: 6px 0;
}

.room-generator .mobile-menu-right-side .list-body .first-child span {
  padding: 0 20px;
}

.room-generator .mobile-menu-right-side .list-body .first-child span i {
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  float: left;
  margin: 8px;
}

.room-generator .mobile-menu-right-side .list-body .first-child span:hover {
  color: #727d93;
}

.room-generator .mobile-menu-right-side .list-body .first-child.active span i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 1px;
}

.room-generator .mobile-menu-right-side .list-body .second-child {
  color: #727d93;
  font-size: 1.3em;
  font-weight: 500;
  padding: 4px 0;
  margin: 0;
}

.room-generator .mobile-menu-right-side .list-body .second-child span {
  padding: 0 29px;
}

.room-generator .mobile-menu-right-side .list-body .second-child span:hover {
  color: #de2a35;
}

.room-generator .mobile-menu-right-side .list-body .second-child.active {
  color: #de2a35;
}

.room-generator .mobile-menu-right-side .list-body .three-child {
  color: #bbc2ce;
  font-size: 1em;
  font-weight: 300;
  padding: 4px 0;
  margin-right: 0;
  margin-left: 0;
}

.room-generator .mobile-menu-right-side .list-body .three-child span {
  padding: 0 40px 0 0;
}

.room-generator .mobile-menu-right-side .list-body .three-child span:hover {
  color: #de2a35;
}

.room-generator .mobile-menu-right-side .list-body .three-child.active {
  color: #de2a35;
  background-color: white;
  margin-right: 20px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.room-generator .mobile-menu-right-side .list-body .three-child.active span {
  padding-right: 20px;
}

.room-generator .mobile-menu-right-side .upload-btn-m {
  background-color: #de2a35;
  background-image: url("./../img/upload.png");
  background-position: 50% 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
  width: 72px;
  height: 57px;
  border-radius: 10px;
}

.room-generator .mobile-menu-right-side .upload-btn-m span {
  position: absolute;
  bottom: 4px;
  right: 0;
  left: 0;
  font-size: 10px;
  width: 100%;
  text-align: center;
  color: white;
}

.room-generator .mobile-menu-right-side .upload-img-body {
  position: relative;
}

.room-generator .mobile-menu-right-side .upload-img-body .upload-btn-m {
  display: block;
}

.room-generator .mobile-menu-right-side .upload-img-body img {
  display: none;
  border-radius: 5px;
  border: 1px solid #727d93;
  width: 100%;
  max-width: 85px;
  height: 57px;
  cursor: pointer;
}

.room-generator .mobile-menu-right-side .upload-img-body span.close-icon {
  display: none;
  background-size: 100% 100%;
  background-image: url("./../img/close-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 4px;
  right: 4px;
}

.room-generator .mobile-menu-right-side .upload-img-body.active .upload-btn-m {
  display: none;
}

.room-generator .mobile-menu-right-side .upload-img-body.active img,
.room-generator .mobile-menu-right-side .upload-img-body.active span.close-icon {
  display: block;
}

.room-generator .mobile-menu-right-side .carpet-body {
  width: 85px;
  margin: 0;
  background-color: #ffffff;
  height: 429px;
}

.room-generator .mobile-menu-right-side .carpet-body ul {
  height: 350px;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child {
  padding: 10px 4px;
  position: relative;
  z-index: 4;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child button.scroll {
  width: 100%;
  cursor: pointer;
  background-color: #ffffff;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 6;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child button.scroll svg {
  fill: #727d93;
  transform: rotate(90deg);
  width: 16px;
  height: 16px;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child button.scroll svg:hover {
  fill: #de2a35;
  cursor: pointer;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child button.button-shadow-left {
  top: -10px;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child button.button-shadow-right {
  bottom: 10px;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child ul {
  display: flex;
  justify-content: right;
  flex-direction: column;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child ul::-webkit-scrollbar {
  display: none;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child ul li {
  margin: 8px 0;
  border-radius: 10px;
  border: 2px solid #e7eaef;
  width: 71px;
  height: 52px;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child ul li img {
  border-radius: 7px;
  width: 100%;
  height: 100%;
}

.room-generator .mobile-menu-right-side .carpet-body .last-child ul li:hover,
.room-generator .mobile-menu-right-side .carpet-body .last-child ul li.active {
  cursor: pointer;
  border-color: #de2a35;
}

.room-generator .mobile-menu-right-side.active {
  height: auto;
  right: 0;
}

.room-generator .mobile-menu-right-side.active .carpet-btn {
  text-align: right;
}

.room-generator .mobile-menu-right-side.active .d-flex {
  display: flex;
}

.room-generator .navbar {
  width: 50%;
  position: absolute;
  transition: bottom 0.5s ease;
  bottom: 99%;
  right: 25%;
  left: 25%;
  z-index: 10;
}

.room-generator .navbar ul.nav-ul {
  display: flex;
  background: #de2a35;
  justify-content: right;
  padding: 15px 12.5% 15px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.26);
  width: 100%;
  position: relative;
  z-index: 5;
}

.room-generator .navbar ul.nav-ul button {
  margin: 0;
  background: transparent;
  cursor: pointer;
  position: absolute;
  right: 6%;
}

.room-generator .navbar ul.nav-ul button img {
  width: 24px;
  height: 24px;
  margin-top: 4px;
}

.room-generator .navbar ul.nav-ul li {
  color: #ffffff;
  background-color: #bc2222;
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 19px 4px 20px;
  margin: 0 15px;
  flex-grow: 1;
}

.room-generator .navbar ul.nav-ul li span {
  float: left;
}

.room-generator .navbar ul.nav-ul li span i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 1px;
}

.room-generator .navbar ul.nav-ul li:hover {
  cursor: pointer;
  color: #de2a35;
  background-color: white;
}

.room-generator .navbar ul.nav-ul li.active {
  color: #de2a35;
  background-color: white;
}

.room-generator .navbar ul.nav-ul li.active span i {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-bottom: -4px;
}

.room-generator .navbar .nav-content {
  position: relative;
  z-index: 4;
  margin-top: -15px;
  width: 100%;
  background-color: white;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.26);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 15px 0 0;
}

.room-generator .navbar .nav-content .ul-bg-brand {
  width: 100%;
  padding: 15px 12.5% 15px;
  background-color: white;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
  z-index: 2;
}

.room-generator .navbar .nav-content .ul-bg-brand ul {
  padding: 0;
}

.room-generator .navbar .nav-content .ul-bg-brand button {
  cursor: pointer;
  background: transparent;
  position: absolute;
  top: 4px;
  bottom: 0;
  z-index: 6;
}

.room-generator .navbar .nav-content .ul-bg-brand button svg {
  fill: #de2a35;
  width: 16px;
  height: 16px;
}

.room-generator .navbar .nav-content .ul-bg-brand button.button-shadow-left {
  left: 10px;
}

.room-generator .navbar .nav-content .ul-bg-brand button.button-shadow-right {
  right: 10px;
}

.room-generator .navbar .nav-content ul {
  padding: 15px 12.5% 15px 0;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: right;
  flex-direction: row;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .navbar .nav-content ul::-webkit-scrollbar {
  display: none;
}

.room-generator .navbar .nav-content ul.rug-metrage {
  background-color: #f3f4f6;
  z-index: 1;
  margin-top: -15px;
  padding-top: 30px;
}

.room-generator .navbar .nav-content ul li {
  margin: 0 15px;
  font-weight: 500;
  color: #5e6777;
}

.room-generator .navbar .nav-content ul li:hover,
.room-generator .navbar .nav-content ul li.active {
  cursor: pointer;
  color: #de2a35;
}

.room-generator .navbar .btn-down {
  margin: 20px 45% -32px;
  background-color: #de2a35;
  width: 32px;
  height: 32px;
  border-radius: 5px;
}

.room-generator .navbar .btn-down i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 1px;
  border-color: #ffffff;
}

.room-generator .navbar.active {
  bottom: unset;
}

.room-generator .navbar.active .btn-down i {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-bottom: -4px;
}

.room-generator .right-sidebar-body {
  width: 730px;
  position: relative;
  margin-bottom: 85px;
}

.room-generator .right-sidebar-body ul.nav-ul {
  display: flex;
  background: #727d93;
  justify-content: center;
  padding: 22px 22px 14px 22px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 100%;
  position: relative;
  z-index: 5;
}

.room-generator .right-sidebar-body ul.nav-ul li {
  color: #ffffff;
  background-color: #363c46;
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 19px 4px 20px;
  margin: 0 15px;
}

.room-generator .right-sidebar-body ul.nav-ul li span {
  margin-right: 30px;
}

.room-generator .right-sidebar-body ul.nav-ul li span i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 1px;
}

.room-generator .right-sidebar-body ul.nav-ul li:hover {
  cursor: pointer;
  color: #de2a35;
  background-color: white;
}

.room-generator .right-sidebar-body ul.nav-ul li.active {
  color: #de2a35;
  background-color: white;
}

.room-generator .right-sidebar-body ul.nav-ul li.active span i {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-bottom: -4px;
}

.room-generator .right-sidebar-body .first-child,
.room-generator .right-sidebar-body .second-child,
.room-generator .right-sidebar-body .last-child {
  width: 100%;
  margin-top: -15px;
  padding: 30px 12% 15px;
  background-color: #e1e5ec;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
  z-index: 4;
}

.room-generator .right-sidebar-body .first-child button.scroll,
.room-generator .right-sidebar-body .second-child button.scroll,
.room-generator .right-sidebar-body .last-child button.scroll {
  cursor: pointer;
  background: transparent;
  position: absolute;
  top: 12px;
  bottom: 0;
  z-index: 6;
}

.room-generator .right-sidebar-body .first-child button.scroll svg,
.room-generator .right-sidebar-body .second-child button.scroll svg,
.room-generator .right-sidebar-body .last-child button.scroll svg {
  fill: #de2a35;
  width: 16px;
  height: 16px;
}

.room-generator .right-sidebar-body .first-child button.button-shadow-left,
.room-generator .right-sidebar-body .second-child button.button-shadow-left,
.room-generator .right-sidebar-body .last-child button.button-shadow-left {
  left: 10px;
}

.room-generator .right-sidebar-body .first-child button.button-shadow-right,
.room-generator .right-sidebar-body .second-child button.button-shadow-right,
.room-generator .right-sidebar-body .last-child button.button-shadow-right {
  right: 10px;
}

.room-generator .right-sidebar-body .first-child ul,
.room-generator .right-sidebar-body .second-child ul,
.room-generator .right-sidebar-body .last-child ul {
  display: flex;
  justify-content: right;
  flex-direction: row;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .right-sidebar-body .first-child ul::-webkit-scrollbar,
.room-generator .right-sidebar-body .second-child ul::-webkit-scrollbar,
.room-generator .right-sidebar-body .last-child ul::-webkit-scrollbar {
  display: none;
}

.room-generator .right-sidebar-body .first-child ul li,
.room-generator .right-sidebar-body .second-child ul li,
.room-generator .right-sidebar-body .last-child ul li {
  margin: 0 15px;
  font-weight: 500;
  color: #5e6777;
}

.room-generator .right-sidebar-body .first-child ul li:hover,
.room-generator .right-sidebar-body .first-child ul li.active,
.room-generator .right-sidebar-body .second-child ul li:hover,
.room-generator .right-sidebar-body .second-child ul li.active,
.room-generator .right-sidebar-body .last-child ul li:hover,
.room-generator .right-sidebar-body .last-child ul li.active {
  cursor: pointer;
  color: #de2a35;
}

.room-generator .right-sidebar-body .second-child {
  background-color: #f2f4f9;
  z-index: 3;
}

.room-generator .right-sidebar-body .last-child {
  display: flex;
  background-color: #ffffff;
  z-index: 2;
  padding: 30px 8% 15px;
}

.room-generator .right-sidebar-body .last-child li {
  margin: 0 15px;
  border-radius: 10px;
  border: 2px solid #e7eaef;
  width: 89px;
  height: 63px;
}

.room-generator .right-sidebar-body .last-child li img {
  border-radius: 7px;
  width: 100%;
  height: 100%;
}

.room-generator .right-sidebar-body .last-child li:hover,
.room-generator .right-sidebar-body .last-child li.active {
  cursor: pointer;
  border-color: #de2a35;
}

.room-generator .right-sidebar-body .last-child button.button-shadow-left {
  left: -10px;
}

.room-generator .right-sidebar-body .last-child button.button-shadow-right {
  right: -10px;
}

.room-generator .right-sidebar-body .last-child button.upload-btn {
  background-color: #de2a35;
  background-image: url("./../img/upload.png");
  background-position: 50% 8px;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
  margin-left: 0;
  width: 89px;
  height: 63px;
  border-radius: 10px;
}

.room-generator .right-sidebar-body .last-child button.upload-btn span {
  position: absolute;
  bottom: 4px;
  right: 0;
  left: 0;
  font-size: 10px;
  width: 100%;
  text-align: center;
  color: white;
}

.room-generator .right-sidebar-body .upload-btn-m {
  background-color: #de2a35;
  background-image: url("./../img/upload.png");
  background-position: 50% 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
  width: 85px;
  height: 59px;
  border-radius: 10px;
  margin: 3px;
}

.room-generator .right-sidebar-body .upload-btn-m span {
  position: absolute;
  bottom: 3px;
  right: 0;
  left: 0;
  font-size: 10px;
  width: 100%;
  text-align: center;
  color: white;
}

.room-generator .right-sidebar-body .upload-img-body {
  position: relative;
  margin: 0 auto 0 0;
}

.room-generator .right-sidebar-body .upload-img-body .upload-btn-m {
  display: block;
}

.room-generator .right-sidebar-body .upload-img-body img {
  display: none;
  border-radius: 5px;
  border: 1px solid #727d93;
  width: 100%;
  max-width: 85px;
  height: 57px;
  cursor: pointer;
}

.room-generator .right-sidebar-body .upload-img-body span.close-icon {
  display: none;
  background-size: 100% 100%;
  background-image: url("./../img/close-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 4px;
  right: 4px;
}

.room-generator .right-sidebar-body .upload-img-body.active .upload-btn-m {
  display: none;
}

.room-generator .right-sidebar-body .upload-img-body.active img,
.room-generator .right-sidebar-body .upload-img-body.active span.close-icon {
  display: block;
}

.room-generator .main-images-page {
  overflow: hidden;
  position: relative;
}

.room-generator .main-images-page img {
  width: 42%;
  height: 370px;
}

.room-generator .main-images-page .single-background {
  width: 100%;
  height: 650px;
}

.room-generator .main-images-page .right-image {
  transform: perspective(770px) rotateY(-48deg);
  float: right;
  margin-right: -140px;
  margin-top: 150px;
  margin-bottom: 180px;
}

.room-generator .main-images-page .right-image.wall-right-default {
  border: 2px solid #de2a35;
  background-color: #e1e4e9;
}

.room-generator .main-images-page .left-image {
  transform: perspective(770px) rotateY(48deg);
  float: left;
  margin-left: -140px;
  margin-top: 150px;
  margin-bottom: 180px;
}

.room-generator .main-images-page .left-image.wall-left-default {
  border: 2px solid #de2a35;
  background-color: #ffffff;
}

.room-generator .main-images-page .flow-wall {
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 270px;
  width: 52.9%;
}

.room-generator .main-images-page .flow-wall.wall-main-default {
  border: 2px solid #de2a35;
  background-color: #e7eaf0;
}

.room-generator .main-images-page .floor-image {
  transform: perspective(1200px) rotateX(70deg);
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 185px;
  background-size: 70px 70px;
}

.room-generator .main-images-page .floor-image.wall-floor-default {
  border: 2px solid #de2a35;
  background-color: #dbdee3;
  border-bottom: 0;
}

.room-generator .main-images-page .ceiling-image {
  transform: perspective(1200px) rotateX(-70deg);
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: -185px;
}

.room-generator .main-images-page .ceiling-image.wall-ceiling-default {
  border: 2px solid #de2a35;
  background-color: #dbdee3;
}

.room-generator .main-images-page .decoration-image {
  min-width: 270px;
  min-height: 250px;
  max-width: 350px;
  max-height: 250px;
  position: absolute;
  margin: 0;
  left: 19vw;
  bottom: 44px;
  z-index: 4;
}

.room-generator .main-images-page .decoration-image.decoration-center {
  left: unset;
}

.room-generator .main-images-page .decoration-image:hover {
  cursor: move;
}

.room-generator .main-images-page .decoration-image:focus,
.room-generator .main-images-page .decoration-image:active {
  cursor: move;
}

.room-generator .main-images-page .body-carpet {
  width: 25%;
  height: 250px;
  transform: perspective(1600px) rotateX(80deg);
  position: absolute;
  right: 30%;
  bottom: 0;
  z-index: 3;
}

.room-generator .main-images-page .body-carpet:hover {
  cursor: move;
}

.room-generator .main-images-page .body-carpet:focus,
.room-generator .main-images-page .body-carpet:active {
  cursor: move;
}

.room-generator .main-images-page .body-carpet.body-carpet-default .main-carpet {
  height: 590px;
  background-color: #5e6777;
  border: 2px solid #de2a35;
}

.room-generator .main-images-page .body-carpet.body-carpet-default .main-carpet img {
  display: none;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  border: 2px solid #727d93;
}

.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .background-carpet img,
.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .margin-carpet img,
.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .torange-carpet img,
.room-generator .main-images-page .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
}

.room-generator .main-images-page .body-carpet .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .main-images-page .body-carpet .main-carpet-afshan .margin-carpet img {
  border: 2px solid #727d93;
}

.room-generator .main-images-page .body-carpet .main-carpet-afshan .background-carpet img,
.room-generator .main-images-page .body-carpet .main-carpet-afshan .margin-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
  height: 100%;
}

.room-generator .main-images-page .body-carpet .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .main-images-page .body-carpet .main-carpet-kheshti .background-carpet img,
.room-generator .main-images-page .body-carpet .main-carpet-kheshti .flex-container img {
  width: 100%;
  height: 100%;
}

.room-generator .main-images-page .body-item-default {
  position: absolute;
  right: 30%;
  bottom: 0;
  z-index: 3;
}

.room-generator .recommend-carpet,
.room-generator .selected-carpet {
  width: 75%;
  position: relative;
  padding: 18px 0 0;
}

.room-generator .recommend-carpet button,
.room-generator .selected-carpet button {
  cursor: pointer;
  background: transparent;
  position: absolute;
  top: 33%;
  bottom: 0;
  z-index: 6;
}

.room-generator .recommend-carpet button svg,
.room-generator .selected-carpet button svg {
  fill: #de2a35;
  width: 16px;
  height: 16px;
}

.room-generator .recommend-carpet button.button-shadow-left,
.room-generator .selected-carpet button.button-shadow-left {
  left: -10px;
}

.room-generator .recommend-carpet button.button-shadow-right,
.room-generator .selected-carpet button.button-shadow-right {
  right: -10px;
}

.room-generator .recommend-carpet .recommend-carpet-scroll,
.room-generator .selected-carpet .recommend-carpet-scroll {
  display: flex;
  max-width: 95%;
  flex-direction: row;
  max-height: 114px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.room-generator .recommend-carpet .recommend-carpet-scroll::-webkit-scrollbar,
.room-generator .selected-carpet .recommend-carpet-scroll::-webkit-scrollbar {
  display: none;
}

.room-generator .recommend-carpet .recommend-carpet-scroll .single-img,
.room-generator .selected-carpet .recommend-carpet-scroll .single-img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet,
.room-generator .selected-carpet .body-carpet {
  width: 87px;
  height: 85px;
  position: relative;
  flex-shrink: 0;
  margin: 15px 0;
  padding: 1px;
  border-radius: 10px;
  transform: rotate(90deg);
}

.room-generator .recommend-carpet .body-carpet.recommend-default,
.room-generator .selected-carpet .body-carpet.recommend-default {
  border: 2px solid #727d93;
  background-color: #ffffff;
}

.room-generator .recommend-carpet .body-carpet img,
.room-generator .selected-carpet .body-carpet img {
  border-radius: 10px;
}

.room-generator .recommend-carpet .body-carpet:hover,
.room-generator .selected-carpet .body-carpet:hover {
  cursor: pointer;
  border: 2px solid #de2a35;
}

.room-generator .recommend-carpet .body-carpet.active,
.room-generator .selected-carpet .body-carpet.active {
  border: 2px solid #de2a35;
}

.room-generator .recommend-carpet .body-carpet.active::after,
.room-generator .selected-carpet .body-carpet.active::after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 6;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .background-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  border: 2px solid #727d93;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-afshan,
.room-generator .selected-carpet .body-carpet .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-afshan .background-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-afshan .background-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-afshan .background-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-afshan .margin-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
  border: 2px solid #727d93;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-kheshti,
.room-generator .selected-carpet .body-carpet .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-kheshti .background-carpet,
.room-generator .selected-carpet .body-carpet .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-kheshti .background-carpet img,
.room-generator .selected-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
  width: 100%;
  height: 100%;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-kheshti .flex-container,
.room-generator .selected-carpet .body-carpet .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.room-generator .recommend-carpet .body-carpet .main-carpet-kheshti .flex-container img,
.room-generator .selected-carpet .body-carpet .main-carpet-kheshti .flex-container img {
  width: 100%;
  height: 100%;
}

.room-generator .selected-carpet .body-carpet span::after {
  content: "x";
  background-color: #de2a35;
  color: white;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  z-index: 7;
  font-size: 14px;
}

.room-generator .container.just-body {
  padding-bottom: 15px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.room-generator .container.chose {
  background-color: #f3f4f6;
  padding-bottom: 15px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.body-navbar-design {
  width: 100%;
}

.body-navbar-design .navbar-design {
  position: relative;
  padding: 10px 20px;
  background-color: #F8F8F8;
  border-radius: 15px;
  /* -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13); */
}

.body-navbar-design .navbar-design ul.ul-background-select {
  color: #727d93;
  width: 100%;
  margin: 5px 0 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.body-navbar-design .navbar-design ul.ul-background-select li {
  flex-basis: 110px;
  margin: 0;
  padding: 5px;
  display: flex;
  background-color: #edeff2;
  border-radius: 5px;
  flex: 1 auto;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  border-radius: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #322D2D;
}

.body-navbar-design .navbar-design ul.ul-background-select li span {
  margin: 0 15px;
}

.body-navbar-design .navbar-design ul.ul-background-select li svg {
  width: 30px;
  margin: 0 10px 0 0;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 1.5;
  stroke: #727d93;
  fill: #bbc2ce;
}

.body-navbar-design .navbar-design ul.ul-background-select li svg path,
.body-navbar-design .navbar-design ul.ul-background-select li svg g path,
.body-navbar-design .navbar-design ul.ul-background-select li svg g rect {
  stroke: #727d93 !important;
  fill: #bbc2ce !important;
}

.body-navbar-design .navbar-design ul.ul-background-select li:hover {
  background-color: #8F1105;
  color: white;
  cursor: pointer;
}

.body-navbar-design .navbar-design ul.ul-background-select li.active {
  color: white;
  background-color: #8F1105;
}

.body-navbar-design .navbar-design .slider {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
}

.body-navbar-design .navbar-design .slider button {
  position: absolute;
  cursor: pointer;
  background: transparent;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.body-navbar-design .navbar-design .slider button svg {
  fill: #727d93;
  width: 16px;
  height: 26px;
}

.body-navbar-design .navbar-design .slider button.button-shadow-left {
  left: 0px;
  padding-left: 15px;
}

.body-navbar-design .navbar-design .slider button.button-shadow-right {
  right: 0px;
  padding-right: 15px;
}

.body-navbar-design .navbar-design .slider .slides {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.body-navbar-design .navbar-design .slider .slides::-webkit-scrollbar {
  display: none;
}

.body-navbar-design .navbar-design .slider .slides div.d-flex {
  padding: 10px;
  gap: 1rem;
}

.body-navbar-design .navbar-design .slider .slides div.d-flex .image-card-base-loading {
  width: 150px;
  height: 85px;
  border: 1px solid #EFEFEF;
  border-radius: 14px;

}

.body-navbar-design .navbar-design .slider .slides .image-card-base {
  position: relative;
}

.body-navbar-design .navbar-design .slider .slides .image-card {
  background-color: white;
  width: 140px;
  height: 100px;
  margin: 0px 0;
  flex-shrink: 0;
  /* transform: rotate(90deg); */
  transform-origin: center center;
  transition: transform 0.5s;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #909090;
}

.body-navbar-design .navbar-design .slider .slides .image-card-check {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
}

.body-navbar-design .navbar-design .slider .slides .image-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border: 1px solid #727d93;
}

.body-navbar-design .navbar-design .slider .slides .image-card:hover {
  border: 1px solid #8F1105;
  background-color: transparent;
  cursor: pointer;
}

.body-navbar-design .navbar-design .slider .slides .image-card.active {
  border-color: #8F1105;
  background-color: transparent;
  /* content: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.793 1.3335H5.20634C2.77967 1.3335 1.33301 2.78016 1.33301 5.20683V10.7868C1.33301 13.2202 2.77967 14.6668 5.20634 14.6668H10.7863C13.213 14.6668 14.6597 13.2202 14.6597 10.7935V5.20683C14.6663 2.78016 13.2197 1.3335 10.793 1.3335ZM11.1863 6.46683L7.40634 10.2468C7.31301 10.3402 7.18634 10.3935 7.05301 10.3935C6.91967 10.3935 6.79301 10.3402 6.69967 10.2468L4.81301 8.36016C4.61967 8.16683 4.61967 7.84683 4.81301 7.6535C5.00634 7.46016 5.32634 7.46016 5.51967 7.6535L7.05301 9.18683L10.4797 5.76016C10.673 5.56683 10.993 5.56683 11.1863 5.76016C11.3797 5.9535 11.3797 6.26683 11.1863 6.46683Z" fill="#8F1105"/></svg>'; */
}

.body-navbar-design .navbar-design .slider .slides .image-card.active>.image-card-check {
  display: block;
}




.select-structure-normal-display {
  color: #ffffff;
}

.select-structure-normal-display ul.normal-display {
  background-color: transparent;
  margin: 5px 0 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.select-structure-normal-display ul.normal-display li {
  min-width: 85px;
  margin: 0 0 -2px;
  padding: 5px 33px;
  display: flex;
  color: #322D2D;
  background-color: #F0F0F0;
  flex: 1 auto;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  border-radius: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.select-structure-normal-display ul.normal-display li span {
  margin: 0;
  white-space: nowrap;
}

.select-structure-normal-display ul.normal-display li svg {
  width: 20px;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke: #727d93;
  fill: #bbc2ce;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 1.5;
  margin: 1px;
}

.select-structure-normal-display ul.normal-display li:hover {
  color: #FFFFFF;
  cursor: pointer;
  background-color: #8F1105;
}

.select-structure-normal-display ul.normal-display li:hover svg {
  stroke: #727d93;
  fill: #bbc2ce;
}

.select-structure-normal-display ul.normal-display li.active {
  color: #FFFFFF;
  background-color: #8F1105;
}

.select-structure-normal-display ul.normal-display li.active svg {
  stroke: #727d93;
  fill: #bbc2ce;
}

.favorites-list-normal-display {
  /* -webkit-box-shadow: 2px 3px 20px -14px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 3px 20px -14px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 3px 20px -14px rgba(0, 0, 0, 0.75); */
  max-width: 100%;
  /* height: 100%;
  position: absolute;
  left: 0px; */
  background-color: #ffffff;
  padding: 10px;
  border-radius: 24px;
  color: #de2a35;
  margin: -10px auto;
  position: relative;
}

.favorites-list-normal-display ul {
  background-color: #ffffff;
  margin: 0px;
  padding: 20px;
  border-bottom-right-radius: 15px;
  text-align: center;
  min-width: 187px;
  min-height: 119px;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  direction: rtl;
}

.favorites-list-normal-display a {
  position: absolute;
  left: 25px;
  top: 35px;
}

.favorites-list-normal-display ul p.empty {
  color: #bbc2ce;
  line-height: 4;
}

.favorites-list-normal-display ul p.empty~button {
  top: 30%;
}

.favorites-list-normal-display ul p.hidden {
  display: none;
}

.favorites-list-normal-display ul p.hidden~button {
  top: 45%;
}

/* .favorites-list-normal-display ul button {
  display: flex;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 30px;
  background-color: #45b565;
  cursor: pointer;
} */

/* .favorites-list-normal-display ul button:hover {
  background-color: #de2a35;
} */

.favorites-list-normal-display ul li.check {
  width: 120px;
  height: 85px;
  background-color: transparent;
  /* margin: 25px auto; */
  /* border: 2px solid #727d93; */
  position: relative;
  overflow: hidden;
  margin: 0px 10px;
  border-radius: 15px;
  margin: 0 5px;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .background-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .margin-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .torange-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-lachek-torang .lecheck-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.favorites-list-normal-display ul li.check div .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-afshan .background-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-afshan .margin-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.favorites-list-normal-display ul li.check div .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-kheshti .background-carpet img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check div .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-normal-display ul li.check div .main-carpet-kheshti .flex-container img {
  width: 120px;
  height: 85px;
}

.favorites-list-normal-display ul li.check span {
  position: absolute;
  right: -40px;
  top: 18px;
  padding: 5px;
  background: #727d93;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.favorites-list-normal-display ul li.check.active {
  border-color: #de2a35;
  border-width: 2px;
}

.filter-normal-list {
  width: 200px;
  height: auto;
  position: absolute;
  left: 25px;
  top: 75px;
  overflow: hidden;
  scrollbar-width: none;
  overflow-y: scroll;
  background-color: #ffffff;
  padding: 10px;
  -webkit-box-shadow: -2px 3px 20px -14px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -2px 3px 20px -14px rgba(0, 0, 0, 0.75);
  box-shadow: -2px 3px 20px -14px rgba(0, 0, 0, 0.75);
  border-radius: 15px;
  z-index: 99999;
}

.filter-normal-list::-webkit-scrollbar {
  display: none;
}

.filter-normal-list .head-cover {
  position: relative;
}

.filter-normal-list .head-cover img {
  width: 100%;
  height: 212px;
  filter: blur(1px);
}

.filter-normal-list .head-cover .text-filter {
  position: absolute;
  bottom: 8px;
  width: 100%;
}

.filter-normal-list .head-cover .text-filter p {
  background: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: bolder;
  color: white;
  width: 55%;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.filter-normal-list ul.button-body {
  text-align: right;
}

.filter-normal-list ul.button-body li.head-filter {
  background: white;
  margin: 5px 0 5px;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #CACFDF;
  cursor: pointer;
  position: relative;
}

.filter-normal-list ul.button-body li.head-filter svg {
  transform: rotate(-90deg);
  width: 10px;
  height: 10px;
  float: left;
  margin-top: 6px;
}

.filter-normal-list ul.button-body li.head-filter:hover {
  color: #8F1105;
  border-color: #8F1105;
}

.filter-normal-list ul.button-body li.head-filter:hover svg {
  fill: #8F1105;
}

.filter-normal-list ul.button-body li.head-filter.active {
  border-color: #8F1105;
  color: #8F1105;
}

.filter-normal-list ul.button-body li.head-filter.active svg {
  transform: rotate(90deg);
  fill: #8F1105;
}

.filter-normal-list ul.button-body .items-body {
  display: none;
  overflow: hidden;
  scrollbar-width: none;
  overflow-y: scroll;
  width: 100%;
  max-height: 160px;
}

.filter-normal-list ul.button-body .items-body::-webkit-scrollbar {
  display: none;
}

.filter-normal-list ul.button-body .items-body label {
  width: 100%;
  margin: 3px 0 2px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.filter-normal-list ul.button-body .items-body label:nth-child(even) {
  background: #cacfdf27;
}

.filter-normal-list ul.button-body .items-body label input {
  margin-top: 5px;
}

.filter-normal-list ul.button-body .items-body.active {
  display: block;
  animation-name: show-filter-div;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* حالت محو شدگی */
  backdrop-filter: blur(2px);
  /* اگر بخوای حالت بلور داشته باشه */
  z-index: 1000;
}


@keyframes show-filter-div {
  0% {
    opacity: 0;
    height: 0;
    display: none;
  }

  100% {
    opacity: 1;
    height: 100%;
    display: block;
  }
}

.filter-effect-input {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.filter-effect-input input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  display: none;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 7px;
  left: 10px;
  height: 15px;
  width: 15px;
  border-radius: 3px;
  background-color: #acb4c1;
}

/* On mouse-over, add a grey background color */
.filter-effect-input:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.filter-effect-input input:checked~.checkmark {
  background-color: #8F1105;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.filter-effect-input input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.filter-effect-input .checkmark:after {
  left: 5px;
  top: 2px;
  width: 6px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modern-background {
  position: absolute;
  top: 0;
  bottom: 5px;
  right: 0;
  left: 0;
}

.rotation-mobile-time .before-body-carpet {
  /* -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13); */
  background-color: white;
  padding: 0px 40px;
  border-radius: 15px;
}

.rotation-mobile-time .before-body-carpet .body-button {
  position: absolute;
  right: -26px;
  bottom: 37.5%;
  display: inline-grid;
  background-color: #F0F0F0;
  padding: 5px;
}

.rotation-mobile-time .before-body-carpet .body-button .change-position,
.rotation-mobile-time .before-body-carpet .body-button .clear-background {
  border: 1px solid #727d93;
  background-color: #F0F0F0;
  border-radius: 40px;
  text-decoration: none;
  display: inline-flex;
  cursor: pointer;
  margin: 5px 0;
  padding: 5px;
}

.rotation-mobile-time .before-body-carpet .body-button .change-position svg,
.rotation-mobile-time .before-body-carpet .body-button .clear-background svg {
  width: 45px;
  margin: 0px;
}

.body-filters {
  position: absolute;
  right: 10px;
  top: 33%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 15px;
  gap: 0.3rem;
  z-index: 0;
  height: auto;
}

.body-button {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 15px;
  gap: 0.3rem;
  z-index: 99;
}

.body-button .change-position,
.body-button .clear-background {
  background-color: #F0F0F0;
  border-radius: 15px;
  text-decoration: none;
  display: inline-flex;
  cursor: pointer;
  padding: 5px;
  width: 55px;
  height: 55px;
  align-items: center;
}


.color-filter-body {
  background-color: #F0F0F0;
  border-radius: 15px;
  width: 55px;
  padding: 10px;
  display: grid;
  justify-content: center;
  align-content: center;
  gap: 2px;
}

.color-filter-body button {
  margin: 8px 5px;
  cursor: pointer;
  border-radius: 3px;
  width: 14px;
  height: 14px;
  transform: scale(1.1);
}

.color-filter-body button:hover {
  transform: scale(1.2);
}

.color-filter-body button.active {
  transform: scale(1.5);
}


.rotation-mobile-time .before-body-carpet .body-carpet {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  border: 2px solid #727d93;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
  border: 2px solid #727d93;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: relative;
  height: 100%;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
  width: 100%;
  height: 590px;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
  width: 100%;
  height: 590px;
}

.rotation-90 {
  animation-name: rotation-div;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes rotation-div {
  0% {
    transform: rotate(0deg);
    /* Safari */
    -webkit-transform: rotate(0deg);
    /* Firefox */
    -moz-transform: rotate(0deg);
    /* IE */
    -ms-transform: rotate(0deg);
    /* Opera */
    -o-transform: rotate(0deg);
    /* margin-top: 0px; */
  }

  100% {
    transform: rotate(90deg);
    /* Safari */
    -webkit-transform: rotate(90deg);
    /* Firefox */
    -moz-transform: rotate(90deg);
    /* IE */
    -ms-transform: rotate(90deg);
    /* Opera */
    -o-transform: rotate(90deg);
    /* margin-top: 165px; */
  }
}

.rotation-90-reverse {
  animation-name: rotation-div-reverse;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes rotation-div-reverse {
  0% {
    transform: rotate(90deg);
    /* Safari */
    -webkit-transform: rotate(90deg);
    /* Firefox */
    -moz-transform: rotate(90deg);
    /* IE */
    -ms-transform: rotate(90deg);
    /* Opera */
    -o-transform: rotate(90deg);
    /* margin-top: 165px; */
  }

  100% {
    transform: rotate(0deg);
    /* Safari */
    -webkit-transform: rotate(0deg);
    /* Firefox */
    -moz-transform: rotate(0deg);
    /* IE */
    -ms-transform: rotate(0deg);
    /* Opera */
    -o-transform: rotate(0deg);
    /* margin-top: 0px; */
  }
}

.preview-rotation {
  /* animation-name: preview-rotation-div;
  animation-duration: 2.4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease; */
  animation: preview-rotation-div 1s ease forwards;
}

@keyframes preview-rotation-div {
  0% {
    transform: rotateX(60deg);
    -webkit-transform: rotateX(60deg);
    -moz-transform: rotateX(60deg);
    -ms-transform: rotateX(60deg);
    -o-transform: rotateX(60deg);
    height: 400px;
  }

  50% {
    transform: perspective(600px) rotateX(30deg);
    -webkit-transform: perspective(600px) rotateX(30deg);
    -moz-transform: perspective(600px) rotateX(30deg);
    -ms-transform: perspective(600px) rotateX(30deg);
    -o-transform: perspective(600px) rotateX(30deg);
  }

  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    height: 500px;

  }
}

.preview-rotation-reverse {
  /* animation-name: preview-rotation-div-reverse;
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease; */

  animation: preview-rotation-div-reverse 1s ease forwards;

}

@keyframes preview-rotation-div-reverse {
  0% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
  }

  50% {
    transform: perspective(600px) rotateX(30deg);
    -webkit-transform: perspective(600px) rotateX(30deg);
    -moz-transform: perspective(600px) rotateX(30deg);
    -ms-transform: perspective(600px) rotateX(30deg);
    -o-transform: perspective(600px) rotateX(30deg);
  }

  100% {
    transform: perspective(630px) rotateX(60deg);
    -webkit-transform: perspective(630px) rotateX(60deg);
    -moz-transform: perspective(630px) rotateX(60deg);
    -ms-transform: perspective(630px) rotateX(60deg);
    -o-transform: perspective(630px) rotateX(60deg);
    height: 150px;
  }
}

.carpet-3D.preview-rotation {
  width: 760px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
  width: 100%;
  height: 450px !important;
}

.carpet-3D.preview-rotation .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
  width: 100%;
  height: 450px !important;
}

.rotation-90-btn {
  animation-name: btn-rotation;
  animation-duration: 1.7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes btn-rotation {
  0% {
    transform: rotate(0deg);
    /* Safari */
    -webkit-transform: rotate(0deg);
    /* Firefox */
    -moz-transform: rotate(0deg);
    /* IE */
    -ms-transform: rotate(0deg);
    /* Opera */
    -o-transform: rotate(0deg);
    right: -107px;
    left: unset;
    top: unset;
    bottom: 37.5%;
  }

  100% {
    transform: rotate(-90deg);
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    left: 85px;
    right: unset;
    top: -100px;
    bottom: unset;
  }
}

.rotation-90-btn-reverse {
  animation-name: btn-rotation-reverse;
  animation-duration: 1.7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes btn-rotation-reverse {
  0% {
    left: 85px;
    bottom: unset;
    top: -100px;
  }

  100% {
    right: -26px;
    left: unset;
    top: unset;
    bottom: 37.5%;
  }
}

.preview-body {
  position: relative;
  width: 100%;
  height: 748px;
  z-index: 0;
  margin: 35px auto 10px auto;
  display: block;
  border-radius: 24px;
  top: -31px;
}

.body-filter-preview {
  z-index: 99;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border-radius: 24px;
  position: absolute;
  top: -20px;
  right: 10px;
}

.btn-preview-3D,
.back-to-page,
.btn-pic-horizental {
  background: #F0F0F0;
  padding: 8px 7px 4px 9px;
  border-radius: 15px;
  margin: 0 5px;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  display: flex;
  padding: 5px 10px;
  flex-direction: row;
  gap: 1rem;
}

.btn-preview-3D svg,
.back-to-page svg {
  height: 32px;
}

.btn-preview-3D:hover,
.back-to-page:hover,
.btn-pic-horizental:hover {
  color: #8F1105;
  cursor: pointer;
}

.btn-preview-3D:hover svg path,
.back-to-page:hover svg path,
.btn-pic-horizental:hover svg path {
  fill: #8F1105;
}

.back-to-page {
  right: unset;
  left: 23px;
}

.filter-mobile-list {
  display: none;
  margin-bottom: 40px;
  width: 81%;
  position: relative;
  padding: 20px 20px 0;
  background-color: white;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.19), 0 0 10px rgba(0, 0, 0, 0.13);
}

.filter-mobile-list .text-filter {
  width: 100%;
}

.filter-mobile-list .text-filter svg {
  width: 12px;
  height: 12px;
  float: left;
  fill: #26283a;
  margin-top: 6px;
  transform: rotate(-90deg);
}

.filter-mobile-list .text-filter p {
  text-align: right;
  background: #26283a;
  background-color: rgba(38, 40, 58, 0.05);
  font-size: 18px;
  font-weight: bolder;
  color: #26283a;
  margin: -20px -20px 0;
  padding: 10px 34px;
  border-radius: 10px;
}

.filter-mobile-list .text-filter:hover p {
  color: #ffffff;
  background-color: #26283a;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.filter-mobile-list .text-filter:hover svg {
  fill: #ffffff;
}

.filter-mobile-list ul.button-body {
  margin-top: 30px;
  text-align: right;
  display: none;
}

.filter-mobile-list ul.button-body li.head-filter {
  margin: 15px 5px;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.filter-mobile-list ul.button-body li.head-filter svg {
  width: 12px;
  height: 12px;
  float: left;
  margin-top: 6px;
  transform: rotate(-90deg);
}

.filter-mobile-list ul.button-body li.head-filter:hover {
  color: rgba(222, 42, 53, 0.8);
  border-color: rgba(222, 42, 53, 0.5);
}

.filter-mobile-list ul.button-body li.head-filter:hover svg {
  fill: rgba(222, 42, 53, 0.8);
}

.filter-mobile-list ul.button-body li.head-filter.active {
  border-color: rgba(222, 42, 53, 0.8);
  color: rgba(222, 42, 53, 0.8);
}

.filter-mobile-list ul.button-body li.head-filter.active svg {
  transform: rotate(90deg);
  fill: rgba(222, 42, 53, 0.8);
}

.filter-mobile-list ul.button-body .items-body {
  display: none;
  overflow: hidden;
  scrollbar-width: none;
  overflow-y: scroll;
  width: 100%;
  max-height: 110px;
}

.filter-mobile-list ul.button-body .items-body::-webkit-scrollbar {
  display: none;
}

.filter-mobile-list ul.button-body .items-body label {
  width: 100%;
  margin: 3px 0 2px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.filter-mobile-list ul.button-body .items-body label:nth-child(even) {
  background: rgba(100, 100, 100, 0.1);
}

.filter-mobile-list ul.button-body .items-body label input {
  margin-top: 2px;
}

.filter-mobile-list ul.button-body .items-body.active {
  display: block;
  animation-name: show-filter-div;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes show-filter-div {
  0% {
    opacity: 0;
    height: 0;
    display: none;
  }

  100% {
    opacity: 1;
    height: 100%;
    display: block;
  }
}

.filter-mobile-list.active {
  padding: 20px;
}

.filter-mobile-list.active .text-filter p {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  color: #ffffff;
  background-color: #26283a;
}

.filter-mobile-list.active .text-filter svg {
  fill: #ffffff;
  transform: rotate(90deg);
}

.filter-mobile-list.active ul.button-body {
  display: block;
}

.body-button-mobile {
  display: none;
}

.body-button-mobile .change-position,
.body-button-mobile .clear-background {
  background-color: #bbc2ce;
  border: 1px solid #727d93;
  border-radius: 40px;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  cursor: pointer;
  width: 150px;
  padding: 3px;
  margin: 10px 0px;
}

.body-button-mobile .change-position:hover,
.body-button-mobile .clear-background:hover {
  /* background-color: #de2a35; */
}

.body-button-mobile .change-position span,
.body-button-mobile .clear-background span {
  padding-top: 11px;
}

.body-button-mobile .change-position svg,
.body-button-mobile .clear-background svg {
  width: 45px;
  margin: 0px;
}

.select-structure-mobile-display {
  display: none;
  width: 100%;
  color: #ffffff;
}

.select-structure-mobile-display ul.mobile-display {
  display: inline-flex;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

.select-structure-mobile-display ul.mobile-display li {
  width: 33.33%;
  background-color: transparent;
  border-radius: 15px;
  margin: 0px 8px;
  padding: 5px 18px 8px;
  display: flex;
  line-height: 3;
  flex-direction: column-reverse;
}

.select-structure-mobile-display ul.mobile-display li span {
  /* margin-right: 10px; */
  color: #322D2D;
  font-size: 16px;
}

.select-structure-mobile-display ul.mobile-display li svg {
  width: 100px;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 1.5;
  /* margin-top: -19px;
  margin-right: auto;
  margin-left: 0px; */
}

.select-structure-mobile-display ul.mobile-display li:hover,
.select-structure-mobile-display ul.mobile-display li:hover>span {
  background-color: #8F1105;
  color: #fff;
  cursor: pointer;
}

.select-structure-mobile-display ul.mobile-display li.active,
.select-structure-mobile-display ul.mobile-display li.active span {
  background-color: #F5EDED;
  color: #8F1105;
  font-weight: bold;
}

.favorites-list-mobile-display {
  display: none;
  width: 50%;
  color: #ffffff;
  padding: 5px 2px 2px;
  border-radius: 15px;
  background-color: #45b565;
  margin-bottom: 30px;
}

/*.favorites-list-mobile-display p {
  font-size: 16px;
  margin: 15px 0px 10px;
}

.favorites-list-mobile-display div.ul-body {
  margin: auto;
  width: 100%;
  border-radius: 15px;
  padding: 10px 10px 30px;
  background-color: #ffffff;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

.favorites-list-mobile-display div.ul-body::after {
  content: " ";
  clear: both;
  display: block;
}

.favorites-list-mobile-display div.ul-body button {
  display: flex;
  position: absolute;
  right: 45%;
  top: -74px;
  color: #ffffff;
  padding: 8px;
  border-radius: 30px;
  background-color: #727d93;
  cursor: pointer;
}

.favorites-list-mobile-display div.ul-body div.check {
  width: 118px;
  height: 68px;
  margin: 30px 0 30px;
  background-color: transparent;
  border: 2px solid #727d93;
  position: relative;
  transform: rotate(90deg);
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img {
  width: 118px;
  height: 68px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img {
  width: 118px;
  height: 68px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img {
  width: 118px;
  height: 68px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img {
  width: 118px;
  height: 68px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img {
  width: 118px;
  height: 85px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img {
  width: 118px;
  height: 85px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img {
  width: 118px;
  height: 85px;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img {
  width: 118px;
  height: 85px;
}

.favorites-list-mobile-display div.ul-body div.check span {
  position: absolute;
  right: 37%;
  bottom: -30px;
  padding: 5px;
  background: #727d93;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.favorites-list-mobile-display div.ul-body div.check.active {
  border-color: #de2a35;
  border-width: 2px;
} */


.rug-header-filter-mobile {
  display: none;
}

.selected-mobile-display,
.similar-mobile-display {
  display: none;
}

/* .selected-mobile-display p,
.similar-mobile-display p {
  font-size: 18px;
  margin: 5px 0px 5px;
  background-color: #F8F8F8;
  color: #000;
}

.selected-mobile-display div.ul-body,
.similar-mobile-display div.ul-body {
  margin: auto;
  width: 100%;
  border-radius: 15px;
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  flex-flow: row;
  justify-content: center;
  flex-direction: row;
  overflow: hidden;
}

.selected-mobile-display div.ul-body::after,
.similar-mobile-display div.ul-body::after {
  content: " ";
  clear: both;
  display: block;
}

.selected-mobile-display div.ul-body div.check,
.similar-mobile-display div.ul-body div.check {
  width: 120px;
  height: 85px;
  margin: 60px 0;
  transform: rotate(90deg);
  background-color: transparent;
  border: 2px solid #727d93;
  position: relative;
  overflow: hidden;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang {
  position: relative;
  width: 100%;
  height: 100%;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet {
  z-index: 3;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-afshan,
.similar-mobile-display div.ul-body div.check div .main-carpet-afshan {
  position: relative;
  width: 100%;
  height: 100%;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-kheshti,
.similar-mobile-display div.ul-body div.check div .main-carpet-kheshti {
  position: relative;
  width: 100%;
  height: 100%;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet,
.similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet {
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img,
.similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container,
.similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container {
  margin: 0px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img,
.similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img {
  width: 120px;
  height: 85px;
}

.selected-mobile-display div.ul-body div.check.active,
.similar-mobile-display div.ul-body div.check.active {
  border-color: #de2a35;
  border-width: 2px;
}

.similar-mobile-display div.ul-body {
  padding: 10px;
}

.similar-mobile-display div.ul-body div.check {
  margin: 60px 0;
}

.similar-mobile-display div.ul-body div.check span {
  position: absolute;
  font-size: 16px;
  padding: 5px 5px 0px;
  background: #727d93;
  left: -8px;
  border-bottom-left-radius: 8px;
  top: 3px;
  z-index: 10;
  transform: rotate(-90deg);
} */

.show {
  display: block;
  animation-name: show-div;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes show-div {
  0% {
    opacity: 0;
    display: none;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

@media only screen and (max-width: 1840px) {
  .room-generator .main-images-page img {
    width: 44%;
    height: 400px;
  }

  .room-generator .main-images-page .flow-wall {
    top: 197px;
    height: 305px;
    width: 52.9%;
  }
}

@media only screen and (min-width: 1800px) {
  .landing .container .row:nth-child(3) {
    padding: 0;
  }
}

@media only screen and (max-width: 1450px) {
  .room-generator .main-images-page img {
    width: 40%;
    height: 385px;
  }

  .room-generator .main-images-page .flow-wall {
    top: 192px;
    height: 301px;
    width: 58.9%;
  }

  .min-height-for-scroll {
    margin: 10rem 0 10rem;
  }

  .min-height-for-scroll.active {
    margin: 3rem 0;
  }

  .rotation-90 {
    animation-name: rotation-div;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes rotation-div {
    0% {
      transform: rotate(90deg);
      /* Safari */
      -webkit-transform: rotate(90deg);
      /* Firefox */
      -moz-transform: rotate(90deg);
      /* IE */
      -ms-transform: rotate(90deg);
      /* Opera */
      -o-transform: rotate(90deg);
      /* margin-top: 165px; */
    }

    100% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      /* margin-top: 0px; */
    }
  }

  .rotation-90-reverse {
    animation-name: rotation-div-reverse;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes rotation-div-reverse {
    0% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      margin-top: 0px;
    }

    100% {
      transform: rotate(90deg);
      /* Safari */
      -webkit-transform: rotate(90deg);
      /* Firefox */
      -moz-transform: rotate(90deg);
      /* IE */
      -ms-transform: rotate(90deg);
      /* Opera */
      -o-transform: rotate(90deg);
      margin-top: 165px;
    }
  }

  .rotation-90-btn {
    animation-name: btn-rotation;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes btn-rotation {
    0% {
      transform: rotate(-90deg);
      /* Safari */
      -webkit-transform: rotate(-90deg);
      /* Firefox */
      -moz-transform: rotate(-90deg);
      /* IE */
      -ms-transform: rotate(-90deg);
      /* Opera */
      -o-transform: rotate(-90deg);
      left: 85px;
      right: unset;
      top: -100px;
      bottom: unset;
    }

    100% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      right: -26px;
      left: unset;
      top: unset;
      bottom: 37.5%;
    }
  }

  .rotation-90-btn-reverse {
    animation-name: btn-rotation-reverse;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes btn-rotation-reverse {
    0% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      right: -26px;
      left: unset;
      top: unset;
      bottom: 37.5%;
    }

    100% {
      transform: rotate(-90deg);
      /* Safari */
      -webkit-transform: rotate(-90deg);
      /* Firefox */
      -moz-transform: rotate(-90deg);
      /* IE */
      -ms-transform: rotate(-90deg);
      /* Opera */
      -o-transform: rotate(-90deg);
      left: 85px;
      right: unset;
      bottom: unset;
      top: -100px;
    }
  }
}

@media only screen and (max-width: 1420px) {
  .body-navbar-design .navbar-design {
    padding: 20px;
  }

  .body-navbar-design .navbar-design .slider {
    margin: 0;
  }

  .min-height-for-scroll {
    min-height: 515px;
  }

  .rotation-mobile-time .before-body-carpet {
    margin-top: 0px;
  }
}

@media only screen and (max-width: 1400px) {
  .room-generator .main-images-page .flow-wall {
    top: 182px;
    height: 320px;
    width: 62.9%;
  }

  .landing .container .row:nth-child(3).margin-area {
    margin-top: 10rem;
    padding: 0;
  }

  .landing .container .row:nth-child(3).margin-area .col-12 .text-body {
    padding: 6rem 2rem;
  }

  .min-height-for-scroll {
    margin: 3rem 0;
  }

  .min-height-for-scroll.active {
    margin: 10rem 0 10rem;
  }

  .rotation-90 {
    animation-name: rotation-div;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes rotation-div {
    0% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      /* margin-top: 0px; */
    }

    100% {
      transform: rotate(90deg);
      /* Safari */
      -webkit-transform: rotate(90deg);
      /* Firefox */
      -moz-transform: rotate(90deg);
      /* IE */
      -ms-transform: rotate(90deg);
      /* Opera */
      -o-transform: rotate(90deg);
      /* margin-top: -165px; */
    }
  }

  .rotation-90-reverse {
    animation-name: rotation-div-reverse;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes rotation-div-reverse {
    0% {
      transform: rotate(90deg);
      /* Safari */
      -webkit-transform: rotate(90deg);
      /* Firefox */
      -moz-transform: rotate(90deg);
      /* IE */
      -ms-transform: rotate(90deg);
      /* Opera */
      -o-transform: rotate(90deg);
      margin-top: 165px;
    }

    100% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      margin-top: 0px;
    }
  }

  .rotation-90-btn {
    animation-name: btn-rotation;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes btn-rotation {
    0% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      right: -107px;
      bottom: 37.5%;
    }

    100% {
      transform: rotate(-90deg);
      /* Safari */
      -webkit-transform: rotate(-90deg);
      /* Firefox */
      -moz-transform: rotate(-90deg);
      /* IE */
      -ms-transform: rotate(-90deg);
      /* Opera */
      -o-transform: rotate(-90deg);
      left: 85px;
      right: unset;
      top: -100px;
      bottom: unset;
    }
  }

  .rotation-90-btn-reverse {
    animation-name: btn-rotation-reverse;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes btn-rotation-reverse {
    0% {
      left: 85px;
      bottom: unset;
      top: -100px;
    }

    100% {
      right: -26px;
      left: unset;
      top: unset;
      bottom: 37.5%;
    }
  }

  .body-daneshname .background-images-first img {
    width: 600px;
    position: absolute;
    z-index: 2;
    top: -51px;
    right: 17%;
  }
}

@media only screen and (max-width: 1300px) {
  .room-generator .navbar ul.nav-ul li {
    padding: 6px 11px 6px 12px;
  }

  .room-generator .navbar ul.nav-ul li span {
    margin-right: 15px;
  }

  .room-generator .main-images-page .flow-wall {
    width: 62.9%;
    top: 183px;
    height: 319px;
  }

  .rotation-90 {
    animation-name: rotation-div;
  }

  @keyframes rotation-div {
    0% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      margin-top: 0px;
    }

    100% {
      transform: rotate(90deg);
      /* Safari */
      -webkit-transform: rotate(90deg);
      /* Firefox */
      -moz-transform: rotate(90deg);
      /* IE */
      -ms-transform: rotate(90deg);
      /* Opera */
      -o-transform: rotate(90deg);
      margin-top: 165px;
      margin-bottom: 0;
    }
  }

  .rotation-90-reverse {
    animation-name: rotation-div-revers;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes rotation-div-reverse {
    0% {
      transform: rotate(0deg);
      /* Safari */
      -webkit-transform: rotate(0deg);
      /* Firefox */
      -moz-transform: rotate(0deg);
      /* IE */
      -ms-transform: rotate(0deg);
      /* Opera */
      -o-transform: rotate(0deg);
      margin-top: 165px;
      margin-bottom: 0;
    }

    100% {
      transform: rotate(-90deg);
      /* Safari */
      -webkit-transform: rotate(-90deg);
      /* Firefox */
      -moz-transform: rotate(-90deg);
      /* IE */
      -ms-transform: rotate(-90deg);
      /* Opera */
      -o-transform: rotate(-90deg);
      margin-top: 0px;
      margin-bottom: unset;
    }
  }

  .body-navbar-design .navbar-design ul.ul-background-select li {
    padding: 5px 0;
  }
}

@media only screen and (max-width: 1200px) {
  .room-generator .navbar ul.nav-ul button {
    right: 5%;
  }

  .room-generator .navbar ul.nav-ul li {
    margin: 0 5px;
  }

  .room-generator .main-images-page .decoration-image {
    min-width: 240px;
    min-height: 210px;
    max-width: 310px;
    max-height: 210px;
  }

  .filter-normal-list {
    max-width: 190px;
  }

  /* .favorites-list-normal-display {
    max-width: 180px;
  } */

  .carpet-3D.preview-rotation {
    width: 600px !important;
  }

  .body-3D .test-3D .carpet-3D {
    bottom: 85px;
    right: 23%;
    width: 550px;
    height: 250px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet {
    margin-top: 25px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
    width: 100%;
    height: 200px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
    width: 100%;
    height: 200px;
  }

  .landing .container .row:nth-child(3) .col-12 .text-body {
    padding: 3rem;
  }
}

@media only screen and (max-width: 1120px) {
  .min-height-for-scroll {
    margin: 3rem 0;
  }

  .min-height-for-scroll.active {
    margin: 5rem 0 5rem;
  }

  .room-generator .main-images-page img {
    width: 42%;
    height: 355px;
  }

  .room-generator .main-images-page .flow-wall {
    top: 179px;
    height: 296px;
  }

  .room-generator .main-images-page .floor-image {
    right: -20px;
    width: 104%;
  }

  .room-generator .main-images-page .ceiling-image {
    right: -20px;
    width: 104%;
  }
}

@media only screen and (max-width: 1023px) {
  .preview-rotation {
    animation-name: preview-rotation-div;
    animation-duration: 2.4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes preview-rotation-div {
    0% {
      transform: rotateX(60deg);
      /* Safari */
      -webkit-transform: rotateX(60deg);
      /* Firefox */
      -moz-transform: rotateX(60deg);
      /* IE */
      -ms-transform: rotateX(60deg);
      /* Opera */
      -o-transform: rotateX(60deg);
      position: unset;
    }

    50% {
      transform: perspective(600px) rotateX(30deg);
      /* Safari */
      -webkit-transform: perspective(600px) rotateX(30deg);
      /* Firefox */
      -moz-transform: perspective(600px) rotateX(30deg);
      /* IE */
      -ms-transform: perspective(600px) rotateX(30deg);
      /* Opera */
      -o-transform: perspective(600px) rotateX(30deg);
    }

    100% {
      transform: rotateX(0deg);
      /* Safari */
      -webkit-transform: rotateX(0deg);
      /* Firefox */
      -moz-transform: rotateX(0deg);
      /* IE */
      -ms-transform: rotateX(0deg);
      /* Opera */
      -o-transform: rotateX(0deg);
      position: unset;
      padding-top: unset;
    }
  }

  .preview-rotation-reverse {
    animation-name: preview-rotation-div-reverse;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }

  @keyframes preview-rotation-div-reverse {
    0% {
      transform: rotateX(0deg);
      /* Safari */
      -webkit-transform: rotateX(0deg);
      /* Firefox */
      -moz-transform: rotateX(0deg);
      /* IE */
      -ms-transform: rotateX(0deg);
      /* Opera */
      -o-transform: rotateX(0deg);
      position: unset;
      padding-top: unset;
    }

    50% {
      transform: perspective(600px) rotateX(30deg);
      /* Safari */
      -webkit-transform: perspective(600px) rotateX(30deg);
      /* Firefox */
      -moz-transform: perspective(600px) rotateX(30deg);
      /* IE */
      -ms-transform: perspective(600px) rotateX(30deg);
      /* Opera */
      -o-transform: perspective(600px) rotateX(30deg);
      position: unset;
      bottom: unset;
    }

    100% {
      transform: perspective(630px) rotateX(60deg);
      /* Safari */
      -webkit-transform: perspective(630px) rotateX(60deg);
      /* Firefox */
      -moz-transform: perspective(630px) rotateX(60deg);
      /* IE */
      -ms-transform: perspective(630px) rotateX(60deg);
      /* Opera */
      -o-transform: perspective(630px) rotateX(60deg);
      bottom: unset;
    }
  }

  .room-generator .navbar {
    display: none;
    opacity: 0;
  }

  .room-generator .right-sidebar-body {
    display: none;
    opacity: 0;
  }

  .room-generator .mobile-menu,
  .room-generator .mobile-menu-right-side {
    display: block;
  }

  .carpet-3D.preview-rotation {
    width: 760px !important;
  }

  .btn-preview-3D,
  .back-to-page {
    display: none;
  }

  .body-3D .navbar {
    padding: 0 10px;
  }

  .body-3D .navbar .container {
    width: 100%;
    max-width: unset;
  }

  .body-3D .test-3D {
    height: auto;
  }

  .body-3D .test-3D img.background-3D {
    /* display: none; */
  }

  .body-3D .test-3D .carpet-3D {
    width: 760px;
    height: auto;
    position: unset;
    right: unset;
    bottom: unset;
    transform: unset;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet {
    width: 700px;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
    width: 100%;
    height: 590px;
  }

  .body-3D .test-3D .footer-3D {
    position: relative;
    bottom: unset;
  }

  .selected-normal-display {
    display: none;
  }

  .similar-normal-display {
    display: none;
  }

  .selected-mobile-display {
    display: block;
  }

  .similar-mobile-display {
    display: block;
  }

  .selected-mobile-display div.ul-body div.check,
  .similar-mobile-display div.ul-body div.check {
    width: 210px;
    height: 100px;
  }

  /* .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img {
    width: 210px;
    height: 96px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img {
    width: 210px;
    height: 96px;
  } */

  .body-daneshname .other-card .number-of-page ul.body-pagination,
  .body-3D .pagination ul.body-pagination {
    width: 50%;
  }

  .landing {
    background: url(../img/new-top-background1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .landing .container .row:nth-child(2) .about-text {
    padding-top: unset;
  }

  .landing .container .row:nth-child(2) .mobile-image img {
    display: block;
  }

  .landing .container .row:nth-child(3).margin-area {
    margin-top: 29rem;
  }

  .landing .container .row:nth-child(3).margin-area .col-12 {
    margin-bottom: -4rem;
  }

  .landing .container .row:nth-child(3).margin-area .col-12:first-child {
    margin-top: 4rem;
  }

  .landing .container .row:nth-child(3).margin-area .col-12:not(:first-child) {
    margin-bottom: 0;
  }

  .landing .container .row:nth-child(3).margin-area .col-12 .text-body {
    padding: 4rem 2rem 0;
    order: 1;
  }

  .landing .container .row:nth-child(3).margin-area .col-12 .btn-body {
    order: 2;
  }

  .landing .footer {
    background: url(../img/new-background-footer.png) no-repeat left;
    -webkit-background-size: 100% 100%, cover;
    -moz-background-size: 100% 100%, cover;
    -o-background-size: 100% 100%, cover;
    background-size: 100% 100%, cover;
    min-height: 20vh;
    margin-top: 2rem;
  }

  .landing .footer .links-footer {
    margin: 40px auto 0 85px;
  }

  .body-navbar-design {
    width: 100%;
    padding: 0px 8px;
  }
}

@media only screen and (max-width: 992px) {

  .header {
    height: 100px;
  }

  .header .header-center .user-profile>span {
    display: none;
  }

  .full-body,
  .container {
    padding: 0px !important;
    background-color: #EFEFEF;
  }

  .full-body .row {
    margin: 25px;
    ;
    background-color: #fff;
    border-radius: 24px;
  }

  .rug-header {
    display: none;
  }

  .min-height-for-scroll {
    margin: 1rem 0;
  }

  .min-height-for-scroll.active {
    margin: 7rem 0 15rem 0;
  }

  .min-height-for-scroll.active .row.rotation-mobile-time {
    margin-bottom: 14rem;
  }

  .room-generator .right-sidebar-body {
    width: 98%;
  }

  .room-generator .right-sidebar-body ul.nav-ul {
    padding: 7px 9px;
  }

  .room-generator .right-sidebar-body ul.nav-ul button img {
    width: 22px;
    height: 22px;
    margin-top: 2px;
  }

  .room-generator .right-sidebar-body ul.nav-ul li {
    margin: 0 auto;
    padding: 5px 10px 4px 11px;
  }

  .room-generator .main-images-page {
    margin-bottom: 50px;
  }

  .room-generator .main-images-page img {
    width: 50%;
    height: 310px;
  }

  .room-generator .main-images-page .right-image {
    transform: perspective(770px) rotateY(-58deg);
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .room-generator .main-images-page .left-image {
    transform: perspective(770px) rotateY(58deg);
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .room-generator .main-images-page .flow-wall {
    top: 127px;
    width: 65%;
    height: 259px;
  }

  .room-generator .main-images-page .floor-image {
    transform: perspective(1200px) rotateX(72deg);
    right: -80px;
    left: -85px;
    width: 114%;
  }

  .room-generator .main-images-page .ceiling-image {
    transform: perspective(1200px) rotateX(-72deg);
    right: -80px;
    left: -85px;
    width: 114%;
  }

  .room-generator .main-images-page .body-carpet {
    width: 30%;
    bottom: -30px;
    transform: perspective(400px) rotateX(74deg);
  }

  .room-generator .main-images-page .decoration-image {
    min-width: 190px;
    min-height: 140px;
    max-width: 240px;
    max-height: 160px;
  }

  .room-generator .container {
    max-width: 100%;
  }

  button.btn-preview.normal-add {
    display: none;
  }

  button.btn-preview.mobile-preview {
    display: block;
  }

  .body-3D .navbar {
    padding: 0;
  }

  .body-3D .navbar .city-filter-body .selected-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .body-3D .navbar .city-filter-body .selected-body span {
    margin: 5px;
  }

  .body-3D .navbar .container {
    padding: 0;
  }

  .select-structure-normal-display {
    display: none;
  }

  .select-structure-mobile-display {
    display: block;
  }

  .favorites-list-normal-display {
    display: none;
  }

  .filter-normal-list {
    display: none;
  }

  .filter-mobile-list {
    display: block;
  }

  .shadow-div {
    width: 90%;
    box-shadow: none;
    background: transparent;
    margin: 0;
    width: 100% !important;
  }

  .body-navbar-design {
    padding: 0;
    height: auto;
  }

  .body-navbar-design .navbar-design {
    background-color: transparent;
    padding-top: 0;
  }

  .body-navbar-design .navbar-design ul.ul-background-select li {
    flex-direction: column;
    gap: 1rem;
    font-size: 14px;
    padding: 10px 0;
    background-color: transparent;
  }

  .body-navbar-design .navbar-design ul.ul-background-select li.active {
    background-color: #F5EDED;
    color: #8F1105;
    font-weight: bold;
  }

  .body-filters {
    display: none;
  }

  .body-navbar-design .navbar-design ul.ul-background-select li svg {
    margin: 0;
  }

  .body-daneshname .background-images-first img {
    width: 600px;
    position: absolute;
    z-index: 2;
    top: -44px;
    right: 14%;
  }

  .landing .landing-header img {
    width: 120px;
  }

  .landing .landing-header a.btn-register {
    margin-left: 30px;
  }

  .rotation-mobile-time .before-body-carpet {
    padding: 7px 34px;
    border-radius: 15px;
  }

  .rotation-mobile-time .before-body-carpet .body-button {
    display: none;
  }

  .body-button-mobile {
    display: inline-flex;
    justify-content: end;
    margin-bottom: 35px;
    padding: 0px !important;

  }

  .min-height-for-scroll .w-100 {
    width: auto !important;
  }


  .color-filter-body {
    background-color: #F0F0F0;
    border-radius: 15px;
    width: 100%;
    padding: 10px;
    display: grid;
    align-content: center;
    gap: 2px;
  }

  .body-button-mobile .change-position,
  .body-button-mobile .clear-background {
    background-color: #F0F0F0;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 10px;
    margin: 5px;
    border-radius: 15px;
    border: none;
    align-items: center;
  }

  .body-button-mobile .change-position:hover,
  .body-button-mobile .clear-background:hover {
    /* background-color: #de2a35; */
  }

  .body-button-mobile .change-position span,
  .body-button-mobile .clear-background span {
    padding-top: 11px;
  }

  .body-button-mobile .change-position svg,
  .body-button-mobile .clear-background svg {
    width: 45px;
    margin: 0px;
  }

  /* mobile wishlist */

  .favorites-list-mobile-display {
    width: 100%;
    background-color: transparent;
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;

  }

  .favorites-list-mobile-display div.ul-body {
    display: flex;
    flex-wrap: wrap;
    color: #ffffff;
    border-radius: 24px;
    background-color: #fff;
    margin: 25px;
    height: 180px;
    position: relative;
    padding: 0;
    width: unset;
    padding-left: 60px;
  }

  .favorites-list-mobile-display div.ul-body button,
  .favorites-list-mobile-display div.ul-body a button {
    display: flex;
    position: absolute;
    left: 10px;
    top: 10px;
    cursor: pointer;
    padding: 0 10px;
    font-size: 14px;
    background-color: #EFEFEF;
    color: #322D2D;
    text-decoration: none;
    border-radius: 15px;
    cursor: pointer;
    font-weight: normal;
    gap: 0.5rem;
    display: flex;
    flex-direction: row;
    position: absolute;
    height: 45px;
    width: auto;
    align-items: center;
    z-index: 99;
  }

  .favorites-list-mobile-display div.ul-body a button svg path {
    fill: #000;
  }

  .favorites-list-mobile-display div.ul-body a {
    margin: 0;
  }

  .favorites-list-mobile-display div.ul-body button.btn-left,
  .favorites-list-mobile-display div.ul-body a {
    bottom: 10px;
    top: unset;
  }

  .favorites-list-mobile-display div.ul-body button:hover,
  .favorites-list-mobile-display div.ul-body button:hover svg path {
    background-color: #8F1105;
    color: #fff;
    fill: #fff;
  }

  .favorites-list-mobile-display div.ul-body div.check {
    width: 118px;
    height: 85px;
    background-color: transparent;
    /* border: 2px solid #727d93; */
    position: relative;
    margin: 30px 0px;
    transform: rotate(90deg);
    border-radius: 15px;
    overflow: hidden;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet {
    z-index: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet {
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet {
    z-index: 2;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet {
    z-index: 3;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet {
    z-index: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet {
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet {
    z-index: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container {
    margin: 0px;
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .favorites-list-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img {
    width: 118px;
    height: 85px;
  }

  .favorites-list-mobile-display div.ul-body div.check span {
    position: absolute;
    right: 37%;
    bottom: -30px;
    padding: 5px;
    background: #727d93;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  .favorites-list-mobile-display div.ul-body div.check.active {
    border-color: #de2a35;
    border-width: 2px;
  }


  .rug-header-filter-mobile {
    max-width: 100%;
    z-index: 0;
    text-align: center !important;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 24px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-flow: row;
  }

  .rug-header-filter-mobile .selected-mobile-display,
  .rug-header-filter-mobile .similar-mobile-display {
    color: #ffffff;
    padding: 5px 2px 2px;
    margin: 25px auto;
    border-radius: 15px;
    background-color: #fff;
    flex: 1;
  }

  .selected-mobile-display p,
  .similar-mobile-display p {
    font-size: 18px;
    margin: 5px 0px 5px;
    background-color: #F8F8F8;
    color: #000;
  }

  .selected-mobile-display div.ul-body,
  .similar-mobile-display div.ul-body {
    margin: auto;
    width: 100%;
    border-radius: 15px;
    padding: 10px;
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    justify-content: center;
    flex-direction: row;
  }

  .selected-mobile-display div.ul-body::after,
  .similar-mobile-display div.ul-body::after {
    content: " ";
    clear: both;
    display: block;
  }

  .selected-mobile-display div.ul-body div.check,
  .similar-mobile-display div.ul-body div.check {
    width: 45px;
    height: 40px;
    margin: 15px 0;
    transform: rotate(90deg);
    background-color: transparent;
    /* border: 2px solid #727d93; */
    position: relative;
    overflow: hidden;
    float: right;
    border-radius: 15px;
  }

  .selected-mobile-display div.ul-body div.check>span,
  .similar-mobile-display div.ul-body div.check>span {
    background-color: transparent;
    top: 15px;
    left: 5px;
    position: absolute;
    overflow: hidden;
    z-index: 99;
    transform: rotate(-90deg);
    background-color: #8f110577;
    border-radius: 15px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet {
    z-index: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet {
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet {
    z-index: 2;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet {
    z-index: 3;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet {
    z-index: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet {
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet {
    z-index: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container {
    margin: 0px;
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: auto;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img {
    width: 80px;
    height: 40px;
  }

  .selected-mobile-display div.ul-body div.check.active,
  .similar-mobile-display div.ul-body div.check.active {
    border-color: #de2a35;
    border-width: 2px;
  }

  .cards-body {
    margin: unset;
    width: 100% !important;
  }

  .auth-modal-overlay-carpet {
    margin: 15px;
    width: unset !important;
  }

  /* .similar-mobile-display div.ul-body {
  padding: 10px;
}

.similar-mobile-display div.ul-body div.check {
  margin: 60px 0;
}

.similar-mobile-display div.ul-body div.check span {
  position: absolute;
  font-size: 16px;
  padding: 5px 5px 0px;
  background: #727d93;
  left: -8px;
  border-bottom-left-radius: 8px;
  top: 3px;
  z-index: 10;
  transform: rotate(-90deg);
} */


  /**** new item and controller */
  .rug-header-filter {
    display: none;
  }

  .body-filter-preview {
    z-index: 99;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    border-radius: 24px;
    position: absolute;
    top: -24px;
    right: 0px;
    z-index: 99;
  }

  .preview-body {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 0;
    margin: 35px auto 10px auto;
    display: block;
    border-radius: 24px;
    top: -0px;
  }

  .btn-preview-3D,
  .back-to-page {
    display: flex;
  }

  .body-3D .test-3D {
    background-color: #fff;
    margin: 15px;
    border-radius: 24px;
    width: calc(100% - 30px);
  }

  .btn-preview-3D>span {
    display: none;
  }

  .body-3D .test-3D img.background-3D {
    height: auto;
    border-radius: 0;
  }

  .body-3D .test-3D .carpet-3D {
    scale: 0.5;
  }

  .btn-preview-3D-mob {
    display: none;
  }

  .preview-rotation-reverse {
    animation: unset;
  }

  .image-controller-3d {
    position: static;
    z-index: 20;
    background: rgb(255 255 255 / 71%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 1rem;
    width: 90%;
    flex-direction: column;
    display: flex;
    z-index: 9999;
    margin-left: 10px;
    gap: 0.2rem;
  }

  .image-controller-3d div {
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0;
    width: 95%;
    gap: 0.2rem;
  }

  .image-controller-3d div div {
    border-radius: 6px;
    display: flex;
    gap: 1px;
    align-items: center;
    width: 100%;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }

  .image-controller-3d div div div {
    width: auto;
    text-wrap: nowrap;
    border-radius: 6px;
    display: flex;
    align-items: end;
    flex-direction: column;
    margin: 0;
    width: 90%;
    gap: 0;
  }

  .image-controller-3d div div .co-title {
    width: 300px;
  }

  .image-controller-3d div div .co-title1 {
    width: 300px;
  }

  .image-controller-3d div div div span {
    font-size: 12px;
    width: 100%;
    text-align: center;
    display: none;
  }

  .image-controller-3d div div input {
    width: 100%;
  }

  .image-controller-3d div div input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
  }

  /* Track (Chrome, Safari, Edge) */
  .image-controller-3d div div input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #8F1105;
    border-radius: 5px;
  }

  /* Firefox */
  .image-controller-3d div div input[type="range"]::-moz-range-track {
    height: 6px;
    background: #8F1105;
    border-radius: 5px;
  }

  /* Thumb (Chrome, Safari, Edge) */
  .image-controller-3d div div input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6px;
    height: 18px;
    background: #fff;
    border: 2px solid #8F1105;
    border-radius: 10px;
    cursor: pointer;
    margin-top: -6px;
    /* centers the thumb */
  }

  .image-controller-3d div div input[type="range"]::-moz-range-thumb {
    width: 6px;
    height: 18px;
    background: #fff;
    border: 2px solid #8F1105;
    border-radius: 10px;
    cursor: pointer;
  }

  .image-controller-3d div div button {
    width: 33px;
    height: 18px;
    border-radius: 15px;
    cursor: pointer;
    background-color: #8F1105;
    color: #fff;
    align-items: center;
    padding: 2px;
  }

  .image-controller-3d div div button svg {
    width: 13px;
    height: 13px;
  }

  .image-controller-3d div div button svg path {
    fill: #fff;
  }

  .intro-pic svg {
    width: 100%;
    height: auto;
    margin-bottom: 150px;
  }
}

@media only screen and (max-width: 800px) {

  .category-main-body {
    background: url(../img/chatr.png) no-repeat top center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
  }

  .category-main-body .row {
    margin-bottom: 100px;
  }

  .category-main-body .row .insurance {
    color: #de2a35;
  }

  .category-main-body .row .insurance button {
    background-color: #26283a;
    color: white;
  }

  .category-main-body .row .service {
    margin-top: 40px;
    color: #26283a;
  }
}

@media only screen and (max-width: 768px) {
  .rug-header {
    display: none;
  }

  .room-generator .mobile-menu,
  .room-generator .mobile-menu-right-side {
    width: 220px;
  }

  .room-generator .mobile-menu .carpet-btn,
  .room-generator .mobile-menu-right-side .carpet-btn {
    padding: 9px 18px;
  }

  .room-generator .mobile-menu .list-body,
  .room-generator .mobile-menu-right-side .list-body {
    width: 127px;
  }

  .room-generator .mobile-menu .list-body .first-child,
  .room-generator .mobile-menu-right-side .list-body .first-child {
    font-size: 1.2em;
  }

  .room-generator .mobile-menu .list-body .first-child span,
  .room-generator .mobile-menu-right-side .list-body .first-child span {
    padding: 0 7px;
  }

  .room-generator .mobile-menu .list-body .second-child,
  .room-generator .mobile-menu-right-side .list-body .second-child {
    font-size: 1.1em;
  }

  .room-generator .mobile-menu .list-body .second-child span,
  .room-generator .mobile-menu-right-side .list-body .second-child span {
    padding: 0 14px;
  }

  .room-generator .mobile-menu .list-body .three-child,
  .room-generator .mobile-menu-right-side .list-body .three-child {
    font-size: 0.9em;
    font-weight: 600;
  }

  .room-generator .mobile-menu .list-body .three-child span,
  .room-generator .mobile-menu-right-side .list-body .three-child span {
    padding: 0 20px 0 0;
  }

  .room-generator .mobile-menu .carpet-body .recommend-carpet .recommend-carpet-scroll,
  .room-generator .mobile-menu-right-side .carpet-body .recommend-carpet .recommend-carpet-scroll {
    max-height: 354px;
  }

  .room-generator .mobile-menu {
    left: -150px;
  }

  .room-generator .mobile-menu .carpet-body .recommend-carpet .body-carpet {
    margin: 15px 0;
  }

  .room-generator .mobile-menu-right-side {
    right: -110px;
  }

  .room-generator .mobile-menu-right-side .d-flex,
  .room-generator .mobile-menu-right-side .carpet-body,
  .room-generator .mobile-menu-right-side .carpet-body ul {
    max-height: 369px;
  }

  .room-generator .mobile-menu-right-side .list-body .three-child span {
    padding: 0 30px 0 0;
  }

  .room-generator .mobile-menu-right-side .list-body .three-child.active span {
    padding-right: 10px;
  }

  .room-generator .mobile-menu-right-side .carpet-body .last-child ul {
    padding-top: 10px;
    max-height: 295px;
  }

  .room-generator .mobile-menu-right-side .carpet-body .last-child ul li {
    width: 100%;
    height: 50px;
    margin: 5px 0;
  }

  .room-generator .mobile-menu-right-side .upload-list-mobile {
    max-height: 125px;
  }

  .room-generator .mobile-menu-right-side .upload-list-mobile li {
    padding-top: 0;
    padding-bottom: 0;
  }

  .room-generator .mobile-menu-right-side .upload-list-mobile li img {
    max-width: 100px;
  }

  .room-generator .mobile-menu-right-side .upload-list-mobile li span {
    top: 2px;
  }

  .room-generator .right-sidebar-body .right-sidebar {
    font-size: 10px;
  }

  .room-generator .main-images-page img {
    height: 260px;
  }

  .room-generator .main-images-page .right-image {
    transform: perspective(400px) rotateY(-60deg);
  }

  .room-generator .main-images-page .left-image {
    transform: perspective(400px) rotateY(60deg);
  }

  .room-generator .main-images-page .flow-wall {
    top: 138px;
    width: 70%;
    height: 185px;
  }

  .room-generator .main-images-page .floor-image {
    top: 150px;
  }

  .room-generator .main-images-page .ceiling-image {
    top: -150px;
  }

  .room-generator .main-images-page .decoration-image {
    min-width: 160px;
    min-height: 130px;
    max-width: 200px;
    max-height: 160px;
  }

  .room-generator .recommend-carpet .body-carpet {
    width: 95px;
    height: 68px;
    margin: 5px;
  }

  .room-generator .recommend-carpet .recommend-carpet-scroll {
    width: 90%;
  }

  .filter-mobile-list {
    width: 97%;
    margin-bottom: 30px;
  }

  .shadow-div {
    width: 100%;
    padding: 0;
  }

  .post-page .search-bar {
    margin-bottom: 20px;
  }

  .post-page .search-bar img.best-cover {
    margin-bottom: 20px;
  }

  .min-height-for-scroll {
    min-height: auto;
  }

  .body-3D .navbar ul li {
    font-size: 16px;
  }

  .body-3D .navbar .city-filter-body p {
    padding: 0 15px 0 0;
  }

  .body-3D .navbar .city-filter-body .mobile-size,
  .body-3D .navbar .city-filter-body .search-body {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .body-3D .navbar .city-filter-body .search-form ul.multi-select {
    max-height: 130px;
    z-index: 2;
    right: 0;
    top: 60px;
    width: 100%;
  }

  .body-3D .navbar .city-filter-body .selected-body {
    margin: 15px 0 0;
    width: 100%;
  }

  .body-3D .test-3D .carpet-3D {
    margin: 0px auto;
    height: auto;
  }

  .body-3D .pagination ul.body-pagination {
    width: 100%;
  }

  .body-daneshname .background-images-first {
    min-height: 24vh;
  }

  .body-daneshname .background-images-first img {
    top: -18px;
    width: 213px;
  }

  .body-daneshname .hot-title {
    background-image: unset;
    background-color: #26283a;
    padding: 3rem 0px;
  }

  .body-daneshname .hot-title h1 {
    margin-right: 5rem;
  }

  .body-daneshname .other-card .number-of-page ul.body-pagination {
    width: 100%;
  }

  .landing {
    background: unset;
  }

  .landing .landing-header img {
    margin-top: 1rem;
    margin-right: 1rem;
  }

  .landing .landing-header img.colored {
    display: block;
  }

  .landing .landing-header img.white {
    display: none;
  }

  .landing .landing-header ul {
    display: none;
  }

  .landing .landing-header a.btn-register {
    margin: 4px auto 0px 0px;
    -webkit-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 4px 20px -6px rgba(0, 0, 0, 0.45);
  }

  .landing .landing-header a.btn-register:hover {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.22);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .landing .landing-header a.btn-register:active {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.22);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .landing .landing-header a.btn-register span {
    margin-top: 3px;
  }

  .landing .container .row:nth-child(2) .about-text {
    padding-top: unset;
  }

  .landing .container .row:nth-child(2) .about-text p {
    color: #666666;
    margin: 1rem;
  }

  .landing .container .row:nth-child(2) .mobile-image {
    text-align: center;
    padding-top: 0px;
    padding-right: 15px;
  }

  .landing .container .row:nth-child(3).margin-area {
    margin: 0;
    padding: 0;
  }

  .landing .container .row:nth-child(3).margin-area .col-12 {
    padding: 0;
    margin-bottom: 0;
  }

  .landing .container .row:nth-child(3).margin-area .col-12:first-child {
    margin-top: 0;
  }

  .landing .container .row:nth-child(3).margin-area .col-12:not(:first-child) {
    margin-bottom: 0;
  }

  .landing .footer {
    background: #26283a;
    display: grid;
  }

  .landing .footer .carpet-image-footer {
    order: 1;
  }

  .landing .footer .links-footer {
    order: 3;
    width: 100%;
    margin: 20px 0px 0px;
  }

  .landing .footer .validation-icon-footer {
    text-align: center;
    order: 2;
    margin: 20px 0px;
    width: 100%;
  }

  .landing .footer .validation-icon-footer img {
    margin: 0px 20px 0px;
  }

  .header .svg-div-logo .svg-logo {
    padding: 19px 10px 10px 30px;
  }

  .header .svg-div-logo .svg-logo img {
    width: 140px;
  }

  .header .btn-register-body {
    padding: 20px;
  }

  .header .btn-register {
    display: none;
  }

  .body-button-mobile .change-position {
    /* display: none; */
  }

  .rotation-mobile-time {
    overflow: hidden;
    padding-bottom: 294px;
    margin-bottom: 30px;
  }

  .rotation-mobile-time .before-body-carpet {
    transform: rotate(0.25turn) translate(145px, 0px);
  }



  .body-navbar-design {
    margin-top: 35px;
  }

  .body-navbar-design .navbar-design ul.ul-background-select li span {
    margin: auto;
  }

  .body-navbar-design .navbar-design ul.ul-background-select li svg {
    /* display: none; */
  }

  .favorites-list-mobile-display {
    /* width: 90%; */
  }

  .select-structure-mobile-display ul.mobile-display {
    margin-bottom: 0px;
    overflow: auto;
  }

  .select-structure-mobile-display ul.mobile-display li {
    padding: 5px 0 8px;
  }

  .select-structure-mobile-display ul.mobile-display li span {
    margin: 0px auto;
    font-size: 15px;
  }

  .select-structure-mobile-display ul.mobile-display li svg {
    /* display: none; */
  }

  .favorites-list-mobile-display div.ul-body button>span {
    display: none;
  }

  .min-height-for-scroll.active .row.rotation-mobile-time,
  .rotation-mobile-time {
    margin: 0;
    padding: 0;
  }

  .rotation-mobile-time .before-body-carpet {
    transform: unset;
  }

  .auth-modal-overlay {
    width: 90%;
    top: 5%;
    left: 5%;
    right: 5%;
  }
}

@media only screen and (max-width: 740px) {
  .room-generator .main-images-page .flow-wall {
    top: 136px;
    width: 71%;
    height: 187px;
  }
}

@media only screen and (max-width: 714px) {
  .room-generator .main-images-page .body-carpet {
    width: 35%;
  }

  .room-generator .main-images-page .flow-wall {
    top: 134px;
    width: 73%;
    height: 192px;
  }

  .body-3D .test-3D {
    height: auto;
  }

  .body-3D .test-3D .carpet-3D,
  .body-3D .test-3D .carpet-3D.preview-rotation {
    width: 606px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time,
  .rotation-mobile-time,
  .carpet-3D.preview-rotation {
    margin-bottom: 0px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet,
  .rotation-mobile-time .before-body-carpet,
  .carpet-3D.preview-rotation .before-body-carpet {
    transform: rotate(0.25turn) translate(-9px, 0px);
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet,
  .rotation-mobile-time .before-body-carpet .body-carpet,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
    width: 570px !important;
    height: 390px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
    width: 570px !important;
    height: 390px !important;
  }

  .min-height-for-scroll .row {
    display: block;
  }

  .full-body .row {
    margin: 0;
  }

  .favorites-list-mobile-display div.ul-body {

    margin: 0;
  }

  .rotation-mobile-time .before-body-carpet {
    padding: 114px 0px;
    border-radius: 15px;
  }
}

@media only screen and (max-width: 688px) {
  .room-generator .main-images-page .right-image {
    transform: perspective(400px) rotateY(-59deg);
  }

  .room-generator .main-images-page .left-image {
    transform: perspective(400px) rotateY(59deg);
  }

  .room-generator .main-images-page .flow-wall {
    top: 132px;
    width: 76%;
    height: 196px;
  }
}

@media only screen and (max-width: 622px) {
  .room-generator .right-sidebar-body ul.nav-ul li {
    margin: 0 5px;
  }

  .room-generator .right-sidebar-body ul.nav-ul li span {
    margin-right: 10px;
  }

  .room-generator .right-sidebar-body .last-child {
    padding: 30px 1% 15px;
  }

  .room-generator .right-sidebar-body .upload-img {
    left: 1%;
  }

  .room-generator .main-images-page img {
    width: 62%;
    height: 250px;
  }

  .room-generator .main-images-page .right-image {
    transform: perspective(400px) rotateY(-59deg);
  }

  .room-generator .main-images-page .left-image {
    transform: perspective(400px) rotateY(59deg);
  }

  .room-generator .main-images-page .flow-wall {
    top: 134px;
    width: 64.5%;
    height: 183px;
  }

  .room-generator .main-images-page .floor-image {
    top: 146px;
  }

  .room-generator .main-images-page .ceiling-image {
    top: -146px;
  }

  .room-generator .main-images-page .decoration-image {
    min-width: 100px;
    min-height: 110px;
    max-width: 130px;
    max-height: 160px;
  }

  .body-3D .test-3D .footer-3D {
    padding-top: 24px;
    height: 80px;
  }

  .body-3D .test-3D .footer-3D h1 {
    font-size: 20px;
  }

  /* 
  .selected-mobile-display div.ul-body div.check,
  .similar-mobile-display div.ul-body div.check {
    width: 118px;
    height: 68px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .background-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .margin-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .torange-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-lachek-torang .lecheck-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .background-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-afshan .margin-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .background-carpet img {
    width: 120px;
    height: 64px;
  }

  .selected-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img,
  .similar-mobile-display div.ul-body div.check div .main-carpet-kheshti .flex-container img {
    width: 120px;
    height: 64px;
  } */

  .color-filter-body {
    gap: 0;
  }

  .color-filter-body button {
    margin: 3px;
  }

  .select-structure-mobile-display ul.mobile-display {
    gap: 0;
    display: flex;
    flex-direction: row;
    padding: 10px 5px;
  }

  .select-structure-mobile-display ul.mobile-display li {
    width: 100%;
    background-color: transparent;
    border-radius: 15px;
    margin: 0px 8px;
    padding: 5px;
    display: flex;
    line-height: 3;
    flex-direction: column-reverse;
  }

  .select-structure-mobile-display ul.mobile-display li span,
  .select-structure-mobile-display ul.mobile-display li svg {
    width: 100%;
    text-wrap: nowrap;
  }

  .makeStyles-sliderContainer-12 {
    width: 100%;
  }
}

@media only screen and (max-width: 570px) {
  .room-generator .main-images-page .flow-wall {
    top: 132px;
    width: 66.5%;
    height: 187px;
  }

  .body-daneshname .background-images-first img {
    top: -18px;
    right: 0px;
    width: 320px;
  }

  .body-daneshname .hot-title h1 {
    margin-right: unset;
    text-align: center;
  }

  .body-3D .test-3D {
    height: auto;
  }

  .body-3D .test-3D .carpet-3D,
  .body-3D .test-3D .carpet-3D.preview-rotation {
    width: 444px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time,
  .rotation-mobile-time {
    padding-bottom: 0px;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet,
  .rotation-mobile-time .before-body-carpet {
    transform: rotate(0.25turn) translate(-40px, 0px);
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet,
  .rotation-mobile-time .before-body-carpet .body-carpet {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
    width: 404px !important;
    height: 320px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
    width: 404px !important;
    height: 320px !important;
  }

  .rotation-mobile-time {
    padding-bottom: 0px;
  }
}

@media only screen and (max-width: 540px) {
  .room-generator .mobile-menu-right-side .upload-img-body img {
    height: auto;
  }

  .room-generator .main-images-page img {
    width: 73%;
    height: 200px;
  }

  .room-generator .main-images-page .body-carpet {
    transform: perspective(300px) rotateX(70deg);
  }

  .room-generator .main-images-page .flow-wall {
    top: 116px;
    width: 65%;
    height: 169px;
  }

  .room-generator .main-images-page .floor-image {
    top: 130px;
  }

  .room-generator .main-images-page .ceiling-image {
    top: -130px;
  }

  .room-generator .main-images-page .decoration-image {
    min-width: 95px;
    min-height: 100px;
    max-width: 120px;
    max-height: 140px;
  }

  .category-main-body .row {
    padding-top: 370px;
  }

  .body-daneshname .header-daneshname {
    text-align: center;
  }

  .body-daneshname .header-daneshname img {
    margin: unset;
  }

  .favorites-list-mobile-display div.ul-body {
    height: auto;
  }
}

@media only screen and (max-width: 500px) {
  .room-generator .main-images-page .flow-wall {
    top: 120px;
    width: 65%;
    height: 160px;
  }

  .selected-mobile-display p,
  .similar-mobile-display p {
    font-size: 12px;
  }
}

@media only screen and (max-width: 480px) {
  .room-generator .mobile-menu .carpet-body .recommend-carpet .recommend-carpet-scroll {
    max-height: 295px;
  }

  .room-generator .mobile-menu-right-side .carpet-body .last-child ul {
    max-height: 235px;
  }

  .room-generator .mobile-menu-right-side .d-flex,
  .room-generator .mobile-menu-right-side .carpet-body,
  .room-generator .mobile-menu-right-side .carpet-body ul {
    height: 310px;
  }
}

@media only screen and (max-width: 450px) {
  .header .btn-register-body .btn-register span {
    display: none;
  }

  .room-generator .mobile-menu,
  .room-generator .mobile-menu-right-side {
    width: 180px;
  }

  .room-generator .mobile-menu .carpet-btn,
  .room-generator .mobile-menu-right-side .carpet-btn {
    padding: 7px 15px;
    font-size: 1.3em;
  }

  .room-generator .mobile-menu .list-body,
  .room-generator .mobile-menu-right-side .list-body {
    width: 120px;
  }

  .room-generator .mobile-menu .list-body .first-child,
  .room-generator .mobile-menu-right-side .list-body .first-child {
    font-size: 0.8em;
  }

  .room-generator .mobile-menu .list-body .second-child,
  .room-generator .mobile-menu-right-side .list-body .second-child {
    font-size: 0.6em;
  }

  .room-generator .mobile-menu .list-body .three-child,
  .room-generator .mobile-menu-right-side .list-body .three-child {
    font-size: 0.85em;
  }

  .room-generator .mobile-menu .upload-btn-m,
  .room-generator .mobile-menu-right-side .upload-btn-m {
    background-color: #de2a35;
    background-image: unset;
    background-position: unset;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
    width: unset;
    height: unset;
    border-radius: 10px;
    padding: 2px 6px;
    margin: 0 8px;
  }

  .room-generator .mobile-menu .upload-btn-m span,
  .room-generator .mobile-menu-right-side .upload-btn-m span {
    position: unset;
    font-size: 10px;
    width: 100%;
    text-align: center;
    color: white;
  }

  .room-generator .mobile-menu {
    padding-right: 20px;
    left: -110px;
  }

  .room-generator .mobile-menu .d-flex {
    padding-right: 18px;
  }

  .room-generator .mobile-menu .carpet-btn {
    padding: 7px 10px;
  }

  .room-generator .mobile-menu-right-side {
    padding-left: 20px;
    right: -80px;
  }

  .room-generator .mobile-menu-right-side .d-flex {
    padding-left: 18px;
  }

  .room-generator .mobile-menu-right-side .carpet-btn {
    padding: 7px 10px;
  }

  .room-generator .mobile-menu-right-side .carpet-body .last-child ul {
    max-height: 250px;
  }

  .room-generator .mobile-menu-right-side .carpet-body .last-child ul li {
    height: 42px;
  }

  .room-generator .mobile-menu-right-side .list-body .first-child span {
    padding: 0 5px;
  }

  .room-generator .mobile-menu-right-side .list-body .three-child span {
    padding: 0 20px 0 0;
  }

  .room-generator .mobile-menu-right-side .list-body .three-child.active span {
    padding-right: 10px;
  }

  .room-generator .mobile-menu-right-side .upload-list-mobile {
    max-height: 117px;
  }

  .room-generator .main-images-page img {
    width: 81%;
    height: 170px;
  }

  .room-generator .main-images-page .flow-wall {
    top: 112px;
    width: 69%;
    height: 146px;
  }

  .room-generator .main-images-page .floor-image {
    top: 119px;
  }

  .room-generator .main-images-page .ceiling-image {
    top: -119px;
  }

  .color-filter-body {
    gap: 0;
  }

  .color-filter-body button {
    margin: 2px;
  }

  .body-button-mobile {
    gap: 0;
    left: 12px;
    bottom: 72px;
  }

  .body-button-mobile .change-position,
  .body-button-mobile .clear-background {
    padding: 5px;
    margin: 0;
  }
}

@media only screen and (max-width: 420px) {
  .room-generator .main-images-page .flow-wall {
    top: 113px;
    width: 69%;
    height: 144px;
  }

  .room-generator .right-sidebar-body ul.nav-ul li {
    margin: 0 3px;
  }

  .room-generator .right-sidebar-body ul.nav-ul li span {
    margin-right: 3px;
  }

  .header .svg-div-logo .svg-logo {
    padding: 19px 10px 10px 30px;
  }

  .header .svg-div-logo .svg-logo img {
    width: 110px;
  }

  .header .btn-register-body {
    padding: 14px 10px;
  }

  .header .btn-register-body .btn-register,
  .header .btn-register-body .language {
    margin-top: 5px;
  }

  .header .btn-register-body .btn-register {
    padding: 6px;
  }

  .header .btn-register-body .btn-register span {
    display: none;
  }

  .header .btn-register-body .btn-register svg {
    margin: 0;
  }

  .header img.normal-logo {
    display: none;
  }

  .header img.mobile-logo {
    display: block;
    margin-left: 0px;
  }

  .body-daneshname .background-images-first img {
    top: -18px;
    width: 213px;
  }

  .select-structure-mobile-display ul.mobile-display li span {
    margin: 0px auto;
    font-size: 10px;
  }

  .body-3D .test-3D {
    height: auto;
  }

  .body-3D .test-3D .carpet-3D,
  .body-3D .test-3D .carpet-3D.preview-rotation {
    width: 342px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet,
  .rotation-mobile-time .before-body-carpet .body-carpet,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .background-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .margin-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .torange-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-lachek-torang .lecheck-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-afshan .background-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-afshan .margin-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-kheshti .background-carpet img {
    width: 300px !important;
    height: 220px !important;
  }

  .body-3D .test-3D .carpet-3D .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img,
  .rotation-mobile-time .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img,
  .carpet-3D.preview-rotation .before-body-carpet .body-carpet .main-carpet-kheshti .flex-container img {
    width: 300px !important;
    height: 220px !important;
  }
}

@media only screen and (max-width: 380px) {
  .room-generator .right-sidebar-body ul.nav-ul li span {
    display: none;
  }

  .room-generator .main-images-page img {
    width: 86%;
  }

  .room-generator .main-images-page .rigth-image {
    transform: perspective(400px) rotateY(-56deg);
  }

  .room-generator .main-images-page .left-image {
    transform: perspective(400px) rotateY(56deg);
  }

  .room-generator .main-images-page .decoration-image {
    width: 85px;
    height: 70px;
  }
}

@media only screen and (max-width: 340px) {
  .room-generator .main-images-page .flow-wall {
    top: 114px;
    width: 73%;
    height: 143px;
  }

  .category-main-body .row {
    padding-top: 270px;
  }

  .body-3D .test-3D {
    height: auto;
  }

  .body-3D .test-3D .carpet-3D {
    margin-right: -10px;
  }
}

/* landingPage Styles */

.bottomTape {
  height: 12%;
  width: 100%;
  background-color: #fff;
}

@media only screen and (max-width: 550px) {
  .bottomTape {
    height: 0% !important;
    width: 100%;
    background-color: #fff;
  }
}

@media only screen and (min-height: 1900px) {
  .bottomTape {
    height: 0% !important;
    width: 100%;
    background-color: #fff;
  }
}

.landingContainer {
  width: 100%;
  /* direction: ltr !important; */
}

.landingMainContent {
  height: 88%;
  /* display: none; */
}

@media only screen and (max-width: 550px) {
  .landingMainContent {
    height: 100% !important;
  }
}

@media only screen and (min-height: 1900px) {
  .landingMainContent {
    height: 100% !important;
  }
}

.contactContainer {
  background: linear-gradient(119deg, #4b506b -14%, #4b506b 100%) !important;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  background-size: contain;
  background-origin: content-box;
}

.inActiveState {
  background: linear-gradient(119deg, #3a31ea -14%, #d01657 100%);
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  background-size: contain;
  background-origin: content-box;
}

.activeState {
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-origin: content-box;
}

.fadeBackground {
  height: 100%;
  width: 100%;
  background: url("./../img/landing-background.png");
  background-position: center center;
  background-origin: content-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

@media only screen and (max-width: 550px) {
  .fadeBackground {
    height: 100%;
    width: 100%;
    background: url("./../img/landing-background.png");
    background-position: center center;
    background-origin: content-box;
    background-size: cover !important;
    background-repeat: no-repeat;
    position: relative;
  }
}

@media only screen and (min-height: 1900px) {
  .fadeBackground {
    height: 100%;
    width: 100%;
    background: url("./../img/landing-background.png");
    background-position: center center;
    background-origin: content-box;
    background-size: cover !important;
    background-repeat: no-repeat;
    position: relative;
  }
}

.landingRightShape {
  width: 30%;
  position: absolute;
  top: 0px;
  right: 0px;
}

@media only screen and (max-width: 550px) {
  .landingRightShape {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .landingRightShape {
    display: none;
  }
}

.landingLeftShape {
  width: 33%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

@media only screen and (max-width: 550px) {
  .landingLeftShape {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .landingLeftShape {
    display: none;
  }
}

.contentContainer {
  max-width: 1110px;
  width: 100%;
  margin: 0px auto;
  height: 100%;
}

.swipeableContact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 550px) {
  .swipeableContact {
    justify-content: flex-start !important;
  }
}

@media only screen and (min-height: 1900px) {
  .swipeableContact {
    padding: 10% !important;
    justify-content: flex-start !important;
  }
}

.landingHeader {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #fff;
  padding: 2% 5%;
}

.landingHeaderEN {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #fff;
  padding: 2% 5%;
  direction: ltr !important;
}

@media only screen and (max-width: 550px) {
  .landingHeader {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    border-bottom: 0px solid #fff !important;
    border: none !important;
    padding: 15px;
  }
}

@media only screen and (min-height: 1900px) {
  .landingHeader {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    border-bottom: 0px solid #fff !important;
    border: none !important;
    padding: 0% !important;
  }
}

.landingHeaderLinks {
  margin: 0;
}

@media only screen and (max-width: 550px) {
  .landingHeaderLinks {
    display: none !important;
  }
}

@media only screen and (min-height: 1900px) {
  .landingHeaderLinks {
    display: none !important;
  }
}

.mainSlideContainer {
  height: 90%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1vh 120px;
  padding-top: 4vh !important;
  /* padding: 5vh 50px; */
}

@media only screen and (max-width: 550px) {
  .mainSlideContainer {
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 20px !important;
    padding-bottom: 50px;
  }
}

@media only screen and (min-height: 1900px) {
  .mainSlideContainer {
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 9% !important;
    padding-top: 0px !important;
  }
}

.slidesContainer {
  height: 90%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* padding: 5vh 30px; */
  /* padding: 1vh 30px;
  padding-top: 5vh !important; */
  padding: 0 !important;
}

@media only screen and (max-width: 550px) {
  .slidesContainer {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* padding-bottom: 0px !important; */
    padding-bottom: 50px;
    padding-top: 0px !important;
    display: none !important;
  }
}

@media only screen and (max-width: 365px) {
  .slidesContainer {
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px;
    padding-bottom: 50px;
    padding-top: 0px !important;
    display: none !important;
  }
}

@media only screen and (min-height: 700px) {
  .slidesContainer {
    align-items: center;
  }
}

@media only screen and (min-height: 1000px) {
  .slidesContainer {
    align-items: center;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesContainer {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    padding: 10% !important;
    padding-top: 0px !important;
    display: none !important;
  }
}

.slidesContainer2 {
  /* height: 90%; */
  height: 88%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* padding: 5vh 30px; */
  /* padding: 1vh 30px;
  padding-top: 5vh !important; */
  padding: 0 !important;
}

@media only screen and (max-width: 550px) {
  .slidesContainer2 {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px !important;
    /* padding-bottom: 0px !important; */
    padding-bottom: 50px;
    padding-top: 0px !important;
    display: flex !important;
  }
}

@media only screen and (max-width: 365px) {
  .slidesContainer2 {
    /* height: 90%; */
    height: 88%;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px !important;
    padding-bottom: 50px;
    padding-top: 0px !important;
    display: flex !important;
  }
}

@media only screen and (min-height: 700px) {
  .slidesContainer2 {
    align-items: center;
  }
}

@media only screen and (min-height: 1000px) {
  .slidesContainer2 {
    align-items: center;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesContainer2 {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    padding: 10% !important;
    padding-top: 0px !important;
    display: flex !important;
    height: 84% !important;
  }
}

.mainSlideText {
  display: flex;
  flex: 2;
  height: 90%;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: justify;
  /* line-height: 1.8; */
  line-height: 27px;
  font-size: 14px;
  direction: rtl;
  /* text-align-last: end; */
  padding: 0px 50px;
  /* padding-left: 0px !important; */
  /* margin-left: 130px; */
}

@media only screen and (min-height: 700px) {
  .mainSlideText {
    display: flex;
    flex: 2;
    height: 80%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 27px !important;
    font-size: 16px !important;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px 50px;
    margin-left: 30px;
  }
}

@media only screen and (min-height: 1000px) {
  .mainSlideText {
    display: flex;
    flex: 1.8;
    height: 75%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 1.8;
    font-size: 18px;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px 35px;
    margin-left: 30px;
  }
}

@media only screen and (max-width: 550px) {
  .mainSlideText {
    display: flex;
    /* flex: 1.2 !important; */
    flex: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 20px !important;
    font-size: 13px !important;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px;
    margin: 0px !important;
  }
}

@media only screen and (max-width: 390px) {
  .mainSlideText {
    display: flex;
    /* flex: 1.2 !important; */
    flex: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 18px !important;
    font-size: 11.5px !important;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px;
    margin: 0px !important;
  }
}

@media only screen and (max-width: 365px) {
  .mainSlideText {
    display: flex;
    /* flex: 1.2 !important; */
    flex: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 18px !important;
    font-size: 11px !important;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px;
    margin: 0px !important;
  }
}

@media only screen and (max-width: 325px) {
  .mainSlideText {
    display: flex;
    /* flex: 1.2 !important; */
    flex: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 17px !important;
    font-size: 9px !important;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px;
    margin: 0px !important;
  }
}

@media only screen and (max-width: 300px) {
  .mainSlideText {
    display: flex;
    /* flex: 1.2 !important; */
    flex: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 17px !important;
    font-size: 8px !important;
    direction: rtl !important;
    /* text-align-last: end !important; */
    padding: 0px;
    margin: 0px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .mainSlideText {
    display: flex;
    flex: 1 !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 50px !important;
    /* line-height: 1.7; */
    font-size: 31px !important;
    margin: 0px !important;
    padding: 0px !important;
    direction: ltr;
  }
}

.mainslideImgContainer {
  /* height: 100%; */
  height: 90%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex: 1;
}

@media only screen and (min-height: 700px) {
  .mainslideImgContainer {
    height: 85%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1;
  }
}

@media only screen and (min-height: 900px) {
  .mainslideImgContainer {
    height: 90%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1.4;
  }
}

@media only screen and (min-height: 1000px) {
  .mainslideImgContainer {
    height: 85%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1.2;
  }
}

@media only screen and (max-width: 550px) {
  .mainslideImgContainer {
    width: 100% !important;
    display: flex;
    flex: 1.2 !important;
    min-height: 0px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .mainslideImgContainer {
    width: 100%;
    display: flex;
    flex: 1.8 !important;
  }
}

.mainslideImg {
  height: 100%;
  width: 70%;
  /* width: 100%; */
}

@media only screen and (min-height: 700px) {
  .mainslideImg {
    height: 100%;
    /* width: 70%; */
    width: 100%;
  }
}

@media only screen and (min-height: 1000px) {
  .mainslideImg {
    height: 100%;
    width: 100%;
  }
}

@media only screen and (max-width: 550px) {
  .mainslideImg {
    width: 45% !important;
  }
}

@media only screen and (min-height: 1900px) {
  .mainslideImg {
    height: 95% !important;
    width: 58% !important;
  }
}

.slidesImgContainer {
  display: flex;
  /* flex: 1.5; */
  flex: 2;
  /* height: 75%; */
  /* height: 90% !important; */
  align-items: center;
  justify-content: flex-end;
}

@media only screen and (max-width: 550px) {
  .slidesImgContainer {
    display: flex;
    flex: 1 !important;
    width: 100%;
    justify-content: center !important;
    align-items: center;
    min-height: 0px !important;
  }
}

@media only screen and (min-height: 700px) {
  .slidesImgContainer {
    display: flex;
    /* flex: 1.5; */
    flex: 2;
    width: 100%;
    /* height: 80%; */
    justify-content: flex-end;
    align-items: center;
    /* align-items: center; */
  }
}

@media only screen and (min-height: 1000px) {
  .slidesImgContainer {
    display: flex;
    /* flex: 1.5; */
    flex: 2;
    width: 100%;
    /* height: 65%; */
    justify-content: flex-end;
    align-items: center;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesImgContainer {
    display: flex;
    flex: 1.5 !important;
    width: 100%;
    justify-content: center !important;
    align-items: center !important;
  }
}

.slidesImg {
  height: 100%;
  margin: 0px;
}

@media only screen and (max-width: 550px) {
  .slidesImg {
    margin: 0;
    /* height: 100% !important; */
    height: 100% !important;
    width: 90% !important;
    /* height: 85% !important; */
  }
}

@media only screen and (max-width: 2000px) {
  .insuranceSlidesImg {
    margin: 0;
    height: 120% !important;
    width: 85% !important;
  }
}

@media only screen and (max-width: 1800px) {
  .insuranceSlidesImg {
    margin: 0;
    /* height: 100% !important; */
    height: 130% !important;
    width: 70% !important;
    /* height: 85% !important; */
  }
}

@media only screen and (min-height: 900px) {
  .insuranceSlidesImg {
    margin: 0;
    /* height: 100% !important; */
    height: 100% !important;
    width: 70% !important;
    /* height: 85% !important; */
  }
}

@media only screen and (max-width: 550px) {
  .insuranceSlidesImg {
    margin: 0;
    /* height: 100% !important; */
    height: 120% !important;
    width: 90% !important;
    /* height: 85% !important; */
  }
}

@media only screen and (min-height: 700px) {
  .slidesImg {
    height: 100%;
    margin: 0px;
    width: 100%;
  }
}

@media only screen and (min-height: 1000px) {
  .slidesImg {
    height: 100%;
    width: 100%;
    margin: 0px;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesImg {
    margin: 0;
    width: 90% !important;
    height: 90% !important;
  }
}

.slidesTextContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* justify-content: space-around; */
  justify-content: center !important;
  align-items: center;
  color: #fff;
  text-align: justify;
  margin-left: 20px;
  line-height: 1.8;
  font-size: 13px;
  padding: 0px 6%;
  height: 75%;
}

@media only screen and (max-width: 550px) {
  .slidesTextContainer {
    display: flex;
    flex-direction: column;
    flex: 1.2 !important;
    overflow: scroll !important;
    /* justify-content: center !important; */
    /* justify-content: space-between !important; */
    justify-content: flex-start !important;
    align-items: center;
    color: #fff;
    text-align: justify;
    /* line-height: 1.7; */
    line-height: 25px !important;
    font-size: 11px !important;
    padding: 0px !important;
    margin: 0px !important;
    width: 100%;
  }
}

@media only screen and (min-height: 700px) {
  .slidesTextContainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* justify-content: space-around; */
    /* justify-content: center !important; */
    justify-content: center !important;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 1.7;
    font-size: 11px;
    padding: 0px 30px !important;
    width: 100%;
    height: 75%;
    /* margin-left: 70px; */
  }
}

@media only screen and (min-height: 1000px) {
  .slidesTextContainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center !important;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 1.7;
    font-size: 11px;
    padding: 0px 20px;
    width: 100%;
    height: 75%;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesTextContainer {
    display: flex;
    flex-direction: column;
    flex: 1.8 !important;
    justify-content: flex-start !important;
    align-items: center;
    color: #fff;
    text-align: justify;
    line-height: 1.7;
    font-size: 30px !important;
    margin: 0px !important;
    padding: 0px !important;
    width: 100%;
  }
}

.landingDots {
  display: none;
}

@media only screen and (max-width: 550px) {
  .landingDots {
    bottom: 10vh !important;
    display: flex !important;
  }
}

.sliderBottomContainer {
  position: absolute;
  bottom: -50px;
  width: 100%;
  height: 18%;
  /* height: 20%; */
  background-color: #fff;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 27px 6px rgba(0, 0, 0, 0.1);
  padding: 3px;
}

@media only screen and (max-width: 550px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: 10px;
    width: 90%;
    height: 10% !important;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (max-width: 360px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: 10px;
    width: 90%;
    height: 9% !important;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (max-width: 360px) {
  .landingDots {
    display: flex !important;
    bottom: 9vh !important;
  }
}

@media only screen and (min-height: 800px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 16.5% !important;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (min-height: 900px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 15% !important;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (min-height: 1000px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 14% !important;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (min-height: 1100px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 13% !important;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (min-height: 1200px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 12.5% !important;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (min-height: 1900px) {
  .sliderBottomContainer {
    position: absolute;
    bottom: 50px !important;
    width: 90%;
    height: 13% !important;
    background-color: #fff;
    border-radius: 30px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
  }
}

@media only screen and (min-height: 1900px) {
  .landingDots {
    bottom: 13vh !important;
    left: 37.5% !important;
    display: flex !important;
    padding: 40px !important;
  }
}

.sliderBottomLogo {
  display: flex;
  flex: 1.2;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

@media only screen and (max-width: 550px) {
  .sliderBottomLogo {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .sliderBottomLogo {
    display: none;
  }
}

.sliderBottomIconsBefore {
  display: flex;
  flex: 6;
  justify-content: space-between;
  align-items: center;
  background-color: #4b506b;

  border-radius: 10px;
  height: 100%;
  /* padding: 5px 50px; */
  padding: 5px 50px;
}

@media only screen and (max-width: 550px) {
  .sliderBottomIconsBefore {
    display: none;
  }
}

@media only screen and (max-width: 1800px) {
  .sliderBottomIconsBefore div {
    padding: 5px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .sliderBottomIconsBefore {
    display: none;
  }
}

.sliderBottomIconsAfter {
  display: none;
}

@media only screen and (max-width: 550px) {
  .sliderBottomIconsAfter {
    display: flex;
    flex: 6;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
  }

  .sliderBottomIconsAfter svg {
    height: 23px !important;
    width: 23px !important;
  }
}

@media only screen and (max-width: 320px) {
  .sliderBottomIconsAfter {
    display: flex;
    flex: 6;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
  }

  .sliderBottomIconsAfter svg {
    height: 17px !important;
    width: 17px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .sliderBottomIconsAfter {
    display: flex;
    flex: 6;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 30px !important;
    height: 100%;
  }

  .sliderBottomIconsAfter svg {
    height: 80px;
    width: 80px;
  }
}

.slidesTextTitle {
  align-self: end;
  width: 100%;

  font-size: 19px;
  margin-bottom: 5px;
  font-weight: 800;
}

@media only screen and (min-height: 1000px) {
  .slidesTextTitle {
    font-size: 22px;
  }
}

@media only screen and (max-width: 550px) {
  .slidesTextTitle {
    width: 100%;
    text-align: center;
    font-size: 18px !important;
    /* margin-bottom: 15 !important; */
    font-weight: 500 !important;
  }
}

@media only screen and (max-width: 450px) {
  .slidesTextTitle {
    width: 100%;
    text-align: center;
    font-size: 16.5px !important;
    margin-bottom: 10 !important;
    font-weight: 700;
  }
}

@media only screen and (max-width: 400px) {
  .slidesTextTitle {
    width: 100%;
    text-align: center;
    font-size: 16px !important;
    margin-bottom: 5 !important;
    font-weight: 700;
  }
}

@media only screen and (max-width: 365px) {
  .slidesTextTitle {
    width: 100%;
    text-align: center;
    font-size: 15px !important;
    margin-bottom: 3px !important;
    font-weight: 700;
  }
}

@media only screen and (max-width: 325px) {
  .slidesTextTitle {
    width: 100%;
    text-align: center;
    font-size: 13.5px !important;
    margin-bottom: 0 !important;
    font-weight: 700;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesTextTitle {
    width: 100%;
    text-align: center;
    font-size: 36px !important;
    margin-bottom: 30 !important;
    font-weight: 600 !important;
  }
}

.slidesTextContent {
  font-size: 13px;
  margin-bottom: 15px !important;
  line-height: 25px !important;
  /* text-align-last: end; */
}

@media only screen and (min-height: 1000px) {
  .slidesTextContent {
    margin-bottom: 42px !important;
    line-height: 27px !important;
    font-size: 14px;
  }
}

@media only screen and (max-width: 550px) {
  .slidesTextContent {
    display: none !important;
    /* margin-bottom: 30px !important; */
    font-size: 11px !important;
    font-weight: 200 !important;
    margin-bottom: 0px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesTextContent {
    /* display: none !important; */
    margin-bottom: 20px !important;
    font-size: 36px !important;
    direction: rtl !important;
    /* text-align-last: end; */
  }
}

.slidesTextContentRes {
  display: none;
}

@media only screen and (max-width: 550px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 13px !important;
    /* line-height: 25px !important; */
    line-height: 20px !important;
    direction: rtl;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 500px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 13px !important;
    /* line-height: 25px !important; */
    line-height: 20px !important;
    direction: rtl;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 450px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 13px !important;
    /* line-height: 25px !important; */
    line-height: 20px !important;
    direction: rtl;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 430px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 12px !important;
    /* line-height: 25px !important; */
    line-height: 20px !important;
    direction: rtl;
    height: 175px;
    overflow: scroll;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 390px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 11.5px !important;
    /* line-height: 25px !important; */
    line-height: 18px !important;
    direction: rtl;
    height: 175px;
    overflow: scroll;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 365px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 11px !important;
    /* line-height: 25px !important; */
    line-height: 18px !important;
    direction: rtl;
    height: 175px;
    overflow: scroll;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 325px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 9px !important;
    /* line-height: 25px !important; */
    line-height: 17px !important;
    direction: rtl;
    height: 175px;
    overflow: scroll;
    /* text-align-last: end; */
  }
}

@media only screen and (max-width: 300px) {
  .slidesTextContentRes {
    display: flex;
    /* margin-bottom: 0px !important; */
    margin-bottom: 15px !important;
    font-size: 8px !important;
    /* line-height: 25px !important; */
    line-height: 17px !important;
    direction: rtl;
    height: 175px;
    overflow: scroll;
    /* text-align-last: end; */
  }
}

@media only screen and (min-height: 1900px) {
  .slidesTextContentRes {
    /* display: flex; */
    display: flex !important;
    margin-bottom: 30px !important;
    font-size: 31px !important;
    line-height: 50px !important;
    direction: rtl;

    /* text-align-last: end; */
  }
}

.slidesStrongContent {
  font-size: 13px;
}

@media only screen and (min-height: 1000px) {
  .slidesStrongContent {
    font-size: 16px !important;
    font-weight: 800 !important;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesStrongContent {
    font-size: 33px !important;
    font-weight: 800 !important;
  }
}

.slidesLightContent {
  font-size: 13px !important;
}

@media only screen and (min-height: 1000px) {
  .slidesLightContent {
    font-size: 15px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .slidesLightContent {
    font-size: 30px !important;
  }
}

.slideTextBtn {
  display: flex;
  border: 1px solid #fff !important;
  background-color: rgba(0, 0, 0, 0.11) !important;
  border-radius: 30px !important;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  width: 100%;
  padding: 5px;
  cursor: pointer;
  font-size: 13px;
}

@media only screen and (max-width: 550px) {
  .slideTextBtn {
    width: 85% !important;
    font-size: 11px !important;
    padding: 5px !important;
    font-weight: 900 !important;
  }
}

@media only screen and (max-width: 400px) {
  .slideTextBtn {
    width: 85% !important;
    font-size: 12px !important;
    padding: 5px !important;
    font-weight: 900 !important;
  }
}

@media only screen and (max-width: 380px) {
  .slideTextBtn {
    width: 85% !important;
    font-size: 10px !important;
    padding: 5px !important;
    font-weight: 900 !important;
  }
}

@media only screen and (max-width: 320px) {
  .slideTextBtn {
    width: 85% !important;
    font-size: 9.5px !important;
    padding: 5px !important;
    font-weight: 900 !important;
  }
}

@media only screen and (max-width: 300px) {
  .slideTextBtn {
    width: 85% !important;
    font-size: 9px !important;
    padding: 5px !important;
    font-weight: 900 !important;
  }
}

@media only screen and (min-height: 1000px) {
  .slideTextBtn {
    font-size: 17px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .slideTextBtn {
    font-size: 32px !important;
    bottom: -40px !important;
  }
}

.mapContainer {
  width: 85%;
  height: 60%;
  max-height: 430px;
  border: 1px solid #fff;
  background-color: #fff;
  border-radius: 15px;
  margin-bottom: 50px;
  /* overflow: hidden; */
  position: relative;
}

@media only screen and (max-width: 550px) {
  .mapContainer {
    width: 85%;
    height: 40%;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 50px;
    overflow: hidden;
    position: relative;
  }
}

@media only screen and (min-height: 1900px) {
  .mapContainer {
    width: 85%;
    height: 40%;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 50px;
    overflow: hidden;
    position: relative;
  }
}

.SwipeableContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

@media only screen and (max-width: 550px) {
  .SwipeableContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    min-height: 0px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .SwipeableContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
  }
}

.contactInfo {
  height: 70%;
  width: 40%;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 1000;
  padding: 10px 35px;
}

.contactInfoLtr {
  height: 70%;
  width: 40%;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 1000;
  padding: 10px 35px;
}

@media only screen and (max-width: 550px) {
  .contactInfo {
    display: none;
  }

  .contactInfoLtr {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .contactInfo {
    display: none;
  }

  .contactInfoLtr {
    display: none;
  }
}

.contactFollowUs {
  height: 15%;
  width: 40%;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  padding: 10px 35px;
  padding-left: 15px;
}

.contactFollowUsLtr {
  height: 15%;
  width: 40%;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  position: absolute;
  left: 20px;
  bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  padding: 10px 35px;
  padding-left: 15px;
}

@media only screen and (max-width: 550px) {
  .contactFollowUs {
    height: 20%;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    position: absolute;
    bottom: 10px;
    right: 66%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0px;
    margin: 0px;
  }

  .contactFollowUsLtr {
    height: 20%;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    position: absolute;
    bottom: 10px;
    left: 66%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0px;
    margin: 0px;
  }
}

@media only screen and (min-height: 1900px) {
  .contactFollowUs {
    height: 20%;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    position: absolute;
    bottom: 10px;
    right: 66%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0px;
    margin: 0px;
  }

  .contactFollowUsLtr {
    height: 20%;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    position: absolute;
    bottom: 10px;
    left: 66%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0px;
    margin: 0px;
  }
}

.followText {
  color: #5e6777;
  font-size: 14px;
  margin: 0px;
}

@media only screen and (max-width: 550px) {
  .followText {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .followText {
    display: none;
  }
}

@media only screen and (max-width: 550px) {
  .responsiveContactInfo {
    display: flex;
    flex-direction: column;
    width: 85%;
  }
}

@media only screen and (min-height: 1900px) {
  .responsiveContactInfo {
    display: flex !important;
    flex-direction: column;
    width: 85%;
  }
}

@media only screen and (min-height: 1900px) {
  .responsiveContactInfo span {
    font-size: 34px !important;
  }
}

@media only screen and (min-width: 560px) {
  .responsiveContactInfo {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .responsiveContactInfo {
    display: none;
  }
}

.contactInfoRows {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}

.contactInfoTop {
  display: flex;
  flex-direction: column;
  width: 95%;
  margin: 0;
  padding: 0px 15px;
}

.infoTopTitle {
  color: #c3c6e1;
  font-size: 16px;
  font-weight: 900;
  margin: 0px;
}

.infoRowContent {
  color: #fff;
  font-size: 15px;
  margin: 0px;
  margin-top: 10px;
}

.sliderIconsAfterTitles {
  padding-top: 5px;
  font-size: 13px;
  font-weight: 300;
}

@media only screen and (max-width: 550px) {
  .sliderIconsAfterTitles {
    padding-top: 5px;
    font-size: 11px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (max-width: 380px) {
  .sliderIconsAfterTitles {
    padding-top: 5px;
    font-size: 10px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (max-width: 360px) {
  .sliderIconsAfterTitles {
    padding-top: 5px;
    font-size: 10px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (max-width: 350px) {
  .sliderIconsAfterTitles {
    padding-top: 5px;
    font-size: 8.5px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (min-height: 1900px) {
  .sliderIconsAfterTitles {
    padding-top: 18px;
    font-size: 27px;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

//
.sliderIconsAfterTitlesLangs {
  padding-top: 5px;
  font-size: 13px;
  font-weight: 300;
}

@media only screen and (max-width: 550px) {
  .sliderIconsAfterTitlesLangs {
    padding-top: 5px;
    font-size: 7px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (max-width: 380px) {
  .sliderIconsAfterTitlesLangs {
    padding-top: 5px;
    font-size: 6px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (max-width: 360px) {
  .sliderIconsAfterTitlesLangs {
    padding-top: 5px;
    font-size: 6px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (max-width: 350px) {
  .sliderIconsAfterTitlesLangs {
    padding-top: 5px;
    font-size: 5px !important;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

@media only screen and (min-height: 1900px) {
  .sliderIconsAfterTitlesLangs {
    padding-top: 18px;
    font-size: 27px;
    font-weight: 300;
    /* font-weight: 400; */
  }
}

.openMenu {
  -webkit-transition: height 0.5s !important;
  -moz-transition: height 0.5s !important;
  transition: height 0.5s !important;
  /* height: 150px !important; */
  height: 250px !important;
}

.closeMenu {
  height: 0px !important;
  -webkit-transition: height 0.5s !important;
  -moz-transition: height 0.5s !important;
  transition: height 0.5s !important;
  overflow: hidden !important;
}

.menuIcon {
  display: none;
}

.langIcon {
  display: none;
}

.menuIconEn {
  display: none;
}

@media only screen and (max-width: 550px) {
  .menuIcon {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .langIcon {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (max-width: 550px) {
  .menuIconEn {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (min-height: 1900px) {
  .menuIconEn {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (min-height: 1900px) {
  .menuIconEn svg {
    height: 50px !important;
    width: 50px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .menuIcon {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100px;
    width: 100px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .langIcon {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (min-height: 1900px) {
  .menuIcon svg {
    height: 50px !important;
    width: 50px !important;
  }

  .langIcon svg {
    height: 50px !important;
    width: 50px !important;
  }
}

.twitterIcon {
  margin: 0px !important;
}

@media only screen and (min-width: 550px) {
  .animationSlides {
    display: flex;
  }
}

@media only screen and (min-height: 1900px) {
  .animationSlides {
    display: none;
  }
}

@media only screen and (max-width: 550px) {
  .animationSlides {
    display: none;
  }
}

@media only screen and (min-width: 550px) {
  .swipeableSlides {
    display: none;
  }
}

@media only screen and (min-height: 1900px) {
  .swipeableSlides {
    display: flex !important;
    padding: 5%;
  }
}

@media only screen and (max-width: 550px) {
  .swipeableSlides {
    display: flex;
    padding: 0px !important;
    /* padding: 0px 20px; */
  }
}

@media only screen and (min-height: 1900px) {
  .insuranceSlidesImg {
    margin: 0;
    /* height: 100% !important; */
    height: 95% !important;
    width: 90% !important;
    /* height: 85% !important; */
  }
}

.switchLangModal {
  color: #bbc2ce;
  font-weight: 400;
}

.switchLangModal:hover {
  font-weight: 800;
  color: #5e6777;
  /* background-color: "#eaf0f5"; */
}

.langRowContainer>span {
  margin: 0px !important;
}

.headerSwitchLang {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin: 0;
  transition: all 0.5s;
}

.headerInstagram {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin: 0;
  transition: all 0.5s;
}

.headerInstagram:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

.headerLogoIcon {
  margin: 0;
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 550px) {
  .headerLogoIcon svg {
    height: 25px !important;
  }
}

@media only screen and (min-height: 1900px) {
  .headerLogoIcon svg {
    height: 125px !important;
    width: 225px !important;
    /* border: 1px solid red; */
  }
}

.bottomIconsContainer svg {
  height: 75% !important;
  width: 100% !important;
}

.animationContainer {
  /* position: fixed; */
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  /* height: 300px;
  width: 500px; */
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  /* height: 100%;
  width: 100%; */
  /* width: 50%;
  height: 250px; */
  /* height: 100%; */
  cursor: pointer;
  /* border: 10px solid green; */
  /* cursor: url()
    auto; */
}

.animationContainer>div {
  position: absolute;
  /* width: 100vw;
  height: 100vh; */
  /* width: 90%;
  height: 90%; */
  width: 98% !important;
  height: 98% !important;
  /* flex: 1; */
  /* display: flex; */
  will-change: transform;
}

@media only screen and (max-width: 550px) {
  .animationContainer>div {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
  }
}

@media only screen and (min-height: 1900px) {
  .animationContainer>div {
    position: absolute;
    display: flex;
    width: 100% !important;
    height: 80% !important;
    will-change: transform;
  }
}

.animationContainer>div>div {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* width: 100%;
  height: 100%; */
  /* height: 100%; */
  flex: 1;
  display: flex;
  /* width: 80%;
  /* height: 80%; */
  will-change: transform;
  /* box-shadow: 0 62.5px 125px -25px rgba(50, 50, 73, 0.5),
    0 37.5px 75px -37.5px rgba(0, 0, 0, 0.6); */
  /* border: 3px solid blue; */
}

@media only screen and (max-width: 550px) {
  .animationContainer>div>div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    /* flex: 1; */
    display: flex;
    /* height: 50% !important; */
    /* height: 100%; */
    /* flex: 1;
    display: flex; */
    /* width: 80%;
    /* height: 80%; */
    will-change: transform;
    /* box-shadow: 0 62.5px 125px -25px rgba(50, 50, 73, 0.5),
      0 37.5px 75px -37.5px rgba(0, 0, 0, 0.6); */
    /* border: 3px solid blue; */
  }
}

.resCarouselText {
  display: none;
  height: 0% !important;
}

@media only screen and (max-width: 550px) {
  .resCarouselText {
    display: flex !important;
    height: 100% !important;
    width: 100%;
    flex: 1;
    /* border: 5px solid #fff; */
  }
}

@media only screen and (min-height: 1900px) {
  .resCarouselText {
    display: flex !important;
    height: 100% !important;
    /* height: 100% !important; */
    width: 100%;
    flex: 1;
    /* border: 5px solid #fff; */
  }
}

.sliderBottomIconsAfter .MuiButton-label {
  display: flex !important;
  flex-direction: column !important;
  padding: 0px !important;
}

.sliderBottomIconsAfter .MuiButton-root {
  /* display: flex !important;
  flex-direction: column !important; */
  padding: 0px !important;
}

@media only screen and (max-width: 550px) {
  .sliderBottomIconsAfter .MuiButton-root {
    min-width: 0px !important;
  }
}

.leaflet-container {
  width: 100wh;
  height: 100vh;
}

.MuiDialog-paper {
  margin: 0px !important;
  align-self: flex-start !important;
}

.MuiDialog-paperWidthSm {
  max-width: 100vw !important;
}

/* .leaflet-control-zoom-fullscreen {
  background-image: url('/public/img/fullscreen-icon.png');
} */

@media only screen and (min-height: 600px) {
  .landingGifContainer {
    height: 75% !important;
    width: 70% !important;
  }
}

@media only screen and (min-height: 700px) {
  .landingGifContainer {
    height: 85% !important;
    width: 70% !important;
  }
}

@media only screen and (min-height: 900px) {
  .landingGifContainer {
    height: 95% !important;
    width: 90% !important;
  }
}

@media only screen and (min-height: 950px) {
  .landingGifContainer {
    height: 80% !important;
    width: 90% !important;
  }
}

@media only screen and (min-height: 1100px) {
  .landingGifContainer {
    height: 80% !important;
    width: 90% !important;
  }
}