body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* צבע לבן */
    background-image: url('IMG_6945.JPG'); /* הוספת נתיב לתמונה (העבר לתיקיית הפרויקט) */
    background-size: cover; /* מכסה את כל הרקע */
    background-position: center; /* מיקום מרכזי */
    background-repeat: no-repeat; /* מונע חזרה על התמונה */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* גובה מינימלי */
    position: relative; /* הוספת מיקום יחסי לדף */
}

.transparent-frame {
    position: absolute; /* המיקום של האלמנט */
    top: 1.5%; /* אין מרחק מלמעלה */
    left: 3%; /* אין מרחק מהקצה השמאלי */
    right: 3%; /* אין מרחק מהקצה הימני */
    bottom: 1.5%; /* אין מרחק מלמטה */
    background-color: rgba(255, 255, 255, 0.4); /* רקע שקוף בצבע אפור בהיר */
    border-radius: 15px; /* פינות מעוגלות */
    z-index: 1; /* לוודא שהאלמנט נמצא מעל הרקע */
    padding: 20px; /* ריווח פנימי */
}

.container {
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0); /* רקע שקוף עדין */
    border-radius: 15px;
    box-shadow: 0 400px 800px rgba(0, 0, 0, 0); /* שינויים בשיקוף */
    width: 80%;
    position: relative; /* מאפשר למרכז את התוכן בתנאים שונים */
    z-index: 2; /* מוודא שהכרטיס יהיה מעל השיקוף */
}

.profile {
    position: relative; /* מאפשר מיקום יחסי */
    margin-top: 50px; /* רווח מעל */
}

.profile-img {
    width: 200px; /* רוחב התמונה */
    height: 200px; /* גובה התמונה */
    border-radius: 50%; /* עיגול */
    border: 3px solid white; /* גבול לבן */
    object-fit: cover; /* חיתוך התמונה */
    position: relative; /* מיקום יחסי */
    top: -18px; /* להזיז למעלה ב-20 פיקסלים */
}

.business-name {
    font-family: 'Courgette', cursive; /* סגנון הגופן */
    font-size: 38px; /* גודל טקסט מוגדל */
    position: absolute; /* מיקום יחסי */
    z-index: 2; /* להבטיח שהכיתוב מעל */
    color: white; /* צבע טקסט */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* הצללה קלה */
    left: 50%; /* ממקם את הכיתוב במרכז לרוחב */
    top: 115%; /* מיקום זה יגדיל את המרחק מעל התמונה */
    transform: translate(-50%, -50%); /* מזיז את הכיתוב חצי רוחב וחצי גובה שלו לשמאל ולמעלה */
    white-space: nowrap; /* מונע קפיצה לשורות חדשות */
    -webkit-text-stroke: 1px #2EA7D8; /* הוספת מסגרת תכלת */
}

header h1 {
    font-size: 36px;
    margin: 20px 0 10px 0;
}

header h2 {
    font-size: 20px;
    margin-bottom: 30px;
}

.buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.social-buttons {
    display: flex; /* סידור הכפתורים בשורה */
    flex-direction: row; /* הגדרה לסידור אופקי */
    justify-content: center; /* מרכז את הכפתורים */
    align-items: center; /* מסדר את התוכן במרכז */
    margin-bottom: 20px; /* רווח מתחת לכפתורים החברתיים */
}

.social-button {
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid white;
    color: white; /* צבע האיקון במצב רגיל */
    padding: 10px; /* רווח פנימי קטן יותר */
    margin: 10px 10px; /* הוסף רווח בין הכפתורים עם שינוי למעלה */
    margin-top: 80px; /* תזוזה כלפי מטה (שנה את הערך לפי הצורך) */
    border-radius: 50%; /* עיגול */
    width: 35px; /* גודל הכפתור */
    height: 35px; /* גובה הכפתור */
    display: flex; /* מאפשר למרכז את האימוג'י */
    justify-content: center; /* מרכז את התוכן בתוך הכפתור */
    align-items: center; /* מרכז את התוכן בתוך הכפתור */
    font-size: 34px; /* גודל עבור האימוג'ים */
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none; /* הסרת קו מתחת לכפתור */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* הצללה לסמלים */
    -webkit-text-stroke: 0.7px #2EA7D8; /* הוספת מסגרת תכלת */
}

.social-button:hover {
    background-color: white; /* צבע רקע בעת העברת העכבר */
    color: inherit; /* צבע האיקון יהיה הצבע המקורי שלו */
}

/* צבעים עבור כל כפתור */
.social-button:nth-child(1):hover {
    color: #25D366; /* צבע לוגו וואטסאפ */
}

.social-button:nth-child(2):hover {
    color: #3b5998; /* צבע לוגו פייסבוק */
}

.social-button:nth-child(3):hover {
    color: #25F4EE; /* צבע לוגו טיקטוק */
}

.social-button:nth-child(4):hover {
    color: #C13584; /* צבע לוגו אינסטגרם */
}

.button {
    background-color: rgba(255, 255, 255, 0.5); /* צבע לבן עם שקיפות */
    border: 2px solid white;
    color: #2EA7D8; /* צבע טקסט כחול כהה יותר */
    padding: 4px 30px;
    margin: 15px 0;
    width: 80%;
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    font-size: 23px;
    letter-spacing: 0.7px; /* ריווח בין אותיות */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* הוספת שינוי הצללה */
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.7); /* הצללה עדינה בלבן */
    text-shadow: 0.1px 0.1px 1px rgba(0, 0, 0, 1); /* הצללה לכיתוב */
    -webkit-text-stroke: 0.04px white; /* הוספת מסגרת לבנה */
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.6); /* צבע לבן עם שקיפות גבוהה יותר בעת ריחוף */
    color: #007BBF; /* שינוי צבע הטקסט לתכלת כהה יותר */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); /* הצללה חזקה יותר עם לבן */
    text-shadow: none; /* הסרת הצללה כאשר הכפתור מרחף */
}

/* שינוי צבע הסמלים והוספת מסגרת */
.button i, .button span {
    color: white; /* פנים הסמל בצבע לבן */
    text-shadow: 0px 0px 8px #2EA7D8; /* הוספת מסגרת בצבע כחול כהה */
}

/* לסמלים בפורמט SVG */
.button svg {
    fill: white; /* פנים הסמל בצבע לבן */
    stroke: #2EA7D8; /* הוספת מסגרת כחולה כהה לסמלי SVG */
    stroke-width: 16px; /* עובי המסגרת */
}

/* עיצוב הסמל להוספת איש קשר עם הצללה */
.add-contact-button {
    position: absolute; /* מיקום קבוע ביחס להורה */
    top: 2%; /* מרחק מהחלק העליון של ההורה (תוכל להתאים את הערך לפי הצורך) */
    left: 0%; /* מרחק מהצד השמאלי של ההורה */
    font-size: 23px; /* גודל האייקון */
    color: white; /* צבע לבן לסמל */
    background: none; /* ביטול הרקע */
    border: none; /* ביטול הגבול */
    transition: color 0.3s, text-shadow 0.3s; /* שינוי צבע והצללה בעת ריחוף */
    text-shadow: 0px 0px 4px #2EA7D8; /* הוספת הצללה בצבע כחול כהה */
    height: 50px; /* גובה קבוע לכפתור */
    width: 50px; /* רוחב קבוע לכפתור */
    display: flex; /* תצוגת ה-flex */
    justify-content: center; /* מרכז את התוכן אופקית */
    align-items: center; /* מרכז את התוכן אנכית */
}

/* אפקט ריחוף */
.add-contact-button:hover {
    color: #007BBF; /* שינוי צבע הסמל בעת ריחוף */
    text-shadow: 0px 0px 12px #2EA7D8; /* הגדלת ההצללה בעת ריחוף */
}

/* עבור טאבלטים (לדוגמה, מסכים ברוחב 600px עד 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
    .add-contact-button {
        top: 2%; /* התאם את הערך לפי הצורך */
        left: -1%; /* התאם את הערך לפי הצורך */
    }
}