@media only screen and (max-width: 768px) {
    /* Buttons */

    .light-btn {
        padding: 10px 10px 10px 20px;
        font-size: 1rem;
    }


    .light-btn span {
        height: 35px;
        width: 35px;
    }

    .light-btn:hover {
        background-color: black;
        color: white;
    }

    .light-btn:hover span {
        height: 35px;
        width: 35px;
    }


    /* Light trand button */

    .light-btn-trans {
        padding: 10px 10px 10px 20px;
        font-size: 1rem;
    }


    .light-btn-trans span {
        height: 35px;
        width: 35px;
    }

    .light-btn-trans:hover {
        background-color: white;
        color: black;
    }

    .light-btn-trans:hover span {
        height: 35px;
        width: 35px;
    }


    /* Dark Btn */

    .dark-btn {
        padding: 10px 10px 10px 20px;
        font-size: 1rem;
    }


    .dark-btn span {
        height: 35px;
        width: 35px;
    }

    .light-btn-trans:hover span {
        height: 35px;
        width: 35px;
    }


    /* Dark Btn */

    .dark-btn {
        padding: 10px 10px 10px 20px;
        font-size: 1rem;
    }


    .dark-btn span {
        height: 35px;
        width: 35px;
    }

    .dark-btn:hover {
        background-color: #5423e7;
        color: white;
    }

    .dark-btn:hover span {
        height: 35px;
        width: 35px;
    }

    .dark-btn span {
        height: 35px;
        width: 35px;
    }

    .dark-btn:hover {
        background-color: #5423e7;
        color: white;
    }

    .dark-btn:hover span {
        height: 35px;
        width: 35px;
    }

    /* Dark Trans */
    .dark-btn-trans {
        padding: 10px 10px 10px 20px;
        font-size: 1rem;
    }


    .dark-btn-trans span {
        height: 35px;
        width: 35px;
    }

    .dark-btn-trans:hover span {
        height: 35px;
        width: 35px;
    }

    .dark-btn-trans span {
        height: 35px;
        width: 35px;
    }


    .dark-btn-trans:hover span {
        height: 35px;
        width: 35px;
    }
}