/* ==========================================================================
   🔌 עיצוב כרטיסיות מנועים - סגנון LiftMaster נקי (4 בשורה, ללא כפתור)
   ========================================================================== */

/* מיכל ראשי לעמוד המנועים */
.openers-page-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 30px;
    box-sizing: border-box;
}

/* כותרת עמוד ממורכזת עם קו אדום משני הצדדים */
.openers-header-split {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 35px;
}

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

.openers-header-split .red-line {
    flex-grow: 1;
    height: 3px;
    background-color: #e51e25;
    max-width: 200px;
}

/* טקסטים מקדימים - משמאל */
.openers-intro-section {
    text-align: left;
    margin-bottom: 40px;
    font-family: 'Heebo', sans-serif;
    padding-left: 10px;
}

.openers-intro-section h2 {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 8px 0;
}

.openers-intro-section h3 {
    font-size: 20px;
    font-weight: bold;
    color: #555555;
    margin: 0;
}
h5 {
    font-size: 20px;
    text-align: center;
}

/* 📦 גריד (רשת) של 4 מנועים בשורה אחת */
.openers-grid {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
    width: 100%;
}

/* ⬜ כרטיסיית מנוע בודדת - מעוצבת בסגנון נקי עם מרווחים מאוזנים */
.opener-card {
    flex: 1;
    min-width: 230px;
    max-width: calc(25% - 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* ממרכז את כל הטקסטים והאלמנטים פנימית */
    font-family: 'Heebo', sans-serif;
    background: #ffffff;
    padding: 30px 20px 25px 20px; /* הוספנו מרווח פנימי יוקרתי */
    border-radius: 6px; /* פינות מעוגלות עדינות ונקשיות */
    border: 1px solid #e5e5e5; /* מסגרת דקה ובהירה מאוד כמו באתר המקור */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); /* צל מרוכך ונקי מאוד */
    box-sizing: border-box;
}

/* 🔄 מיכל גלריית התמונות עם החצים */
.opener-gallery-container {
    position: relative;
    width: 100%;
    height: 140px; /* גובה מאוזן ומושלם לתצוגת המנוע */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: #ffffff;
}

/* 📸 התמונות עצמן - הגנה מוחלטת מפני מתיחה, עיוות או פריצה */
.opener-img-slide {
    display: none;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.opener-img-slide.active {
    display: block;
}

/* חצי דפדוף ימינה/שמאלה מעודנים בצדדים */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: #cccccc; /* אפור בהיר ונקי שלא יפריע לתמונות */
    border: none;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    user-select: none;
    z-index: 4;
}

.gallery-nav-btn:hover {
    color: #e51e25; /* הופך לאדום של האתר שלכם במעבר עכבר */
}

.gallery-nav-btn.prev { left: -5px; }
.gallery-nav-btn.next { right: -5px; }

/* כותרת התיאור הראשי - ממורכזת, נקייה וגדולה */
.opener-main-title {
    font-size: 18px;
    font-weight: 500;
    color: #111111;
    line-height: 1.4;
    margin: 0 0 10px 0;
    min-height: 50px; /* שומר על יישור שורות אחיד בין כל הכרטיסיות */
}

/* מספר הדגם הקטן מתחת לכותרת */
.opener-model {
    font-size: 14px;
    font-weight: bold;
    color: #888888; /* אפור עמום ומתוחכם */
    margin: 0 0 20px 0;
}

/* 🔽 שורת כפתור המפרט הנפתח (החץ הקטן) */
.specs-toggle-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 10px 0;
    margin-bottom: 20px;
    width: 100%;
    user-select: none;
    border-top: 1px dashed #eaeaea; /* קו הפרדה מנוקד עדין מעל החץ */
    padding-top: 15px;
}

.specs-toggle-header span {
    font-size: 12px;
    font-weight: bold;
    color: #e51e25; /* צבע אדום מודגש כמו בקו של האתר */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.specs-arrow {
    font-size: 9px;
    color: #e51e25;
    transition: transform 0.3s ease;
}

/* המפרט הטכני המוסתר (Dropdown Content) */
.opener-specs-dropdown {
    max-height: 0;
    overflow: hidden;
    width: 100%;
    transition: max-height 0.3s ease-out;
    background-color: #fafafa;
    border-radius: 4px;
    box-sizing: border-box;
}

.opener-specs-dropdown ul {
    text-align: left;
    padding: 12px 15px;
    margin: 0;
    list-style: none;
}

.opener-specs-dropdown ul li {
    font-size: 12px;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 6px;
    position: relative;
    padding-left: 12px;
}

.opener-specs-dropdown ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #e51e25;
    font-weight: bold;
}

/* 🌟 מצב פעיל כשהחץ נפתח */
.opener-card.specs-active .opener-specs-dropdown {
    max-height: 500px;
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
}

.opener-card.specs-active .specs-arrow {
    transform: rotate(180deg); /* הופך את החץ למעלה */
}

/* מחיר מודגש בתחתית */
.opener-price {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 10px;
    border-bottom: 1px solid #000000;
    padding-bottom: 1px;
    display: inline-block;
    margin-top: auto; /* נועל את המחיר תמיד לתחתית המוחלטת של הכרטיסייה */
}

/* התאמות למובייל וטאבלטים */
@media (max-width: 992px) {
    .opener-card {
        max-width: calc(50% - 10px); /* 2 בשורה בטאבלט */
    }
}

@media (max-width: 600px) {
    .openers-page-container {
        padding: 0 20px;
    }
    .openers-header-split .red-line {
        display: none;
    }
    .openers-grid {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .opener-card {
        width: 100%;
        max-width: 320px; /* 1 בשורה במובייל */
    }
}

/* אזור הערות מחיר וקריאה לטלפון בתחתית */
.openers-footer-info {
    text-align: left;
    font-family: 'Heebo', sans-serif;
    margin-bottom: 50px;
    padding-left: 10px;
}

.openers-footer-info p {
    font-size: 13.5px;
    color: #333333;
    line-height: 1.45;
    margin: 0 0 6px 0;
}

.openers-call-action {
    margin-top: 30px;
}

.openers-call-action h2 {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 4px 0;
}

.openers-call-action h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 8px 0;
}

.openers-phone-number {
    font-size: 26px;
    font-weight: bold;
    color: #e51e25;
    margin: 0;
}

/* התאמות למובייל וטאבלטים */
@media (max-width: 992px) {
    .opener-card {
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .openers-page-container {
        padding: 0 20px;
    }
    .openers-header-split .red-line {
        display: none;
    }
    .openers-grid {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .opener-card {
        width: 100%;
        max-width: 320px;
    }
}


@media (max-width: 768px) {
    .openers-page-container {
        padding: 0 20px;
    }
    .openers-header-split .red-line {
        display: none; /* מסתיר קווים במובייל כדי שהכותרת לא תיחנק */
    }
    .openers-header-split h1 {
        font-size: 24px;
        white-space: normal;
    }
    .openers-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .opener-card {
        width: 100%;
        max-width: 300px; /* כרטיסיות צרות ויפות במובייל */
        padding: 15px 12px;
    }
    .opener-description {
        min-height: auto;
    }
}

/* ==========================================================================
   🖤 אזור פוטר וטופס יצירת קשר (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; /* מבהיר את הקישור במעבר עכבר */
}

/* התאמה למובייל */
@media (max-width: 600px) {
    .footer-main-title {
        font-size: 20px;
    }
    .footer-subtitle-box p {
        font-size: 16px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ==========================================================================
   🏷️ אזור מבצעי החודש (Deals Of The Month)
   ========================================================================== */
.deals-section {
    padding: 60px 40px;
    background-color: #ffffff; /* רקע לבן נקי להפרדה מהלוגויים שמעל */
    text-align: center;
    font-family: 'Heebo', sans-serif;
}

.deals-main-title {
    font-size: 34px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 5px 0;
}

.deals-subtitle {
    font-size: 18px;
    color: #444444;
    margin: 0 0 40px 0;
}

.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: 220px;
    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: 200px; /* מאפשר לתוכן להיפתח בצורה חלקה */
    padding: 0 20px 15px 20px;
}

.deal-card.active .deal-toggle-btn {
    transform: rotate(180deg); /* הופך את החץ כלפי מעלה */
    color: #e51e25;
}

/* 📱 התאמה למובייל */
@media (max-width: 768px) {
    .deals-container {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .deal-card {
        max-width: 100%;
    }
}

/* 🌟 עיצוב כותרת שחורה רגילה מעל המלבן */
.trust-section-title {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin: 40px 0 10px 0; /* יוצר מרווח יפה מהמלבנים למעלה ומקרב אותה למלבן הלבן */
    font-family: 'Heebo', sans-serif;
}

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

/* 🌟 שורת הלוגויים הפנימית החדשה */
.trust-logos-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

/* ==========================================================================
   🌐 שורת קישורים ואינטגרציה (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% כדי להראות שהוא לחיץ */
}

/* התאמה למסכי מובייל (טלפונים) */
@media (max-width: 768px) {
    .trust-bar-content {
        padding: 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .trust-link {
        width: 70px;
        height: 45px;
    }
}


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

/* ==========================================================================
   תפריט ניווט עליון (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: 15px;
    right: 50px;
    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; /* משתנה במעבר עכבר */
}

/* ==========================================================================
   🏙️ באנר ראשי (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;
}

.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; /* שומר על האייקון מעל שולי המלבן הלבן */
}

.red-title {
    color: #e51e25;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.card-body {
    padding: 15px 30px 30px 30px; /* מרווח פנימי נקי לטקסט */
}

.card-main-title {
    font-size: 26px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 15px 0;
}

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

/* 📱 התאמה למובייל (רספונסיביות) */
@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
        align-items: center;
        gap: 80px; /* מרווח מוגדל בין הכרטיסיות במובייל כדי שהבתים לא יתנגשו */
        padding: 100px 20px 40px 20px;
    }
    .service-card {
        max-width: 100%;
    }
}