/* add */
/* Tablet */
@media (max-width: 768px) {

    .sidebar .nav-item .collapse {
        position: relative;
        left: 0;
        z-index: 9999;
        top: 2px;
    }

    .sidebar .nav-item .nav-link {
        text-align: left;
        padding: 0.75rem 1rem;
        width: 100%;
    }

    .sidebar .sidebar-heading {
        text-align: left;
        padding: 0 1rem;
        font-weight: 800;
        font-size: .65rem;
    }

    html {
        font-size: 75%;
    }

    .navbarcustom .navbarcustom-nav .dropdown span {
        font-size: 2rem;
    }

    #hamburger-menu {
        display: inline-block;
    }

    .navbarcustom .navbarcustom-nav {
        position: absolute;
        top: 100%;
        right: -100%;
        background-color: #fff;
        width: 30rem;
        height: 100vh;
        transition: 0.3s;
    }

    .navbarcustom .navbarcustom-nav.active {
        right: 0;
    }

    .navbarcustom .navbarcustom-nav a {
        color: var(--bg);
        display: block;
        margin: 1.5rem;
        padding: 0.5rem;
        font-size: 2rem;
    }

    .navbarcustom .navbarcustom-nav a::after {
        transform-origin: 0 0;
    }

    .navbarcustom .navbarcustom-nav a:hover::after {
        transform: scaleX(0.2);
    }

    .navbarcustom .navbarcustom-logo {
        /* font-size: 1.2rem;
        font-weight: 700;
        color: #fff; */
        max-height: 50px;
        max-width: 50px;
        transition-duration: 0.5s;
    }

    /* add */

    .dropdown {
        color: var(--bg);
        display: block;
        margin: 1.5rem;
        padding: 0.5rem;
        font-size: 2rem;
        cursor: pointer;
    }

    .navbarcustom {
        padding: 1.5rem 7%;
    }

    .navbar-fixed {
        /* background-color: rgba(1, 1, 1, 0.8); */
        border-bottom: 1px solid #389477;
        z-index: 9999;
        background-color: rgba(255, 255, 255, 1);
        padding: 1rem 7%;
        /* -webkit-backdrop-filter: blur(5px); */
        /* backdrop-filter: blur(5px); */
        transition-duration: 0.3s;
    }
}

/* mobile */
@media (max-width: 450px) {
    html {
        font-size: 55%;
    }
}

/* add totop */
.to-top {
    color: #fff;
    position: fixed; /* Fixed/sticky position */
    /* bottom: 20px;
    right: 30px; */
    bottom: 60px; /* Place the button at the bottom of the page */
    right: 0px; /* Place the button 30px from the right */
    z-index: 99999; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: rgb(117, 117, 117); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    /* padding: 1rem; */
    padding: 1rem 1.5rem 1rem 1.5rem;
    font-size: 10px; /* Increase font size */
    /* border-radius: 15%; */
    border-top-left-radius: 15%;
    border-bottom-left-radius: 15%;
    text-align: right;
}

.to-top a {
    font-weight: 700;
}