/*
|--------------------------------------------------------------------------
| WRAPPER
|--------------------------------------------------------------------------
*/

.pm-master-wrapper {

    width: 100%;
    margin: 30px auto;

}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.pm-master-title {

    text-align: center;
    margin-bottom: 30px;

}

/*
|--------------------------------------------------------------------------
| MENU
|--------------------------------------------------------------------------
*/

.pm-master-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

    margin-bottom: 30px;

}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.pm-master-menu button {

    padding: 12px 18px;

    border: none;

    border-radius: 8px;

    background: #808080;

    color: #fff;

    cursor: pointer;

    font-size: 15px;

    transition: all 0.3s ease;

}

/*
|--------------------------------------------------------------------------
| HOVER
|--------------------------------------------------------------------------
*/

.pm-master-menu button:hover {

    background: #666666;

    transform: translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| ACTIVE MENU
|--------------------------------------------------------------------------
*/

.pm-master-menu button.pm-active-menu {

    background: #4f4f4f;

    color: #fff;

    transform: scale(1.03);

    box-shadow:
        0 4px 12px rgba(0,0,0,0.2);

}

/*
|--------------------------------------------------------------------------
| BOX FITUR
|--------------------------------------------------------------------------
*/

.pm-feature-box {

    margin-top: 20px;

    animation: pmFade 0.3s ease;

}

/*
|--------------------------------------------------------------------------
| RESPONSIVE MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .pm-master-menu {

        gap: 10px;

    }

    .pm-master-menu button {

        width: calc(50% - 10px);

        font-size: 14px;

    }

}

/*
|--------------------------------------------------------------------------
| ANIMASI
|--------------------------------------------------------------------------
*/

@keyframes pmFade {

    from {

        opacity: 0;
        transform: translateY(10px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}