/* ==========================================================================
   🌐 הגדרות כלליות וגוף האתר
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
    background-color: #f9f9f9;
}

/* 🌐 קונטיינר גלובלי אחיד לכל עמודי האתר */
.page-body-container {
    max-width: 1200px;
    margin: 40px auto; /* מרווח נקי ואחיד מלמעלה ומלמטה לכל העמודים */
    padding: 0 30px;   /* מרווח ביטחון מהצדדים שלא יידבק במסך */
    box-sizing: border-box;
}
h2 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin: 40px 0 10px 0; /* יוצר מרווח יפה מהמלבנים למעלה ומקרב אותה למלבן הלבן */
    font-family: 'Heebo', sans-serif;
}
h3 {
    font-size: 26px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 15px 0;
}

/* 🔴 כותרת גלובלית אחידה לכל עמודי האתר */
.page-custom-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 45px;
}


.page-custom-header h1 {
    font-size: 34px;
    font-weight: 700;
    color: #000000;
    margin: 0 25px;
    white-space: nowrap;
    font-family: 'Heebo', sans-serif;
}

.page-custom-header .red-line {
    flex-grow: 1;
    height: 3px;
    background-color: #e51e25;
    max-width: 250px;
}

/* 🟢 הכתב האפור והמודגש עם תמונות בימין */
.content-text-block {
    padding-left: 15px;
    box-sizing: border-box;
}

.content-text-block p {
    font-size: 16.5px;
    color: #777777;
    line-height: 1.65;
    margin: 8px 0 15px 0;
    text-align: left;
    font-family: 'Heebo', sans-serif;
}

.content-text-block .intro-bold {
    font-weight: 700;
    color: #555555;
}
.content-text-block img {
    width: 250px;
    float: right;       /* דוחף את התמונה לימין והטקסט יזרום משמאלה */
    margin-left: 20px;  /* מרווח קטן משמאל כדי שהטקסט לא יידבק לתמונה */
    margin-right: 80px;
    margin-bottom: 10px;
}


/* ==========================================================================
   תפריט ניווט עליון (Navbar) ולוגו
   ========================================================================== */
.navbar {
    position: relative; /* מאפשר ללוגו ולטלפון להתיישר לפיו */
    display: flex;
    background-color: black;
    gap: 50px;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
    z-index: 5; /* שומר על הבר מעל הבאנר */
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Heebo', sans-serif;
}

.toplogo {
    position: absolute;
    top: 0;
    left: 20px; /* מרווח קל מהצד השמאלי של המסך */
    z-index: 10; /* מעלה את הלוגו מעל שכבת התמונה */
}

.toplogo img {
    height: 80px; /* הלוגו יבלוט בצורה יפה כלפי מטה מעל התמונה */
    display: block;
}

/* כפתור הטלפון בצד ימין למעלה */
.top-phone-container {
    position: absolute;
    top: 28px;
    right: 20px;
    display: flex;
    align-items: center;
    font-family: sans-serif;
    z-index: 9999;
}

.top-phone-btn {
    display: inline-flex;
    align-items: center;
    background-color: #e51e25; /* האדום של הלוגו */
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 10px;
    transition: background-color 0.25s ease;
}

.top-phone-btn:hover {
    background-color: gray; /* משתנה במעבר עכבר */
}
/* עיצוב סרגל הניווט הכללי */
.navbar {
    background-color: #000; /* רקע שחור */
    padding: 15px 0;
}
/* ==========================================================================
   🖤 אזור פוטר וטופס יצירת קשר (Footer & Contact Form)
   ========================================================================== */
.site-footer {
    background-color: #000000; /* רקע שחור מלא */
    padding: 60px 20px 20px 20px;
    color: #ffffff;
    font-family: 'Heebo', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.footer-container {
    max-width: 850px; /* רוחב ממוקד שמחזיק את הטופס יפה במרכז המסך */
    margin: 0 auto;
    text-align: center;
}

/* כותרות הפוטר */
.footer-main-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.footer-subtitle-box {
    margin-bottom: 40px;
}

.footer-subtitle-box p {
    font-size: 20px;
    margin: 5px 0;
    font-weight: 400;
}

/* עיצוב שדות הטופס */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* מרווח קבוע בין השדות */
    width: 100%;
    margin-bottom: 40px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 6px; /* פינות מעוגלות עדינות לשדות */
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #333333;
}

/* שינוי צבע טקסט הפלייסהולדר (רמז) לאפור עדין */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #aaaaaa;
}

/* ביטול שינוי גודל ידני מעצבן של תיבת הטקסט */
.contact-form textarea {
    resize: vertical;
}

/* כפתור השליחה האדום */
.submit-btn {
    background-color: #e51e25; /* האדום של המותג */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background-color 0.2s ease;
}

.submit-btn:hover {
    background-color: #b81419; /* אדום כהה יותר במעבר עכבר */
}

/* שורת זכויות יוצרים תחתונה */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #222222; /* קו הפרדה עדין מאוד מעל הזכויות */
    padding-top: 20px;
    font-size: 14px;
    color: #888888;
}

.footer-bottom-bar p {
    margin: 0;
}

.privacy-link {
    color: #888888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.privacy-link:hover {
    color: #ffffff; /* מבהיר את הקישור במעבר עכבר */
}

/* ==========================================================================
   🏙️ באנר ראשי עמוד בית התחלה (Seattle Hero Section)
   ========================================================================== */
.Seattlepic {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.Seattlepic img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    display: block;
    filter: brightness(50%); /* פילטר כהות לטובת קריאות הטקסט */
}
.hero-content {
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translateY(-50%);
    color: white;
    max-width: 900px; /* מורחב כדי ש-NW והטקסט לא יישברו שורה סתם */
    z-index: 2;
    text-align: left;
}
.hero-content h1 {
    font-size: 55px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.2;
    white-space: nowrap; /* מבטיח שהכותרת תישאר בשורה אחת */
}

.hero-content h3 {
    font-size: 44px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: white;
}
.hero-subtext {
    font-size: 18px;
    margin: 0;
    font-weight: 400;
}
/* ==========================================================================
   📦 אזור כרטיסיות השירותים (Services Section)
   ========================================================================== */
.services-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* פאדינג עליון מוגדל (120px) כדי לתת לבתים הגדולים (140px) מקום לצוף למעלה מבלי להיחתך */
    padding: 120px 40px 60px 40px;
    background-color: #f9f9f9;
}
/* עיצוב המלבן הלבן של הכרטיסייה */
.service-card {
    background-color: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    min-height: auto; /* המלבן מתכווץ ומתאים את עצמו בדיוק לאורך הטקסט */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: visible; /* קריטי! מאפשר לבית לצאת מגבולות המלבן */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit; /* מונע מהטקסט להפוך לכחול של קישור */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* אפקט הובר (Hover) - ציפה עדינה של כל המלבן */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.card-header-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    margin-bottom: 15px;
}
/* 🏠 עיצוב הבית בגודל 140px וחריגה חצי החוצה 🏠 */
.card-header-image img {
    height: 140px; /* הגודל החדש שביקשת */
    width: auto;
    object-fit: contain;
    margin-top: -70px; /* בדיוק חצי מהגובה (140/2) כדי שיבלוט בצורה מושלמת כלפי מעלה */
    margin-bottom: 12px;
    position: relative;
    z-index: 3; /* שומר על האייקון מעל שולי המלבן הלבן */
}
.card-body {
    padding: 15px 30px 30px 30px; /* מרווח פנימי נקי לטקסט */
}

.card-text {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   🌐 שורת קישורים ואינטגרציה (Trust Bar)
   ========================================================================== */
.trust-bar-container {
    width: 100%;
    padding: 30px 40px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* המלבן הלבן המרכזי - מותאם באופן מושלם ל-5 סמלים */
.trust-bar-content {
    background-color: #ffffff;
    max-width: 1050px; /* רוחב מרווח ומאוזן לחמישה אלמנטים */
    margin: 0 auto;
    padding: 20px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* יצירת ריבוע קבוע ואחיד לכל סמל כדי לאזן פרופורציות */
.trust-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90px;  /* רוחב קבוע לסמל */
    height: 60px; /* גובה קבוע לסמל */
    transition: transform 0.25s ease;
}

/* הגדלת הסמלים ומתיחה חכמה שתשמור עליהם באותו גודל מיושר */
.trust-link img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* שומר על יחס הגובה-רוחב המקורי ומעלים שטחים מתים */
}

/* אפקט מעבר עכבר (Hover) אינטראקטיבי */
.trust-link:hover {
    transform: scale(1.15); /* הגדלה חלקה של האייקון ב-15% כדי להראות שהוא לחיץ */
}

/* 🛠️ החזרת המלבן הלבן למצב שורה וביטול הטור הקודם */
.trust-bar-content {
    flex-direction: row !important; /* כופה על הלוגויים לחזור לעמוד בשורה אחת ישרה */
    gap: 0px;
}

/* 🌟 שורת הלוגויים הפנימית החדשה */
.trust-logos-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
/* ==========================================================================
   🏷️ אזור מבצעי החודש (Deals Of The Month)
   ========================================================================== */
.deals-section {
    padding: 50px 40px;
    background-color: #ffffff; /* רקע לבן נקי להפרדה מהלוגויים שמעל */
    text-align: center;
    font-family: 'Heebo', sans-serif;
}

.deals-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}


/* כרטיסיית דיל בודדת */
.deal-card {
    background-color: #f9f9f9;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* מיכל התמונה עם יחס גובה קבוע */
.deal-image-wrapper {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.deal-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* שורת הכותרת עם החץ */
.deal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.deal-header:hover {
    background-color: #f1f1f1;
}

.deal-header h3 {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin: 0;
}

/* כפתור החץ הקטן */
.deal-toggle-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    transition: transform 0.3s ease; /* אנימציה לסיבוב החץ */
}

/* 📝 התוכן המוסתר שנפתח בלחיצה */
.deal-dropdown-content {
    max-height: 0; /* מוסתר כברירת מחדל */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    padding: 0 20px;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
}

.deal-dropdown-content p {
    font-size: 15px;
    color: #555555;
    line-height: 1.5;
    margin: 15px 0 10px 0;
}

.deal-price {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #e51e25; /* צבע אדום מודגש למחיר */
    margin-bottom: 15px;
}

/* 🌟 מצב פעיל (כשהכרטיסייה פתוחה) */
.deal-card.active .deal-dropdown-content {
    max-height: 355px; /* מאפשר לתוכן להיפתח בצורה חלקה */
    padding: 0 20px 15px 20px;
}

.deal-card.active .deal-toggle-btn {
    transform: rotate(180deg); /* הופך את החץ כלפי מעלה */
    color: #e51e25;
}
.deals-subtitle {
    font-size: 18px;
    color: #444444;
    margin: 0 0 40px 0;
}


/* ==========================================================================
   🖤 כתבות ובלוגים
   ========================================================================== */

/* אזור המאמרים הכללי */
.articles-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #f9f9f9;
}

.articles-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0 auto;
}

/* 📰 כרטיסיית המאמר החדשה (הוגבהה ב-20%) */
.blog-card {
    background-color: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 380px; /* שומר על הרוחב הנוכחי שאהבת */
    height: 480px;    /* גובה מוארך שנותן לכרטיסייה מרחב נשימה */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* אפקט ריחוף עדין שמזמין לחיצה */
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* מיכל התמונה */
.blog-image-wrapper {
    width: 100%;
    height: 260px; /* גובה מאוזן שמשאיר מקום לטקסט */
    overflow: hidden;
}

.blog-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* מונע מהתמונה להתעוות ומותח אותה נכון */
}

/* תוכן הכרטיסייה שמתחת לתמונה */
.blog-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* דוחף את כפתור הקריאה לתחתית הכרטיסייה בצורה שווה */
}

.blog-card-body h3 {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 10px 0;
    font-family: 'Heebo', sans-serif;
}

/* תקציר המאמר */
.blog-excerpt {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

/* קישור המשך קריאה */
.read-more-link {
    color: #e51e25; /* האדום של הלוגו שלך */
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    margin-top: auto; /* תמיד ייצמד לתחתית הכרטיסייה */
    transition: color 0.2s ease;
}

.read-more-link:hover {
    color: #000000;
}


/* ==========================================================================
   🏙️  עמוד בית סוף תחילה עמוד תיקונים
   ========================================================================== */

/* 📦 פתיחת מיכל הטורים הראשי – מחזירה את התמונות לימין! */
.repairs-main-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.repairs-main-layout .content-text-block {
    flex: 1.2;
}
/* 📊 עיצוב הטבלה הנוקשה  */
.repairs-pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 35px;
    margin-bottom: 15px;
    font-size: 15px;
    background-color: #ffffff;
    font-family: 'Heebo', sans-serif;
}

.repairs-pricing-table th, .repairs-pricing-table td {
    border: 1px solid #e0e0e0;
    padding: 14px 18px;
    text-align: left;
}

/* כותרת הטבלה - רקע אפור כהה וכתב לבן נוקשה */
.repairs-pricing-table th {
    background-color: #6c6c6c;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #6c6c6c;
}

/* צבע רקע לשורות זוגיות כדי לשמור על מבנה נקי וקריא */
.repairs-pricing-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* טור המחירים הימני - מודגש */
.repairs-pricing-table td:last-child {
    font-weight: bold;
    width: 22%;
    color: #333333;
}
/* עיצוב המילים הלחיצות בתוך הטבלה */
.table-info-trigger {
    color: black; /* אדום כמו הלוגו שלך */
    text-decoration: underline;
    font-weight: 400;
    cursor: pointer;
}
/* הערת שוליים קטנה מתחת לטבלה באפור עמום */
.repairs-table-footnote {
    font-size: 14px !important;
    font-style: italic;
    color: #888888 !important;
    margin-top: 12px !important;
}
/* 📸 טור ימין - תמונת הטכנאי */
/* 📸 טור ימין - מיכל התמונות */
.repairs-image-block {
    flex: 0.8;
    display: flex;
    flex-direction: column; /* מסדר את התמונות בטור, אחת מתחת לשנייה */
    gap: 20px; /* 🛠️ זה יוצר מרווח קבוע ואחיד של 20 פיקסלים בין שתי התמונות */
}

/* 🛠️ עיצוב והקטנת התמונות עצמן */
.repairs-image-block img {
    width: 100%;
    max-width: 250px; /* 🛠️ מקטין את הרווח המקסימלי של התמונות (היה תופס את כל הטור). שנה את המספר כדי להקטין עוד אם צריך */
    height: auto;
    border-radius: 6px; /* פינות מעוגלות עדינות שיתאימו לכרטיסיות באתר */
    display: block;
    margin: 0 auto; /* ממרכז את התמונות בתוך הטור שלהן במידה והן קטנות מהרוחב המלא */
}


.repairs-image-block img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* הרקע השחור השקוף של הפופ-אפ */
.table-modal-overlay {
    display: none; /* מוסתר אוטומטית */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

/* הקופסה הלבנה הקטנה במרכז */
.table-modal-content {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 6px;
    max-width: 400px;
    width: 85%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: left;
    font-family: 'Heebo', sans-serif;
}

/* כפתור ה-X לסגירה */
.table-modal-close {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 24px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}

.table-modal-close:hover {
    color: #000;
}