.navbar {
background-image: linear-gradient(90deg, rgb(9, 40, 44), rgb(20, 204, 218));
z-index:999;
}

.dropdown-menu {
    background-image: linear-gradient(90deg, rgb(9, 40, 44), rgb(20, 204, 218));
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  background-color: #122425;
}


#header {
    display: grid;
    align-items: center;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
    position: static;
    top: 0;
    
    
}

.box-paket {
    box-shadow: 2px 6px 6px rgba(11, 81, 94, 0.3);
}

.my-btn {
    background-image: linear-gradient(90deg, rgb(9, 40, 44), rgb(20, 204, 218));
    color: aliceblue;
}
.my-btn:hover {
    box-shadow: 0px 1px 18px #021a1d;
}


.underline-title {
    background: -webkit-linear-gradient(right,  rgb(20, 204, 218), rgb(9, 40, 44));
    height: 3px;
    margin: -1.1rem auto 0 auto;
    width: 90%;
  }
  

/* CARDDDD */
.mycard {
transition: ease-in-out 0.3s;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}


.mycontainer {
  transition: ease-in-out 0.3s;
}

/* .myshadow {
  box-shadow: 7px 10px 5px rgb(37, 39, 39);
} */

 .myimg {
  border-style: solid;
  border-color: #122425;
  border-width: 1px;
  border-radius: 7px;
  box-shadow: 7px 10px 5px rgb(37, 39, 39);
  
 }

 @keyframes vibrate {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-1deg); }
  20% { transform: rotate(1deg); }
  30% { transform: rotate(0deg); }
  40% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  60% { transform: rotate(0deg); }
  70% { transform: rotate(-1deg); }
  80% { transform: rotate(1deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(-1deg); }
}

 .myimg:hover {
    animation: vibrate 2s;
    animation-iteration-count: infinite;
  }


#wamelayang {
    width: 50px;
    z-index: 99;
    position:fixed;
    top:200px;
    right:1px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:x-small;
    color: rgb(12, 12, 12);
    padding: 3px;
    margin: right 2px;
    align-items: center;
}

.waback {
 background-color: rgb(181, 184, 184);
 opacity: 0.3;
 height: 110px;
 font-display:inherit;
}

.wafront {
    width: 50px;
    z-index: 99;
    position:fixed;
    top:205px;
    right:1px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:x-small;
    color: rgb(12, 12, 12);
    align-items: center;
    display: inline-block;
    font-family: sans-serif;
    text-decoration: none;
    text-align: center;
    margin-top: 2px;
    animation: glowing 500ms infinite;
   }

   @keyframes glowing {
    0% {
        text-shadow:#2ba805 ;
        color: #463112;
    }
    50% {
      color: #49e819;
      text-shadow: 0 0 20px #49e819;
    }
    100% {
      color: #2ba805;
      text-shadow: 0 0 5px #2ba805;
    }
  }

  .zoom {
    padding: 1px;
    transition: transform .2s; /* Animation */
    width: 27px;
    height: 27px;
    margin: 0 auto;
  }
  
  .zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }