/*
Theme Name:		 drh. Magda Rumawas and Associates
Theme URI:		 https://drhmagdarumawasdkk.com
Description:	 drh. Magda Rumawas is a child theme of Blankslate
Author:			 XMTN Studio
Author URI:		 https://xmtn.net
Template:		 blankslate
Version:		 1.0.0
Text Domain:	 drh-magda-rumawas
*/

/* #page-header {
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 100;
} */

img {max-width: 100%; height: auto;}

.btn {font-weight: bold;cursor: pointer;}
.josefin-slab-normal {font-family: 'Josefin Slab', serif;font-weight: normal;}
.josefin-slab-bold {font-family: 'Josefin Slab', serif;font-weight: bold;}

.section-title {font-family: 'Fredoka', sans-serif; font-weight: bold; font-size: 2.3em;color:#cf0202;position: relative;}
.card-title {font-family: 'Fredoka', sans-serif; font-weight: bold;color:#4159a8}

.section-title:before {
  width: 300px;
  height: 80px;
  position: absolute;
  content: '';
  background-image: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 135.7 75.5" style="enable-background:new 0 0 135.7 75.5;" xml:space="preserve"><style type="text/css">.st0{fill:%23FBB040;}</style><ellipse transform="matrix(0.1915 -0.9815 0.9815 0.1915 18.7588 92.5574)" class="st0" cx="65.6" cy="34.9" rx="31.4" ry="64.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  left:-20px;
  top: -10px;
}

#page-header a {color: #4159a8; font-weight: bold;transition: 0.8s ease;font-family: "Fredoka", system-ui;}
#page-header nav {
    background: white;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 76%, rgba(255,255,255,0) 100%);
}
.navbar-brand {display:block;height:80px;}
.navbar-brand img {max-height: 100%; width: auto;}
.navbar .navbar-toggler {width:40px;height:40px}
li.menu-item a:before {
    bottom: -50px;
    transform-origin: left;
  }

li.menu-item a:hover:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 2s cubic-bezier(0.175, 0.885, 0.32, 1) infinite; animation-delay:-0.25s; stroke:%23e0ff00; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B 25%25%7B d:path('M 0 20 L 10 15 L 20 20 L 30 25 L 40 20 ');%0A%7D%0A50%25%7B%0Ad:path('M 0 20 L 10 25 L 20 20 L 30 15 L 40 20  ');%0A%7D%0A75%25%7B%0Ad:path('M 0 20 L 10 15 L 20 20 L 30 25 L 40 20 ');%0A%7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 20 L 10 25 L 20 20 L 30 15 L 40 20' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/40px 40px repeat-x;
    animation: waving 6s linear infinite reverse;
    transform-origin: right;
  }

.menu-item a {
    display: inline-block;
    margin: 20px 0;
    padding: 0 10px;
    position: relative;
    text-decoration: none;
    font-size: 1.3em;
    z-index: 2;
    transition: 0.2s ease-in-out;
}

.menu-item a:hover:before {
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: left;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23e0ff00; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/80px 80px repeat-x;
    -webkit-animation: waving 3s linear infinite;
            animation: waving 3s linear infinite;
    transform: scaleX(1);
  }
  @-webkit-keyframes waving {
    to {
      background-position: 80px 50%, 160px 50%;
    }
  }
  @keyframes waving {
    to {
      background-position: 80px 50%, 160px 50%;
    }
  }
  .menu-item a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80px;
    left: 0;
    bottom: -45px;
    z-index: -1;
    transform: scaleX(0);
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1);
    transform-origin: right;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23e0ff00; stroke-width:2; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 40 40 40 Q 60 40 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 50%/80px 80px repeat-x;
  }

  ul.sub-menu {
    position: absolute;
    max-height: 0;
    overflow: hidden;
    transition: 0.8s ease;
  }

  #hero-carousel {
    position: fixed;
    z-index: -1;
    top: 0;
  }

  .mt-80vh {
    margin-top: 80vh
  }

  .autohide {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
  }

  #homepage-clinic-feature {
    margin-top: -10vh;
  }

  #jadwalSwiper .swiper-slide {transition: 0.8s ease;}
  #jadwalSwiper .swiper-slide:hover {background-color: beige; transition: 0.8s ease;}

  .main-content {
    position: relative;
    z-index: 2;
    margin-bottom: 12vh;
    margin-top: 80vh
  }

  .title-hari-praktek {font-size: 2em;background-color: beige; padding: 10px 20px; border-radius: 20px;border: 1px solid rgba(255,255,255,0);transition: 0.8s ease}
  .swiper-slide:hover .title-hari-praktek {border-color: rgba(255,255,255,1);background-color:white;color:#8f8f65}

  #map {position:absolute;top:0; left:0;right:0;bottom:0;background:grey}

  #whatsapp-button {
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    border: none;
    cursor: pointer;
    transition: 0.8s ease;
  }
  #whatsapp-button img {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
  }
  #whatsapp-button:hover img {
    -webkit-filter: drop-shadow(3px 3px 3px #222);
    filter: drop-shadow(3px 3px 3px #222);
  }

  #whatsapp-button:hover {
    transform:scale(1.3);
  }

  .staff-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    background-color: rgba(245, 245, 220, 0.8);
    transform: translateY(-300%);
    transition: 0.6s ease;
  }

  .grid-item, .grid-item>div {overflow: hidden;}

  .grid-item:hover .staff-detail, .grid-item:focus .staff-detail {transform: translateY(0)}

  #footer {
    position: fixed;
    bottom: 0;
    font-weight: bold;
    z-index: 1;
    background: white;
    background: linear-gradient(0deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 76%, rgba(255,255,255,0) 100%);
  }
  .scrolled-down{
    transform:translateY(-100%); transition: all 0.3s ease-in-out;
  }
  .scrolled-up{
    transform:translateY(0); transition: all 0.3s ease-in-out;
  }

  @media (max-width: 768px) {
    .staff-detail h3 {font-size: 1.2em}
    .main-content {margin-top:20vh}
  }