body{
    background-color: black;
}
nav {
    background-color: rgb(255,255,255, 15%);
}
.menu:hover {
  color: rgb(186,140,99)!important;
  text-decoration: underline;
}
.linkAboutUs:hover{
  color:rgb(215, 186, 137)!important;
}
#environment h1, #works h1, #products h1, #contact h1 {
    font-size: 85px;
    text-align:center
}
.card {
    border: 2px solid rgb(186,140,99)!important;
    background-color: black!important;
    width: 14rem;
    backdrop-filter: blur(30px);
}
.card .card-body .card-title, .card .card-body a {
    color: white!important;
}
.card-title{
  font-size: 1.2rem;
}
.btn {
   border-radius: 15px;
   background-color: rgba(255,255,255,0.1);
   border: 1px solid rgba(255,255,255,0.1);
   backdrop-filter: blur(30px);
   color: rgba(255,255,255,0.8);
   font-size: 14px;
   letter-spacing: 2px;
   /* border-color: gold!important; */
  /* background-color: transparent!important; */
}
.btn:hover, .btn:active{
  background-color: rgba(255,255,255,0.2);
}
.card:hover{
  background-color: white;
}
.card, .gambar {
  overflow: hidden;
}
.card-img-top {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
}
.card-img-top:hover{
  transform: scale(2);
}
.circle {
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.1);
  display: inline-flex;
  border-radius: 50%;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}
.circle a :hover{
  color : rgb(186,140,99);
}

@media only screen and (max-width: 600px) {
  .judul{
    font-size: 50px!important;
  }
  #carousel, .carousel-item img{
    height: 35vh !important;
  }
}