/* --- 1. משתנים --- */
:root {
    --primary-color: #fbc707;
    --secondary-color: #1e1e1e;
    --white: #ffffff;
    --light-grey: #f4f4f4;
    --text-muted: #555555;
}

/* --- 2. אתחול כללי --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Assistant', sans-serif;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    color: var(--secondary-color);
    background-color: var(--white);
    transition: background-color 0.8s ease;
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 3. Header & Nav --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* זה מה שממרכז את כולם באותו קו גובה */
    padding: 15px 5%; /* רווח פנימי ששומר על אוויר */
    height: 80px; /* גובה קבוע שנותן מקום ללוגו לגדול */
    background-color: var(--white);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.logo {
    display: flex;
    align-items: center;
    /* height: 100%; - אפשר לוותר אם ה-Header כבר משתמש ב-align-items: center */
}

.logo-img {
    height: 70px; /* גובה מאוזן שנותן נוכחות בלי לחרוג */
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    /* הוספת padding קטן כדי שהלוגו לא יידבק לקצה הימני של המסך */
    padding-left: 10px; 
}

.logo-img:hover {
    transform: scale(1.05);
}

.nav-links ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

/* עיצוב קישורי התפריט */
.nav-links a {
    text-decoration: none !important;
    color: var(--secondary-color) !important;
    font-weight: 600;
    font-family: 'Assistant', sans-serif;
    position: relative; /* חובה עבור הקו התחתון */
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* אפקט Hover - שינוי צבע לצהוב */
.nav-links a:hover {
    color: var(--primary-color) !important;
}

/* הוספת הקו התחתון שמופיע ב-Hover */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

/* כשהעכבר מעל הקישור - הקו גדל ל-100% */
.nav-links a:hover::after {
    width: 100%;
}

.phone-btn {
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid var(--primary-color);
    transition: 0.3s;
}

    .phone-btn:hover {
        background: var(--primary-color);
        color: var(--secondary-color);
    }

/* --- עיצוב המבורגר --- */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 10px;
}

    .hamburger span {
        width: 25px;
        height: 3px;
        background: var(--secondary-color);
        transition: 0.3s;
    }

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        text-align: center;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

        .nav-links.active {
            display: flex;
        }

        .nav-links ul {
            flex-direction: column;
            gap: 15px;
        }
}

/* --- 4. Sections --- */
body {
    font-family: 'Assistant', sans-serif;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    color: var(--secondary-color);
    background-color: var(--white);
    /* מעבר חלק עבור ה-body כולו */
    transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
}

    /* המחלקה שתופעל על ידי הסקריפט */
    body.is-grey {
        background-color: #f4f4f4 !important; /* הצבע האפור שלך */
    }

    /* ביטול הצבע הקבוע של ה-grey-bg כדי שה-body ישלוט בו */
.grey-bg {
    background-color: transparent !important;
}

/* חשוב: הסרת ה-background-color מהסקשנים כדי שהם יהיו שקופים ויראו את ה-body */
.content-section {
    padding: 80px 0;
    text-align: center;
    background-color: transparent !important;
}
.content-section {
    padding: 80px 0;
    text-align: center;
    transition: background-color 0.8s ease; /* מעבר חלק בין צבעי רקע */
}



/* ה-Hero המעודכן - שומר על המבנה המקורי כדי לא לשבור את האתר */
.hero-section {
    position: relative;
    background: var(--secondary-color);
    color: var(--white);
    padding: 120px 20px; /* החזרתי את ה-padding המקורי שלך */
    text-align: center;
    border-bottom: 5px solid var(--primary-color);
    overflow: hidden; /* שומר שהתמונות לא יברחו הצידה */
    min-height: 80vh; /* גובה מינימלי נוח */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* הלוגו בתוך ה-Hero */
.hero-logo {
    max-width: 500px; /* הגבלה שתמנע ממנו להשתלט על המסך */
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    position: relative;
    z-index: 10; /* מעל התמונות */
}

.hero-section h1 {
    position: relative;
    z-index: 10;
    color: var(--primary-color);
    font-size: 3.5rem;
    margin-bottom: 15px;
}

/* הגדרות הסליידשואו מאחורה */
.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slide.active {
    opacity: 0.5; /* שקיפות שתאפשר לראות את הלוגו והטקסט בקלות */
}



/* --- עיצוב כותרות H2 אחיד --- */
h2 {
    position: relative;
    display: inline-block;
    margin-bottom: 45px;
    font-size: 2rem;
    padding-bottom: 5px;
    text-align: center;
}

    h2::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: var(--primary-color);
        border-radius: 2px;
    }

/* --- 5. Project Gallery --- */
.filter-menu {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.filter-btn {
    background: none;
    border: none;
    padding: 10px 25px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 50px;
}

    .filter-btn.active {
        background-color: var(--primary-color);
    }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* תפריט הסינון - עיצוב הכפתורים */
.filter-btn {
    background: none !important;
    border: none !important;
    color: var(--secondary-color);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

/* אפקט Hover - צבע משתנה וקו שצומח */
.filter-btn:hover {
    color: var(--primary-color);
}

.filter-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px; /* עובי הקו הצהוב */
    bottom: 0;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.filter-btn:hover::after {
    width: 60%; /* הקו לא חייב להיות מתחת לכל המילה, 60% נראה מאוד אלגנטי */
}

/* מצב "פעיל" - הכפתור שנבחר נשאר עם קו צהוב קבוע */
.filter-btn.active {
    color: var(--primary-color);
}

.filter-btn.active::after {
    width: 60%;
}

    /* הגדרת תמונה אחת מאוחדת לשיפור החדות והאיכות */
    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.6s ease;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: auto; /* שיניתי ל-auto כדי למנוע "פיקסול יתר" */
    }

    .gallery-item:hover img {
        transform: scale(1.1);
    }

.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30,30,30,0.8);
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.4s;
}

.gallery-item:hover .item-overlay {
    opacity: 1;
}

/* אודות
/* סידור הסקשן החדש */
/* --- סקשן אודות משולב ומגזיני --- */
.about-section {
    padding: 90px 0;
    background-color: var(--white);
}

.about-block {
    margin-bottom: 70px;
}

.about-block:last-child {
    margin-bottom: 0;
}

/* 1. התאמת פסקאות החברה */
.company-paragraphs-container p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: right;
}

.company-paragraphs-container p:last-child {
    margin-bottom: 0;
}

/* 2. עיצוב בלוק החזון הממורכז */
.about-sub-title-centered {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 15px;
}

.vision-quote-text {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.8;
    font-style: italic;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* 3. גריד שני טורים - בלעדי לחלק של גל בכר */
.gal-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* התמונה מימין מקבלת פרופורציה קומפקטית יותר */
    gap: 45px;
    align-items: center;
    text-align: right;
}

/* תמונה נקייה לחלוטין ללא אלמנטים צפים */
.gal-image-col {
    display: flex;
    justify-content: center;
}

.gal-clean-img {
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* תוכן הטור השמאלי של גל בכר */
.gal-profile-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.gal-profile-text {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    margin: 0;
}

/* התאמה רספונסיבית לניידים */
@media (max-width: 768px) {
    .gal-profile-grid {
        grid-template-columns: 1fr; /* מעבר לטור אחד בנייד */
        gap: 30px;
    }
    
    .gal-image-col {
        order: -1; /* התמונה תמיד תופיע מעל הטקסט בנייד */
    }
    
    .gal-clean-img {
        max-width: 280px; /* הקטנה קלה להתאמה במסכים קטנים */
    }
}

/* --- 6. Clients Grid --- */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.client-card {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    padding: 10px;
}

    .client-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    transform: scale(1); /* נקודת מוצא להגדלה */
    transition: transform 0.2s ease-in-out; /* זמן ארוך יותר ומעבר מסוג ease-in-out */
        
    }

    .client-card img:hover {
        transform: scale(1.1); /* הגדלה של הלוגו ב-10% */
 }
/* --- 7. צור קשר --- */
.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 40px auto;
    gap: 15px;
    padding: 40px;
    background: var(--light-grey);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

    .contact-form input,
    .contact-form textarea {
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: inherit;
        font-size: 1rem;
        width: 100%;
        outline: none;
    }

        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: var(--primary-color);
        }

.submit-btn {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

    .submit-btn:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

/* --- 8. הגדרות ספציפיות לסקשנים (מעברי צבע) --- */
#projects {
    background-color: var(--white);
}

#contact {
    background-color: var(--white);
}

/* --- 9. כפתור וואטסאפ מעודכן, קטן ב-35% וקבוע בשמאל --- */
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    left: 20px; /* מוצמד לשמאל קבוע */
    width: 70px;  /* מוקטן ב-35% - גודל מעולה ועדין */
    height: 70px;
    z-index: 9999; /* תמיד צף מעל הכל */
    display: block;
    transition: transform 0.2s ease-in-out;
}

/* התיקון שהיה חסר: ריסון התמונה בתוך הכפתור */
.whatsapp-btn img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.2));
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}


/* --- 10. בלוק התאמה למובייל מאוחד (פעם אחת בלבד!) --- */
@media (max-width: 768px) {
    
    /* גיבור (Hero) */
    .hero-section h1 {
        font-size: 2.5rem;
    }

    /* גריד פרויקטים */
    .gallery-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    /* גריד לקוחות */
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* תפריט סינון פרויקטים בגלילה אופקית */
    .filter-menu {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 15px;
        padding: 15px 10px;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }

    .filter-menu::-webkit-scrollbar {
        display: none; /* הסתרת סרגל גלילה */
    }

    .filter-btn {
        flex: 0 0 auto;
    }

    /* תפריט ניווט עליון במובייל (נפתח מההמבורגר) */
    .nav-links {
        display: none; /* מוסתר כברירת מחדל */
        position: fixed; /* שינוי ל-fixed כדי שיכסה את המסך נכון */
        top: 80px;
        right: 0; /* נפתח מימין לשמאל בצורה נקייה */
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        z-index: 999;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        display: flex !important; /* מוצג בלחיצה */
    }
 }

 /* --- עיצוב תגיות אדריכלים --- */
.architects-tags-container {
    display: flex;
    flex-wrap: wrap;         /* מאפשר לתגיות לרדת שורה באופן אוטומטי כשנגמר המקום */
    justify-content: center; /* ממרכז את התגיות באמצע המסך */
    gap: 15px;               /* המרווח בין תגית לתגית */
    margin-top: 30px;
    max-width: 900px;        /* שומר על הבלוק מרוכז ולא מתוח מדי לצדדים */
    margin-left: auto;       /* יחד עם ה-Right ממרכז את כל הבלוק */
    margin-right: auto;
}

.arch-tag {
    background: #ffffff;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 12px 24px;
    border-radius: 50px;     /* יוצר את המראה העגול של התגית */
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    white-space: nowrap;     /* מונע משם אדריכל להישבר לשתי שורות בתוך התגית */
}

/* אפקט מעבר עכבר עדין רק למחשב */
@media (min-width: 769px) {
    .arch-tag:hover {
        background: var(--primary-color); /* משתנה לצבע המותג */
        border-color: var(--primary-color);
        color: #000000; 
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }
}

/* התאמה מושלמת למובייל - הפלקסבוקס מסדר את הזרימה אוטומטית */
@media (max-width: 768px) {
    .architects-tags-container {
        gap: 10px;           /* מצמצם מעט מרווחים במובייל */
        padding: 0 10px;
    }
    
    .arch-tag {
        font-size: 0.95rem;   /* מקטין מעט את הגופן שיתאים למסך קטן */
        padding: 10px 18px;
    }
}

/* --- גריד וכרטיסיות ביקורת --- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 בשורה בדסקטופ, משאיר מקום לטקסט ווידאו */
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
}

/* עיצוב אזור הוידאו בכרטיסייה */
.video-preview-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* שומר על פרופורציות של סרטון */
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    opacity: 0.85;
}

/* שכבת כפתור ה-Play */
.play-btn-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.play-icon {
    background: var(--primary-color); /* צהוב/זהב של גל */
    color: #000;
    font-size: 20px;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    padding-right: -4px; /* תיקון מרקור קל לחץ הנגן */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* אפקטים במעבר עכבר */
.video-preview-wrapper:hover .video-thumb {
    transform: scale(1.05);
    opacity: 1;
}

.video-preview-wrapper:hover .play-btn-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.video-preview-wrapper:hover .play-icon {
    transform: scale(1.15);
}

.testimonial-content {
    padding: 25px;
}

.testimonial-content h3 { margin: 0 0 5px 0; font-size: 1.2rem; color: var(--secondary-color); }
.client-role { margin: 0 0 15px 0; font-size: 0.9rem; color: #888; font-weight: 600; }
.testimonial-text { margin: 0; font-size: 1rem; color: #444; line-height: 1.5; font-style: italic; }

/* --- עיצוב החלון הצף (Modal) --- */
.video-modal {
    display: none; /* חבוי כברירת מחדל */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999; /* מעל הכל, כולל התפריט והוואטסאפ */
    justify-content: center; align-items: center;
    padding: 20px;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.close-modal {
    position: absolute;
    top: -45px; left: 0; /* מציב את ה-X מעל הסרטון בצד שמאל */
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    transition: 0.2s;
}
.close-modal:hover { color: var(--primary-color); }

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* יחס 16:9 קלאסי של יוטיוב */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* התאמה למובייל */
@media (max-width: 768px) {
    .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* חיבור בין מחלקת ה-active מה-JS לעיצוב הקיים בקובץ */
@media (max-width: 768px) {
    .nav-links.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        display: block !important;
    }
}


/* עיצוב אזור הקישורים לרשתות חברתיות */
.social-links {
    display: flex;
    gap: 15px; /* מרווח בין אייקון לאייקון */
    justify-content: center; /* מרכוז האייקונים */
    margin-top: 20px;
}

.social-links a {
    color: #fbc707; /* צבע צהוב של המותג */
    font-size: 24px; /* גודל האייקון */
    transition: color 0.3s ease; /* אפקט מעבר חלק במעבר עכבר */
}

.social-links a:hover {
    color: #ffffff; /* שינוי ללבן כשעוברים עם העכבר */
}