html,
body {
  height: 100%;
  font-family: "Montserrat";
}
.loader{
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.loader .hidden{
  animation:fadeOut 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeOut{
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
img {
  max-width: 100%;
  height: auto;
}
p {
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: 400;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  line-height: 0px;
  display: unset;
}
h3 {
  padding: 10px;
  width: 100%;
  border:1px solid red;
}
button {
  width: 125px;
  margin: 3px;
  font-weight: 500;
  padding:6px;
  text-align: left;
}
.heddiv h4 {
  border-bottom: 2px solid #fff;
  padding-bottom: 10px;
}
.finaldiv a {
  color: #fff;
  font-weight: bold;
}
.licdi {
  width: 100%;
  position: relative;
  background: #212529;
  padding: 10px;
}
.liccon {
  color: #00bcd4;
  padding-top: 7px;
}
.pad60 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.hederTopArea {
  width: 100%;
  height: 60px;
  background-color: darkturquoise;
  text-align: center;
  position: relative;
}
.heder-manu .manu-nav {
  float: right;
}
.heder-manu .manu-nav li {
  font-size: 20px;
  display: inline-block;
  line-height: 60px;
  padding: 0px 10px;
  transition: background 1s;
  color: #fff;
}
.heder-manu .manu-nav li a {
  color: #fff;
  text-decoration: none;
}
.heder-manu .icon {
  left: 10px;
  float: left;
}
.slider .imgdetail {
  background: darkturquoise;
  text-align: center;
}
.slider .imgdetail span {
  color: yellow;
}
.hedding .heddiv {
  height: 100%;
  text-align: center;
  background: #0c5460;
  padding: 15px;
  color:aqua;
  box-shadow: 10px 10px 5px -3px #ccc;
}
.hedding .heddiv .biodata {
  padding: 15px 15px;
  line-height: 15px;
  border: 1px solid #fff;
  margin-bottom: 15px;
}
/* code product */
.granitediv img,
.smallkitchen .kitimg img,
.doordivarea .doordiv img {
  height: 470px;
}
.codeproduct {
  height: 30px;
  background: darkturquoise;
  padding: 3px;
  border-radius: 4px;
  border: 1px solid #888;
  position: absolute;
  z-index: 9999;
}
/* owl-carousel nav */
.designSeat .paneldeg img,
.granitedivarea .granitediv img,
.wallcup .wacup,
.kitchen .kitimg img,
.smallkitchen .kitimg img,
.windowdivarea .windowdiv img,
.boxdivarea .kitchen img,
.doordivarea .doordiv img,
.curtaindivarea .curtaindiv img,
.safetdivarea .safetdiv img,
.stairdivarea .stairdiv img {
  position: relative;
}
.designSeat .owl-nav,
.granitedivarea .owl-nav,
.wallcup .owl-nav,
.kitchen .owl-nav,
.smallkitchen .owl-nav,
.windowdivarea .owl-nav,
.boxdivarea .owl-nav,
.doordivarea .owl-nav,
.curtaindivarea .owl-nav,
.safetdivarea .owl-nav,
.stairdivarea .owl-nav {
  animation:colorchange 2s infinite;
  top: 80%;
  color: #dc3545;
  left: 40%;
  font-size: xxx-large;
  position: absolute;
}
.wallcup .wacup p,
.kitchen .kitimg p,
.smallkitchen .kitimg p,
.granitedivarea .granitediv p,
.windowdivarea .windowdiv p,
.boxdivarea .boxdiv p,
.doordivarea .doordiv p,
.curtaindivarea .curtaindiv p,
.safetdivarea .safetdiv p,
.stairdivarea .stairdiv p {
  position: absolute;
  color: white;
  z-index: 1;
  left: 16%;
  font-size: 20px;
  background: darkturquoise;
  border-radius: 4px;
  border: 1px solid #888;
  bottom: 0px;
}
.whatssvg{
  animation:colorchange 2s infinite;
}
@keyframes colorchange{
  /* 25%{color:darkturquoise;}
  50%{color:red;} */
  from {color: #dc3545;}
  to {color: darkturquoise;}
}