/*!
Theme Name: noar
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>noar</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: noar
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

noar is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@font-face {
    font-family: 'Discovery Fs'; /* שם הפונט */
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Black.woff2') format('woff2'), /* פורמט WOFF2 */
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Black.woff') format('woff');  /* פורמט WOFF */
    font-weight: 900; /* משקל הפונט */
    font-style: normal; /* סגנון הפונט */
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Bold.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Demibold.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Demibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Light.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Medium.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Regular.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Thin.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Ultralight.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-Ultralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Discovery Fs';
    src: url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-VF.woff2') format('woff2'),
         url('fonts/Discovery_Fs_Family_Web/Discovery_Fs-VF.woff') format('woff');
    font-weight: variable;
    font-style: normal;
}
@font-face {
    font-family: 'Discovery Fs';
    src: url('images/Discovery_Fs-Black_Desk/Discovery_Fs-Black.otf') format('opentype'), /* פורמט OpenType */
         url('images/Discovery_Fs-Black_Desk/Discovery_Fs-Black.ttf') format('truetype'); /* פורמט TrueType */
    font-weight: 900; /* משקל הפונט */
    font-style: normal; /* סגנון הפונט */
}


body {
    direction: rtl; /* הגדרת הכיוון לכל הדף */
    unicode-bidi: embed; /* מבטיח שלא תהיה בעיה עם טקסטים בשפות שונות */
	font-family: 'Discovery Fs', Arial, sans-serif; /* שם הפונט, עם גיבוי במקרה הצורך */
	margin: 0; /* ללא שוליים */
	padding: 0; /* ללא ריווח פנימי */
}

/* כותרת עליונה שקופה וממוקמת באופן קבוע */
header {
    position: absolute; 
    top: 0; /* מיקום הכותרת העליונה בראש */
    left: 0; /* מיקום הכותרת העליונה בצד השמאלי */
    right: 0; /* מיקום הכותרת העליונה בצד הימני */
    background: rgba(255, 255, 255, 0); /* שקיפות */
    z-index: 1000; /* ערך גבוה ל-z-index כדי להיות מעל התוכן */
    transition: background-color 0.3s; 
}
header.scrolled {
    background: #12233D; /* צבע הרקע של הכותרת העליונה לאחר גלילה */
}
.header-content{
	display: flex;
    justify-content: space-between;
	padding-top: 35px;

}
.right-header img {
    width: 20vw;
}

/* תפריט נפתח */
.nav-menu {
    display: none; /* התפריט מתחיל מוסתר */
}

.nav-menu.open { /* כשהתפריט נפתח */
    display: block; /* מציג את התפריט */
}

/* עיצוב כפתור ההמבורגר */
.hamburger {
    cursor: pointer; /* עכבר הופך ליד בעת חציית הכפתור */
	color: #fff;
    display: flex;
    flex-direction: column;
}

.hamburger img { /* אייקון ההמבורגר */
    width: 5vw; /* רוחב האייקון */
    height: auto; /* גובה האייקון */
}
.hamburger span{
    text-align: left;
    font-size: 1.25vw;
}

@media (max-width: 768px) {
    header {
        position: fixed; /* לשמור את הכותרת העליונה במקום קבוע */
        background: rgba(255, 255, 255, 0); /* רקע שקוף */
        padding: 10px 0; /* ריווח פנימי כדי להגדיל את הלחיצה */
    }

    .header-content {
        flex-direction: row; /* אלמנטים בשורה */
        justify-content: space-between; /* מרווח בין האלמנטים */
        align-items: center; /* יישור אלמנטים למרכז */
        padding-top: 10px; /* התאמת הריווח העליון */
    }

    .right-header img {
        width: 30vw; /* התאמת רוחב הלוגו */
    }

    .hamburger {
        flex-direction: column; /* סדר אלמנטים בעמודה */
        align-items: center; /* יישור למרכז האנכי */
    }

    .hamburger img {
        width: 7vw; /* התאמת רוחב אייקון ההמבורגר */
    }

    .hamburger span {
        font-size: 4vw; /* התאמת גודל הפונט */
        margin-top: 5px; /* ריווח בין האייקון לטקסט */
        text-align: center; /* ממרכז את הטקסט */
    }

    .nav-menu {
        display: none; /* התפריט מתחיל מוסתר */
        flex-direction: column; /* אלמנטים בטור */
        position: absolute; /* מיקום מוחלט */
        top: 100%; /* מתחת לכותרת העליונה */
        left: 0; /* מיושר לשמאל */
        right: 0; /* מיושר לימין */
        background: rgba(255, 255, 255, 0.9); /* רקע שקוף */
        padding: 10px 0; /* ריווח פנימי */
        z-index: 999; /* עליון על שאר התוכן */
    }

    .nav-menu.open {
        display: flex; /* הצגת התפריט */
    }

    .nav-list {
        list-style: none; /* הסרת ריווח נוסף של רשימות */
        padding: 0; /* הסרת ריווח פנימי */
        margin: 0; /* הסרת ריווח חיצוני */
    }

    .nav-list li {
        margin: 10px 0; /* ריווח בין פריטים */
        text-align: center; /* יישור טקסט למרכז */
    }

    .nav-list li a {
        color: #000; /* צבע הטקסט */
        text-decoration: none; /* הסרת קו תחתי */
        font-size: 5vw; /* התאמת גודל הפונט */
    }
}


/* עיצוב הסקשן הראשון */
.hero {
    background-size: cover; /* התמונה תתפרש על כל השטח */
    background-position: center; /* מיקום מרכזי לתמונה */
    background-repeat: no-repeat; /* לא לחזור על התמונה */
    height: 850px; 
}
.hero .content{
	display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: start;
    text-align: center;
	padding-top: 240px;
}
/* מיכל ראשי */
.container {
    margin: 0 auto; /* מרכז המיכל */
    padding-right: 40px;
    padding-left: 40px;
}

/* תוכן הסקשן */
.content {
    text-align: center; /* יישור מרכזי של הטקסט */
    color: white; /* צבע הטקסט */
}
.hero h1{
	font-size: 5vw;
	font-weight: bold;
	margin-bottom: 0px;
}
.hero h1 span{
	color: #E6BF1A;
}
.hero .container h2{
	font-size:  2.2vw;
	text-align: right;
	font-weight: 300;
    margin-top: 10px;
}
.hero p{
	display: flex;
	align-items: center;
	font-size: 25px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .hero {
        height: 500px; /* התאמת הגובה אוטומטית לתוכן */
        padding: 20px 0; /* ריווח פנימי כדי לשמור על מראה מסודר */
    }

    .hero .content {
        align-items: center; /* ממרכז את התוכן */
        padding-top: 100px; /* התאמת הריווח למובייל */
    }

    .hero h1 {
        font-size: 10vw; /* הגדלת הפונט */
    }

    .hero .container h2 {
        font-size: 4vw; /* הגדלת הפונט */
        text-align: center; /* ממרכז את הכותרת המשנית */
    }

    .hero p {
        font-size: 4vw; /* הגדלת הפונט */
        justify-content: center; /* ממרכז את התוכן */
        margin-top: 20px; /* הוספת רווח מעל הפסקה */
    }
}


section.about{
    background-repeat: no-repeat; /* תמונת הרקע לא תחזור על עצמה */
    background-size: cover; /* התמונה תכסה את כל השטח */
    background-position: center; /* מיקום מרכזי לתמונה */
    margin-top: -100px;
    height: 650px;
    padding-top: 190px;
}

section.about .container{
	display: flex;

}
.right-about{
	z-index: 1;
	width: 40%;
}
.container h2{
	font-size: 5vw;
    font-weight: bold;
}
.about h2{
	color: #E6BF1A;
    margin-top: 0px;
}
.about p{
	color: #fff;
	z-index: 1;
	width: 120%;
    font-size: 2vw;
    line-height: 2.2vw;
}
.left-about{
	width: 60%;
}
.left-about img{
	width: 100%;
}

@media (max-width: 768px) {
    section.about {
        background-size: cover; /* התמונה תכסה את כל השטח */
        background-position: center; /* מיקום מרכזי לתמונה */
        margin-top: 0;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px; /* ריווח פנימי נוסף */
        background-color: #12233D;
    }

    section.about .container {
        display: flex;
        flex-direction: column; /* שינוי הכיוון של הפלקס לעמודות */
        align-items: center;
    }

    .right-about, .left-about {
        width: 90%; /* רוחב מלא במובייל */
        text-align: center; /* ממרכז את התוכן */
        margin-bottom: 20px; /* ריווח בין הפריטים */
    }

    .about h2 {
        font-size: 6vw; /* התאמת גודל הפונט לכותרת ראשית במובייל */
    }

    .about p {
        font-size: 4vw; /* התאמת גודל הפונט לטקסט במובייל */
        line-height: 5vw; /* התאמת מרווח בין השורות */
        width: 100%; /* התאמת רוחב הטקסט */
    }

    .left-about img {
        width: 100%; /* התאמת רוחב התמונה */
        height: auto; /* התאמת גובה התמונה */
    }
}


.team {
    background-color: #F5F5F5;
    padding: 50px 0;
    text-align: center;
}

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

.team h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.team-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.team-item {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    width: 30%;
    margin-bottom: 20px;
    position: relative;
    padding: 20px;
    display: flex;
    align-items: center;
}

.team-item img {
    width: 150px;
    height: auto;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.team-text {
    text-align: right;
    flex: 1;
    padding-right: 150px;
}

.team-text h3 {
    font-size: 24px;
    margin: 0 0 10px;
}

.team-text p {
    margin: 0;
    font-size: 16px;
    color: #666;
}

@media (max-width: 768px) {
    .team-grid {
        flex-direction: column;
        align-items: center;
    }

    .team-item {
        width: 90%;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .team-item img {
        position: static;
        margin-bottom: 20px;
        transform: translateY(0);
    }

    .team-text {
        padding-right: 0;
        text-align: center;
    }
}




/* Add this CSS to your stylesheet */

.process {
    background-color: #fff;
    padding: 50px 0;
    direction: rtl;
}

.process .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.process h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 40px;
    padding: 0 10px; /* Added padding */
}

.timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12%;
    right: 14%;
    height: 2px;
    background-color: #000;
    transform: translateY(-50%);
}


.timeline-item {
    position: relative;
    width: 23%;
    text-align: center;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    height: 160px;
    justify-content: space-between;
}

.timeline-content.top .timeline-number {
    margin-bottom: 20px; /* Add space between number and text */
}

.timeline-content.bottom .timeline-number {
    margin-top: 20px; /* Add space between text and number */
}

.timeline-item .timeline-number {
    background-color: #FFD700;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.timeline-item .timeline-text {
    font-size: 16px;
    font-weight: bold;
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #000;
    transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 768px) {
    .timeline {
        flex-direction: column;
        align-items: center; /* מרכז את הפריטים */
        padding: 0; /* הסרת הריווח */
        position: relative; /* כדי לאפשר קו מרכזי */
    }

    .timeline::before {
        content: '';
        position: absolute;
        right: 50%;
        width: 2px;
        height: 100%;
        background-color: #000;
        transform: translateX(-50%);
        top: 85px; /* מתאים למיקום היהלום הראשון */
        height: calc(100% - 212px);
    }

    .timeline-item {
        width: 100%;
        text-align: center;
        position: relative;
        margin-bottom: 40px; /* הוספת רווח בין הפריטים */
    }

    .timeline-item::after {
        top: 50%;
        left: 50%;
        transform: translate(-70%, -50%) rotate(45deg);
    }

    .timeline-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        margin: 0;
        padding: 10px 0;
        position: relative;
    }

    .timeline-content.top {
    }

    .timeline-content.bottom {
    }

    .timeline-content .timeline-number {
        margin: 0 10px;
    }

    .timeline-content .timeline-text {
        margin: 0 10px;
        max-width: 40%;
    }
}

/* Add this CSS to your stylesheet */

.destinations {
    background-color: #fff;
    padding: 50px 0;
    text-align: center;
}

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

.destinations h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #E6BF1A; /* צבע כותרת */
}

.destinations-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.destination-item {
    background-size: cover;
    background-position: center;
    width: 23%;
    height: 200px;
    margin-bottom: 20px;
    position: relative;
    border: 2px solid #E6BF1A;
    cursor: pointer;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.destination-item:hover {
    transform: rotateY(180deg);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    backface-visibility: hidden;
    transition: opacity 0.3s;
}

.overlay .title {
    padding: 10px;
}

.hidden-list {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 20px;
    overflow-y: auto;
    text-align: center;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    transition: opacity 0.3s;
}

.destination-item:hover .overlay {
    opacity: 0;
}

.destination-item:hover .hidden-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .destinations-grid {
        flex-direction: column;
        align-items: center;
    }

    .destination-item {
        width: 90%;
        min-height: 200px; /* הוספת גובה מינימלי לאייטמים במובייל */
        margin-bottom: 20px;
    }

    .destination-item:hover {
        transform: none;
    }
    
    .destination-item .overlay {
        opacity: 1;
    }
    
    .destination-item .hidden-list {
        display: none;
    }
    
    .destination-item.active .overlay {
        opacity: 0;
    }
    
    .destination-item.active .hidden-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}