.wrapper {
        padding: 20px;
    }

    .sidebar {
        height: 100%;
        width: 380px;
        position: absolute;
        right: 200px;
        padding-top: 20px;
        overflow-x: hidden;
        border-left: 1px solid rgba(207, 207, 207, 0.575);
        direction: rtl;
        text-align: right;
    }

    .sidebar .menu-btn {
        padding: 10px 15px;
        text-decoration: none;
        font-size: 1rem;
        color: #4f5664;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar .sub-menu {
        padding: 10px 15px;
        text-decoration: none;
        font-size: 0.87rem;
        color: #41474f;
        display: block;
        direction: rtl;
        text-align: right;
    }

    .sidebar a:hover {
        background-color: #ddd;
    }

    .content {
        margin-right: 20%;
        padding: 20px;
        direction: rtl;
        text-align: right;
    }

    .content h2 {
        margin-top: 0;
    }

    .gap {
        gap: 0px 10px;
    }

    .parent {
        display: grid;
        grid-template-columns: 2fr 2fr;
        grid-template-rows: repeat(2fr, 2fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }


    .max-w {
        max-width: 80%;
    }

    .font-sm {
        font-size: 15px;
    }

    .search-bar {
        border: 1px solid rgba(207, 207, 207, 0.575);
        display: flex;
        align-items: center;
        max-width: 90%;
        margin: 0 auto;
        border-radius: 10px;
    }

    .form-control {
        border: none;
        background: transparent;
    }

    .form-control:focus-within {
        outline: none !important;
        outline-style: none !important;
    }

    .fa-magnifying-glass {
        border-radius: 10px;
        padding: 12px 25px;
        background: #ffa800;
        height: 100%;
        color: gray;
    }

    .fa-question {
        color: rgba(255, 196, 0, 0.767);
        padding: 4px 7px;
        background: rgba(255, 230, 0, 0.767);
        border-radius: 50%;
    }

    @media (min-width: 1240px) {
        .sidebar {
            display: block;
            width: 20%;
            right: 80px;
        }
    }

    @media (max-width: 1440px) {
        .sidebar {
            display: block;
            width: 20%;
            right: 10px;
        }
    }

    @media (max-width: 1040px) {
        .sidebar {
            position: relative;
            width: 100%;
            height: auto;
            display: block;

            border-left: none;
            border-bottom: 1px solid rgba(207, 207, 207, 0.575);
            padding-bottom: 20px;
            margin-bottom: 20px;
        }

        .content {
            margin-right: 0;
            padding: 20px;
        }
    }