html{
  font-family: "Bricolage Grotesque", sans-serif;
  font-size : 20px;
  /* text-shadow: -0.8px -0.8px 0 #fff, 0.8px -0.8px 0 #fff, -0.8px 0.8px 0 #fff, 0.8px 0.8px 0 #fff; */
}

body{
  font-family: "Bricolage Grotesque", sans-serif;
  color:#07ab4e;
}

footer{
  background-color:rgb(139, 184, 41);
  color:rgb(230, 235, 230);
  padding:2dvh;
}

footer p{
  font-size:14px;
}

footer p a{
  text-decoration:none;
  color:rgb(85, 117, 15);
}

.sosmed{
  color:rgb(230, 235, 230);
  font-size:12px;
  text-decoration:none;
}

.sosmed svg{
  fill: #ffffff;
}

.sosmed svg:hover{
  fill:rgb(85, 117, 15);
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(255, 255, 255, 0.7));
  filter: drop-shadow( 3px 3px 2px rgba(255, 255, 255, 0.7));
}

h1{
  font-size : 1.7rem;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
  text-align:center;
  text-transform:uppercase;
  font-weight:700;
}

h2{
  font-size : 1.2rem;
  /* text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; */
  background-color:#07ab4e;
  padding:1dvh;
  color:rgb(255, 255, 255);
  border-radius:2dvh;
}


.main-bg{
  background: #FFF700;
  background: linear-gradient(173deg,rgba(255, 247, 0, 0.9) 0%, rgba(189, 234, 32, 0.9) 43%, rgba(180, 232, 36, 0.9) 49%, rgba(170, 230, 41, 0.9) 76%), url("../assets/image/overlay.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card{
 background-color: rgba(248, 248, 248, 0.4);  
 backdrop-filter: blur(2px);
 border:none;
 color:#07ab4e;
}

.img-car{
  width: 35%;
}


.img-thumbnail{
  width: 30%;
  height: auto;
  background:none;
  border:none;
  margin:0;
  padding:0;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
  filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
}

.img-produk{
  width: 80%;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
  filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
}

.img-key{
  width: 80%;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
  filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
}

.img-usp{
  width: 55%;
  height:auto;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
  filter: drop-shadow( 3px 3px 2px rgba(106, 146, 20, 0.4));
}

.btn-usp{
  background-color:rgb(237, 50, 53);
  color: #fff;  
}

.btn-usp:hover{
  border-color:rgb(237, 50, 53);
  color: rgb(237, 50, 53); 
  -webkit-filter: drop-shadow( 3px 3px 5px rgba(2, 2, 2, 0.4));
  filter: drop-shadow( 3px 3px 5px rgba(0, 0, 0, 0.4));
}

@media only screen and (max-width: 600px) {
  html{
    font-family: "Rubik", sans-serif;
    font-size : 14px;
  }

  .container{
    padding: 5dvh;
  }

  .img-produk{
  width: 100%;
  }

  .img-key{
    width: 100%;
  }

  .img-usp{
    width: 100%;
    height:auto;
  }
}