@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body{
	color:#000;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-Thin.ttf);
  font-weight: 100;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-SemiBold.ttf);
  font-weight: 600;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-Medium.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-Light.ttf);
  font-weight: 300;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-ExtraLight.ttf);
  font-weight: 200;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-ExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-Bold.ttf);
  font-weight: 700;
}
@font-face {
  font-family: "Raleway";
  src: url(../fonts/static/Raleway-Black.ttf);
  font-weight: 900;
}
html {
  scroll-behavior: smooth;
}

:root {
  --primaryColor: #121212;
  --darkBg: #000;
  --whiteColor: #FFFFFF;
  --textDark: #121212;
  --bodyFont: "Roboto", sans-serif;
  --titleFont: "Roboto", sans-serif;
  --lightColor: #949494;
}

p, h1, h2, h3, h4, h5, h6, figure, figcaption, img, ul, li, a, blockquote, summary, article {
  margin: 0;
  padding: 0;
}


body {
  font-family: var(--bodyFont);
	font-weight:300;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--titleFont);
  font-weight: 300;
}

img {
  max-width: 100%;
}

a, a:hover, a:focus {
  text-decoration: none;
}

a:hover {
  color: var(--lightColor);
}

input:focus, select:focus {
  outline: unset;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gap-20 {
  gap: 20px;
}

.siteLink, .siteBtn {
  display: inline-block;
}
.siteLink *, .siteBtn * {
  transition: 0.3s ease-in-out transform;
}
.siteLink:hover svg, .siteBtn:hover svg {
  transform: scaleX(1.3);
  margin-left: 5px;
}

.productBtn {
  padding: 15px 2.5px;
  border-bottom: 1px #000000 solid;
  text-transform: capitalize;
  color: #000;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-self: center;
}

.siteBtn {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-width: 144px;
}

.smalltitle {
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 0;
  text-transform: capitalize;
  margin-bottom: 56px;
}

.siteTitle {
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  text-transform: capitalize;
  margin-bottom: 36px;
}

header.siteHeader {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  z-index: 9;
  padding-top: 28px;
  padding-bottom: 28px;
}
@media (max-width: 768px) {
	header.siteHeader{
		top:unset;
	}}
header.siteHeader .row {
  align-items: center;
}
header.siteHeader .menuHamContainer {
  color: var(--whiteColor);
  cursor: pointer;
  display: flex;
  gap: 12px;
  font-weight: 400;
  align-items: center;
  text-transform: capitalize;
  font-size: 16px;
}
header.siteHeader .menuHamContainer svg {
  fill: var(--whiteColor);
}
header.siteHeader .logoContainer a svg {
  max-width: 100%;
  height: -moz-max-content;
  height: max-content;
}
header.siteHeader .rightLogin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 50px;
}
header.siteHeader .rightLogin li a {
  display: flex;
  gap: 8px;
  color: #fff;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 16px;
  align-items: center;
}
header.siteHeader.noFixed {
  position: unset;
}
header.siteHeader.noFixed .menuHamContainer {
  color: #000;
}
header.siteHeader.noFixed .menuHamContainer svg path {
  stroke: #000;
}
header.siteHeader.noFixed .searchBtn {
  color: #000;
}
header.siteHeader.noFixed .searchBtn svg path {
  stroke: #000;
}
header.siteHeader.noFixed .rightLogin li a {
  color: #000;
}
header.siteHeader.noFixed .rightLogin li a svg path {
  stroke: #000;
}
header.siteHeader.noFixed .logoContainer a svg path {
  fill: #000;
}

.bannerverticalSlider,.wrapper {
  height: 100vh;
}
.bannerverticalSlider img, .wrapper img {
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.bannerverticalSlider .swiper-pagination-bullet {
  height: 8px;
  width: 8px;
  background-color: #fff;
  opacity: 1;
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}
.bannerverticalSlider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  outline: 1px #fff solid;
  outline-offset: 2px;
}
.bannerverticalSlider .swiper-pagination-vertical.swiper-pagination-bullets, .bannerverticalSlider .swiper-vertical > .swiper-pagination-bullets {
  left: 42px;
}
.bannerverticalSlider .swiper-slide *,.wrapper *  {
  transition: 0.5s ease-in-out !important;
}
.bannerverticalSlider .swiper-slide .bannerSubtile, .bannerverticalSlider .swiper-slide h2, .bannerverticalSlider .swiper-slide a,.bannerverticalSlider .swiper-slide .bannerSubtitle,.wrapper .bannerSubtile,.wrapper a,.wrapper h2 {
  transform: translateY(50px);
  opacity: 0;
  transition: 0.5s ease-in-out !important;
  display: block;
}
.bannerverticalSlider .swiper-slide h2,.wrapper h2 {
  transition-delay: 0.3s !important;
}
.bannerverticalSlider .swiper-slide a,.wrapper a {
  transition-delay: 0.5s !important;
}
.bannerverticalSlider .swiper-slide.swiper-slide-active .bannerSubtitle,.wrapper .bannerSubtitle{
	  transition-delay: 0.4s !important;

}
.bannerverticalSlider .swiper-slide.swiper-slide-active .bannerSubtile, .bannerverticalSlider .swiper-slide.swiper-slide-active h2, .bannerverticalSlider .swiper-slide.swiper-slide-active a,.bannerverticalSlider .swiper-slide.swiper-slide-active .bannerSubtitle,.wrapper.active .bannerSubtile,.wrapper.active a,.wrapper.active h2 {
  transform: translateY(0);
  opacity: 1;
}

.bannerInnerSlider {
  position: relative;
}
.bannerInnerSlider::after {
background:
  linear-gradient(to right,  rgba(0,0,0,var(--overlay-opacity, 0.35)) 0%, rgba(0,0,0,0) 50%),
  linear-gradient(to left,   rgba(0,0,0,var(--overlay-opacity, 0.35)) 0%, rgba(0,0,0,0) 50%),
  linear-gradient(to bottom, rgba(0,0,0,var(--overlay-opacity, 0.35)) 0%, rgba(0,0,0,0) 50%),
  radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,var(--overlay-opacity, 0.35)) 100%);
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: block;
  position: absolute;
}
.bannerInnerSlider .bannerContent {
  position: absolute;
  left: 0;
  top: 40%;
  z-index: 9;
  text-align: center;
  width: 100%;
}
.bannerInnerSlider .bannerContent * {
  color: var(--whiteColor);
  font-weight: 400;
}
.bannerInnerSlider .bannerContent h1{
	margin-top: 16px;
    font-size: 48px;
    line-height: 58px;
    font-weight: 300;
}
.bannerInnerSlider .bannerContent h2 {
  margin-bottom: 20px;
  margin-top: 16px;
  font-size: 64px;
  line-height: 58px;
  font-weight: 300;
  letter-spacing: 0;
}
.bannerInnerSlider .bannerContent .bannerSubtile {
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 7px;
}
.bannerInnerSlider .bannerContent a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.bannerSec {
  margin-bottom: 20px;
}
 .homeCrollIcon {
  display: none !important;
  z-index: 999;
  /* left: 50%; */
  position: relative;
  width: -moz-max-content;
  width: max-content;
  height: 120px;
  width: 2px;
  background-color: #7d7d7d;
  border-radius: 0;
  border-radius: 2px;
  overflow: hidden;
  margin-top: -68px;
  display: flex;
  animation: c;
  justify-content: center;
  margin: 0 auto;
  top: 20px;
  margin-top: -120px;
}
.homeCrollIcon .scrollEle {
  background-color: #fff;
  animation: scrollNow 3s infinite;
  /* or more explicitly: */
  animation-name: scrollNow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* or whatever timing you prefer */
  display: block;
  height: 60px;
	width:10px;
}
.rrmc-homepage-scroll-icon {
    bottom: 0;
    display: block;
    height: 80px;
    left: calc(50% - 4px);
    opacity: 1;
    pointer-events: none;
    position: fixed;
    transition: opacity 1s;
    width: 4px;
    z-index: 100;
}
.navigatorSec {
  position: absolute;
  left: 43px;
  bottom: 75px;
  z-index: 9;
}
.navigatorSec ul {
  display: flex;
  flex-direction: column;
}
.navigatorSec ul li a span {
  height: 8px;
  width: 8px;
  background-color: #fff;
  opacity: 1;
  margin-bottom: 7.5px !important;
  margin-top: 7.5px !important;
  display: block;
  border-radius: 50%;
  opacity: 0.5;
}
.navigatorSec ul li a:hover span {
  outline: 1px #fff solid;
  outline-offset: 2px;
  opacity: 1;
}
.navigatorSec ul li a.active span {
  outline: 1px #fff solid;
  outline-offset: 2px;
  opacity: 1;
}

.menuBox {
  position: fixed;
  top: -100%;
  left: 0;
  height: 100vh;
  background-color: #fff;
  z-index: 9;
  width: 100%;
  overflow-y: auto;
  padding: 50px 40px;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.menuBox.openMenu {
  top: 0;
  opacity: 1;
}
.menuBox ul#menu-primary-menu > li {
  position: relative;
}
.menuBox ul#menu-primary-menu > li a {
  font-weight: 400;
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 3px;
  text-transform: capitalize;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 60px;
  display: block;
}
.menuBox ul#menu-primary-menu > li a:hover {
  color: rgb(0, 0, 0);
  font-weight: 600;
}
.menuBox ul#menu-primary-menu > li ul.sub-menu {
  position: absolute;
  left: 500px;
  top: 0;
  display: none;
}
.menuBox ul#menu-primary-menu > li.open .sub-menu {
  display: block;
}

.searchBox {
  position: fixed;
  z-index: 999999;
  background-color: #fff;
  width: 100%;
  left: 0;
  padding-top: 80px;
  padding-bottom: 80px;
  opacity: 0;
  bottom: -100%;
  height: 100vh;
  transition: 0.3s ease-in-out;
}
.searchBox .searchInnerContainer label {
  font-size: 12px;
}
.searchBox .searchInnerContainer .searchWrap {
  position: relative;
}
.searchBox .searchInnerContainer .searchWrap::before {
  content: "";
  height: 33px;
  width: 2px;
  background-color: #000;
  display: block;
  position: absolute;
  left: 0;
  top: 13px;
}
.searchBox .searchInnerContainer .searchWrap input {
  width: 100%;
  height: 60px;
  color: #B3B3B3;
  padding-left: 10px;
  border: 0;
  font-size: 22px;
  font-weight: 400;
  border-bottom: 1px #B3B3B3 solid;
}
.searchBox .searchInnerContainer .searchWrap button {
  background-color: transparent;
  border: 0;
  position: absolute;
  right: 0;
  top: 11px;
}
.searchBox .recommendedtags {
  margin-top: 40px;
}
.searchBox .recommendedtags p.suggestionSearch {
  margin-bottom: 12px;
  font-size: 12px;
}
.searchBox .recommendedtags ul {
  padding-top: 12px;
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}
.searchBox .recommendedtags ul li a {
  padding: 10px 24px;
  border: 1px #E6E6E6 solid;
  display: block;
  color: #000;
  line-height: 28px;
  font-size: 14px;
}
.searchBox .recommendedProd {
  padding-top: 18px;
}
.searchBox .recommendedProd p.suggestionSearch {
  margin-bottom: 12px;
  font-size: 18px;
}
.searchBox .recommendedProd .prodInn {
  margin-bottom: 15px;
  margin-top: 15px;
}
.searchBox .recommendedProd h4 {
  font-size: 16px;
  line-height: 200%;
  color: #000;
  font-weight: 400;
  margin-top: 16px;
}
.searchBox .crossBtnSearch {
  position: absolute;
  top: -20px;
  right: 0;
  cursor: pointer;
}
.searchBox.openSearch {
  bottom: 0;
  opacity: 1;
}

.smallBanner img {
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.smallBanner p.bannerSubtitle,.bannerSubtitle {
  text-transform: none;
  line-height: 28px;
  font-size: 20px;
  font-weight: 500 !important;
  margin-bottom: 25px;
}
.smallBanner .bannerInnerSlider {
  margin-bottom: 20px;
}
.smallBanner .bannerInnerSlider .bannerContent .banner-title {
  font-size: 52px;
  line-height: 64px;
}

.whyUsSecBox {
  padding-top: 115px;
  padding-bottom: 115px;
}
.whyUsSecBox p,.whyUsSecBox .content-item span {
  font-weight: 300 !important;
  font-size: 18px;
  line-height: 230%;
  max-width: 760px;
  margin: 0 auto;
}

.whyUsSecInner .text-line {
  font-weight: 400;
  font-size: 39px;
  line-height: 64px;
  letter-spacing: 0px;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 30px;
}
/* .whyUsSecInner .text-span {
  transition: color 0.4s ease !important;
  will-change: color; /* Optimizes for GPU acceleration */
} */

.threeColBan img {
  height: 500px;
}
.threeColBan .bannerInnerSlider .bannerContent {
  bottom: 52px;
  top: unset;
}
.threeColBan .bannerInnerSlider .bannerContent h2.banner-title {
  font-size: 28px;
  line-height: 120%;
  margin-bottom: 20px;
}

.hidefirst {
  display: none;
}

.newsletterSubs {
  padding-top: 55px;
  padding-bottom: 55px;
  background-color: var(--darkBg);
  margin-top: 42px;
}
.newsletterSubs h4 {
  color: #A8A8A8;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 7px;
  text-transform: capitalize;
  margin-bottom: 14px;
  font-weight: 300;
}
.newsletterSubs h3 {
  font-weight: 300;
  font-size: 28px;
  color: #fff;
}
.newsletterSubs .newsletterBox form {
  display: flex;
  gap: 20px;
}
.newsletterSubs .newsletterBox .tnp-field-email {
  flex: 0 0 70%;
}
.newsletterSubs .newsletterBox .tnp-field-button button, .newsletterSubs .newsletterBox .tnp-field-button input {
  border: 2px #fff solid;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 20%;
  text-align: center;
  text-transform: capitalize;
  padding: 18px 10px;
  background-color: transparent;
  color: #fff;
}
.newsletterSubs .newsletterBox .tnp-email {
  height: 48px;
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 14px;
  line-height: 200%;
  background-color: transparent;
  border: 0;
  border-bottom: 1px #CFCFCF solid;
  width: 100%;
  color: #fff;
}

.siteFooter {
  padding-top: 100px;
  position: relative;
}
.siteFooter h4 {
  font-weight: 300;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 6px;
  text-transform: capitalize;
  margin-bottom: 40px;
  color: #A8A8A8;
}
.siteFooter .salesOfficesBox a {
  font-weight: 300;
  font-size: 24px;
  line-height: 120%;
  color: #000000;
  display: block;
  margin-bottom: 20px;
}
.siteFooter .salesOfficesBox a:hover {
  color: #A1A1A1;
}
.siteFooter .navigationsBox {
  max-width: 414px;
  margin: 0 auto;
}
.siteFooter .navigationsBox ul {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.siteFooter .navigationsBox ul li {
  flex: 0 0 calc(50% - 20px);
  max-width: calc(50% - 20px);
}
.siteFooter .navigationsBox ul li a {
  font-weight: 300;
  color: #000;
  font-size: 16px;
  line-height: 200%;
}
.siteFooter .navigationsBox ul li a:hover {
  color: #A1A1A1;
}
.siteFooter .colletionFooter p {
  font-weight: 300;
  font-size: 16px;
  line-height: 200%;
  margin-bottom: 20px;
}
.siteFooter .colletionFooter a {
  font-weight: 300;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: capitalize;
  color: #000;
}
.siteFooter .colletionFooter a:hover {
  color: #A8A8A8;
}
.siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited {
  color: #C9C9C9;
  fill: #C9C9C9;
}
.siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg:hover, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active:hover, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover:hover, .siteFooter .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited:hover {
  color: #000;
  fill: #000;
}
.siteFooter .wp-social-link {
  background-color: transparent !important;
}
.siteFooter .wp-social-link svg {
  height: 20px;
  width: 20px;
}
.siteFooter #menu-privacy-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}
.siteFooter #menu-privacy-menu li a {
  color: #444444;
  font-weight: 300;
  font-size: 12px;
  line-height: 200%;
}
.siteFooter .copyrightFooter {
  margin-top: 80px;
  margin-bottom: 30px;
}
.siteFooter .waterMarkSvg {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
}
.siteFooter .waterMarkSvg svg {
  width: 100%;
}

.prodSec {
  padding-top: 80px;
  padding-bottom: 80px;
}

.breadCrumbandTitle h1 {
  font-weight: 300;
  font-size: 32px;
  line-height: 150%;
  letter-spacing: 0;
  text-transform: capitalize;
  margin-bottom: 16px;
}

.pageCOntnent {
  max-width: 600px;
  margin-bottom: 80px;
}
.pageCOntnent h1 {
  font-weight: 300;
  font-size: 48px;
  line-height: 56px;
  text-transform: capitalize;
  margin-bottom: 16px;
}
.pageCOntnent p {
  color: #000;
	line-height:229%;
}

.sliderProdCat.swiper {
  overflow: visible;
}
.sliderProdCat .swiper-pagination-progressbar {
  background-color: #E6E6E6;
  margin-top: 60px;
  height: 2px;
  position: unset;
}
.sliderProdCat .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #000;
}

.produCatContainer {
    position: relative;
    overflow: hidden;

    a {
        position: relative;
        display: block;
        overflow: hidden;

        img {
            display: block;
            width: 100%;
            height: 500px;        // ← explicit height so children can use height: 100%
            object-fit: cover;
            vertical-align: middle;
        }

        .dispCatCOntent {
            position: absolute;
            bottom: 0;
            padding: 35px 30px;
            width: 100%;
            z-index: 9;

            h2 {
                font-weight: 500;
                font-size: 20px;
                line-height: 120%;
                letter-spacing: 2px;
                text-transform: capitalize;
                color: #fff;
            }
        }

        .slideOverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.35s ease;
            z-index: 10;

            .viewMoreBtn {
                display: inline-block;
                padding: 10px 28px;
                border-radius: 999px;
                background: transparent;
                color: #fff;
                border: 2px solid #fff;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.05em;
                pointer-events: none;
            }
        }

        &:hover .slideOverlay {
            opacity: 1;
        }
    }
}
.produCatContainer a:hover {
    color: inherit;
}

/* .produCatContainer {
  position: relative;
}
.produCatContainer img {
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}
.produCatContainer .dispCatCOntent {
  position: absolute;
  bottom: 0;
  padding: 35px 30px;
}
.produCatContainer .dispCatCOntent h2 {
  font-weight: 300;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #fff;
}

.prodDispOverText a {
  cursor: auto;
  display: block;
  transition: 0.3s ease-in-out;
}
.prodDispOverText a * {
  transition: 0.3s ease-in-out;
}
.prodDispOverText a:after {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  transition: background 0.3s ease-in-out;
}

.sliderProdCat:hover .prodDispOverText a:after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}
.sliderProdCat:hover .prodDispOverText a.hoveredNow:after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
} */

nav.product-breadcrumbs * {
  font-weight: 400;
  font-size: 14px;
  line-height: 200%;
  color: #000;
}

.product-gallery-thumbnails {
  padding-left: 35px;
  margin-top: -20px;
}

.gallery-thumbnail {
  margin-bottom: 20px;
}

.numberCount {
  position: sticky;
  top: 20px;
  left: 0;
  margin-left: -15px;
  margin-top: 15px;
}

.contentProductWrap {
  margin-top: 15px;
  position: sticky;
  top: 2rem;
}
.contentProductWrap h1 {
  font-size: 28px;
  letter-spacing: 0;
  font-weight: 300;
  text-transform: capitalize;
  color: #000;
  margin-bottom: 16px;
}
.contentProductWrap h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 16px;
}
.contentProductWrap p {
  font-size: 16px;
  line-height: 230%;
  color: #000;
}
.contentProductWrap .coloursBox {
  margin-top: 37px;
}
.contentProductWrap .coloursBox h5 {
  font-size: 16px;
  font-weight: 400;
  color: #000;
}
.contentProductWrap .coloursBox ul {
  display: flex;
  gap: 46px;
  justify-content: space-between;
  margin-top: 20px;
}
.contentProductWrap .coloursBox ul li {
  flex: 0 0 50%;
  max-width: 50%;
}
.contentProductWrap .coloursBox ul li a {
  padding: 15px 2.5px;
  border-bottom: 1px #000000 solid;
  text-transform: capitalize;
  color: #000;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-self: center;
}
.contentProductWrap .dimensionBox {
  margin-top: 68px;
}
.contentProductWrap .dimensionBox h5 {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-bottom: 12px;
}
.contentProductWrap .dimensionBox p {
  font-size: 16px;
  line-height: 230%;
  color: #000;
}
.contentProductWrap .shareLinks {
  margin-top: 68px;
}
.contentProductWrap .shareLinks .social-sharing-links {
  display: flex;
  gap: 16px;
  margin-top: 28px;
}
.contentProductWrap .shareLinks h5 {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.contentProductWrap .shareLinks a {
  height: 55px;
  width: 55px;
  border: 1px #E6E6E6 solid;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  border-radius: 50%;
}
.contentProductWrap .shareLinks a svg {
  fill: #000;
  height: 20px;
}

.ctaSec {
  padding-top: 80px;
  padding-bottom: 80px;
}

.ctaWrapper {
  position: relative;
}
.ctaWrapper .ctaInner {
  position: absolute;
  padding: 50px 70px;
  top: 0;
  left: 0;
}
.ctaWrapper .subtitleCta {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-transform: capitalize;
  color: #fff;
  display: block;
  margin-bottom: 16px;
}
.ctaWrapper h3 {
  font-weight: 300;
  font-size: 36px;
  line-height: 64px;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 7px;
}
.ctaWrapper p {
  font-weight: 400;
  font-size: 16px;
  line-height: 200%;
  color: #fff;
}
.ctaWrapper img {
  height: 250px;
  width: 100%;
}
.ctaWrapper .btnWrapper {
  text-align: right;
}
.ctaWrapper .btnWrapper * {
  transition: 0.3s ease-in-out;
}
.ctaWrapper .btnWrapper .siteBtn {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-weight: 300;
  font-size: 16px;
  line-height: 100%;
  text-transform: capitalize;
  color: #fff;
  background-color: #000;
  padding: 28px 44px;
}

.innerCard img {
  height: 440px;
  width: 100%;
  background-color: #F5F5F5;
  -o-object-fit: cover;
     object-fit: cover;
}
.innerCard h3 {
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  color: #000;
  margin-top: 16px;
}

.swiper-button-next-related, .swiper-button-prev-related {
  height: 59px;
  width: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px #E6E6E6 solid;
}

.resetBtn {
  border: 1px #E6E6E6 solid;
  font-weight: 300;
  font-size: 12px;
  line-height: 100%;
  text-transform: capitalize;
  padding: 10px 20px;
}
.applyBtn{
  border: 1px #E6E6E6 solid;
	background: transparent;
  font-weight: 300;
  font-size: 12px;
  line-height: 100%;
  text-transform: capitalize;
  padding: 10px 20px;
}

section.siteBred {
  margin-bottom: 96px;
}
section.siteBred .archive-breadcrumbs a, section.siteBred .archive-breadcrumbs span {
  color: #000;
  font-weight: 400;
  font-size: 14px;
  line-height: 200%;
}
.productsCountShown {
	 margin-bottom: 42px;
  cursor: default;
	margin-top: 25px;
  display: inline-block;
}
.filterToggle {
  margin-bottom: 42px;
  cursor: pointer;
	margin-top: 25px;
  display: inline-block;
}
.filterToggle span{
	font-weight:300;
}
.categoryList {
  border-top: 1px #E6E6E6 solid;
  padding-top: 25px;
}
.categoryList .accordion-button {
  color: #000;
  font-weight: 300;
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: capitalize;
  padding-left: 0;
  padding-right: 0;
}
.categoryList .accordion-item {
  border: 0;
}
.categoryList .accordion-body {
  padding-left: 0;
  padding-right: 0;
}
.categoryList .accordion-button:not(.collapsed) {
  background-color: transparent;
  border: 0 !important;
  box-shadow: unset;
}
.categoryList .accordion-button:focus {
  box-shadow: unset;
}
.categoryList .accordion-button:after {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.99986 3.50804L2.05006 8.45776L0.635861 7.04355L6.99986 0.679543L13.3638 7.04355L11.9496 8.45776L6.99986 3.50804Z' fill='black'/%3E%3C/svg%3E%0A");
}
.categoryList ul li input {
  display: none;
}
.categoryList ul li input:checked ~ label::before {
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.63329L2.73462 6.17264C2.9565 6.36954 3.31017 6.36954 3.53205 6.17264L9 1.32031' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
}
.categoryList ul li label {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-weight: 300;
  font-size: 16px;
  line-height: 230%;
}
.categoryList ul li label:before {
  content: "";
  height: 16px;
  width: 16px;
  border: 1px #000000 solid;
  border-radius: 2px;
  display: inline-block;
}
.categoryList ul ul {
  padding-left: 17px;
}
.categoryList .resetButton {
  margin-top: 50px;
}
.categoryList .resetButton a {
  color: #000;
}

@keyframes scrollNow {
  0% {
    height: 0;
    transform: translateY(-100%);
  }
  50% {
    height: 30px;
    transform: translateY(0%);
  }
  100% {
    height: 60px;
    transform: translateY(100%);
  }
}
.customiZeBox {
  position: fixed;
  top: 0;
  height: 100vh;
  background-color: #fff;
  z-index: 9;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  overflow-y: scroll;
  left: -100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
}
.customiZeBox.active {
  left: 0;
  opacity: 1;
  visibility: visible;
}

.closeCustmo {
  text-align: right;
  cursor: pointer;
}

.customiZeBox .secTitle {
  font-family: 'Roboto';
  font-weight: 600;
  font-size: 28px;
  line-height: 120%;
  letter-spacing: 5px;
  text-transform: capitalize;
  margin-bottom: 70px;
}

.customiZeBox h4 {
  font-weight: 600;
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 5px;
  text-transform: capitalize;
  margin-bottom: 0;
}

.customizationDetails {
  display: flex;
  gap: 20px;
}
.customizationDetails li {
  flex: 0 0 calc(33.33% - 20px);
  max-width: calc(33.33% - 20px);
}
.customizationDetails li .skuBox {
  font-weight: 400;
  font-size: 16px;
  line-height: 230%;
  letter-spacing: 2px;
}
.customizationDetails li .selectTitle {
  font-size: 14px;
  line-height: 230%;
  display: block;
}
.customizationDetails li .extBoxVal {
  font-size: 20px;
  line-height: 120%;
  letter-spacing: 3px;
  text-transform: capitalize;
  display: block;
}

.selectedIntImg, .selectedExtImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.colorOption {
  display: none;
  flex-wrap: wrap;
  gap: 16px;
}
.colorOption li {
  flex: 0 0 calc(25% - 12px);
  text-align: center;
  margin-bottom: 40px;
}
.colorOption li img {
  height: 71px;
  width: 71px;
  min-height: 71px;
  min-width: 71px;
}
.colorOption li span {
  font-weight: 400;
  font-size: 11px;
  line-height: 230%;
  text-align: center;
  color: rgb(108, 108, 108);
  display: block;
  margin-top: 8px;
}
.colorOption.active {
  display: flex;
}

.colorCust {
  height: 450px;
  overflow-y: scroll;
}
.colorCust h5 {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 200%;
  letter-spacing: 0.8px;
}

.radioCharger {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 9;
}
.radioCharger ul {
  display: flex;
  gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgba(255, 255, 255, 0.6);
}
.radioCharger ul li a {
  color: rgb(179, 179, 179);
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 1;
  text-transform: capitalize;
}
.radioCharger ul li a.active {
  text-decoration: underline;
  color: rgb(0, 0, 0);
}

.downloadBtnCus {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 9;
}
.downloadBtnCus a {
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.7);
}

.custNote {
  font-size: 14px;
  line-height: 230%;
  color: rgb(108, 108, 108);
  margin-top: 14px;
}

.breadCrumbandTitle {
  margin-bottom: 80px;
  padding-top: 32px;
}

.color-finishes-tabs .nav-tabs {
  margin-bottom: 80px;
  gap: 120px;
  justify-content: center;
}
.color-finishes-tabs .nav-tabs .nav-item .nav-link {
  margin: 0;
  border: 0;
  font-weight: 300;
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 0px;
  vertical-align: middle;
  color: rgb(179, 179, 179);
  padding-bottom: 32px;
}
.color-finishes-tabs .nav-tabs .nav-item .nav-link.active {
  font-weight: 300;
  color: rgb(0, 0, 0);
  margin: 0;
  border: 0;
  border-bottom: 1px #000 solid;
}
.color-finishes-tabs .innerCard a {
  cursor: url('data:image/svg+xml;utf8,<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.8" cx="67" cy="67" r="67" fill="black"/><path d="M48.4104 61.64L52.4744 71.608L56.5224 61.64H57.6904L52.9864 73H51.9624L47.2424 61.64H48.4104ZM59.8937 73V64.664H60.9817V73H59.8937ZM59.8937 62.92V61.32H60.9817V62.92H59.8937ZM67.7781 73.16C67.1808 73.16 66.6261 73.048 66.1141 72.824C65.6021 72.5893 65.1595 72.2747 64.7861 71.88C64.4128 71.4747 64.1195 71.0107 63.9061 70.488C63.7035 69.9653 63.6021 69.4053 63.6021 68.808C63.6021 68.0293 63.7781 67.3147 64.1301 66.664C64.4928 66.0133 64.9888 65.496 65.6181 65.112C66.2475 64.7173 66.9621 64.52 67.7621 64.52C68.5835 64.52 69.2981 64.7173 69.9061 65.112C70.5248 65.5067 71.0101 66.0293 71.3621 66.68C71.7141 67.32 71.8901 68.024 71.8901 68.792C71.8901 68.8773 71.8901 68.9627 71.8901 69.048C71.8901 69.1227 71.8848 69.1813 71.8741 69.224H64.7381C64.7915 69.8213 64.9568 70.3547 65.2341 70.824C65.5221 71.2827 65.8901 71.6507 66.3381 71.928C66.7968 72.1947 67.2928 72.328 67.8261 72.328C68.3701 72.328 68.8821 72.1893 69.3621 71.912C69.8528 71.6347 70.1941 71.272 70.3861 70.824L71.3301 71.08C71.1595 71.4747 70.8981 71.832 70.5461 72.152C70.1941 72.472 69.7781 72.7227 69.2981 72.904C68.8288 73.0747 68.3221 73.16 67.7781 73.16ZM64.7061 68.44H70.8661C70.8235 67.832 70.6581 67.2987 70.3701 66.84C70.0928 66.3813 69.7248 66.024 69.2661 65.768C68.8181 65.5013 68.3221 65.368 67.7781 65.368C67.2341 65.368 66.7381 65.5013 66.2901 65.768C65.8421 66.024 65.4741 66.3867 65.1861 66.856C64.9088 67.3147 64.7488 67.8427 64.7061 68.44ZM84.646 64.664H85.718L82.134 73H81.19L79.446 68.856L77.718 73H76.774L73.19 64.664H74.246L77.286 71.88L78.822 68.12L77.414 64.68H78.39L79.446 67.384L80.518 64.68H81.478L80.086 68.12L81.622 71.88L84.646 64.664Z" fill="white"/><rect x="57" y="84" width="24" height="31" fill="black"/></svg>'), pointer;
}
.color-finishes-tabs .innerCard p {
  margin-top: 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 230%;
  color: rgb(108, 108, 108);
}


.brand {
  margin-top: 16px;
  font-weight: 300;
  font-size: 14px;
  line-height: 230%;
  color: rgb(0, 0, 0);
}

.installationCard .brand {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.designerContent h5 {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: capitalize;
  color: rgb(108, 108, 108);
  margin-bottom: 12px;
  margin-top: 30px;
}
.designerContent p {
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1.5px;
  color: rgb(0, 0, 0);
}

.newsBox h3 {
  margin-top: 0;
}

.sortBox {
  position: relative;
  margin-bottom: 48px;
  text-align: right;
  display: inline-block;
  float: right;
}
.sortBox label {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 3px;
  left: 2px;
}
.sortBox select {
  border: 0;
  padding-left: 30px;
  cursor: pointer;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: capitalize;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.postDdate {
    margin-bottom: 10px;
}
.subtitle404 {
    font-size: 20px;
}
.categoryList .accordion-item:nth-child(1) {
    margin-top: 0;
}
.horizontal-slider-container{
	h1{
		font-size:2.5rem;
		line-height:64px;
	}
}
.page-template-our-story{
	.smallBanner .bannerInnerSlider .bannerContent .banner-title{
		    margin-bottom: 20px;
    margin-top: 16px;
    font-size: 52px;
    line-height: 58px;
    font-weight: 300;
    letter-spacing: 0;
	}
}
.stickyLogo svg {
    width: 100%;
}
.contentInnStory h2 {
    margin-bottom: 15px;
}
/*# sourceMappingURL=style.css.map */


/* ============================================================
   PRODUCTS CATEGORIES — UPDATED STYLES
   Replace / merge these rules into your existing style.css
   ============================================================ */


/* ── Swiper layout ── */
.sliderProdCat.swiper {
  overflow: visible;
}

.sliderProdCat .swiper-slide {
  cursor: none;
  height: auto;
  flex-shrink: 0;
}


/* ── Image ── */
.produCatContainer {
  position: relative;
  overflow: hidden;
}

.produCatContainer a {
  position: relative;
  display: block;
  overflow: hidden;
}

.produCatContainer a img {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  vertical-align: middle;
}


/* ── Overlay: hidden by default ── */
.slideOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: none;
  z-index: 10;
  pointer-events: none;
}

/* :has() fires only when a .swiper-slide is actually hovered —
   this means hovering the scrollbar below will NOT trigger overlays
   since no .swiper-slide is under the cursor at that point */

/* All slides get overlay when ANY slide is hovered */
.sliderProdCat:has(.swiper-slide:hover) .swiper-slide .slideOverlay {
  opacity: 1;
}

/* The actively hovered slide clears its overlay
   Must come AFTER the rule above */
.sliderProdCat:has(.swiper-slide:hover) .swiper-slide:hover .slideOverlay {
  opacity: 0;
}


/* ── View More Circle ── */
.viewMoreCircle {
	cursor:pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(30, 30, 30, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  opacity: 0;
/*   pointer-events: none; */
  transition: none;
}

.viewMoreCircle span {
  color: #ffffff;
  font-family: var(--bodyFont);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.viewMoreCircle span svg {
  flex-shrink: 0;
}

/* Show circle on hovered slide only
   Must come AFTER overlay rules */
.sliderProdCat:has(.swiper-slide:hover) .swiper-slide:hover .viewMoreCircle {
  opacity: 1;
}


/* ── Category name text ── */
.dispCatCOntent {
  position: absolute;
  bottom: 0;
  padding: 35px 30px;
  width: 100%;
  z-index: 9;
}

.dispCatCOntent h2 {
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}


/* ── Swiper scrollbar styling ── */

/* Hide old pagination progressbar if still present */
.sliderProdCat .swiper-pagination-progressbar {
  display: none;
}

/* Scrollbar track */
.sliderProdCat .swiper-scrollbar {
  height: 3px;
  background-color: #E6E6E6;
  border-radius: 2px;
  position: relative;
  margin-top: 60px;
  left: 0 !important;
  width: 100% !important;
  bottom: unset !important;
}

/* Scrollbar thumb */
.sliderProdCat .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: #000000;
  border-radius: 2px;
  height: 100%;
  cursor: grab;
}

.sliderProdCat .swiper-scrollbar .swiper-scrollbar-drag:active {
  cursor: grabbing;
}

.loadMoreBtn {
	width: fit-content;
    color: black;
    border: 1px #E6E6E6 solid;
    font-weight: 300;
    font-size: 12px;
    line-height: 100%;
    text-transform: capitalize;
    	
	
}
#load-more-installations{
	padding:18px 20px;
}
#homeThreeCol img {
	height: 50vh;
}