body {
        background: #212529;
        font-family: "Montserrat", sans-serif;
        margin: 0;
        padding: 0;
    }

    nav {
        background-color: rgba(0, 0, 0, 0.075);
        color: #f1f1f1;
        padding: 4px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* تنسيق الشعار */
    nav .logo img {
        height: 30px; 
        width: 30px;
        border-radius: 50%; 
        object-fit: cover; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    nav .logo img:hover {
        transform: scale(1.1); 
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); 
    }

    .logo-and-telegram {
        display: flex;
        align-items: center;
        gap: 15px; /* مسافة بين الشعار ورابط التليجرام */
    }

    /* تنسيق رابط قناة التليجرام */
    nav .telegram-link {
        color: rgb(255 255 255);
        text-decoration: none; 
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 5px; 
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    nav .telegram-link i {
        font-size: 20px; 
    }

    nav .telegram-link:hover {


        transform: scale(1.05); 
    }

    nav .menu {
        display: flex;
        gap: 20px;
    }

    nav .menu a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px;
        border-radius: 5px;
    }

    nav .menu a:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* Hamburger Menu Style */
    nav .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    nav .hamburger span {
        width: 25px;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
    }

    /* Mobile Responsiveness */
    @media (max-width: 768px) {
        nav .menu {
            display: none;
            flex-direction: column;
            background-color: #4e595d;
            position: absolute;
            top: 100%;
            right: 0;
            width: 100%;
            padding: 10px 0;
        }

        nav .menu a {
            padding: 10px;
            text-align: center;
            width: 100%;
        }

        nav .menu.show {
            display: flex;
        }

        nav .hamburger {
            display: flex;
        }
    }

    /* Content Area */
    div.content {
        background: #fff;
        border-radius: 8px;
        padding: 19px;
        width: 100%;
        max-width: 420px;
        margin: 20px auto;
    }