@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
    --primary1: 255,118,52; /* #FDB92E */
    --primary2: 48,81,160; /* #3051A0 */
    --primary3: 240,253,244; /* #F0FDF4 */
    --primary4: 156,156,156; /* #9C9C9C */
    --baseColor: 30,30,30; /* #1E1E1E */
    --color_gray: 245,245,245;  /* #F5F5F5 */
    --color_black: 0,0,0;
    --color_white: 255,255,255;
    --baseFont: 'Roboto', sans-serif;
    --imgPrimary1: invert(91%) sepia(15%) saturate(5668%) hue-rotate(333deg) brightness(101%) contrast(98%);
    --imgPrimary2: invert(25%) sepia(62%) saturate(1454%) hue-rotate(201deg) brightness(91%) contrast(87%);
    --imgPrimary4: invert(66%) sepia(7%) saturate(0%) hue-rotate(251deg) brightness(95%) contrast(80%);
    --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
    --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
    --padding: clamp(3.125rem, 2.8125rem + 1.5625vw, 4.6875rem);
    --mb: 1.5rem;
    --bs-breadcrumb-divider: '•';
}
::selection {color: rgb(var(--color_white)); background: rgb(var(--primary1));}

a:hover, a:focus {outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none;}
button:focus {outline: none;}
.transition {-webkit-transition: all .3s linear; transition: all .3s linear;}
.container {width: 100%; max-width: 1240px;}

/* .fw-300 {font-weight: 300;} .fw-400 {font-weight: 400;} .fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;} .fw-700 {font-weight: 700;}  */
.fs-5 {font-size: clamp(1.0625rem, 1.025rem + 0.1875vw, 1.25rem) !important;}

.clr-base {color: rgb(var(--baseColor)) !important;}
.clr-1 {color: rgb(var(--primary1)) !important;} .bg-clr-1 {/*background-color: rgb(var(--primary1)) !important;*/background-color: #2A2828 !important;}
.clr-2 {color: rgb(var(--primary2)) !important;} .bg-clr-2 {background-color: rgb(var(--primary2)) !important;}
.clr-3 {color: rgb(var(--primary3)) !important;} .bg-clr-3 {background-color: rgb(var(--primary3)) !important;}
.clr-gray {color: rgb(var(--color_gray));} .bg-clr-gray {background-color: rgb(var(--color_gray));}
.brd-clr-1 {--bs-border-color: rgb(var(--primary1));}

.clr-base:hover {color: rgb(var(--primary1)) !important;}

.imgPrimary1 {filter: var(--imgPrimary1);}

/* button custom */
.btn-custom {position: relative; border: 2px solid rgba(var(--primary1)); border-radius: 0; font-size: 0.938rem; text-transform: uppercase; font-weight: 500; transition: 0.2s;}
.btn-custom span {position: relative; z-index: 1;}
.btn-custom:before, .btn-custom:after {content: ''; position: absolute; width: 50%; height: 0; background-color: rgb(var(--primary1)); transition: 0.2s ease-in-out;}
.btn-custom:before {left: 0; top: 0;}
.btn-custom:after {right: 0; bottom: 0;}
.btn-custom:hover {border-color: rgb(var(--primary1));}
.btn-custom:hover span {color: rgb(var(--primary2));}
.btn-custom:hover:before, .btn-custom:hover:after {height: 100%;}
.btn-custom.brd-white {border-color: rgb(var(--color_white));}
.btn-custom.brd-white:before, .btn-custom.brd-white:after {background-color: rgb(var(--primary2));}
.btn-custom.brd-white:hover span {color: rgb(var(--color_white));}

.btn-custom.bg-clr-2[data-border=""] {border: 1px solid rgb(var(--primary2));}

/* owl-carousel */
.owl-flex .owl-stage {display: flex;}
.owl-visible.owl-carousel .owl-stage-outer {overflow: visible;}
.style1 .owl-nav {display: flex; align-items: center; justify-content: center; margin-top: 1rem;}
.style1 .owl-nav [class^="owl-"] {border: 2px solid #EBEBEB !important; width: 36px; height: 36px; background: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.4s; margin: 0 5px;}
.style1 .owl-nav [class^="owl-"]:before {content: ''; background: url('../images/nav-arrow.png'); width: 13px; height: 12px; filter: var(--imgPrimary2); position: relative; left: -1px;}
.style1 .owl-nav .owl-next:before {transform: rotate(180deg); left: 2px;}
.style1 .owl-nav [class^="owl-"]:hover {border-color: rgb(var(--primary1)) !important;}
.style1 .owl-nav [class^="owl-"]:hover:not(.disabled) {background-color: rgb(var(--primary1)) !important;}
.style1 .owl-nav [class^="owl-"].disabled {opacity: 0.5;}
.style1 .owl-nav [class^="owl-"].disabled:hover {cursor: unset;}
.style1 .owl-nav.disabled [class^='owl-'] {display: none;}

.style1 .owl-dots {display: flex; justify-content: center; margin-top: 1rem;}
.style1 .owl-dots button.owl-dot {background-color: transparent; border: none; width: auto; padding: 0; margin: 0 7.5px;}
.style1 .owl-dots button.owl-dot span {width: 15px; height: 15px; display: block; border-radius: 50%; margin: 0 auto; transition: 0.4s; background-color: rgb(var(--primary1));}
.style1 .owl-dots button.owl-dot.active span {background-color: rgb(var(--primary2));}

#wrapper {max-width: 1920px; margin: 0 auto; position: relative;}

/* Typography */
.padding {padding: var(--padding) 0;}
h2.title {font-size: clamp(1.875rem, 1.75rem + 0.625vw, 2.5rem);}
h2.title .spl {font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);}

/* products */
.products {padding-top: calc(var(--padding) * 2); margin-top: calc(var(--padding) * -2);}
.products span.bg {position: absolute; left: 50%; top: 0; width: 1920px; height: 403px; transform: translateX(-50%);}
.products span.bg:before {content: ''; width: 1288px; height: 448px; background: url('../images/product-vector-bg.svg') left top / cover no-repeat; position: absolute; right: -168px; top: 0; opacity: 0.2; transform: rotate(180deg);}
.card {--bs-border-radius: 1rem; height: calc(100% - var(--mb)); margin-bottom: var(--mb); overflow: hidden;}
.card.product-card:before {content: ''; position: absolute; inset: 0; background-color: #f5f5f5; border-radius: 1rem; transition: 0.4s;}
.card.product-card .img-wrapper {position: relative; width: 100%; padding-top: 110%;}
.card.product-card .img-wrapper img {width: auto; position: absolute; inset: 0; margin: auto; bottom: 2.5rem; max-height: 60%;}
.card.product-card:hover:before {transform: scale(0.95); background-color: rgb(var(--primary1));}
.card.product-card .title {position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; height: 90px;}

/* clientele */
.clientele .item {position: relative; padding-top: 46.25%; border: 1px solid #f5f5f5;}
.clientele .item img {width: auto; position: absolute; inset: 0; margin: auto; max-width: 80%; max-height: 80%;}

/* three-blocks */
.three-blocks .item {position: relative;}
.three-blocks .item .caption {position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 2.5rem 0.5rem; border-radius: 1.25rem 1.25rem 0 0; background-color: rgb(var(--primary1)); text-align: center; font-size: 1.5rem; line-height: normal; min-height: 78px; display: flex; align-items: center; justify-content: center;}

.filler-visualizer {padding: calc(var(--padding) * 2) 0 var(--padding);}
.filler-visualizer span.bg {position: absolute; left: 50%; top: 0; width: 1920px; height: 403px; transform: translateX(-50%);}
.filler-visualizer span.bg:before {content: ''; width: 1159px; height: 403px; background: url('../images/product-vector-bg.svg') left top / cover no-repeat; position: absolute; left: -168px; top: 0; opacity: 0.2;}
.filler-visualizer:before {content: ''; position: absolute; left: 40%; top: 10%; bottom: 0; width: calc(100% - 40%); background-color: rgb(var(--primary1)); border-radius: 1.5rem 0 0; z-index: 1;}
.filler-visualizer .wall-pic {padding-top: 41.70%; border-radius: 0 1rem 0 0; background-color: var(--bgClr);}
.filler-visualizer .wall-pic img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 1rem 0 0;}
.filler-visualizer .colors {position: absolute; right: 0; bottom: 0; padding: 1rem; display: flex; background-color: rgb(var(--color_white)); margin: 0; box-shadow: 0 1px 15px rgba(var(--baseColor),0.15); z-index: 1;}
.filler-visualizer .colors li {width: 40px; height: 40px; border-radius: 50%; background-color: var(--bgClr); box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.filler-visualizer .colors li.active {box-shadow: 0 0 0 3px rgb(var(--primary1));}

/* contact-form */
/* .contact-form-wrapper:before {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: rgb(var(--primary2));} */
.contact-form {border-radius: 1.5rem 1.5rem 0 0;}
.contact-form:before {content: ''; width: 1580px; height: 549px; background: url('../images/contact-form-bg.svg') center top no-repeat; position: absolute; left: -127px; top: 1.5rem; opacity: 0.15;}
form .form-control, form .form-select {border-radius: 0; --bs-border-color: rgb(var(--color_white),0.5); font-size: 0.938rem; padding: .6rem .75rem;}
form .form-control::placeholder {opacity: 1;}
form .form-control:-ms-input-placeholder {color: rgb(var(--color_white),0.5);}
form .form-control::-ms-input-placeholder {color: rgb(var(--color_white),0.5);}
form textarea.form-control {resize: none; height: 120px;}
form .form-control:focus {box-shadow: none;}

.btm-btns a {background-color: #ACCC44; font-size: 0.938rem;}
.btm-btns a:hover {background-color: #ACCC4499; color: rgb(var(--color_white)) !important;}
.btm-btns a:nth-child(2) {background-color: #44A3CC;}
.btm-btns a:nth-child(2):hover {background-color: #44A3CC99;}
.btm-btns a:nth-child(3) {background-color: #CA819F;}
.btm-btns a:nth-child(3):hover {background-color: #CA819F99;}

.totop {bottom: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: fixed; right: -60px; z-index: 99; background-color: rgb(var(--primary1)); text-align: center; opacity: 0; border-radius: 50%; box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2);z-index: 1;}
.totop img{filter : var(--imgWhite); transform: rotate(90deg); width: 20px;}

/* inner pages */
.inner-banner {height: 382px; transition: all 0.3s; overflow: hidden; margin-top: -100px;}
.inner-banner:before {content: ''; width: 1920px; height: 100%; background: url('../images/inner-banner-bg.png') center top no-repeat; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.inner-banner .container {height: 100%; display: flex; align-items: flex-end;}
.inner-banner .page-header {background-color: rgb(var(--primary2),0.95); border-radius: 1.25rem 1.25rem 0 0; width: 100%; padding: 2.5rem 3rem; z-index: 1;}
.breadcrumb-item {--bs-breadcrumb-item-active-color: rgba(var(--primary1)); --bs-link-color-rgb: var(--color_white); --bs-link-hover-color-rgb: var(--primary1); --bs-breadcrumb-divider-color: rgba(var(--color_white));}

.pic {border-bottom-left-radius: 1.25rem;}
.ps-custom {padding: 0 3rem;}
.our-story .block {border-radius: 1rem;}
.our-story .block .icon {height: 130px;}

ul.style1 li {position: relative; padding-left: 1.75rem;}
ul.style1 li:before {content: ''; width: 14px; height: 14px; border-radius: 50%; border: 3px solid rgb(var(--primary2)); position: absolute; left: 0; top: 4px; z-index: 1;}
ul.style1 li:after {content: ''; width: 13px; height: 13px; border-radius: 50%; background: rgb(var(--primary1)); position: absolute; left: 5px; top: 5px;}
ul.style2 li {position: relative; padding-left: 1.75rem;}
ul.style2 li:before {content: ''; position: absolute; left: 0; top: 4px; background: url('../images/checked-icon.svg') left top no-repeat; width: 14px; height: 14px;}

.logos-inner {border-radius: 0 0 0 1.5rem;}
.logos-inner img:not(:nth-child(2)) {filter: invert(1);}
.right-block {border-radius: 1.5rem 0 0 0;}

.nav-tabs a.nav-link {border: none; border-bottom: 3px solid #E7E7E7; margin: 0 1.5rem; --bs-nav-link-padding-x: 2rem; --bs-nav-link-padding-y: 1rem; position: relative; padding-top: 0;}
.nav-tabs a.nav-link:before {content: ''; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid rgb(var(--primary1)); position: absolute; left: 0; right: 0; bottom: -14px; width: 14px; margin: 0 auto; opacity: 0;}
.nav-tabs a.nav-link.active {border-bottom-color: rgb(var(--primary1));}
.nav-tabs a.nav-link.active:before {opacity: 1;}
.nav-tabs a.nav-link .icon {height: 100px; display: flex; align-items: center; justify-content: center;}

.products-page .tab-content {padding: 50px 0;}
.products-page .product-image {width: 100%; padding-top: 120%; border-radius: 1rem; margin-top: -138px;}
.products-page .product-image img {position: absolute; inset: 0; max-height: 65%;}

.accordion .accordion-item{margin-bottom: 30px; border-radius: 0; border: 1px solid rgb(var(--primary1));}
.accordion .accordion-item .accordion-header{border: none;}
.accordion .accordion-item .accordion-header .accordion-button{color: rgb(var(--primary2)); font-size: clamp(1.25rem, 0.825rem + 0.875vw, 1.875rem);}
.accordion .accordion-item .accordion-button{border-radius: 0; background-color: transparent; border: none; padding: 25px 20px 25px 50px;}
.accordion .accordion-item .accordion-button:focus{box-shadow: none !important;}
.accordion .accordion-item .accordion-button:not(.collapsed){box-shadow: none !important;}
.accordion .accordion-item .accordion-body{padding: 0 50px 25px;}
.accordion-button::after{background-image: url('../images/plus-icon.svg');width: 32px; height: 32px; background-size: cover; transform: none;}
.accordion-button:not(.collapsed)::after{background-image: none; background-image: url('../images/minus-icon.svg');}

/* catalogue */
.card.catalogue-card .img-wrapper {position: relative; background-image: linear-gradient(89deg, #b2b7bb, #ccd1d5); width: 100%; padding-top: 111.6%; border-radius: 1rem; overflow: hidden;}
.card.catalogue-card .img-wrapper img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

/* clientele */
.card.clientele-card .img-wrapper {position: relative; width: 100%; padding-top: 90%; border-radius: 1rem; overflow: hidden; border: 1px solid #C5C5C5; display: flex; align-items: center; justify-content: center;}
.card.clientele-card .img-wrapper img {max-width: 70%; max-height: 60%; position: absolute; inset: 0; margin: auto;}

.contact p.has-icon {position: relative; padding-left: 2.5rem;}
.contact p {font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem); opacity: 0.75;}
.contact p img {filter: var(--imgPrimary2); position: absolute; left: 0; top: 5px;}
.contact p a {text-decoration: none; color: var(--baseColor);}

.support-block {border-radius: 1.5rem 1.5rem 0 0;}

.map {margin-bottom: calc(var(--padding) * -1);}
.map iframe {border-radius: 1rem; overflow: hidden;}

.career-page .pic {border-radius: 1rem 0 0 1rem; overflow: hidden;}
.career-page .pic img {width: 100%; height: 100%; object-fit: cover;}
.career-form .form-control {background-color: rgba(var(--color_gray));}

.blog-card img {border-radius: 1rem 1rem 0 0;}
.blog-card.gallery .img-wrapper:after {content: ''; background: url('../images/zoom-icon.png') center center no-repeat rgba(0,0,0,0.65); visibility: hidden; opacity: 0; transition: 0.4s; position: absolute; inset: 0;}
.blog-card.gallery:hover .img-wrapper:after {visibility: visible; opacity: 1;}

.director-message .ps-custom {padding-right: 0; margin-bottom: var(--padding);}
.director-message .ps-custom:last-child {margin-bottom: 0;}
.director-message .message-item {border: 1px solid rgba(var(--baseColor),0.1); border-radius: 1rem;}
.director-message .ps-custom:nth-child(2) {padding-left: 0; padding-right: 2.5rem;}
.director-message .pic {margin: -2.5rem 0 0 -2.5rem; padding-bottom: 1rem; max-width: 280px;}
.director-message .pic .ratio {border-radius: 1rem 1rem 0 1rem; overflow: hidden; border: 1px solid rgb(var(--primary1));}
.director-message .title {margin-left: 5rem;}
.director-message .ps-custom:nth-child(2) .pic {margin: -2.5rem -2.5rem 0 2.5rem;}
.director-message .ps-custom:nth-child(2) .title {margin-left: 0rem;}

/* .btn {position: relative; overflow: hidden; z-index: 1;}
.btn--animated {transition-property: color; transition-duration: .5s; border: .063rem solid rgb(var(--primary2)); background: rgb(var(--primary2)); color: #fff;}
.btn--animated::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scaleX(0); transform-origin: 0 50%; transition-property: transform; transition-duration: .5s; transition-timing-function: ease-out; z-index: -1; background-color: #fff;}
.btn--animated:hover::before {transform: scaleX(1); transition-timing-function: cubic-bezier(.45,1.64,.47,.66);}
.btn--animated:hover {color: rgb(var(--primary2));}
.btn:hover {--bs-btn-hover-bg: rgb(var(--primary2));} */

.certi-thumb {--bs-border-radius: 1rem; --bs-border-color: rgba(var(--primary1)); position: relative; padding-top: 130%;}
.wide .certi-thumb {padding-top: 78%;}
.certi-thumb img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.why-us .slider .item {--bs-border-radius: 1rem; overflow: hidden;}

/* tile-joint-filler-visualizer details */
.left-column {/*background: rgb(var(--primary1));*/background: #2A2828; border-radius: 0px; /*padding: 15px 30px; position: absolute; left: 0; top: 0;*/}
.left-column .joint-wrap{background-color: rgb(var(--color_white)); border-radius: 0px; padding: 1rem;}
.left-column .joint-wrap h3{color: #494949; font-weight: 400; margin: 0 0 0.5rem;}
.joint-wrap .colors {display: flex; flex-wrap: wrap; gap: 9px;}
.joint-wrap .colors li {width: 24px; height: 24px; border-radius: 50%; background-color: var(--bgClr); cursor: pointer; border: 1px solid rgb(var(--baseColor),0.1);}
.joint-wrap .colors li.active {box-shadow: 0 0 0 4px #EDE9E9;}

.room-filter-category-wrapper {width: 100%; position: relative; --bs-border-color: rgba(var(--color_white),0.5);}
.room-wrapper.room-wall-surface .tile-block {
    width: 1100px;
     height: 54%; 
     
     bottom: auto; transform: rotateX(0deg) translateX(0px) translateY(0) scaleX(1);}
.room-wrapper.wall-surface-view .room-view {perspective: none;} 

.room-wrapper {position: relative; overflow: hidden; width: 100%; perspective: 420px; height: 800px;}


.room-view {z-index: 1; width: 800px; height: 750px; max-width: 100%; overflow: hidden; position: relative; perspective: 420px;}
img.room-pic {position: absolute; inset: 0; width: 100%; height: 560px; object-fit: cover;z-index: 1;}

.tile-wrap {padding: 0; margin: 0;list-style: none; display: flex; -webkit-flex-flow: row; justify-content: space-around; position: relative;}
.tile {margin: 0.5px; flex: 1 0 auto; height: auto; position: relative; background-color: rgb(var(--color_white)); background-size: cover; background-position: center;}
.tile:before { content:''; float:left; padding-top:100%;}
.tile img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;}
.tile-block {position: absolute; left: 0; right: 0; /*width: 805px;*/ width: 100%; height: 590px; bottom: -35px; margin: 0 auto; overflow: hidden; background-color: rgb(var(--bg01)); transform: rotateX(257deg) translateX(0px) translateY(26px) scaleX(1.72)/*scaleX(1.5)*/;z-index: 1;}
.tile-block:before {top: 0; left: 0; width: 100%; content: ''; height: 100%; opacity: 0.6; position: absolute; background-size: contain; background-position: center; background-repeat: repeat;}
.upload-image-selection-wrapper{border: 1px dashed rgb(var(--baseColor)); border-radius: 20px; padding: 15px; margin-top: 20px;}
.upload-image-selection-wrapper h3{margin-top: 0; margin-bottom: 0;}
.upload-image-selection-wrapper .input-group {position: relative;}
.upload-image-selection-wrapper .input-group .form-control {background-color: transparent; border: none; padding: 0; color: rgb(var(--baseColor));}
.upload-image-selection-wrapper .input-group .form-control.images{width: 65%; text-wrap: nowrap;}
.upload-image-selection-wrapper .input-group .input-group-text{background-color: transparent; border: none; padding: 10px 0; height: auto; background-image: url('../images/upload-text02.png'); background-repeat: no-repeat; width: 100%; padding: 16px 0 0; cursor: pointer; background-position: right 8px;}
.upload-image-selection-wrapper .custom-file-button input[type=file]:focus{box-shadow: none;}
.upload-image-selection-wrapper .custom-file-button input[type=file]::-webkit-file-upload-button {display: none;}
.upload-image-selection-wrapper .custom-file-button input[type=file]::file-selector-button {display: none;}

.rectangle .tile-block {height: 611px; bottom: -75px; transform: rotateX(257deg) translateX(0px) translateY(100px) scaleX(1.935);}
.rectangle .tile-block .tile {width: 180px !important; height: 58px !important;}

#upload-image{display: flex; justify-content: center; align-items: center; flex-direction: column;}
#upload-image::before{content: ""; width: 100%; height: 100%; position: absolute;  margin: auto;  background: rgba(0,0,0,0.5); z-index: -1;}

.color-name-wrap{margin-bottom: 0; font-size: 16px; position: absolute; right: 15px; top: 15px; z-index: 2;}
.color-name-wrap span{display: flex; margin-left: auto; padding: 5px 12px; border: 1px solid #ddd; border-radius: 5px; background-color:rgb(var(--color_white));}

/* .room-wrapper .wall-pic {position: absolute; inset: 0;} */

.joint-filler-visualizer + .contact-form-wrapper, .page-id-236 .contact-form-wrapper {padding-top: var(--padding); display: none;}
.joint-filler-visualizer + .contact-form-wrapper:before, .page-id-236 .contact-form-wrapper:before {content: ''; background-color: rgb(var(--primary2)); position: absolute; left: 0; top: 0; width: 100%; height: 70%;}
.joint-filler-visualizer + .contact-form-wrapper + .footer, .page-id-236 .footer {margin: 0; padding-top: var(--padding);}

.products-page .nav-tabs a.nav-link {width: calc(20% - 3rem);}


.texture-Block  .tile {margin: 0px; 
  /* background-size: 35px;  */
}
.joint-wrap.texture-joint-wrap .colors li { width: 70px; height: 70px; background-size: contain;}

.joint-wrap .colors.txtreClrs li{width: 50px; height: 50px; background-size: contain;}
.joint-wrap .colors.snkClr li{width: 50px; height: 50px; background-size: contain;}

/* @media (max-width: 1400px){
    .room-wrapper.rmWrap{perspective: 370px;height: 680px;}
}

@media (max-width: 1199px){
    .room-wrapper.rmWrap {height: 685px;}
    
}

@media (max-width: 1140px){
    .room-wrapper.rmWrap {height: 672px;}
}

@media (max-width: 1100px){
    .room-wrapper.rmWrap {height: 655px;}
}

@media (min-width: 992px) and (max-width: 1024px){
    .room-wrapper.rmWrap {height: 540px !important;}
}

@media (max-width: 991px){
    .room-wrapper.rmWrap {height: 600px !important;}
}
@media (max-width: 910px){
    .room-wrapper.rmWrap {height: 575px !important;}
} */

@media (max-width: 767px){
    .joint-wrap .colors.txtreClrs li{width: 45px; height: 45px; background-size: contain;}
    .joint-wrap .colors.snkClr li{width: 45px; height: 45px; background-size: contain;} 
}