@import url('https://fonts.googleapis.com/css2?family=Grey+Qo&family=Moderustic:wght@300..800&display=swap');

  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: white;
  }

  .container-whyus {
    background-image: url('assets/home/whyusMENTAHAN.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*padding: 20px 20px;*/
    
  }    
  .whyus {
    /*text-align: center;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    color: goldenrod;
    font-weight: 200;
    display: flex;
    font-family: "Playfair Display", serif;
    font-style: italic;

  }

  .whyus-content{
    padding: 3%;
    color: black;
    font-family: "Lora", serif;
    font-weight: 600;

  }

  .whyus-content h5{
    color: black;
  }
 
   
  .container-ourmaterial {
    background-color:white;
  }
  .material {
    font-family: 'Times New Roman', Times, serif;
    color: goldenrod;
    text-align: center;
  }
  


  .card-stack {
    width: 40%;
    margin: auto;
    overflow: hidden;
  }

  .card {
    position: absolute;
    width: 35%;
    height: 40%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, opacity 0.1s ease;
    cursor: pointer;
  }

  .card:nth-child(1) {
    transform: translateX(-160px);
    z-index: 1;
    opacity: 0.7;
  }

  .card:nth-child(2) {
    transform: translateX(-80px);
    z-index: 2;
    opacity: 0.8;
  }

  .card:nth-child(3) {
    z-index: 3;
    opacity: 1;
  }

  .card:nth-child(4) {
    transform: translateX(80px);
    z-index: 2;
    opacity: 0.8;
  }

  .card:nth-child(5) {
    transform: translateX(160px);
    z-index: 1;
    opacity: 0.7;
  }

  @media (max-width: 767px) {
    /*.whyus {*/
        
    /*}*/

    /*.whyus-content h5{*/
    /*  font-size: 90%;*/
    /*}*/
    .container-review {
      padding-bottom:80%;
    }
  
    .card-stack {
      width: 53%;
    }
  
    .card {
      width: 50%;
      height: 30%;
    }

    .card:nth-child(1) {
      transform: translateX(-80px);
      z-index: 1;
      opacity: 0.7;
    }
  
    .card:nth-child(2) {
      transform: translateX(-40px);
      z-index: 2;
      opacity: 0.8;
    }
  
    .card:nth-child(3) {
      z-index: 3;
      opacity: 1;
    }
  
    .card:nth-child(4) {
      transform: translateX(40px);
      z-index: 2;
      opacity: 0.8;
    }
  
    .card:nth-child(5) {
      transform: translateX(80px);
      z-index: 1;
      opacity: 0.7;
    }
  }


  .card-abt hr {
    color: gold;
  }

  #judul {
    color: goldenrod;
  }
  .card-abt p {
    text-align: center;
    color:white
  }

  .container-koleksi h1 {
    text-align: center;
    color: goldenrod;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 5px;
  }


  .container-produk h4 {
    color: whitesmoke;
    margin-left: 2%;
  }
  .card-1 {
    text-align: center;
    margin: 2%;
    /* box-shadow: 0 4px 8px 0 rgba(219, 219, 219, 0.81); */
    transition: 0.3s;
    padding-bottom: 2px;
    max-width: 385px;
  }

  /* .card-1:hover {
    box-shadow: 0 8px 16px 0 rgb(239, 239, 239);
  } */

  .card-1 img {
    width: 385px;
    height: fit-content;
    align-items: center;
    justify-content: center;
    display: flex;
    box-shadow: 0 4px 8px 0 rgba(219, 219, 219, 0.564);
  }

  .card-1 img:hover {
    box-shadow: 0 4px 8px 0 rgba(248, 231, 154, 0.533);
  }

  .card-1 p {
    text-align: center;
    color: goldenrod;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }

  .kategori {
      color: white;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 120%;
      letter-spacing: 2px;
      margin-left: 20px;
  }
  .selectKategori {
      border: 1px solid goldenrod;
      padding: 5px 10px;
      background-color:transparent;
      border-radius:5px;
      color:white;
  }
  .selectKategori option {
      background-color:black;
  }