.menu_main {
    background-color: #333; /* צבע רקע לתפריט הראשי */
    position: relative; /* נדרש כדי למקם את התפריט המשנה */
    text-align: center;
}

.menu_main li {
    display: inline;
    margin-right: 0px;
}

.menu_main ul {
    list-style-type: none; /* מסיר את הנקודות לפני הפריטים */
    padding: 0; /* מסיר רווחים פנימיים */
    margin: 0; /* מסיר רווחים חיצוניים */
}

.menu_main > ul > li {
    position: relative; /* מאפשר לתפריט המשנה להיות ממוקם בהתאם */
    display: inline-block; /* ממקם את הפריטים בשורה */
}

.menu_main a {
    display: block; /* ממקם את הקישורים בתור בלוק */
    color: #ffb4db; /* צבע טקסט */
    padding: 10px 41px; /* מרווח פנימי */
    text-decoration: none; /* מסיר קו תחתון מהקישור */
    transition: background-color 0.3s; /* מעבר חלק בעת שינוי צבע הרקע */
	text-shadow: 0 0 2px rgba(255, 180, 219, 0.7), 0 0 4px rgba(255, 180, 219, 0.7), 0 0 6px rgba(255, 180, 219, 0.7);
}

.menu_main a:hover {
    background-color: #555; /* צבע רקע כשעוברים מעל */
}

.sub-menu {
    display: none; /* מציג את תפריט המשנה רק כשצריך */
    position: absolute; /* ממקם אותו מעל התפריט */
    top: 100%; /* מיקום התפריט המשנה מתחת לתפריט הראשי */
    right: 0; /* מתחיל מהקצה השמאלי */
    background-color: #444; /* צבע רקע לתפריט המשנה (שונה מהתפריט הראשי) */
    z-index: 1; /* מבטיח שהתפריט המשנה יהיה מעל לתפריט הראשי */
    border-radius: 5px; /* פינות מעוגלות לתפריט המשנה */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* צל לתפריט המשנה */
	width: 110%;
}

.menu_main > ul > li:hover .sub-menu {
    display: block; /* מציג את תפריט המשנה כשמעבירים מעל */
}

.sub-menu li {
    width: 200px; /* רוחב קבוע לתפריט המשנה */
}

.sub-menu a {
    padding: 10px; /* מרווח פנימי לתפריט המשנה */
    color: white; /* צבע טקסט לתפריט המשנה */
    transition: background-color 0.3s; /* מעבר חלק בעת שינוי צבע הרקע */
	text-align: right;
}

.sub-menu a:hover {
    background-color: #555; /* צבע רקע כשעוברים מעל בתפריט המשנה */
}

a {
    text-decoration: none; /* Remove underline */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center icon and text vertically */
}

a:hover {
    color: #ffb4db; /* Change color on hover */
}

/* עיצוב למובייל */
@media (max-width: 768px) {
    .menu_main > ul {
        display: flex; /* תצוגה גמישה לתפריט */
        flex-direction: column; /* מייעד את הפריטים לעמוד אחד מתחת לשני */
    }

    .menu_main > ul > li {
        display: block; /* כל פריט בתור בלוק */
    }

    .sub-menu {
        position: relative; /* משנה את המיקום למובייל */
        display: none; /* חבוי עד שמעבירים מעל */
        width: 100%; /* תופס את כל רוחב המסך */
        top: 0; /* מתחיל מאותו המקום של התפריט הראשי */
    }

    .menu_main > ul > li:hover .sub-menu {
        display: block; /* מציג את תפריט המשנה במובייל כשמעבירים מעל */
    }
    
    .menu_main ul {
        flex-direction: row; /* גורם לתפריט להיות לרוחב במצב נייד */
        overflow-x: auto; /* מאפשר גלילה אופקית אם התפריט ארוך מדי */
		place-content: center;
		font-size: 14px;
    }

    .menu_main li {
        margin: 0;
    }

    .menu_main a {
        white-space: nowrap; /* מונע מהטקסט לשבור שורות */
		padding: 8px;
    }
}