/* ================= MOBILE ================= */
@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        height: 100%;
        z-index: 2000;
    }

        .sidebar.active {
            left: 0;
        }

    .main-content {
        margin-left: 0;
    }

    .search-box {
        width: 100%;
        margin: 0 10px;
    }

    .topbar {
        padding: 10px;
    }

    .layout-profile-photo {
        height: 30px;
        width: 30px;
    }
    /*------ birthady wall ------*/
    /*.birthday-wrapper {
        padding: 20px 10px;
        border-radius: 15px;
    }

    .birthday-container {
        padding: 15px;
        border-radius: 15px;
    }

    .birthday-card {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    .wish-btn {
        width: 100%;
        text-align: center;
    }

    .birthday-wrapper .profile-img {
        width: 40px;
        height: 40px;
    }

    .floating {
        width: 70px;
    }

    .balloon-left {
        top: 10px;
        left: -20px;
    }

    .balloon-right {
        bottom: 80px;
        right: -15px;
    }

    .cake-bottom {
        width: 90px;
        bottom: -10px;
        right: 50%;
        transform: translateX(50%);
    }*/
    /*------ profile page -------*/
    .profile-header {
        flex-direction: column !important;
        text-align: center;
    }

        .profile-header .ms-auto {
            margin-top: 10px;
        }

}

@media (max-width:575px) {
    .birthday-card {
        flex-direction: column;
        align-items: center !important;
        gap: 10px;
    }

    .wish-btn {
        text-align: center !important;
    }
    .birthday-card .info span {
        text-align:center;
    }

}