/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Scrollbar Styles
--------------------------------------------------------------*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #313131;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #d1990b;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #cf6800;
}

/*--------------------------------------------------------------
# Preloader Styles
--------------------------------------------------------------*/

.content {
  display: none;
}

body.loaded .preloader {
  display: none;
}

body.loaded .content {
  display: block;
}

.preloader-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}

.pre-container {
  position: relative;
  display: flex;
  height: 200px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.loader {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: animate 2s linear infinite;
}

.loader:nth-child(2),
.loader:nth-child(4) {
  filter: hue-rotate(290deg);
  animation-delay: -1s;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader:nth-child(1)::before,
.loader:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(0, 255, 249, .4));
  background-size: 100px 180px;
  background-repeat: no-repeat;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

em {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 20px;
  height: 20px;
  background: #00fff9;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 10px #00fff9,
    0 0 20px #00fff9,
    0 0 30px #00fff9,
    0 0 40px #00fff9,
    0 0 50px #00fff9,
    0 0 60px #00fff9,
    0 0 70px #00fff9,
    0 0 80px #00fff9,
    0 0 90px #00fff9,
    0 0 100px #00fff9;
}

.loader span {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: #000;
  border-radius: 50%;
  z-index: 1;
}

/*--------------------------------------------------------------
# Global Styles
--------------------------------------------------------------*/
.text-yellow {
  color: #d1990b !important;
}

body {
  font-family: Arial, Helvetica, sans-serif !important;
  overflow-x: hidden !important;
}

.p {
  font-size: 20px !important;
  font-weight: lighter;
  line-height: 1.7;
}


.btn-yellow {
  background-color: #d1990b !important;
  transition: 0.5s;
  color: #fff;
  font-size: large;
  font-weight: 700;
  padding: 10px 25px;
}

.btn-yellow:hover {
  background-color: transparent !important;
  color: #d1990b;
  border: 1px solid #d1990b;
  border-color: #d1990b !important;
  border-radius: 5px;
}

.btn-outline-yellow {
  border: 3px solid #d1990b !important;
  transition: 0.5s;
  color: #fff;
  font-size: large;
  font-weight: 700;
  padding: 10px 25px;
}

.btn-outline-yellow:hover {
  border: 3px solid transparent !important;
  background-color: #d1990b !important;
  transition: 0.5s;
  color: #000;
  font-size: large;
  font-weight: 700;
  padding: 10px 25px;
  border-radius: 0px;
}

.border-yellow {
  border: 1px solid #d1990b;
}

.border-top-yellow {
  border-top: 1px solid #d1990b;
}

.border-bottom-yellow {
  border-bottom: 1px solid #d1990b;
}

.border-left-yellow {
  border-left: 1px solid #d1990b;
}

.border-bottom-yellow {
  border-right: 1px solid #d1990b;
}

.bg-grd {
  background: #0f0c29;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0f0c29, #24243e, #302b63, #0f0c29);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0f0c29, #24243e, #302b63, #0f0c29);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/

.dark-banner {
  background-image: url(./../img/dark.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.parallex-content {
  background-color: rgba(59, 59, 59, 0.2);
}

.inner-parallex-content {
  background-color: rgba(20, 20, 20, 0.5);
}

.title-text{
  font-size: calc(20px + 3vh);
  line-height: calc(20px + 5vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  font-family: "Sacramento", cursive;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

/*--------------------------------------------------------------
# Cursor
--------------------------------------------------------------*/
.cursor-ball {
  background: #d1990b;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  opacity: 0.8;
  z-index: 99;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/

.hedaer-icon {
  font-size: 1.2em;
}

.insta-bg {
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.linked-in-bg {
  color: #0a66c1;
}

.google-bg {
  background: #d6249f;
  background: conic-gradient(from -20deg at 38% 59%, #DB4437 0deg, #DB4437 90deg, #4285F4 90deg, #4285F4 180deg, #0F9D58 180deg, #0F9D58 270deg, #F4B400 270deg, #F4B400 360deg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar {
  z-index: 99 !important;
}

.navbar-bg {
  background-color: rgba(0, 0, 0, 0.7);
}

.nav-item .nav-link {
  color: #fff !important;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link {
  color: #fff;
  border-bottom: 3px solid #d1990b;
  border-radius: 2px;
}

.navbar .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #d1990b !important;
}

.img-brand {
  width: 50%;
}

.nav-brand-txt {
  width: 275px;
  height: 40px;
  font-size: 30px;
}

.dropdown-menu {
  width: 230px;
  background-color: #313131 !important;
}

.dropdown-menu li a {
  text-decoration: none !important;
}

.dropdown-item {
  color: #fff !important;
  margin-bottom: 15px !important;
}

.dropdown-item-img {
  width: 20% !important;
}

.dropdown-item:hover {
  background-color: #fff !important;
  color: #d1990b !important;
}

.dropdown-item.active {
  background-color: #fff !important;
  color: #d1990b !important;
}

/*--------------------------------------------------------------
  # Home - slider Form
  --------------------------------------------------------------*/
.banner-slide {
  background-image: url(./../img/slides/slide.gif);
  background-size: cover;
  background-repeat: no-repeat;
  border: none !important;
  border-radius: 0 !important;
  transition: 0.5s;
}

.slider-form {
  margin-top: 35%;
}

.slider-form-content {
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid #d1990b;
}

.carousel-form:hover {}

/*--------------------------------------------------------------
  # Home - About
  --------------------------------------------------------------*/



/*--------------------------------------------------------------
  # Home - Service
  --------------------------------------------------------------*/
.home-service-card {
  cursor: pointer;
  transition: 0.8s;
  /* margin-bottom: 2%; */
}

.card-img {
  transition: 0.4s;
}

.home-service-card-content {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.home-service-card:hover .card-img {
  transform: scale(1.02);
}

/*--------------------------------------------------------------
  # Home - Product
  --------------------------------------------------------------*/

.home-product-banner {
  background-image: url(./../img/home/product-banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
  # About Us - Banner
  --------------------------------------------------------------*/



/*--------------------------------------------------------------
  # Product
  --------------------------------------------------------------*/

.product-banner {
  background-image: url(./../img/products/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.paint-category-card {
  cursor: pointer;
  transition: all 0.25s ease-in;
  border-bottom: 5px solid transparent;
}

.paint-category-card:hover {
  transform: translateY(-5px);
  border: none;
  border-bottom: 5px solid #d1990b;
}

/*--------------------------------------------------------------
  # Products - Paints
  --------------------------------------------------------------*/
.paint-item {
  display: none !important;
}

.show {
  display: block !important;
}

.btn-filter {
  background-color: #d1990b !important;
  transition: 0.5s;
  color: #fff;
  font-size: large;
  font-weight: 700;
  padding: 10px 25px;
  text-transform: capitalize;
  margin-bottom: 2.5%;
}

.btn-filter:hover {
  background-color: transparent !important;
  color: #d1990b;
  border: 1px solid #d1990b;
  border-color: #d1990b !important;
  border-radius: 5px;
}

.btn-filter.active {
  background-color: #d1990b !important;
  color: #212529;
}

.paint-item-card {
  height: 320px;
  cursor: pointer;
  transition: all 0.25s ease-in;
  border-bottom: 5px solid transparent;
}

.paint-item-card:hover {
  transform: translateY(-5px);
  border: none;
  border-bottom: 5px solid #d1990b;
}

/*--------------------------------------------------------------
  # Products - Wall Texture
  --------------------------------------------------------------*/

  .wall-texture-banner {
  background-image: url(./../img/wall-texture/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.btn-texture-filter {
  background-color: transparent;
  transition: 0.5s;
  color: #fff;
  border: 1px solid #fff;
  border-color: #fff !important;
  font-size: large;
  font-weight: 700;
  padding: 10px 25px;
  text-transform: capitalize;
  margin-bottom: 2.5%;
}

.btn-texture-filter:hover {
  background-color: transparent !important;
  color: #d1990b;
  border: 1px solid #d1990b;
  border-color: #d1990b !important;
  border-radius: 5px;
}

.btn-texture-filter.active {
  background-color: transparent !important;
  color: #d1990b;
  border: 1px solid #d1990b;
  border-color: #d1990b !important;
}

.bg-grey {
  background-color: #e2ded6 !important;
}

/*--------------------------------------------------------------
  # Products - Water Proof
  --------------------------------------------------------------*/
  
  .water-proof-banner {
  background-image: url(./../img/water-proofing/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
  # Product - Interior
  --------------------------------------------------------------*/

.interior-banner {
  background-image: url(./../img/service/interior/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
  # Product - Exterior
  --------------------------------------------------------------*/

.exterior-banner {
  background-image: url(./../img/service/exterior/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
  # Product - Waterproof
  --------------------------------------------------------------*/

.waterproof-banner {
  background-image: url(./../img/water-proofing/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
  # Color 
  --------------------------------------------------------------*/
.color-banner {
  background-image: url(./../img/colors/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
  # Color Visualizer
  --------------------------------------------------------------*/
.color-visual-banner {
  background-image: url(./../img/color-visualizer/banner.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.colorpanel-card {
  background-color: #ffffff;
  width: 100%;
  align-items: center;
  transition: background-color 0.3s ease;
}

.color-item {
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.color-item:hover {
  transform: scale(1.05);
}

.card-item {
  cursor: pointer !important;
  transition: transform 0.3s;
}

#red {
  background-color: #f05a4b;
}

#green {
  background-color: #61cc71;
}

#yellow {
  background-color: #fed772;
}

#orange {
  background-color: #ffba4f;
}

#blue {
  background-color: #a1b5ed;
}

#aliceBlue {
  background-color: #F0F8FF;
}

#antiqueWhite {
  background-color: #FAEBD7;
}

#aqua {
  background-color: #00FFFF;
}

#aquamarine {
  background-color: #7FFFD4;
}

#azure {
  background-color: #F0FFFF;
}

#beige {
  background-color: #FFE4C4;
}

#bisque {
  background-color: #FFEBCD;
}

#blueViolet {
  background-color: #8A2BE2;
}

#cadetBlue {
  background-color: #5F9EA0;
}

#cornflowerBlue {
  background-color: #6495ED;
}

#crimson {
  background-color: #DC143C;
}

#darkCyan {
  background-color: #008B8B;
}

#darkOliveGreen {
  background-color: #556B2F;
}

#fireBrick {
  background-color: #B22222;
}

/*--------------------------------------------------------------
  # Estimate Cost
  --------------------------------------------------------------*/
.estimate-banner {
  background-image: url(./../img/estimate-cost/banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.estimate-card {
  background: rgba(255, 255, 255, 0) !important;
  color: #fefefe;
  transition: 0.5s;
  cursor: pointer;
  border: 1px solid #fff;
}

/********************* 
Customize Radio Input
**********************/

input[type="radio"].btn-check {
  position: absolute;
  opacity: 0;
}

/* Style for the label */
label.btn {
  border: 2px solid black;
  /* Default black border */
  padding: 10px 22.5px;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}

/* Icon style */
label.btn i {
  margin-right: 10px;
}

/* Text style */
label.btn .text-capitalize {
  font-weight: bolder;
  color: black;
}

label.btn, i, .bi {
  color: #d1990b;
}

/* Hover state */
input[type="radio"].btn-check:checked+label.btn,
label.btn:hover {
  border-color: #d1990b;
  /* Yellow border on hover */
}

.btn-check, .btn:hover {
  border-color: #d1990b !important;
  /* Yellow border on hover */
}

input[type="radio"].btn-check+label.btn {
  width: 100%;
}

/* Active state */
input[type="radio"].btn-check:checked+label.btn {
  border-color: #d1990b;
  /* Yellow border when checked */
  background-color: rgb(209, 153, 11, 0.2);
  /* Optional: Add background color for checked state */
}

input[type="radio"].btn-check:checked, label.btn, i, .bi {
  color: #313131;
}

.type-content {
  display: none;
}

.type-content.visible {
  display: block;
}

.range-content {
  display: none;
}

.range-content.visible {
  display: block;
}

.product-content {
  display: none;
}

.product-content.visible {
  display: block;
}

/********************* 
Customize Range Input
**********************/

.range-input::-webkit-slider-runnable-track {
  background: #313131;
  /* Background color of the track */
  height: 8px;
  /* Height of the track */
  border-radius: 5px;
  /* Rounded corners */
}

.range-input::-webkit-slider-thumb {
  background: #ffcc00;
  /* Color of the thumb */
  width: 20px;
  /* Width of the thumb */
  height: 20px;
  /* Height of the thumb */
  border-radius: 50%;
  /* Make thumb round */
  cursor: pointer;
  /* Show a pointer cursor when hovering */
  -webkit-appearance: none;
  /* Remove default appearance */
  margin-top: -6px;
  /* Adjust thumb position */
}

/* Style for Firefox */
.range-input::-moz-range-track {
  background: #ddd;
  /* Background color of the track */
  height: 8px;
  /* Height of the track */
  border-radius: 5px;
  /* Rounded corners */
}

.range-input::-moz-range-thumb {
  background: #ffcc00;
  /* Color of the thumb */
  width: 20px;
  /* Width of the thumb */
  height: 20px;
  /* Height of the thumb */
  border-radius: 50%;
  /* Make thumb round */
  cursor: pointer;
  /* Show a pointer cursor when hovering */
}

/* Style for IE/Edge */
.range-input::-ms-track {
  background: transparent;
  /* Remove default background */
  border-color: transparent;
  /* Remove border */
  color: transparent;
  /* Remove color */
  height: 8px;
  /* Height of the track */
  border-radius: 5px;
  /* Rounded corners */
}

.range-input::-ms-fill-lower {
  background: #ddd;
  /* Background color of the lower part of the track */
}

.range-input::-ms-fill-upper {
  background: #ddd;
  /* Background color of the upper part of the track */
}

.range-input::-ms-thumb {
  background: #ffcc00;
  /* Color of the thumb */
  width: 20px;
  /* Width of the thumb */
  height: 20px;
  /* Height of the thumb */
  border-radius: 50%;
  /* Make thumb round */
  cursor: pointer;
  /* Show a pointer cursor when hovering */
}

/* General styling */
.range-input {
  -webkit-appearance: none;
  /* Remove default appearance */
  width: 100%;
  /* Full width */
  background: transparent;
  /* Transparent background */
}

.btn-service-type {
  height: 220px;
}

.hidden {
  display: none;
}

.paint-category {
  height: 100%;
}

.paint-brand {
  width: 200px;
}

.paint-product-content {
  width: 200px;
  height: 250px;
}


/*--------------------------------------------------------------
  # Careers - Banner
  --------------------------------------------------------------*/




/*--------------------------------------------------------------
  # Contact 
  --------------------------------------------------------------*/
.contact-banner {
  background-image: url(./../img/contact-banner.jfif);
  background-size: cover;
  background-repeat: no-repeat;
}

.contact-map {
  width: 100%;
  height: 350px;
}

/*--------------------------------------------------------------
  # Privacy Policy - Banner
  --------------------------------------------------------------*/


/*--------------------------------------------------------------
  # Log In
  --------------------------------------------------------------*/



/*--------------------------------------------------------------
  # Pricing Section
  --------------------------------------------------------------*/



/*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
.footer-img {
  width: 30%;
}

.foot-svg-txt {
  width: 275px;
  height: 40px;
  font-size: 30px;
}

.footer-down-sec {
  background-color: #313131;
}





.de-number input.disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}