html{
    scroll-behavior: smooth;
}
.responsive_logo img{
    height: 40px;
    }
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
    .header{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 2;
        top: 0;
        bottom: initial;
    }
 /* Change background header */
.scroll-header{
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
    background-color: var(--body-color);
}
/*==================== NAV ====================*/
@media (max-width: 769px) {
    .nav{
        display: none;
    }
    .back-to{
        display: flex;
    }
}
@media (min-width: 770px) {
    .nav{
        display: flex;
    }
    .back-to{
        display: none;
    }
        .bawahan{
            display: none;
        }
}
    .nav{
        height: var(--header-height);
        justify-content: space-between;
        align-items: center;
    }
    .nav{
        height: calc(var(--header-height) + 1.5rem);
        column-gap: 1rem;
    }
    .nav__list{
        display: flex;
        column-gap: 2rem;
    }
    .nav__menu{
        margin-left: auto;
    }
    .nav__link{
        color: var(--black-white);
        font-size: var(--h9);
    }
    .nav__link:hover{
        color: var(--pink);
    }
    .active-link{
        color: var(--pink);
        font-weight: bold;
        padding-bottom: 4px;
    background-image: linear-gradient(to right, var(--pink), var(--pink));
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    }






/* start bottom */
.icon_color{
 color: var(--pink);
}
@media (max-width: 769px) {
    .bawahan{
        width: 100% !important;
        z-index: 2;
        position: fixed;
        bottom: 0px;
        padding-top: 10px;
        height: 56px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0px -4px 3px rgb(27 27 24 / 8%);
        background-color: var(--body-color);
      }

      .bawah_link{
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--black-white);
        text-decoration: none;
        font-size: var(--h11);
        color: var(--black-white);
      }
      .bawah_link:hover{
        color: var(--pink);
      }
      .active_bawah_link{
          color: var(--pink);
          font-weight: bold;
      }

      .bawah_icon{
          font-size: 1rem;
          background-color: var(--icon-grey);
          width: 2rem;
          height: 2rem;
          color: var(--white);
          border-radius: 100%;
          text-align: center;
          padding-top: .5rem;
      }
      .active_bawah_icon{
        background-color: var(--pink);
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.2rem;
      }
    }
      /* end bottom */



      /* footer */

  .gantigambar{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sosmed{
    align-items: center;
    color: var(--pink);
    text-decoration: none;
    font-size: 1.2rem;
    font-family: var(--body_font2);
  }
  .sosmed:hover{
    color: var(--pink);
  }
/* scroll */

/*========== SCROLL BAR ==========*/
.scrollup{
    position: fixed;
    right: 1rem;
    bottom: -20%;
    background-color: var(--pink-dark);
    opacity: .8;
    padding: 0 .3rem;
    border-radius: .4rem;
    z-index: var(--z-tooltip);
    transition: .4s;
}

.scrollup:hover{
    background-color: var(--pink-dark);
}

.scrollup__icon{
    font-size: 1.5rem;
    color: #fff;
}
.show-scroll{
    bottom: 4rem;
}



/* start hero */
.hero_judul{
    color: var(--black-white);
    font-weight: 700;
    font-size: var(--h1);
    line-height: normal;
}
.hero_menu{
    color: var(--black-white);
    font-weight: 700;
    font-size: var(--h2);
    line-height: normal;
}
.hero_subjudul{
    font-size: var(--h8);
    color: var(--grey-font);
}
.button_cto {
    background-color: var(--pink);
    padding: .6rem 1.5rem;
    font-size: var(--h4-font-size);
    border-radius: 8px;
    text-decoration: none;
}
  .button_cto_ray {
    border-color: var(--pink);
    box-shadow: 0 0 40px 40px var(--pink) inset,  0px 4px 4px rgba(0, 0, 0, .25);
    transition: all 150ms ease-in-out;
  }

/* end hero */


/* footer */
.sosmed{
    align-items: center;
    color: var(--black-white);
    text-decoration: none;
    font-size: 1.2rem;
  }
/* end footer */
.dropdown:hover>.dropdown-menu {
    display: block;
    background-color: var(--bg-grey);
}
  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
    margin-top: 1rem;
  }
  .drop_a{
      margin-left: 1rem;
      background-image: none;
  }
  .drop_a:hover{
      font-weight: bold;
  }
/*  */
.modalKtlg{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  .InMdlKtlg{
    background-color: var(--body-color);
    border-radius: 12px 12px 0 0;
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    left: 0;
    bottom: 56px;
    width: 100%; /* Full width */
    overflow: auto; /* Enable scroll if needed */
  }
  .katalog_icon {
    background-color: var(--pink);
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.katalog_icon i{
    color: white;
}
.katalog_link:hover{
    text-decoration: none;
    color: var(--pink);
}
.judul-katalog{
    font-size: var(--h8);
    font-weight: 600;
}