html,
body {
  width: 100%;
  overflow-x: hidden;
 
}
ul{
  list-style: none;
}

/* colours  */

:root {
  --primary: #ff3d24;
  --secondary: #000;
  --prim-font: #455D73;
  
}

/* Basic css */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}
a{
  text-decoration: none!important;
}
p{
  color: var(--prim-font);
  line-height: 1.7rem;
  font-size: 0.9rem;
}
.sk-badge p{
  color: #fff;
}
h1, h2, h3, h4, h5, h6{
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
h2{
  font-size: calc(2.5rem + 0.3vw);
}
h3{
  font-size: calc(2rem + 0.3vw);
}
h4{
  font-size: calc(1.5rem + 0.3vw);
}
.navbar {
  padding: .5rem 3rem;;
  background-color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-expand-lg .navbar-nav .nav-link{
  color: #fff;
  padding-right: 1rem;
  padding-left: 1rem;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
}
.navbar-expand-lg .navbar-nav .nav-link:hover{
  color: var(--primary);
}
.navbar-nav {
  margin: auto;
}
.navbar-brand {
  width: 20%;
}
.navbar-brand img{
  width: 100%;
}
.banner {
  position: relative;
  background: url('../img/banner-new.jpg') no-repeat center center;
  background-size: cover;
  height: 95vh;
  color: #fff;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgb(255, 61, 36, 0.6); */
  background: rgb(0,0,0);
  background: linear-gradient(27deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); 
}
.banner-content {
  position: relative;
  z-index: 2;
}
.banner-left-cont{
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}
.banner-left-cont h1{
  font-size: 3.4rem;
  font-weight: 400;

}

.cust-cont{
  width: 100%;
  height: auto;
  padding: 0px 60px;
}
.banner-left-cont p{
  color: #fff;
  width: 80%;
}
.banner-frm{
  padding:2rem;
  background-color: rgb(0, 0, 0, 0.9);
 
}

.btn-primary{
  background-color: #545b62;
  border-color: #545b62;
}
.btn-primary:hover{
  background-color: var(--primary);
  border-color:var(--primary);
}
.banner-frm h4{
  margin-bottom: 20px;
}
.form-control{
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0px;
  font-size: 0.9rem;
}
.bknw{
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
.bknw:hover{
  background-color: #e22e16;
  color: #fff;
}
.enq{
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
.enq-white{
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
  font-size: 0.9rem;
}
.cont-us .enq-white{
  margin-top: 15px;
}
.enq:hover{
  background-color: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
.intro{
  width: 100%;
  height: auto;
  padding: 50px 0px;
  position: relative;
}
.textarea{
  color: #6c757d!important;
}
.intro-sq-bg{
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 30%;
  height: 100%;
  background-color: #e9e2e2;
  z-index: 0;
}
.intro h2 span{
  color: var(--primary);
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
.subhead{
  font-style: italic;
  font-weight: 600;
}
.what-cer{
  width: 100%;
  height: auto;
  background-image: url('../img/what-is-ceramic.jpg');
  background-position: center;
  background-size: cover;
  position: relative;
}
.what-cer-ov{
  width: 100%;
  min-height: 300px;
  padding:4rem 8rem;
  background: rgb(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
.what-cer-ov h3{
  text-align: center;
  color: #fff;
  display: block;
  margin: 10px auto;
}
.what-cer-ov p{
  text-align: center;
  color: #fff;
}
.what-cer-ov ul{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.what-cer-ov ul li{
  width: 48%;
  padding: 1rem 2rem;
  margin-right: 2%;
  margin-bottom: 20px;
  background-color: rgb(255, 61, 36, 0.9);
}
.what-cer-ov ul li p{
  text-align: left;
}
.what-cer-ov ul li h4{
  color: #fff;
  position: relative;
  display: block;
  padding-left: 5%;
}
.what-cer-ov ul li h4::before{
  content:url(../img/check_circle.svg);
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

.sub-head{
 text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--primary);
  margin: 5px auto;
  text-transform: uppercase;
}
.h-wid{
  width: 60%;
  text-align: center;
  margin: 15px auto;
}
.why-choose{
  width: 100%;
  height: auto;
  padding: 50px 0px;
}
.why-choose h3{
  text-align: center;
  margin-bottom: 30px;
}
.why-ch-bx-wr{
  width: 78%;
  margin: 10px auto;
}
.why-ch-bx{
  text-align: center;
  margin-bottom: 30px;
}
.get-strt{
  width: 100%;
  height: auto;
  padding: 50px 60px;
  background-color: #f1f1f1;
}
.why-ch-img{
  margin: 10px 0px;
  position: relative;
}
.why-ch-img:hover img{
  transition:0.3s all ease-in-out;
}
.why-ch-bx h5{
  margin-bottom: 0px;
}
.steps-tit{
  width: 100%;
  height: 5px;
  background-color: var(--primary);
  position: relative;
}
.steps-tit .num{
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0.rem;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  background-color: #fff;
  color: var(--primary);
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 600;
}
.steps{
  width: 100%;
  height: auto;
  padding: 50px 0px;
  background-color: var(--secondary);
}
.steps p{
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}
.steps h4{
  width: 55%;
  color: var(--primary);
  margin: 0px auto;
  text-align: center;
}
.cmt{
  margin-top: 80px;
}
.steps-bx-cont{
  margin-top: 40px;
  text-align: center;
}
.steps-bx-cont h5{
  color: #fff;
}
.steps span{
  display: block;
  color: #fff;
  font-style: italic;
  text-align: center;
  margin: 0px auto;
  font-size: 1.3rem;
}
.cont-us{
  width: 100%;
  height: auto;
  padding: 50px 0px;
  background-image: url('../img/contact-bgg.jpg');
  background-position: center;
  background-size: cover;
}
.cont-us h5{
  color: #fff;
  font-style: italic;
  font-size: 1.5rem;
}
.cont-us span{
  color: var(--primary);
  font-style: italic;
  font-size: 1.1rem;
}
.map{
  width: 100%;
  height: auto;
}
.cp-rght{
  width: 100%;
  padding: 8px 60px;
  text-align: center;
  font-size: 0.9rem;
  background-color: var(--secondary);
  color: #fff;
}
a.btn-wa {
  text-decoration: none;
}
.btn-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #25d366;
  width: 60px;
  height: 60px;
  padding: 1rem;
  border-radius: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  cursor: pointer;
  z-index:999;
  transition: left 2s, width 1s, height 1s;
}
.btn-wa img{
  width: 100%;
  max-width: 100%;
}

.bxl-whatsapp {
  font-size: 2.5rem;
  color: #fff;
}

.btn-wa:hover{
  width:65px;
  height:65px;
}
.pre-ser{
  width: 100%;
  height: auto;
  padding: 50px 0px;
}
.pre-ser h3{
  text-align: center;
}
.pre-ser h3 span{
  color: var(--primary);
  font-family: "Roboto Condensed", sans-serif;
}
.ser-img-bx{
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;

}
.ser-img-bx img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.3s all ease-in-out;
}
.ser-img-bx:hover img{
  transform: scale(1.1);
}
.pre-ser-bx{
  width: 100%;
  min-height: 440px;
  margin-bottom: 30px;
  background-color: #f3f3f3;
}
.det-cont{
  padding: 5px 20px 20px 20px;
}
.det-cont h5{
  font-size: 1.5rem;
  color: var(--secondary);
}
.cmt-s{
  margin-top: 30px;
}
.container {
  width: 100%;
  height:auto;
}
#comparison {
  width: 100%;
  padding-bottom: 70%;
  overflow: hidden;
  position: relative;
}
figure {
  position: absolute;
  background-image: url('../img/before-ceramic.jpg');
  background-size: cover;
  background-position: center;
  font-size: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
}
#divisor {
  background-image: url('../img/after-ceramic.jpg');
  background-size: cover;
  position: absolute;
  width: 100%;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 100%;
 
}
#divisor::before, #divisor::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}
#divisor::before {
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}
#divisor::after {
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}
#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}
#handle::before, #handle::after {
  content: "";
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}
input[type="range"]:focus, input[type="range"]:active {
  border: none;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}

.banner-left-cont h1 span{
  font-weight: 600;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  color: #fff;
  padding: 0px 10px;
  -webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
          animation: 1.5s highlight 1.5s 1 normal forwards;
  background-color: none;
  background: linear-gradient(90deg, rgba(255, 61, 36) 50%, rgba(233, 56, 33, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
}
@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@keyframes highlight {
  to {
    background-position: 0 0;
  }
}
.sh-text a{
  color: var(--primary);
}
.sticky{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
  z-index: 999;
}
.right-bx{
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.right-bx .bknw{
  margin-left: 3%;
}
.phone a{
  color: #fff;
  font-weight: 600;
}
.g-review{
  padding: 50px 0px;
}
.get-strt h4{
  font-size: 1.5rem;
}
.call{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  animation-duration: 3s!important;
}
.get-strt-wr{
  text-align: center;
}
.red{
  color: var(--primary);
}
.rate-sec{
  width: 100%;
  height: auto;
  padding:60px;
  /* background-color: #000; */
  background-image: url('../img/rate-bgg.jpg');
  background-position: center;
  background-size: cover;
  position: relative;
}
.rate-sec h3{
  text-align: center;
  color: #fff;
  margin-bottom: 50px;
}
.pck-bx{
  width: 100%;
  min-height: 300px;
 
  
}
.pck-tit{
  width: 100%;
  min-height: 50px;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 1.5rem;
  font-family: "Roboto Condensed", sans-serif;
}
.pck-cont{
  padding:1rem;
  margin-top: 5px;
  background-color: #3d3d3d;
  text-align: center;
  color: #fff;
}
.pck-cont h4{
  font-weight: 400;
}
.pck-cont h4 span{
  font-size: 2.3rem;
  font-weight: 600;
  font-family: "Roboto Condensed", sans-serif;
}
.pck-cont h5{
  border: 1px solid #e6e6e6;
  font-size: 1rem;
  padding: 0.5rem;
}
.pck-cont p{
  color: #ffff;
}
/* 29-01-2025 */
.google_reviews {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3rem 2rem;
  background: #fff;
  color: #333;
}
.google_reviews .google {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 2rem 0 0;
}
.reviews{
  width: 80%;
  overflow-x: hidden;
}
.google_reviews .google .company {
  width: 62px;
}
.google_reviews .google .rating {
  width: 160px;
}
.google_reviews .wrapper {
  display: flex;
  margin: 1rem 0;
}

/*24-03-25*/
.google_reviews {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 5rem 2rem;
  background: #fff;
  color: #333;
}
.wp-gr {
  display: block !important;
  width: 100% !important;
  padding-bottom: 20px !important;
  text-align: left !important;
  direction: ltr !important;
  box-sizing: border-box !important;
}
.wpac {
  font-size: 14px !important;
  line-height: 20px !important;
  direction: inherit !important;
  text-align: inherit !important;
  color: #333 !important;
  font-style: normal !important;
  font-weight: normal !important;
  text-decoration: none !important;
  list-style-type: disc !important;
}
.wp-gr .grw-row {
  display: -ms-flexbox !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  -ms-flex-wrap: nowrap !important;
  -ms-flex-align: center !important;
}
.wp-gr .grw-header, .wp-gr .grw-content {
  -ms-flex: 1 0 calc(100% / var(--col,3)) !important;
  flex: 1 0 calc(100% / var(--col,3)) !important;
  width: calc(100% / var(--col,3)) !important;
}
.wp-gr .grw-header-inner, .wp-gr .grw-review-inner {
  position: relative !important;
  padding: 15px !important;
  width: 100% !important;
}
.wpac, .wpac h1, .wpac h2, .wpac h3, .wpac h4, .wpac h5, .wpac h6, .wpac p, .wpac td, .wpac dl, .wpac tr, .wpac dt, .wpac ol, .wpac form, .wpac select, .wpac option, .wpac pre, .wpac div, .wpac table, .wpac th, .wpac tbody, .wpac tfoot, .wpac caption, .wpac thead, .wpac ul, .wpac li, .wpac address, .wpac blockquote, .wpac dd, .wpac fieldset, .wpac li, .wpac strong, .wpac legend, .wpac em, .wpac s, .wpac cite, .wpac span, .wpac input, .wpac sup, .wpac label, .wpac dfn, .wpac object, .wpac big, .wpac q, .wpac font, .wpac samp, .wpac acronym, .wpac small, .wpac img, .wpac strike, .wpac code, .wpac sub, .wpac ins, .wpac textarea, .wpac var, .wpac a, .wpac abbr, .wpac applet, .wpac del, .wpac kbd, .wpac tt, .wpac b, .wpac i, .wpac hr {
  background-attachment: scroll !important;
  background-color: transparent !important;
  background-image: none !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  border-color: black !important;
  border-color: currentColor !important;
  border-radius: 0 !important;
  border-style: none !important;
  border-width: medium !important;
  bottom: auto !important;
  clear: none !important;
  clip: auto !important;
  color: inherit !important;
  counter-increment: none !important;
  counter-reset: none !important;
  cursor: auto !important;
  direction: inherit !important;
  display: inline;
  float: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-variant: normal !important;
  font-weight: inherit !important;
  height: auto;
  left: auto !important;
  letter-spacing: normal !important;
  line-height: inherit !important;
  list-style-type: inherit !important;
  list-style-position: outside !important;
  list-style-image: none !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 1;
  outline: invert none medium !important;
  padding: 0 !important;
  position: static !important;
  quotes: "" "" !important;
  right: auto !important;
  table-layout: auto !important;
  text-align: inherit !important;
  text-decoration: inherit !important;
  text-indent: 0 !important;
  text-transform: none !important;
  top: auto !important;
  unicode-bidi: normal !important;
  vertical-align: baseline !important;
  visibility: inherit !important;
  white-space: normal !important;
  width: auto !important;
  word-spacing: normal !important;
  z-index: auto !important;
  -moz-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  text-shadow: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.wp-gr .wp-google-left {
  display: table-cell !important;
  vertical-align: top !important;
}
.wp-gr.wpac .wp-google-left img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
}
.wp-gr .wp-google-left img {
  border: none !important;
  float: left !important;
  height: 50px !important;
  width: 50px !important;
  margin-right: 10px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  box-shadow: 0 0 2px rgb(0 0 0 / .12),0 2px 4px rgb(0 0 0 / .24) !important;
}
.wp-gr .wp-google-right {
  display: table-cell !important;
  vertical-align: top !important;
  width: 10000px !important;
}
.wp-gr .grw-content {
  position: relative !important;
  min-width: 0 !important;
}