body {
    font-family: Arial, sans-serif;
    margin: 0;
  }
/* -------------------------Slide------------------------------------ */
.container-cart{
    margin-top: -4%;
  }
.carousel-inner{
  margin-top: 2%;
}
.carousel-inner img{
    height: 400px;
}
#carouselExampleSlidesOnly{
  width: 90%;
  margin-left: 5%;
  margin-bottom: 5%;
}

.DLFenquire{
  display: flex;
  img{
    width: 50%;
    height: 400px;
  }
  .DLFenquireDetails{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 50%;
    height: 400px;
    padding: 5%;
    /* margin-left: 10%; */
    background-color: rgb(248, 193, 120);
    h2{
      text-decoration: underline 1px;
      animation-name: slideLeft;
      animation-duration: 0.5s;
    }
    h3{
      animation-name: slideLeft;
      animation-duration: 1s;
    }
    h5{
      animation-name: slideLeft;
      animation-duration: 2s;
    }
    p{
      margin-bottom: 10%;
      animation-name: slideLeft;
      animation-duration: 2.5s;
    }
    a{
      text-decoration: none;
      border: solid 1px;
      padding: 2%;
      color: rgba(163, 75, 2, 0.795);
    }
    a:hover{
      background-color: rgba(163, 75, 2, 0.795);
      color: white;
    }
    img{
      display: none;
      border-radius: 10%;
      margin-top: 25%;
      width: 100%;
      height: 150px;
      animation-name: opacity;
      animation-duration: 3s;
    }
  }
}
.WBMenquire{
  height: 400px;
  display: flex;
  background-color: rgb(34, 63, 90);
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  .WBMenquireDetails{
    width: 50%;
    .WBMtitle{
      text-align: center;
      /* width: 50%; */
      animation-name: dropDown;
      animation-duration: 1s;
      h1{
        margin-top: 2%;
        /* padding-top: 2%; */
        font-size: x-large;
        color: aliceblue;
      }
      p{
        font-size: smaller;
        margin-top: -1%;
        color: rgb(161, 253, 118);
        text-decoration: underline overline 1px;
      }
    }
    .WBMdetails{
      width: 100%;
      img{
        /* border-radius: 10%; */
        margin-left: 60%;
        margin-top: -25%;
        width: 250px;
        height: 250px;
        opacity: 0.9;
        animation-name: opacity;
        animation-duration: 5s;
      }
      ul{
        width: 100%;
        li{
          color: rgb(255, 255, 255);
          font-size: 90%;
          line-height: 30px;
          animation-name: slideRight;
        }
      }
      a{
        text-decoration: none;
        position: absolute;
        margin-top: 2%;
        margin-left: 2%;
        border: solid 1px;
        padding: 0.5%;
        color: rgb(161, 253, 118);
      }
      a:hover{
        background-color: rgb(61, 88, 48);
        color: white;
      }
      }
    }
  .WBMImg{
    width: 50%;
      img{
        width: 100%;
        height: 100%;
        opacity: 0.9;
      }
    }
  }
.StonesEnquire{
  display: flex;
   a{
    width: 100%;
  }
  .backdrop{
    position: absolute;
    margin-top: 20%;
    width: 100%;
    height: 20%;
    opacity: 0.5;
    background-color: rgb(44, 119, 84);
    animation-name: slideRight;
    animation-duration: 1s;
  }
  .StonesEnquireDetails{
    text-align: center;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 10%;
    margin-top: 20%;
    color: aliceblue;
    position: absolute;
    p, h5{
      animation-name: slideLeft;
      animation-duration: 3s;
    }
  }
}

@media screen and (max-width: 990px){
 .WBMenquire{
  .WBMenquireDetails{
    .WBMdetails{
      img{
        width: 150px;
        height: 150px;
        margin-top: 10%;
        margin-left: 50%;
      }
      ul{
        li{
          font-size: 50%;
        }
      }
    }
  }
 }
} 

@media screen and (max-width: 690px){
  .carousel-inner{
    margin-top: 24%;
  }
  .DLFenquire{
   h2{
    font-size: 80%;
   }
   h3{
     font-size: 70%;
    }
    h5{
      font-size: 50%;
    }
    p{
      font-size: 40%;
    }
    a{
      font-size: 60%;
    }
    .DLFenquireDetails{
      img{
        display: block;
      }
    }
  }
  .WBMenquire{
   .WBMenquireDetails{
     .WBMtitle{
       h1{
         font-size: 70%;
       }
       p{
        font-size: 30%;
       }
     }
    .WBMdetails{
      ul{
        li{
          font-size: 40%;
          line-height: 20px;
        }
      }
      a{
        font-size: 60%;
      }
      img{
        margin-left: 5%;
      }
    }
   }
  }
  .StonesEnquire{
    font-size: smaller;
    .backdrop{
      margin-top: 70%;
    }
    .StonesEnquireDetails{
      margin-top: 70%;
    }
  }
}

@keyframes slideLeft{
  from{transform: translatex(300%)}
}
@keyframes slideRight{
  from{transform: translatex(-300%)}
}
@keyframes opacity{
  from {
    opacity: 0%; 
  }
  to {
    opacity: 90%; 
  }
}
@keyframes dropDown{
  from{transform: translatey(-300%)}
}

/* ---------------------------About---------------------------------- */
.about{
  margin-top: 8%;
  text-align: center;
  margin-left: 10%;
  width: 80%;
  .about-logo{
    letter-spacing: 4px;
    line-height: 1.8;
    border-bottom: solid 1px;
    font-size: small;
    P{
      font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
  }
}
/* .about-img{
    display: flex;
    justify-content: space-between;
    padding: 0%;
    border-bottom: solid 1px;
    margin-bottom: 5%;
    h3{
      font-size: medium;
    }
}
#coverLink{
  width: 40%;
  border-radius: 50%;
}
#textChange:hover{
  img{
    opacity: .5;
  }
  h3{
    color:blueviolet;
    font-size: large;
  }
} */


@media screen and (max-width: 991px){
    .container-cart{
        margin-left: 85%;
        margin-top: -10%;
      }
}
@media screen and (max-width: 600px){
  .about{
    margin-top: 30%;
    margin-left: 2%;
    width: 96%;
    p{
      font-size: 50%;
    }
  }
  .about-logo{
    font-size: x-small;
    letter-spacing: 1px;
    line-height:1.5;
  }
  .container-cart{
    margin-left: 86%;
    margin-top: -10%;
  }
  #textChange{
    h3{
      font-size: small;
    }
  }
}
/*------------------------procductlist----------------------------- */
.listProduct{
  padding: 2%;
  h2{
    width: 90%;
    margin-left: 5%;
    padding: 1%;
    font-size: x-large;
    em{
      float: right;
      font-size: 50%;
      margin-top: 2%;
      a{
        text-decoration: none;
      }
    }
  }
}
#category1-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#category2-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#category3-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#category4-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.product-card{
  border: solid .5px rgba(128, 128, 128, 0.199);
  /* box-shadow: 2px 2px 5px 2px rgba(46, 45, 45, 0.5); */
  border-radius: 10%;
  width: 95%;
  text-align: center;
  margin-bottom: 5%;
  img{
    width: 60%;
  }
  h3{
    font-size: large;
  }
  p{
    font-size: larger;
  }
}

@media screen and (max-width: 600px){
  .listProduct{
    h2{
      font-size: medium;
    }
  }
  #category1-container{
    grid-template-columns: repeat(2, 1fr);
  }
  #category2-container{
    grid-template-columns: repeat(2, 1fr);
  }
  #category3-container{
    grid-template-columns: repeat(2, 1fr);
  }
  #category4-container{
    grid-template-columns: repeat(2, 1fr);
  }
  .product-card{
    width: 95%;
    h3{
      font-size: small;
    }
    p{
      font-size: medium;
    }
  }
}

/* -----------------------info-------------------------------------- */
.social-links{
    color: whitesmoke;
    background-color: rgb(38, 47, 58);
      a{
        color: whitesmoke;
        i{
          color: rgb(5, 146, 146);
        }
      }
    .contact-links{
        :hover {
          color:rgb(177, 106, 0);
        }
    }
    .quick-links{
        :hover {
          color: rgb(177, 106, 0);
        }
      }
}

/* ----------------------footer------------------------------------ */
.terms{
    color: whitesmoke;
    background-color: rgba(44, 44, 44, 0.527);
    .social-icons{
        background-color: rgba(44, 44, 44, 0);
        a:hover{
        color: rgb(177, 106, 0);
        }
    }
    footer{
        a{
            color: rgb(190, 188, 188);
        }
    
    }
}