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

:root{
    --primary1: 253,185,46; /* #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));}

body {font-family: var(--baseFont); font-weight: 400;}
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;}
.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;}

/* header */
header {max-width: 1920px; margin: 0 auto; left: 0; right: 0; top: 0; transition: all 0.4s; z-index: 22;}
header .navbar .navbar-nav .nav-link {position: relative; font-size: 0.938rem; color: rgb(var(--color_black)); font-weight: 500; padding: 0.75rem; text-transform: uppercase;}
header .navbar .navbar-nav .nav-link:hover, header .navbar .navbar-nav .active .nav-link {color: rgb(var(--primary1));}
header .navbar-collapse {justify-content: flex-end;}

header .navbar .navbar-nav .menu-item-has-children>.nav-link::after {display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent;}

header .dropdown:hover > .dropdown-menu {display: block; background: rgb(var(--primary1)); border-radius: 0 1.25rem 1.25rem 1.25rem;}
header .dropdown-menu {width: 200px;}
header .dropdown-menu li .nav-link {color: rgb(var(--baseColor)) !important; white-space: normal; line-height: normal; padding: 7px 20px !important; font-weight: 400 !important; text-transform: none !important;}
header .dropdown-menu li .nav-link:focus, header .dropdown-menu li .nav-link:hover {color: rgb(var(--color_black)) !important; background-color: transparent;}

header.fixed {box-shadow: 0px 4px 6px 0px rgba(10, 50, 23, 0.1); background-color: rgb(var(--color_white));}
header.fixed .navbar {padding: 0.75rem 0 !important; transition: 0.4s;}
header.fixed .navbar .navbar-nav .nav-link {color: rgba(var(--baseColor));}
header.fixed .navbar-brand .transparent {display: none;}
header.fixed .navbar-brand .black {display: block;}

/* wordpress menu */
/* header .navbar .navbar-nav a {position: relative; font-size: 0.938rem; color: rgb(var(--color_black)); font-weight: 500; padding: 0.75rem; text-transform: uppercase;}
    header .navbar .navbar-nav a:hover, header .navbar .navbar-nav .current-menu-parent a {color: rgb(var(--primary1)) !important;}*/
header .navbar .sub-menu-toggle {display: none;} 

.social-icons a {width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; --bs-border-color: #9C9C9C; }
.social-icons a:not(.whatsapp) img {filter: invert(58%) sepia(17%) saturate(0%) hue-rotate(169deg) brightness(102%) contrast(105%);}
.social-icons a:not(.whatsapp):hover {--bs-border-color: rgb(var(--primary1));}
.social-icons a:not(.whatsapp):hover img {filter: var(--imgPrimary1);}

/* banner */
.banner {max-height: 990px; height: 990px; transition: all 0.3s; position: relative; overflow: hidden; background: url('../images/banner-bg.png') center 30px no-repeat;padding-top: 150px;}
.banner .item:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 442px; background-color: rgba(var(--primary2),0.95); border-radius: 1.25rem;}
.banner .slider, .banner .slider .item {height: 442px;}
.banner .slider {margin-top: -104px;}
.banner .slider .owl-item {padding-top: 104px;}
.banner .slider .owl-item img {width: auto;}
.banner .slider .item .element {position: absolute; left: 0; bottom: 0;}
.banner .slider .item .product-img {position: absolute; right: 6%; bottom: 1rem; width: 620px;}
.banner .slider .item h2 {position: absolute; right: 7%; top: 1rem; width: 620px; font-size: 1.875rem; font-weight: 500; color: rgb(var(--primary1));}
.banner .owl-item.active .element {animation-duration: 500ms; animation-fill-mode: both; animation-name: fadeIn; animation-delay: 0.3s;}
.banner .owl-item.active h2 {animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.7s;}
.banner .owl-item.active .product-img {animation-duration: 1s; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.7s;}
.banner .style1 .owl-dots {width: 30px; position: absolute; right: 1rem; bottom: 0; z-index: 9; display: block;}
.banner .style1 .owl-dots button.owl-dot {width: 30px; margin: 0; padding: 7px 0 !important;}
.banner .style1 .owl-dots button.owl-dot span {width: 17px; height: 2px; display: block; background-color: rgb(var(--primary1)); transition: 0.4s; border: none; border-radius: 0; margin: 0; margin-left: auto;}
.banner .style1 .owl-dots button.owl-dot.active span {width: 30px; background-color: rgb(var(--color_white));}

/* 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);}

/* strength */
.strength {margin-top: -250px;}
.strength .blocks-wrapper {margin-top: 75px;}
.strength .blocks-wrapper .block:nth-child(2) {margin-top: -150px;}
.strength .blocks-wrapper .block:nth-child(4) {margin-top: -75px;}
.strength .block {width: 216px; height: 222px; display: flex; align-items: center; justify-content: center; background: #FFF; box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.10); margin: 1.15rem; padding: 1rem; text-align: center;}
.strength .block .icon {height: 130px; display: flex; align-items: center; justify-content: center;}
.strength .block a.more-btn {width: 91px; height: 26px; position: absolute; right: 0; bottom: 0; font-size: 0.8125rem; padding-left: 1.5rem; text-decoration: none; display: flex; align-items: center; justify-content: center; color: rgb(var(--primary2)); line-height: normal;}
.strength .block a.more-btn:before {content : ''; background: url('../images/more-vector.svg') left top no-repeat; width: 100%; height: 100%; position: absolute; right: 0; filter: var(--imgPrimary1);}
.strength .block a.more-btn span {position: relative; z-index: 1;}
.strength .block a.more-btn:hover:before {filter: var(--imgPrimary2);}
.strength .block a.more-btn:hover span {color: rgb(var(--color_white));}
.strength .hover-images li {position: absolute; top: 0; left: calc(var(--bs-gutter-x) * .5); right: 0; bottom: 0;}
.strength .hover-images ul li {opacity: 0; visibility: hidden; transition: 0.3s}
.strength .hover-images ul li img {border-radius: 1.5rem;}
.strength .hover-images ul li.active {opacity: 1; visibility: visible;}

/* about */
.about {--mb: 77px;}
.about {background: url('../images/about-us-bg.jpg') left top no-repeat; padding-bottom: var(--mb);}
.about p {color: #515151;}
.about a {color: #515151; transition: 0.4s;}
.about a svg path {fill: rgb(var(--primary1));}
.about a:hover {color: rgb(var(--primary1));}
.about a:hover svg {transform: translateX(5px);}
.about .right-block {margin-top: var(--mb); border-radius: 0 0 0 1.5rem; position: relative; padding-top: calc(var(--mb) / 1.5);}
.about .right-block:after {content: ''; position: absolute; right: -100%; top: 0; bottom: 0; width: 100%; background-color: rgb(var(--primary2));}
.about .right-block .icon {width: 80px; height: 80px;}
.about .right-block .icon svg {filter: var(--imgPrimary1);}

/* 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;}

/* footer */
.footer {background-color: rgb(var(--primary2)); --bs-border-color: rgba(var(--primary1),0.5); padding-top: calc(var(--padding) * 3.5); margin-top: calc(var(--padding) * -2.75);}
.footer:before {content: ''; background: url('../images/footer-bg-vector.svg') left top no-repeat; width: 1952px; height: 679px; position: absolute; left: 50%; top: 150px; transform: translateX(-50%); margin-left: 76px;}
.footer p, .footer ul {font-size: 0.938rem;}
.footer address p.has-icon {position: relative; padding-left: 2rem;}
.footer address p.has-icon:before {content: ''; position: absolute; left: 0; top: 0; display: block; filter: var(--imgPrimary1);}
.footer address p.phone:before {background: url('../images/call-icon.svg') left top no-repeat; width: 24px; height: 24px;}
.footer address p.email:before {background: url('../images/mail-icon.svg') left top no-repeat; width: 24px; height: 24px;}
.footer a:hover {color: rgb(var(--primary1)) !important;}

.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;}

.footer .social-icons a {--bs-border-color: rgb(var(--color_white));}
.footer .social-icons a:not(.whatsapp) img {filter: var(--imgWhite)}
.footer .social-icons a:not(.whatsapp):hover {--bs-border-color: rgb(var(--primary2));}
.footer .social-icons a:not(.whatsapp):hover img {filter: var(--imgPrimary1)}

.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);}
.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)); /*padding: 15px 30px; position: absolute; left: 0; top: 0;*/}
.left-column .joint-wrap{background-color: rgb(var(--color_white)); border-radius: 20px; 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: 100%; object-fit: cover;}

.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; height: 590px; bottom: -35px; margin: 0 auto; overflow: hidden; background-color: rgb(var(--bg01)); transform: rotateX(257deg) translateX(0px) translateY(26px) scaleX(1.5);}
.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: -92px; transform: rotateX(257deg) translateX(0px) translateY(100px) scaleX(1.35);}
.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);}